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

/*
#262001 dark brown
#F29F05 yellow
#F28705 orange
#BF6B04 dark orange
*/

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

/* typography */

h1, h2, h3, h4, h5 {font-family: "Varela Round", sans-serif; font-size: 30px; text-align: center;}
p {font-family: "Roboto", sans-serif; font-size: 20px;}
li {font-family: "Varela Round", sans-serif;}
#menu {font-family: "Varela Round", sans-serif; font-size: 20px;}

header {float: left; width: 100%; height: auto; background-color: #BF6B04;}
body {padding: 0; margin: 0; background-color: #F29F05;}
footer {float: left; width: 100%; height: auto; background-color: #BF6B04;}

#some_text {text-align: center; font-family: "Roboto", sans-serif; font-size: 20px;}

/* navigation styles */

nav ul {list-style: none;}
nav li {display: inline-block; margin: 2px; padding: 5px; font-family: "Varela Round", sans-serif; background-color: #F28705; border-radius: 8px;}
nav li:hover {background-color: #F29F05;}

/* grid styles */

.full-width {float: left; width: 100%;}
.half-width-column {float: left; width: 46%; margin: 2%; padding: 1%;}
.third-width-column {float: left; width: 29.33%; margin: 2%; padding: 1%;}
.quarter-width-column {float: left; width: 21%; margin: 2%; padding: 1%;}

/* layout */

#logo {width: 120px; height: 120px;}

#hover_image {width: 500px; height: 280px; background-image: url("../assets/images/farm3.jpg"); background-size: contain; background-repeat: no-repeat; border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}
#hover_image:hover {background-image: url("../assets/images/farm4.jpg"); border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}

#hover_image2 {object-fit: cover; width: 250px; height: auto; border-style: solid; border-radius: 3px; border-color: #BF6B04;}

#hover_image3 {width: 500px; height: 280px; background-image: url("../assets/images/chicken.png"); background-size: contain; background-repeat: no-repeat; border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}
#hover_image3:hover {background-image: url("../assets/images/sheep.png"); border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}

#hover_image4 {width: 500px; height: 280px; background-image: url("../assets/images/farmshop2.jpg"); background-size: contain; background-repeat: no-repeat; border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}
#hover_image4:hover {background-image: url("../assets/images/farmshop1.png"); border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}

#cafe_image1 {width: 500px; height: 280px; background-image: url("../assets/images/actualcafe1.png"); background-size: contain; background-repeat: no-repeat; border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}

#cafe_image2 {width: 500px; height: 280px; background-image: url("../assets/images/actualcafe2.jpg"); background-size: contain; background-repeat: no-repeat; border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}

#hover_image5 {width: 500px; height: 280px; background-image: url("../assets/images/charity2.jpg"); background-size: contain; background-repeat: no-repeat; border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}
#hover_image5:hover {background-image: url("../assets/images/charity3.jpg"); border-style: solid; border-radius: 3px; border-color: #BF6B04; background-size: cover;}

/*--- Breakpoints ---*/

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

}

/* Large */
@media only screen and (max-width: 1000px) {
    .quarter-width-column {width: 46%;}
}

/* Small */
@media only screen and (max-width: 576px) {
    .half-width-column {width: 96%;}
    .third-width-column {width: 96%;}
    .quarter-width-column {width: 96%;}
}