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

/*
#87A646
#A2BF63
#736D63
#BFB2AA
#F2F2F2
*/





*{box-sizing: border-box;}

img{max-width: 100%; height: auto;}

/* typography */
h1, h2, h3, h4, h5{ font-family: "Roboto", sans-serif;}

p {font-family: "Open Sans", sans-serif;}

 #main-content {float: left; width: 100%;}

 /* navigation styles */

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

 nav li:hover {background-color:#BFB2AA;}

 /* grid styles */

 .full-width {float: left; width: 100%;}

 .half-width-column {float: left; width: 46%; margin: 2%; padding: 1%;}

 .third-width-column {float: left; width: 29.33%; margin: 2%; padding: 1%;}

 .quarter-width-column {float: left; width: 21%; margin: 2%; padding: 1%;}

 /* layout */
 body {background-color: #A2BF63;}

 #intro {background-color: #87A646;}

 #site-logo {float: left; width: 200px; height: 120px;}
 #social {float: right; width: 200px; height: 35px;}

 #image2 {width: 50%; height: 300px; background-image:url("../assets/img/image-placeholder_square.png"); background-position: center; background-repeat: no-repeat; background-size: cover;}

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

/* large */
@media only screen and (max-width: 1080px) { 
    .quarter-width-column {width: 46%;}

}

/* x-small */
@media only screen and (max-width: 576px) {
    .half-width-column {width: 96%;}
    .third-width-column {width: 96%;}
    .quarter-width-column {width: 96%;}

}