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

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


/* typeography */

h1, h2, h3, h4 {font-family: "Lora", serif;}
html {font-family: "Open Sans", sans-serif;}

/* layout */

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


#main-content {width: 100%; height: auto;}

#site-logo {float: left; width:150px; height:auto; padding: 0; margin: 0;}

#social-1 {width: 60px; height: auto;}
#social-2 {width: 60px; height: auto;}
#social-3 {width: 60px; height: auto;}

#banner-image {width: 100%; height: auto;}

#cafe-info {padding: 2%; margin: 1px;}

#menu-head {padding: 2%; font-size: large; text-align: center;}
#menu {border: 2px solid #4F4A12; margin: 0 5% 5% 5%; max-width: 90%; background-color: #FFFDD0;}

#shop-head {padding: 2%; font-size: large; text-align: center;}
#shop-items {border: 2px solid #4F4A12; margin: 0 5% 5% 5%; max-width: 90%; background-color: #FFFDD0;}

#animals-head {padding: 2%; font-size: large; text-align: center;}
#petting-zoo-info {padding: 2%; margin: 1px;}
#animals {border: 2px solid #4F4A12; margin: 0 5% 5% 5%; max-width: 90%; background-color: #FFFDD0;}

#play-park-image {width: 58%; height: auto;}

#walk-routes-info {padding: 2%; text-align: center;}
#walk-routes-map {padding: 0% 25% 2% 25%;}

#walk-images1 {margin: 3%; width: 600px; height: 400px; background-image: url("../assets/forest-walk.jpg"); background-repeat: no-repeat; background-size: cover;}
#walk-images1:hover {background-image: url("../assets/lake-walk.jpg");}

#walk-images2 {margin: 3%; width: 600px; height: 400px; background-image: url("../assets/family-walk.jpg"); background-repeat: no-repeat; background-size: cover;}
#walk-images2:hover {background-image: url("../assets/farm-walk.jpg");}

#walk-images {border: 2px solid #4F4A12; margin: 0 5% 5% 5%; max-width: 90%; background-color: #FFFDD0;}
#walk-routes {font-size: large; text-align: center;}

body{padding: 0; margin: 0; background-color: #FFDD9D;}

section {float:left; width:100%}

.full-width-col {width: 100%; margin: 0; padding: 0;}
.half-width-col {float:left; width: 48%; margin: 1%; padding: 2%;}
.thirds-width-col {float:left; width: 31.33%; margin: 1%; padding: 2%; border: 1px solid #4F4A12; background-color: #FFFDD0;}
.quarters-width-col {float:left; width: 23%; margin: 1%; padding: 2%;}

.header-col-1 {float: left; width:68%; margin: 1%; padding: 0;}
.header-col-2 {float:left; width: 8%; margin: 1%; padding: 0;}
.header-col-3 {float:left; width: 5%; margin: 1%; padding: 0;}

.footer-col-1 {float:left; width: 18%; margin: 1%; padding: 2%;}
.footer-col-2 {float:left; width: 78%; margin: 1%; padding: 2%;}

.animal-col-1 {float:left; width: 31.33%; margin: 1%; padding: 1%; text-align: center;}
.animal-col-2 {float:left; width: 31.33%; margin: 1% 9% 1% 9%; padding: 1%; text-align: center;}

.play-park-col-1 {float:left; width: 58%; margin: 1%; padding: 1%;}
.play-park-col-2 {float:left; width: 38%; margin: 1%; padding: 4%;}

.contact-col-1 {float:left; width: 25%; margin: 1%; padding: 1%;}
.contact-col-2 {float:left; width: 71%; margin: 3% 1% 3% 1%; padding: 4%; border: 2px solid #4F4A12; height: 100%; background-color: #FFFDD0;}

button {border: none; padding: 10px; border-radius: 50px; background-color: #FFB100; min-width: 100px; height: 50px;}
button:hover {background-color: #FFF44C;}
button a {color: white;}

/* navigation */
nav ul{list-style:none;}
nav li{display:inline-block; margin: 2%; background-color: #FFB100; padding: 2%;}
nav li:hover {background-color: #FFF44C;}
nav ul a {color: white}

/*----------| Breakpoints |-----------*/

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

}

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

/* x-small */
@media only screen and (max-width: 576px) {
    .half-width-col {width: 98%;}
    .thirds-width-col {width: 98%;}
    .quarters-width-col {width: 98%;}
}