body{
    width:100%;
}

nav{
    height:10vh;
    max-height: 80px;
    width:101%;
    margin-top: 0%;
    margin-left:-1%;
    background-color: #1c3e11;
    position: fixed;
    top:0px;
    z-index: 2;
    
}

nav ul{
    
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    
}

nav ul li{
    display: inline;
    padding:5%;
    color:white;
    font-family: 'Droid Serif', serif;
    font-weight: 700;
    display:inline;
    vertical-align:middle;
    line-height:70px;
    
}

nav a{
    color:inherit;
    text-decoration: none;
}

nav a:hover{
    color:#e1ca4b;
}

header{
    padding-top:1%;
}

#logo_wrapper{
    padding-left:10%;
    width:11%;
    padding-top: 70px;
    float:left;
}

#logo_wrapper img{
    width:100%;
}


#header_banner_wrapper{
    width:60%;
    float:right;
    padding-right:10%;
    padding-top:60px;
}

#header_banner_wrapper img{
    width:100%;
}

#header_hr{
    width:80%;
    margin-bottom: 1%
}

#jumbotron{
    width:80%;
    height:auto;
    margin:0 auto;
    background-image: url(/img/Isfield-Farm-Shop-Tractor-Bk-small.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    clear:both;   
}

#openingtimes_textbox{
    padding-top:1%;
    padding-left:3%;
    padding-bottom: 1%;
    
}

#openingtimes_textbox p{
    color:white;
    font-size:15px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    line-height: 10px;
}


#pizza_van{
    margin-top:4%;
}


#quality_local_butchers{
    width:83.5%;
    margin:0 auto;
    margin-top:0%;
    text-align: center;
    margin-bottom: -5%;
}

#quality_local_butchers h1{
    font-family: 'Droid Serif', serif;       
    text-align: center;
    background-color:#1c3e11;
    padding:10px;
    color:white;
    
}

.section2_textbox{
    width:25%;
    display: table-cell;
    text-align: justify;
    font-family: 'Droid Sans', sans-serif;
    padding:2%;
}

#about_us_location{
    height:12vh;
}

#about_us_wrap{
    width:80%;
    margin: 0 auto;
    margin-top:-9vh;
    height:auto;
    background-image: url(/img/Isfield-Farm-Shop-Eggs-small.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

#about_us_textbox{
    width:45%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    text-align: justify;
    padding-bottom: 2%;
    
}

#about_us_textbox h1{
    font-family: 'Droid Serif', serif;   
    font-size: 4em;
    padding:2%;
    margin-bottom:0em;
    color:white;

}

#about_us_textbox hr{
    float:left;
    margin-left:2%;
    width:290px;
}

#about_us_textbox p{
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    padding:2%;
    margin-top:1em; 
    margin-bottom:0em;
    color:white;
    line-height: 150%;
}

#butchers_location{
    height:12vh;
}

#butchers{
    width:80%;
    margin:0 auto;
    background-color: #1c3e11;
    display:block;
    overflow:hidden;
}

#butcher_img{
    width:35%;
    float:left;
    height:90vh;
    background-image: url(/img/Isfield-Butchers-Pic-small.jpg);
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    max-height: 700px;
}

#butcher_img img{
    width:100%;
    
}

#butchers_main_textbox{
    width:60%;
    float:right;
    height:100%;
    padding-right:2%;
    padding-top:1%;
    
}

#butchers h1{
    font-family: 'Droid Serif', serif;   
    font-size: 4em;
    color:white;
    text-align: right;
}

#butchers_header{
    padding-top:0%;
    margin-bottom:0em;
    margin-top:0;
}

#butchers_hr{
    width:290px;
    float: right;
    
}

#services_hr{
    width:202px;
    float:right;
}

#butchers p{
    text-align: justify;
    color:white;
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    float:right;
}

#butchers_services_header{
    margin-top:40%;
    margin-bottom:0em;
    font-family: 'Droid Serif', serif;   
    font-size: 3em;

    color:white;
    text-align: right;
}

#butcher_services_textbox a{
    color:white;
}

#butcher_services_textbox a:hover{
    color:#e1ca4b;
}

#find_us{
    height: auto;
}

#find_us h1{
    font-family: 'Droid Serif', serif;   
    font-size: 4em;
    padding-top:2%;
    padding-right:2%;
    margin-bottom:0em;
}

#find_us hr{
    float:left;
    width:240px;
}

#find_us_wrapper{
    width:80%;
    margin: 0 auto;
    padding:0%;
    
}

#map_wrapper{
    width:100%;
    margin-top:50px;
    z-index: 0;
    position:relative;
}

#gmap_canvas{
    width:100%;
}

#contact_us_wrapper{
    width:80%;
    margin:0 auto;
    height: auto;
    background-image: url(/img/Isfield-Farm-Shop-Hay-Bale-small.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

#contact_us h1{
    font-family: 'Droid Serif', serif;   
    font-size: 4em;
    padding-top:2%;
    padding-right:2%;
    margin-bottom:0em;
    color: white;
    text-align: right;
}

#contact_us hr{
    color:white;
    float:right;
    width:340px;
    margin-right:2%;
}

#contact_us_textbox{
    padding-top:18%;
}

#contact_us p{
    text-decoration: none;
    color:white;
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    padding:2%;
    font-size: 30px;
}

#contact_us a{
    text-decoration: none;
    color:white;
}

#contact_us a:hover{
    color:#e1ca4b;
    text-decoration:underline; 
}



#footer{
    font-family: 'Droid Sans', sans-serif;
    padding-right:2%;
    padding-left:2%;
}

#copyright{
    float:left;
}


#webdesign{
    float:right;
}


@media screen and (max-width: 900px){
    #about_us_textbox{
        width:100%;}
    
    #butcher_img{
        display:none;
    }
    
    #butchers{
        background-image: url(/img/Isfield-Butchers-Pic-small.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    #butchers_main_textbox{
        width:98%;
        background: rgba(0, 0, 0, 0.5);
    }
    #butchers_main_textbox p{
        padding-left:2%;
    }
}


@media screen and (max-width: 800px){
    #quality_local_butchers h1{
        font-size:20px;
    }
    #quality_local_butchers p{
        font-size:12px;   
    }
}

@media screen and (max-width: 768px){
    
    nav{
        height: auto;
        max-height: 70px;
    }
    
    nav ul li{
        display: inline;
        padding:2%;}
    
    
    #logo_wrapper{
        display:none;
    }
    
    #header_wrapper{
        
        width:100%;
        display: inline-block;
    }
    
    #header_banner_wrapper{
        width:80%;}
    
    
    #openingtimes_textbox p{
    line-height: 15px;
}
    
}


@media screen and (max-width: 600px){
    
    #contact_us p{
        font-size:20px;
    }
    
    
}


@media screen and (max-width: 450px){
    
    body{
        width:96%;
    }
    
    nav{
        height:auto;
        padding:10px;
        width:100%;
        display:none;
    }
    

    nav ul li {
        padding:30px;
    }
    

    #header_banner_wrapper{
        width:100%;
        margin:0 auto;
        padding:0;
        padding-right:3%;
    }
    
    #header_hr{
        display:none;
    }

    
    #jumbotron{
        width:100%;
    }
    
    #openingtimes_textbox p{
    font-size:13px;}
    
    #quality_local_butchers{
        width:100%;
    }
    
    .section2_textbox{
    width:96%;
    display: block;
    text-align: justify;
    font-family: 'Droid Sans', sans-serif;
    padding:2%;
    }
    
    #about_us_location{
    height:5vh;
}

    #about_us_wrap{
    width:100%;
    margin-top: 5%;}
    
    #about_us_textbox h1{
        font-size:20px;
    }
    #about_us_textbox p{
        font-size:12px;
        font-weight: 400;
    }
    
    #about_us hr{
        width:96%;
    }
    
    #butchers{
        width:100%;
    }
    
    #butchers h1{
        font-size:20px;
    }
    
    #butchers h3{
        font-size:18px
        
    }
    #butchers p{
        font-size:12px;
        font-weight: 400;
    }    
    
    #find_us{
        margin-top:20%;
        width:100%;
        height:auto;
    }
    
    #find_us_wrapper{
        width:100%;
    }
    
    #find_us h1{
        font-size:20px;
        padding-left:2%;
    }
    
    #map_wrapper{
        margin:0;
    }
    
    #contact_us_wrapper{
        width:100%;
        margin-top:20%;
    }
    
    #contact_us hr{
        width:97%;
    }
    
    #contact_us h1{
        font-size:20px;
    }
    
    #contact_us p{
        font-size:14px;
        font-weight: 400;
    }
    
    #footer{
        font-size: 10px;
    }
}