@import url("reset.css");
@import url("menu.css");
@import url("open-sans.css");
@import url(https://fonts.googleapis.com/css?family=Squada+One);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
/* CSS Document */
body{
	background-color: #168039;
    overflow-x: hidden;
	}
#wrap{
	margin: 0px;
	padding: 0px;
	}

/* Header */
#headerWrapper100{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
	background-color: #fff;
	z-index:1000;
	}
#headerWrapper100 #headerWrapper960{
	width: 960px;
	height: 139px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	position: relative;
	}
#headerWrapper960 #logo{
	position: absolute;
	top: 18px; 
	left: 20px;
	}

#headerWrapper960 #tagline{
	position: absolute;
	top: 50px;
	left: 370px;
	font-family: 'Squada One', cursive;
	font-size: 23px;
	color: #bf5c17;
	text-align: center;
	text-transform:uppercase;
	}
#headerWrapper960 #phone{
	position: absolute;
	top: 0px;
	right: 35px;
	background-color: #a2161c;
	font-family: 'Squada One', cursive;
	color: #fff;
	font-size: 24px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 10px 15px;
	}
#phone a:link {
 color: #fff;
}
#headerWrapper960 #starbrust1{
	position: absolute;
	top: 55px;
	right: 30px;
	z-index:11;
	}		

/* Hero */
#heroWrapper100{
	margin: 0px;
	padding: 0px;
	position: relative;
	background-image: url(../images/layout/hero-bg.jpg);
	background-repeat: repeat;
	box-shadow: inset 0 0 10px #000000;
	-moz-box-shadow: inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	}
#heroWrapper100 #heroWrapper960{
	margin: 0 auto;
	padding: 0px;
	width: 960px;
	height: 465px;
	position: relative;
	padding-top: 17px;
	}
#heroWrapper960 #imageWrapper{
	width: 960px;
	height: 358px;
	position: relative;
	}
#heroWrapper960 #navigation{
	width: 960px;
	height: 65px;
	background-color: #e1781d;
	}
#heroWrapper960 #ribbon-left{
	position: absolute;
	top: 17px;
	left: -59px;
	z-index: 11;
	}	
#heroWrapper960 #ribbon-right{
	position: absolute;
	top: 17px;
	right: -59px;
	z-index: 11;
	}	
#heroWrapper960 #stamp-left{
	position: absolute;
	top: 110px;
	left: -150px;
	}	
#heroWrapper960 #stamp-right{
	position: absolute;
	top: 83px;
	right: -190px;
	}
#heroWrapper960 #featured-image{
	position: absolute;
	top: 257px;
	left: -54px;
	z-index: 12;
	}
#heroWrapper960 #starbrust-2{
	position: absolute;
	top: 347px;
	left: 163px;
	z-index: 13;
	}

#heroWrapper960 #starbrust-3{
	position: absolute;
	top: 347px;
	right: -40px;
	z-index: 13;
	}		

/* Content*/
#contentWrapper100{
	margin: 0px;
	padding: 0px;
	position: relative;
	background-color: #fff;
	background-image: url(../images/layout/content-bg.png);
	background-repeat: repeat;
	background-position: top;
	overflow: auto;
	}
#contentWrapper100 #contentWrapper960{
	margin: 30px auto;
	width: 100%;
	max-width: 960px;
	position: relative;
	overflow: auto;
	padding-top: 40px;
	padding-bottom: 60px;
	z-index: 1;
	}
#contentWrapper960 #mainContent{
	width: 660px;
	float: left;
	margin: 0 0px 0 0;
	}
#contentWrapper960 #sideContent{
	width: 255px;
	float: left;
	margin: 0 45px 0 0;
	}	
	
#contentWrapper960 #contact-us{
	background-color: #a2161c;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 16px;
	line-height: 21px;
	border-radius: 10px;
	padding: 30px 15px 40px 25px;
	}	

#contact-us a:link{
	color:#FFC;
	}

#contact-us a:hover{
	color:#ea9052;
	}	
		
/* Footer */
#footerWrapper100 {
	margin: 0px;
	padding: 0px;
	position: relative;
	background-color: #168039;
	background-image: url(../images/layout/footer-bg.png);
	background-repeat: repeat-x;
	background-position: top;
	}
#footerWrapper100 #footerWrapper960{
	margin: 0 auto;
	width: 100%;
	max-width: 1165px;
	position: relative;
	padding: 40px 0px;
	}	
	
#footerWrapper960 #featured-image-footer{
    position: absolute;
	top: -209px;
	right:-8.75%;
	}
	
/* FOOTER */
								
/* Texts */
h1{
	font-family: 'Open Sans', sans-serif;
	color: #a2161c;
	font-size: 39px;
	line-height: 40px;
	margin:0px 0px 10px 0px;
	}
h2{
	font-family: 'Open Sans', sans-serif;
	color: #a2161c;
	font-size: 24px;
	line-height: 28px;
	margin:10px 0px 10px 0px;
	}
h3{
	font-family: 'Open Sans', sans-serif;
	color: #168039;
	font-size: 22px;
	line-height: 26px;
	margin:10px 0px 10px 0px;
	}

h4{
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 22px;
	line-height: 27px;
	margin: 0px 0px 10px 0px;
	padding: 0;
	}
	
h5{
	font-family: 'Open Sans', sans-serif;
	color: #168039;
	font-size: 13px;
	line-height: 20px;
	margin: 13px 0;
	padding: 0;
	font-style: italic;
	}
.featureText{
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	font-size: 32px;
	color: #fff;
	text-shadow: -2px 1px 0px rgba(0, 0, 0, 2);
	}
.bodyText strong{
	font-weight:bold;
	}
			
.bodyText{
	font-family: 'Open Sans', sans-serif;
	color: #5f5f5f;
	font-size: 15px;
	line-height: 22px;
	}
.bodyText a:link{
	font-family: 'Open Sans', sans-serif;
	color: #29843A;
	font-size: 15px;
	line-height: 22px;
	text-decoration: none;
	}
.bodyText a:visited{
	font-family: 'Open Sans', sans-serif;
	color: #29843A;
	font-size: 15px;
	line-height: 22px;
	}
.bodyText a:hover{
	font-family: 'Open Sans', sans-serif;
	color: #000;
	font-size: 15px;
	line-height: 22px;
	}			
.bodyText a:active{
	font-family: 'Open Sans', sans-serif;
	color: #29843A;
	font-size: 15px;
	line-height: 22px;
	}
.footerText strong{
	font-weight:bold;
	}	
.footerText{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
	max-width: 960px;
    margin: 0 auto;
	}
.footerText a:link{
	color: #FFF;
	text-decoration: none;
	}
.footerText a:visited{
	color: #CCC;
	text-decoration: none;
	}
.footerText a:hover{
	color: #990000;
	text-decoration: none;
	}			
.footerText a:active{
	color: #FFF;
	text-decoration: none;
	}		

.clear{
	clear: both;
	}

.roundedImage{
	-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
	}

#divider {
	border-bottom:#900 thin dashed;
	margin-top:25px;
	margin-bottom:25px;
}

/* Mobile Elements*/

#phone-icon {display:none;}

#top-bar {display:none;}

.burger-menu, .burger-menu-btn, .burger-menu-btn-close {
    display:none;
}
    
/* responsive scaling start */
@media only screen and (max-width: 999px) {
    
    #headerWrapper100 #headerWrapper960 {
        max-width:100%;
        width: auto;
        height:149px;
        overflow-x: clip;
    }
    
    #heroWrapper100 #heroWrapper960 {
        max-width:100%;
    }
    
    #heroWrapper960 #starbrust-3 {
        right:-30px;
    }
    
       #heroWrapper960 #imageWrapper {
        width:100%;
        max-width:960px;
    }
    
    #heroWrapper960 #imageWrapper img {
        width: 100%;
        height: 358px;
        object-fit: cover;
    }
    
    #contentWrapper100 #contentWrapper960 {
        max-width:100%;
        width: auto;
        display: flex;
        padding-left: 5%;
        padding-right: 5%;
    }
    
    #text-limit-width {
        max-width:450px;
    }
    
    #header-limit-width {
        max-width:450px;
    }
    
    #footerWrapper100 #footerWrapper960 {
        max-width:100%;
        width: auto;
        overflow-x: clip;
    }
    
    #copyright {
        margin: 0px 5%;
    }
    
    .beef-cuts-img {
        max-width: 100%;
        height: auto;
    }
}

/* change nav */
@media only screen and (max-width: 896px) {
    
    .burger-menu-btn {
        display:block;
        position: absolute;
        top: 63px;
        right: 10%;
    }
    
    .burger-menu-btn-close {
        display:none;
        position: absolute;
        top: 63px;
        right: 10%;
    }
    
    .burger-menu-btn:hover, .burger-menu-btn-close:hover {
        color: #bf5c17;
    }
    
    .burger-menu {
        display:none;
        position: absolute;
        top: 149px;
        width:100%;
        min-height:calc(100vh - 149px);
        z-index:900;
        background-image: url(../images/layout/hero-bg.jpg);
    	background-repeat: repeat;
    	box-shadow: inset 0 0 10px #000000;
	    -moz-box-shadow: inset 0 0 10px #000000;
    	-webkit-box-shadow: inset 0 0 10px #000000;
    	overflow-x:clip;
    }
    
    .burger-menu ul {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        list-style: none;
        padding: 0;
        position: relative;
        z-index: 901;
        margin: auto;
    }
    
    .burger-menu ul li {
        flex-basis:100%;
    }
    
    .burger-menu ul li a{
        display: block;
        width: 40%;
        padding: 30px 60px;
        flex-basis: 100%;
        text-align: center;
        color: #fff;
        font-family: 'Open Sans', sans-serif;
        font-size: 22px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: -1px;
        text-decoration: none;
        background-color: #e1781d;
        margin:auto;
    }
    
    .burger-menu ul li a:hover, .burger-menu ul li.active a{
        color: #bf5c17;
        font-weight:700;
    }
    
    .burger-menu ul li:first-child a{
        drop-shadow: inset 0px 8px 10px -8px #000000;
        -moz-box-shadow: inset 0px 8px 10px -8px #000000;
        -webkit-box-shadow: inset 0px 8px 10px -8px #000000;
    }
    
    
    #stamp-left-mobile{
	position: absolute;
    bottom: 10px;
    left: -50px;
	}	
    #stamp-right-mobile{
	position: absolute;
    top: 83px;
    right: -70px;
	}
    
    #headerWrapper960 #starbrust1 {
        top: 130px;
        right: -20px;
    }

    #ribbon-left, #ribbon-right, #stamp-left, #stamp-right {
        display:none;
    }

    #navigation {
        display:none;
    }
    
    #headerWrapper960 #tagline {
    top: 65px;
    left: 330px;
    }
}


/* wrap content */
@media only screen and (max-width: 768px) {
 
    
    #contentWrapper100 #contentWrapper960 {
        column-gap: 45px;
        row-gap: 5px;
        flex-wrap: wrap-reverse;
    }

    #contentWrapper960 #sideContent {
        flex-grow: 1;
        display: flex;
        row-gap: 45px;
        flex-wrap: wrap-reverse;
        margin:0;
    }
    
    #contentWrapper960 #contact-us {
        flex-grow: 1;
    }
    
    #contentWrapper960 #contact-us #contact-details {
        display: flex;
        column-gap: 5%;
        row-gap: 15px;
        flex-wrap: wrap;
    }
    
    #contentWrapper960 #contact-us.compost-contact-us, #contentWrapper960 #contact-us.thankyou-contact-us {
        margin-top:25px;
    }
    
    #header-limit-width {
        max-width:100%;
    }
    
    #text-limit-width {
        max-width:100%;
    }
    
}


/* remove tagline */
@media only screen and (max-width: 725px) {
        
    #headerWrapper960 #tagline {
        display:none;
    }
    
    #header-limit-width {
        max-width:450px;
    }
}

/* add top bar */
@media only screen and (max-width: 650px) {

    .burger-menu {
        top: 193.59px;
        min-height:calc(100vh - 193.59px);
    }

    #starbrust-3 {
        display:none;
    }

    #top-bar {
        display:block;
        max-width:100%;
        background-color:#e1781d;
        padding-bottom: 11px;
        padding-top: 12px;
        font-family: 'Squada One', cursive;
        font-size: 1.1rem;
        color: #ffffff;
        text-align: center;
        text-transform: uppercase;
        font-style:italic;
        border-bottom: 4px #bf5c17 solid;
        position:relative;
        z-index:1000;
    }

    #headerWrapper960 #logo {
        position:static;
        padding-left:5%;
        padding-top:35px;
    }
    
    #headerWrapper960 #logo img {
        width:245px;
        height:auto;
    }

}


/* Extra small devices (phones, 500px and down) */
@media only screen and (max-width: 500px) {
    
    #headerWrapper960 #phone {
        right:3%;
    }
    
    #phone-number {
        display:none;
    }
    
    #phone-icon {display:inline;}

    #heroWrapper960 #starbrust-2 {
        top: 370px;
        left: 30%;
    }    
    
    #heroWrapper960 #starbrust-2 img {
        width:225px;
        height:auto;
    }

    #heroWrapper960 #imageWrapper img {
        object-position: -230px;
    }

    #heroWrapper960 #imageWrapper img.ourbeef-headerimage {
        object-position: -100px;
    }

}

/* extra narrow devices (380px and down) */
@media only screen and (max-width: 380px) {
    
    #headerWrapper960 #logo img {
        width: 70%;
        padding-top: 3%; }
        
    .burger-menu ul li a{
        margin:0;
    }
}

/* hide burger menu when scaling window up */
@media only screen and (min-width: 897px) {
    
    .burger-menu-btn {
        display:none!important;
    }