@charset "utf-8";
/*Farm Web*/

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

/* typography */

h1, h2, h3, h4, h5 {font-family: "Margarine", sans-serif;}

h1 {font-size: 4em; color: #fafeff ;}
h2 {font-size: 2em; color: rgb(75, 141, 21) ;}
h3 {font-size: 2em;} 
h4 {font-size: 2em; color: #fafeff ;}

        #container1 {width: 200px; height:auto; float: left;}
        #navcontainer {width: auto; height:auto; float: right;}
        #backcontainer {background-image: url("../assets/buttercupfield.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 600px;}
    
        .borders {border: 8px solid #546d38;}





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

/* navigation */

 #navigation ul {list-style: none;}

 #navigation li {display: inline-block; margin: 0 10px 0 10px; background-color: #fafeff; padding: 15px; color: #546d38; border: none; border-radius: 50px;}

 button {font-family: "Open Sans", sans-serif; background-color: #fafeff; padding: 15px; border-radius: 50px;}
 button a {color: #546d38;}

/* layout */


    header{float:left; width: 100vw; height:auto; background-color: #546d38;}
    footer{float:left; width: 100vw; height:auto; background-color: #546d38;}
    body{float:left; width: 100vw; padding: 0; margin: 0; background-color: #e4d584;}

    .one-col {float:left; width: 100%; height: auto; margin: 2%;}
    .two-col {float:left; width: 46%; height: auto; padding: 5px; margin: 2%;}
    .three-col {float:left; width: 29.33%; height: auto; padding: 5px; margin: 2%;}
    .four-col {float:left; width: 21%; height: auto; padding: 5px; margin: 2%;}

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

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

    /* panels */
    .panel-1 {background-color: #ace5f2;}


    
/* media query */

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

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

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