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

*{box-sizing: border-box;}


#main-content {float: left; width: 100%;}
#section {float: left; width: 100%;}
/*navigation*/
nav ul {list-style: none;}
nav li {display: inline-block; margin: 0 10px 0 10px; background-color: #aaa; padding: 15px;}
/*grid styles*/
.full-width {float: left; width: 100%;}
.half-width-column {float: left; width: 46%; margin: 2%; padding: 5% 3%;}
.third-width-column {float: left; width: 29.33%; margin: 2%; padding: 5% 3%;}
.quarter-width-column {float: left; width: 21%; margin: 2%; padding: 5% 3%;}

/*Typography*/
h1, h2, h3, h4, h5, h6 {font-family: "Roboto", sans-serif;}
p {font-family: "Open Sans", sans-serif;}
@media only screen and (max-width: 1280px) {
    .quarter-width-column {width: 46%;}
} 
@media only screen and (max-width: 576px) {
    .half-width-column {width: 96%;}
    .third-width-column {width: 96%;}
    .quarter-width-column {width: 96%;}
}