@charset "utf-8";
/* The Universal Selector has been used here to cancel the browser default margins and */
/* padding for every page element.  This ensures that only assigned */
/* margin and padding values are implemented when viewing pages. */
* {box-sizing: border-box;}
img {
    max-width: 100%;
    height: auto;
}

section {
    float: left;
    width: 100%;
    height: auto;
}


/* Rensponsive Grid */
    .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%;}
/* 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%;}
    }
/* Background Colours */
body {
    background-color: #ffb476;
    margin: 0;
    padding: 0;
}
header, footer{
    background-color: #8e38a8;
    float: left;
    width: 100%;
    height: auto;
}

/* Text Properties */
    h1,h2,h3,h4,h5,h6 {  font-family: "Playfair Display SC", serif; }
    p {font-family: Verdana,Geneva,sans-serif;}

/* Margins */



/* Padding */
    #playpark-paragraph {
        padding-bottom: 100px;
    }
    #website-heading {
        padding: 0px 10px 0px 20px;
        float: left;
    }
     #imageBanner {
        padding: 0px 0px 0px 0px;
        width: 85px;
        height: 60px;
    }
    .click-here{
        padding-left: 40%;
    }
    .centre {text-align: center;}
    .button_centre {
        width: 15%;
        height: auto;
        margin: 0 auto;
		display: block;
    }
/* Positioning (Float, Display and Clear) */
    .open-close{
        text-align: center;
    }
    .website-heading {
        float: left;
    }
    .navagation {
        float: right;
    }

/* Element Sizes */
    #rollover{
        height: 500px;
        width: 500px;
        background-image: url(../assets/farm-building.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #rollover:hover{
        background-image: url(../assets/farm-building2.jpg);
    }
    .shop{
        width: 600px;
        height: 450px;
    }
    .cafe{
        width: 300px;
        height: 200px;
    }
    .things-to-do-img {
        width: 200px;
        height: 170px;
        padding: 15px;
    }
    .animal-img{
        height: 150px;
        width: 150px;
    }
    .farm-img {
        height: 300px;
        width: 750px;
    }
    .imageBanner {
        max-width: 100px;
        height: auto;
    }
    .social {
       width: 80px;
       height: 80px;
       padding-top: 15px;
    }


/* Navigation List Properties */
    .navagation ul {list-style: none;}
    .navagation li{
        display: inline-block; 
        margin: 0 10px 0 10px; 
        background-color: #15ff00; 
        padding: 10px;
        border-radius: 20px;
        width: 108px;
        height: 50px;  
    }

/* Social Media */
    #social-icons{clear: both;}
    .fa {
    padding: 20px;
    font-size: 30px;
    width: 75px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    }

    .fa:hover {
        opacity: 0.7;
    }

    .fa-facebook {
    background: #3B5998;
    color: white;
    }

    .fa-instagram {
    background: #125688;
    color: white;
    }
    .fa-twitter {
    background: #55ACEE;
    color: white;
    }
    /* list properties */
    .open-close ul {
        list-style: none;
    }