@charset "utf-8";
* {box-sizing: border-box;}
img {max-width: 100%; height: auto;}
/* typography */

h1, h2, h3, h4 {font-family: "Lora", serif;}
html {font-family: "Open Sans" sans-serif;}


#main-content {width: 100%;}

#divone {width: 50%}
#divtwo {width: 50%}

.borderone {border: 10px solid rgb(255, 0, 0);}
.brodertwo {border:2px solid rgb(0, 191, 255);}

/* floats */
#test-floats {width: 550px; height: 400px;}
#test-image {width: 150px; height: auto;}
.fl {float: left;}
.fl {float: right;}

/* margins */
#margin-test {border: 1px solid rgb(255, 0, 0); margin: 100px; padding: 30px 100px;}

#rollover {width: 250px; height: 175px; background-image: url("../Assets/images.jpg"); background-repeat: no-repeat; background-size: cover;}
#rollover:hover {background-image: url("../Assets/download.jpg");}
/* navigation */

nav ul {list-style: none;}
nav li {display: inline-block; margin: 0 10px; padding: 15px; background-color: rgb(255, 0, 0);}

/* layout*/

header 
footer 
section {float: left; width: 100%}

.full-width-col {float: left; width: 98%; margin: 1%; padding: 2%; border: 1px solid red;}
.half-width-col {float: left; width:48%; margin: 1%; padding: 2%; border: 1px solid red;}
.thirds-width-col {float: left; width: 31.33%; margin: 1%; padding: 2%; border: 1px solid red;}
.quarter-width-col {float: left; width:23%; margin: 1%; padding: 2%; border: 1px solid red;}

#logo{height: 170px; width: auto;}

/* navigation */

nav ul {list-style: none;}
 nav li {display: inline-block; margin: 0 10px; padding: 15px; background-color: red}

 /*layout*/ 

 

 section {float: left; width: 100%;}

 /*------------------------------| BREAKPOINT |------------------------------------------------*/
/* x-large */
@media only screen and (max-width: 1200px){

}
/*large */ 
@media only screen and (max-width: 1080px) {

}
/* large */ 
@media only screen and (max-width: 1200px ) {
.quarter-width-col {width: 48%;}

}
/*small*/
@media only screen and (max-width: 576px) {
    .half-width-col {width: 98%}
    .thirds-width-col {width: 98%}
    .quarter-width-col {width: 98%} 

}

body {background-color: rgb(0, 166, 255);}