@font-face {
	font-family: 'Handw';
	src: url('../fonts/Handw.eot');
	src: local('☺'), url('../fonts/Handw.woff') format('woff'), url('../fonts/Handw.ttf') format('truetype'), url('../fonts/Handw.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* GDPR */
.c-gdpr { display: none; width: 42rem; max-width: calc(82% - 1rem); position: fixed; right: 1rem; bottom: 1rem; background-color: rgba(0,0,0,0.8); padding: 1.5rem; padding-right: 2rem; }
.c-gdpr > * { font-family: Rockwell, 'Arvo', serif; font-size: 16px !important; line-height: 1.4em; color: white; }
.c-gdpr p { margin-bottom: 0; }
.c-gdpr a { color: inherit; text-decoration: underline; }
.c-gdpr a:hover { color: #e84e32; }
.c-gdpr__close { width: 1rem; height: 1rem; position: absolute; top: 0.7rem; right: 0.7rem; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; }
.c-gdpr__close::before, .c-gdpr__close::after { content: ""; width: 100%; height: 1px; position: absolute; top: 50%; left: 0; background-color: white; }
.c-gdpr__close::before { transform: translateY(-50%) rotate(45deg); }
.c-gdpr__close::after { transform: translateY(-50%) rotate(-45deg); }

/* Utils */
.u-red { color: #c00000; }
.u-bold { font-weight: bold; }

.u-small { font-size: 16px; line-height: 1.4em; opacity: 0.8; }

.u-list { padding: revert; margin-bottom: 1rem; }
.u-list li:not(:last-child) { margin-bottom: 0.8rem; }

.u-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.u-table th { text-align: left; }
.u-table th, .u-table td { padding: 0.5rem 1rem; border: 1px solid black; vertical-align: text-bottom; }
.u-table span { display: block; margin-bottom: 0.5rem; }


/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	body {
		font-family:'Cambo', serif;
		color: #344860;
		font-size: 1em;
		background-color: #e84e32; /* Old browsers */
	}
	.footer {
		background-color: #e84e32; /* Old browsers */
				padding-bottom: 50px;
		padding-top: 20px;
	
		
	}
	
	#home{
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	}
	
	#home h2{
		font-weight: normal;
		font-size: 55px;
		line-height: 58px;
	}
	a {
		color: rgb(0,119,199);
		text-decoration: none;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	
	a:hover {
		color: rgb(0,30,199);
	}
	
	p, address {
		font-family: 'Cambo', serif;
		margin: 0 0 10px 0;
		font-size: 19px;
		line-height: 28px;
		color: #344860;
	}
	address { line-height: 1.2em; }
	
	h2 {
		margin: 0 0 10px 0;
		font-family: Rockwell, 'Arvo', serif;
	}
	.content{
		padding-bottom: 50px;
		background: #fff;
	}
	.content P{
		margin: 0 0 10px 0px;
	
	}
	.content h2 {
		margin: 40px 0 20px 0px;
		font-family: Rockwell, 'Arvo', serif;
		font-size: 42px;
	}
	.content IMG{
	border: 1px solid #ededed;
	}
	.mrswhytes	.content IMG{
	border: none;
	}
	.lifts h2{
		font-family: 'Handw', serif!important;
		font-weight: normal;
		font-size: 38px!important;
		line-height: 34px;
		padding-top: 0px!important;
		margin: 20px 0px 30px 0px;
	}
	.lifts P{
		font-size: 16px;
		line-height: 26px;
	}
	.lifts IMG{
		position: absolute;
		z-index: 500;
		margin-top: 20px;
		
	}
	.lifts .greencol{
		overflow: visible;
	}
	.lifts .greencol2, .lifts .bluecol, .lifts .orangecol{
		height: 400px;
	}
	h3 {
		margin: 40px 0 20px 0px;
		font-family: Rockwell, 'Arvo', serif;
		font-size: 1.8em;
	}	
	.header{
		background: #e84e32; 
		height: 90px;
	}


	A.logolink{
		width: 140px;
		height: 
		display: block;
	}
	
	.header .logo {
		width: 140px;
		height: 90px;
		position: relative;
		background: url(../i/logo.png) no-repeat;
	}
	
	.header .logo h1 {
		/* color: #5DD7A0; */
		color: transparent;
		font-size: 0;
		margin-left: -1000px;
	}
	

	.contact-locale UL{
		list-style-type: none;
		top: -80px;
		position: relative;
		float: right;
		margin-right: 20px;
		z-index: 400;
	}

	.contact-locale LI{
		display: inline;
	}
	.contact-locale LI A{
		color:#ecf0f1;
		font-size: 0.9em;
		font-family: Rockwell, 'Arvo', serif;
		padding-right: 10px;
		padding-left: 10px;
	}
	.contact-locale UL>LI:first-child	{
	border-right: 1px solid #444;
	}
	

	
	.menurow{
		background: #e84e32;
	}
	
	.read-more{
 		width: 230px;
 		height: 35px;
 		margin-left: 20px;
 	}
 		
	.read-more LI{	
		float: left;
		padding-top: 7px;
		display: block;
		margin-right: 20px;
	}
	
	.read-more LI A{	
		padding: 0px 0px 0px 20px;
		color: #fff;
	}
	

	.menu A{	
		color: #fff;
	}
	
	.menu UL{
		list-style: none;
		margin: 0px 0px 0px 28px;
	}
	
	.menu UL LI{
		float: left;
		padding-top: 13px;
		display: block;
		margin-right: 20px;
	}
	
	.intro {
		margin-bottom: 0px;
		font-size: 28px;
		color: #222;
		height: 480px;
		color: #344860;
	}
	.mainimage{
		background: #a7a6ae url(../i/background-front.jpg) center 0px no-repeat;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);

	}


	.intro p {
		margin-bottom: 16px;
		font-size: 0.7em;
		margin-left: 20px;
		padding-right: 120px;
		margin-top: 40px;
		text-shadow: 0px 1px 0px #ccc;
	}

	.intro h2{
		font-family:  'Arvo', serif;
		padding-top: 220px;
/*		font-size: 1.9em;
		line-height: 1em;*/
		letter-spacing: -0.5px;
		margin-top: 10px;
		margin-left: 20px;
		font-weight: normal;
		text-shadow: 0px 1px 0px #ededed;
	}

	/* MRS WHYTES*/
	.mrswhytesbg IMG{
		margin-left: auto;
		margin-right: auto;
		display: block;
		margin-top: 35px;
	}
	.mrswhytesbg{
		background: #a7a6ae url(../i/mrswhytesbg.jpg) 0px 0px no-repeat;
		height: 350px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
	}
	
	h2.mrswhytes{
		font-size: 110px!important;
		line-height: 120px!important;
		font-family: 'Handw', serif!important;
		letter-spacing: -10px;
		color:#fff;
		padding-top: 0px!important;
		margin-top: 10px!important;
		text-align: center;
		text-shadow: 2px 2px 2px #444!important;

	}

	h3.mrswhytes{
		margin: 0 0 10px 0;
		font-size: 62px!important;
		line-height: 56px!important;
		font-family: 'Handw', serif!important;
		letter-spacing: -3px;
		color:#342518;
		font-weight: normal;
		margin: 30px 0px 30px 0px;
	}
	
	
	.wearewhytes{
		background: #a7a6ae url(../i/we-are-bg.jpg) no-repeat;
		height: auto;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
		padding-bottom: 50px;
	}
	
	.wearequotes IMG{
	max-width: none;
		}
	.wearewhytes h2{
		margin-top: 15px;
	
	}
	.wearewhytes h3{
		font-size: 1.4em;
		line-height:1.2em!important;	
		margin-left: 20px;

	}
	.wearewhytes P{
		margin: 10px 0px 0px 20px;
		text-shadow: none;
	}
	.whytes-diff{
		background: #a7a6ae url(../i/difference-bg.jpg) no-repeat;
		height: 380px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
	}
	.ourstory{
		background: #a7a6ae url(../i/our-story-bg.jpg) no-repeat;
		height: 380px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
		color: #fff;
	}
	.whytes-diff h2, .ourstory h2, .saroli h2, .industry h2, .contact h2{
		text-shadow: 1px 1px 3px #333!important;
		text-align: center;
		color: white;
	}	
	.coronation h2 {
		text-align: center;
		}
	.industry{
		background: #a7a6ae url(../i/industry-bg.jpg) no-repeat;
		height: 380px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
	}
	.saroli{
		background: #a7a6ae url(../i/saroli-bg.jpg) no-repeat;
		height: 380px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
	}
	.contact{
		background: #a7a6ae url(../i/contact-bg.jpg) 0px -220px no-repeat;
		height: 380px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
	}

	.saroli IMG {
		margin-left: 2%;
		margin-top: 5%;
		display: block;
	}
	.saroli h2{
		text-align: left;
		font-size: 55px!important;
	
	}
	.coronation{
		height: 370px;
		background: #fff;
	}
	.coronation h2, .saroli h2{
		margin-top: -195px;
	}
	.coronation IMG {
		margin-left: auto;
		margin-right: auto;
		margin-top: 5%;
		display: block;

	}	
	.strubs{
		background: url(../i/strubs-bg.jpg)  no-repeat;
		height: 420px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
	}
	.strubs-big-bg{
		background: url(../i/strubs-jar.jpg) 2% 44em no-repeat;}
	
	.strubs IMG{
		margin-left: 20%;
		margin-top: 4%;
		margin-bottom: -20px;
		display: block;
	}
	.strubs h2{
		font-family: Rockwell, 'Arvo', serif;
		padding-top: 40px!important;
		font-size: 58px!important;
		text-align: center;
		color: #fff;
		text-shadow: 0px 3px 3px #333!important;
	}
	.marginhundred{
		padding-top: 100px;
		}
	.marginfifty{
		padding-top: 50px;
		}
	.our-story-1{
		background: url(../i/people-1.jpg) 0px -10px no-repeat;
		height: 530px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
	}
	.our-story-2{
		background: url(../i/our-story-2.jpg) 0px 60px no-repeat;
		height: 430px;
		background-size: cover;
		 -ms-behavior: url(../js/backgroundsize.min.htc);
	}
	.placeholder, .placeholder2{
		background: url(../i/people.png) 0px 0px no-repeat;
		height: 330px;
		background-size: cover;
	}
	 .placeholder2{
	 	background: url(../i/people2.png) 50px 0px no-repeat;
	 }
	 
	 .bqstart {
     float: left;
     height: 45px;
     margin-top: -30px;
     padding-top: 45px;
     margin-bottom: -50px;
     font-size: 500%;
     padding-right: 20px;
     margin-left: -30px;
     color: #ccc;
          font-family: serif;
     font-style: normal;

 }

 .bqend {
     float: right;
     height: 25px;
     margin-top: -10px;
     padding-top: 45px;
     margin-right: 0px;
     font-size: 500%;
     color: #ccc;
     font-family: serif;
     font-style: normal;
 }
	.quote{
		font-style: italic;
		font-size: 1.15em;
		line-height: 1.25em;
		color: #536478;
		padding-left: 20px;
		margin-top: 30px!important;
	}
	.stat{
		font-family: Rockwell, 'Arvo', serif;
		font-size: 1.15em;
		line-height: 1.25em;
		color: #536478;
		padding-bottom: 15px!important;
		padding-top: 15px!important;
		padding-left: 20px;
	border-left: 6px solid #ededed;
	}

	.wearewhytes H2{
		padding-top: 100px;
	
	}
	.ruler{
	padding: 50px 0px;
	border-top: 1px solid #ededed; 
	
	}
	
	
	.details {
		padding-bottom: 50px;
		background: #fff url(../i/lower-part-bg.jpg) center 0px no-repeat;
		
	}

	.details P	{
		color: #344860;
		font-size: 1em;
		line-height: 1.4em;
	}	
	.details h3 {
		font-size: 17px;
		font-family: Rockwell, 'Arvo', serif;
	}	
	.recipies, .promo, .product-hl{ 
		border: 1px solid #ededed;
		height: 500px;
	}
	.promo{
		background-image: url(../i/whytes-people.jpg);
		background-repeat: no-repeat;
		background-position: -30px -75px;
	}
	.greencol, .greencol2, .bluecol, .orangecol{
		background: #fff;/* IE hax */
		border: 1px solid #c6e8ab;
		background: rgba(236,240,241, .9);
		width: 308px!important;
		height: 273px;
		margin-top: 50px;
		padding: 15px 20px;
	}
	.greencol2{
		background: rgba(236,240,241, .9);
	}

	.greencol H2, .greencol2 h2,.bluecol H2, .orangecol H2{
		font-size: 28px;
		line-height: 36px;
		padding-top: 20px;
	}
	.greencol H2, .greencol2 h2,.bluecol H2, .orangecol H2{
		font-size: 28px;
		line-height: 36px;
		padding-top: 20px;
	}

	.bluecol{
		background: rgba(234,244,252, .9);
		border: 1px solid #bcdefb;
	}
	.greencol H2, 	.greencol H2 A{
		color: #22a284;
	}
	.bluecol H2, .bluecol H2 A{
		color: #267ec0;
	}
	.orangecol H2, 	.orangecol H2 A{
		color: #d15700;
	}
	.orangecol{
		background: rgba(252,242,229, .9);
		border: 1px solid #fddfc9;
	}
	.strubs-bg{
		background: #fff url(../i/strubs-bg-front.png) no-repeat left bottom;
		filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
    	);
    	background-color: rgba(236,240,241, .9)!important ;
		
	}
	.strubs-bg h2, .strubs-bg P{
		margin-left: 120px;
	}
	.we-are-bg{
		background: #fff url(../i/we-are-bg-front.png) no-repeat right bottom;
		filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
    	);
    	background-color:   rgba(234,244,252, .9)!important;
	}	
	.we-are-bg h2, .we-are-bg P,  .mrs-bg h2, .mrs-bg p{
		margin-right: 110px;
	}
	.mrs-bg{
		background: #fff url(../i/mrs-whytes-bg-front.png) no-repeat right bottom;
		filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
    	);
    	background-color: rgba(252,242,229, .9)!important;
	}	

	.promo h2{
		font-size: 34px;
		line-height: 43px;
		font-weight: 800;
		letter-spacing: -1px;
		color: rgb(81,120,23);
		margin: 0px 0px 30px 0px;
		padding:40px 170px 0px 20px;
		text-shadow: 0px 1px 0px #fff;
	}
	
	.copyright P{	
		color: #fff;
		font-size: 14px;
		}
	.copyright a {
	  display: inline-block;	color: #fff; margin: 0.5rem 1rem 0 0; font-size: 14px;
	}
	.copyright a:hover { text-decoration: underline; }

	@media screen and (max-width: 750px) {
		.copyright a { display: block; }
	}

	.barrel{
		top: 40px; 
		position: relative;
	}
	.of{
		overflow: inherit;
		position: absolute; 
	}
	.pickel{
		margin-top: 40px;
	}
	.marginminus{
		margin-bottom: -300px;
	}
	.margfifty{
	margin-top: 47px;
	}
	.mk{
		margin-top: 0px!important;
		margin-left: 90px!important;
	}
	.relish{
		margin-top: -200px!important;
		margin-left: 220px!important;
	}
	.morethan{
		margin-right: 90px;
	}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 965px) and (orientation: landscape) {

	.strubs-big-bg{
		background: url(../i/strubs-jar.jpg) 24em 80em no-repeat;
		background-size: 40%;
		}

	.intro h2  {
	margin-top: -100px;
	
	}
	.industry h2{
		margin-top: 0px;
		
	}
	.wearewhytes{
		background-repeat: repeat-x;	
		background-position: -600px;
	}
	.wearewhytes h2{
	font-size: 1.3em;
	margin-right: 120px;
	margin-top: -30px;
	}

	h2.mrswhytes{
		font-size: 3em!important;
		line-height: 0.8em!important;
	}


	.coronation h2{
	margin-top: -200px;
	}
	.coronation{
	padding-bottom: 100px;
	}
	.strubs h2{
	line-height: 55px;
	}
		.contact{
		background: #a7a6ae url(../i/contact-bg.jpg) 0px 0px no-repeat;
		height: 380px;
		background-size: cover;
	}


	.saroli h2{
	padding-right: 0px;
	margin-right: 0px;
	margin-top: -180px;
	font-size: 40px!important;
	line-height: 38px!important;
	margin-left: 0px;
	}
}


@media handheld, only screen and (max-width: 767px) and (orientation: portrait) {

html
{font-size: 0.75em;
} 
	body {
		margin-bottom: 30px;
		}
	P{
	font-size: 1.4em!important;
	}
	.contact-locale UL{
	top: -60px;
	list-style-type: disc;
	margin-right: 0px;

	}
	.contact-locale LI{
	display: block;
	font-size: 20px;
	}
	.contact-locale UL>LI:first-child	{
	border-right: none!important;
	}
	#home {
	
	background-image: none;
	}
	#home h2{
		font-size: 40px;
		line-height: 38px;
	}
	.intro {
		height: auto;
		background-repeat: repeat-x;
		height: 300px;
	}
	.mainimage{
		background-position: -290px;
		background-size: cover;
	}
	.social {
		position: inherit;
		width: 100%;
	}
		.industry h2{
		margin-top: 160px;
		
	}

	.recipies, .promo, .product-hl{
		height: auto;
	}
	.intro {
		padding-bottom: 20px;
		font-size: 1.1em;
		line-height: 26px;
	}
	.intro h2{
		padding-top: 15px;
		margin-left: 0px;
		margin-right: 20px;
	}
	.intro P{
		margin-top: 20px;
		margin-left: 0px;
		padding-right: 60px;
		margin-right: 0px!important;
		color: #222;
	}
	h2.mrswhytes{
		font-size: 6em!important;
		line-height: 0.8em!important;
	}
		.strubs-big-bg{
		background: none;
		}

	.wearewhytes{
	height: 30%;
	}

	.wearewhytes h3{
	font-size:24px; 
	margin-left: 0px;
	padding-right: 80px;
	}
	.wearewhytes h2{
	font-size: 2.9em;
	}

	.marginhundred{
		margin-top: -50px;
	}
	.coronation  h2{
	font-size: 2.5em;
	margin-top: -40px;
	margin-left: 10px;
	}


	.strubs h2{
	font-size: 4em!important;
	line-height: 1em;
	margin-top: -20px;	
	}
	.strubs IMG{
	margin-left: auto;
	margin-right: auto;
	max-width: 180px;
	}
	.saroli h2{
	margin-top: 20px;
	font-size: 40px!important;
	line-height: 38px;
	}
	.saroli IMG{
	margin-left: auto;
	margin-right: auto;
	max-width: 150px;

	}
	.contact{
		background: #a7a6ae url(../i/contact-bg.jpg) no-repeat;
		height: 380px;
		background-size: cover;
	}
	.details {
		padding-top: 25px;
		padding-bottom: 20px;
	}
	
	.details P	{
		font-size: 1.4em;
		line-height: 1.4em;
	}	
	.details h2	{
		line-height: 1.2em;
	}	
	.markup {
		padding-top: 55px;
	}
	.fb, twitter {
		float: left;
	}
	
	.introcopy {
		clear: both;
	}
	
	.header .logo {
		margin: 0 auto;
	}
	
	#download {
		display: none;
	}
	
	#resize, .columns {
		display: none;
	}
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

	.header .logo {
		background: url(../i/logo.png) no-repeat;
	}

}