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

*{box-sizing: border-box;}

/* typeography */

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: 5px solid lavender;}
.bordertwo {border: 10px dotted pink;}

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

/* margins */
#margin-test {border: 2px solid pink ; margin: 1%; padding: 2%;}

.half-width-col {float:left; width: 48%; margin: 1%; padding: 2%; border: 1px solid blue}

.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}

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

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


/*----------| 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%;}
}