@charset "utf-8";

/*
branding
#F0F1F2
#3E5902
#2C4001
#6E8C03
#D9B9A7
*/

/* globals */

*{box-sizing: border-box;}  
img {max-width: 100%; height: auto;}
body {margin: 0px; padding: 0px; background-color: #D9CCA7;}
button {background-color: #2C4001; color: #fff; font-weight: 800; padding: 10px 15px; border-radius: 50px; border: none;}
button a {color: #fff; cursor: pointer;}
button:hover {background-color: #141C02;}

/* typography */

h1, h2, h3, h4, h5 {font-family: 'Roboto Serif', serif; color: #2C4001;}
p {font-family: 'Open Sans', sans-serif;}


/* navigation */

#main-navigation {float: right; width: auto; height: auto;}
#main-navigation nav li:hover {background-color: #ddd;}
#main-navigation nav li:hover a {color: #2C4001;}

nav {}
nav a {color: #D9B9A7; font-size: 1.2em; font-weight: 800; text-decoration: none; text-transform: capitalize;}
nav ul {list-style: none;}
nav li {display: inline-block; margin: 0px 10px; padding: 15px; background-color: #2C4001;}



/* layout */

header {float: left; width: 100%; background-color: #3E5902;}
footer {float: left; width: 100%; margin-top: 45px; padding: 2em;}


#main-content {float: left; width: 80%; margin: 0px 10%;}
#logo {float: left; width: 150px; height: 75px; margin: 20px 10px; text-align: center; background-color: #618C03;}


#shop {}
#zoo {}
#cafe {}

#shop .tile-image {background-image: url(../assets/images/shop-image-dark.jpg);}
#zoo .tile-image {background-image: url(../assets/images/zoo-image-dark.jpg);}
#cafe .tile-image {background-image: url(../assets/images/cafe-image-dark.jpg);}

#shop:hover .tile-image img {opacity: 0;}
#zoo:hover .tile-image img {opacity: 0;}
#cafe:hover .tile-image img {opacity: 0;}

#location-map {float: left; width: 250px; height: 250px; padding-bottom: 25px;}
#opening-times {float: right; width: 50%; height: auto;}

#view-menu {width: 175px; margin: 16px auto; text-align: center;}
#contact-details {width: 300px; height: auto; margin: 0px auto;}


/* classes */

.full {float: left; width: 100%; margin-bottom: 1em; background-color: #F0F1F2; border: solid 3px #6E8C03;}
.half {float: left; width: 50%; padding: 20px;}
.thirds {float: left; width: 33.33%; padding: 20px;}
.quarters {float: left; width: 25%; padding: 20px;}

.tile-image {background-size: cover; background-repeat: no-repeat;}
.tile-content {}

.social-media {float: left; min-width: 140px; height: 45px; margin: 20px 10px; text-align: center;}

/* media query */

@media only screen and (max-width: 1200px) {
    /* css code goes here */
    .half {width: 100%;}
    .thirds {width: 50%;}
    .quarters {width: 50%;}
}

@media only screen and (max-width: 1080px) {
    /* css code goes here */
    .thirds {width: 100%;}
    .quarters {width: 100%;}
}

@media only screen and (max-width: 576px) {
    /* css code goes here */
}