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

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

/* TYPOGRAPHY */

h1, h2, h3, h4, h5 {font-family: "Fontdiner Swanky", serif;}

h1 {font-size: 4em; color: #119045}
h2 {font-size: 2em; color: #943A23}

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

/* NAVIGATION */

#site-name{ text-align: center;}

#navigation ul {list-style: none;}
#navigation  { float: left; width: 80%; margin: 0 10%;}
#navigation li {display: inline-block; margin: 0 10px 0 10px; background-color: #119045; padding: 15px; color: white;}
#navigation a {color: white;}

/* LAYOUT */
    body {padding: 0; margin: 0; background-color: #F9E8DC; }

    #Booking{ text-align: center;}
    #Info{ text-align: center;}

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


    .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: 29.33%; height: auto; padding: 5px; margin: 2%;}
    .four-col {float: left; width: 21%; height: auto; padding: 5px; margin: 2%;}

    #Times ul {list-style: none;}
    #Additional ul {list-style: none;}
    


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


    #site-logo {float: left; width: 200px; height: 120px; }
    #social-icons {float: left; width: 200px; height: 120px;}
/* CLASSES */
.center{ text-align: center;}


.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}
/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}



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