@charset "utf-8";
/* Website */

* {box-sizing: border-box;}
img {max-width: 100%; height: auto;}
div{max-width: 100%;}
/* TYPOGRAPHY */

h1 {font-size: 5em; color:#B56410;}

h1,h2,h3,h4,h5,h6 {font-family: "Amarante", serif;}

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

/* NAVIGATION */
    ul {list-style: none;}

    li {display: inline-block; margin: 0 10px 0 10px; padding: 15px;}
    
/* LAYOUT */
    body {margin: 0; padding: 0; background-color: #888C0B;}

    #navigation {background-color: #736B02;}

    header{float:left; width: 100%; height: auto; background-color: #736B02;}
    footer{float:left; width: 100%; height: auto; background-color: #736B02;}

    .one-col {float: left; width: 96%; height: auto; padding: 5px; margin: 2%;}
    .two-col {float: left; width: 46%; height: auto; padding: 5px; margin: 2%;}
    .three-col {float: left; width: 33.33%; height: auto; padding: 5px; margin: 0%}
    .four-col {float: left; width: 21%; height: auto; padding: 5px; margin: 2%}
    .five-col{float: left; width: 16%; height: auto; padding: 5px; margin: 2%}

    section{float: left;width: 100%; height: auto;}
    #navigation{float: left;width: 100%; height: auto;}


    #rollover{width: 500px; min-height: 400px;background-image: url("../assets/Menu_cover.jpg");background-position: center; background-repeat: no-repeat; background-size: cover;}
    #rollover:hover{background-image: url("../assets/menu_hover.jpg");}

    #sitelogo{float: left; width: 200px; height: 120px;}
    #socialicons{float: left; width: 200px; height: 35px;}

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

    #farmimage{min-height: 250px; width: 100%; background-image: url("../assets/image_farm.jpg");background-position: center; background-repeat: no-repeat; background-size: cover;}

    .centered-text{text-align: center;}

    

/* MEDIA QUERY */

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

    /* large */
    @media only screen and (max-width: 1080px) {
        .four-col { width: 50%;}    
    }

    /* x-small */
    @media only screen and (max-width: 576px) {
        .two-col {width: 100%;}
        .three-col {width: 100%;}
        .four-col { width: 100%;}
    }