*{
  box-sizing: border-box;
}
body{
	margin:auto;
	padding:0px 0px;
	background-color: #1d1d1d;
	font-family: 'Open Sans';
}
header{
	background-color: #5e257c;
	margin-top:-50px;
	height:180px;
}
header p{
	color: #E0E1D1;
	font-size:46px;
	padding-left:20px;
	padding-top:40px;
	font-family: 'Open Sans';
}
nav ul{
  list-style-type: none;
  margin:0;
  padding:0;
}
nav li{
  width:100%;
  line-height: 20px;
  text-align: center;
  margin:0;
  margin-bottom: -3px;
  padding:0;
}
nav button{
  font-family: 'Open Sans';
  font-weight: bold;
  font-size: 16px;
}
nav a, nav a:link, nav a:visited, nav button{
  display: block;
  color:#222;
  font-weight: bold;
  height:46px;
  width:100%;
  text-decoration: none;
  background-color: #aa62d0;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 3px solid #1d1d1d;
}
nav a:hover, nav button:hover{
  color:#1d1d1d;
  background-color: #00c0ff;
  text-decoration: none;
}

nav .dropdown{
  position: relative;
  z-index: 100;
}

nav .dropdown-content{
  position: absolute;
  display: none;
  width: 100%;
}
nav .dropdown-content a, nav .dropdown-content a:link, nav .dropdown-content a:visited{
  margin-top: -3px;
}

nav .dropdown:hover .dropdown-content{
  display: block;
}


.headimg{
	position: absolute;
	left: 0px ;
	padding-top: 25px;
	padding-left: 25px;
  display:none;
}
h1,h2,h3,h4,h5,h6{
	color:#ffd100;
}
h3{
  padding-left: 25px;
}
p{
	padding-left: 50px;
}
p, li, td, th, caption{
	color:#bbb;
}
a, a:link, a:visited{
  color:#00c0ff;
  text-decoration: none;
}
a:hover{
  color:#DEC152;
  text-decoration: underline;
}
main{
	padding: 50px;
	padding-top:0px;
}
main img{
  max-width: 100%;
  height: auto;
}
main section{
	border: 2px solid #bbb;
	border-radius: 8px;
	margin-bottom: 30px;
	min-height: 300px;
	padding: 20px;
  max-width: 1500px;
}
main section:hover{
	box-shadow: 3px 3px 6px #DDD, -3px -3px 6px #DDD;
}
main section img{
	float:right;
	position: relative;
  max-width:40%;
  height: auto;
}
aside{
	background-color:#444;
}
aside img{
  display: block;
  width:auto;
	max-width: 100%;
	height: auto;
  max-height: 300px;
  margin-left: auto;
  margin-right: auto;
}
footer{
	background-color: #0d0d0d;
}

/*buttons*/
input{
  border:1px solid #bbb;
  background-color:#444;
  border-radius:4px;
  height: 25px;
  color:#bbb;
  font-size: 16px;
}
label{
  color: #00c0ff;
}
button{
  height: 40px;
  width: 150px;
  color: #bbb;
  font-size: 18px;
  background-color: #5e257c;
  border:none;
  border-radius: 2px;
}
button:hover{
  background-color: #8444A6;
}


/*colums*/
[class*="col-"] {
  width:100%;
  float: left;
  padding: 50px;
}

.nopad{
  padding:0px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (min-width: 710px){
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}

.headimg{
  display: block;
}
header{
  height:250px;
}
header p{
  padding-left:250px;
}
nav ul{
  margin-top:-115px;
  position: absolute;
  margin-left:255px;
  padding-top: 5px;
  width:410px;
}
nav li{
  display:inline-block;
  width:200px;
  line-height: 20px;
  margin-bottom:3px;
}
nav a, nav a:link, nav a:visited, nav button{
  width:194px;
}
main section{
  margin-left: 25px;
  margin-right: 25px;
}
.nopad{
  padding:0 20px;
}

}




@media only screen and (min-width: 1111px){
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

main section{
  margin-left: 75px;
  margin-right: 75px;
}
nav ul{
  width:auto;
}
.nopad{
  padding:0;
}
}