@charset "utf-8";
/* CSS Document */

* {box-sizing: border-box;}

/* 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 blue;}
.bordertwo {border: 2px solid green;}

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

/* margins */
#margin-test {border: 1px solid blue; margin: 100px; padding: 30px 100px;}

#div-one {}
#div-two {}

/* navigation */

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

/* layout */

header {}
footer {}


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

.full-width-col {float:left; width: 98%; margin: 1%; padding: 2%; border: 1px solid blue;}
.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 green;}
.quarters-width-col {float:left; width: 23%; margin: 1%; padding: 2%; border: 1px solid purple;}



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

}
/* large */
@media only screen and (max-width: 1080px) {
    .quarters-width-col {width: 48%;}
}
/* x-small */
@media only screen and (max-width: 576px) {
    .half-width-col {width: 98%;}
    .thirds-width-col {width: 98%;}
    .quarters-width-col {width: 98%;}
}