html{ background-color: #f2580e }

.clearfix:after, #sections:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


/*-----------------------------/
/------ Recipe Styles --------/
/---------------------------*/

.recipeInfo {
	float: left;
	color: #fff;
	width: 100%;
	height: auto;
	margin-bottom: 40px;

}

.recipeBottle { 
	float: left;
	position: relative;
	margin-left: -20px;
	/*	border: dashed #000 1px; */
}

.recipeCard, .recipeCardLRG{
	float: left;
	background: url("../img/backgrounds/recipeCard.png") no-repeat;	
	background-size: cover;
	width: 72%;
	max-height: 100%;
	max-width:797px;
}

.recipeDets p { 
	border-top: 1px solid;
	border-top-color: rgba(255, 255, 255, 0.7);
	border-bottom: 0px solid;
	padding: 5px;
	margin: 0;
	border-bottom-color: rgba(255, 255, 255, 0.7);
}

.recipeDets {
	width: 100%;
	padding: 20px 40px; 
}

.recipeHeader {
	font-size: 32px;
	color: white;
	text-align: center !important;
	font-family: 'intro_boldregular';	
	/*float:left;*/
	/* margin-left: -40px; */
	margin-top: 20px;

}
.serving {
	font-size: 16px;
	font-family: arial;
}

.ingredientsCol, .directionsCol {
	float: left;
	width: 40%;
	margin-top: 20px;
	margin-bottom: 40px;
	margin-right: 20px;
	color: #fff;
	font-size: 14px;
}
.ingredientsCol {
	clear:both;
}

.directionsCol {
}

#recipesWrapper {
	background: url('../img/backgrounds/recipesInnerPage.jpg') top center fixed no-repeat;
	/*background-position: fixed;*/
	padding-top: 84px;
	float: left;
    margin-top: 89px;
    padding-top: 0px;
    width: 100% !important;
}

.productTitle { 
	background: url('../img/backgrounds/recipe_splash.png') top center scroll no-repeat;
	font-size: 65px;
	text-align: center;
	padding-top: 200px; 
}

.productTitle img{
	position: relative;
	left: -30px;
	top: -27px;
}

.book_icon {
	margin-top: 50px;
}

.productTitle p {
	font: normal 17px Arial, Helvetica, sans-serif;
	color: #ffffff;
	text-shadow: none;
	margin-top: 20px;
}

.bluebutton, .orangeButton {
	font-size: 90%;
	color: white;
	text-decoration: none;
	padding:  10px 15px;
	font-weight: bold;
	font-family: arial;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px; 
}

.orangeButton { 
	background: #fd7f00;
 }

.orangeButton:hover { 
	background: #db5015;
}	

#sections {
	width: 75%;
	height: auto;
	margin: 0 auto;
}

.flavorTitle {
	margin: 100px auto;
	width: 100%;
	height: 50px;
	display: table;
	text-align: center;
}

.flavorHeader, .flavorTitle {
	font-size: 40px;
	color: white;
	font-family: 'intro_boldregular';	
}


hr {
	background: #ffffff;
	height: 6px;
	width: 25%;
	float: left;
	margin-top: 25px;
}

hr.longWord { width:25%; }

.leftHR {
	margin-left: 100px;
}

.rightHR, .rightHR_short {
	float:right;
	margin-right: 100px;
}

.container_flavor { 
	width:100%;
	height:auto;
	margin:0 auto;
	max-width:100%;
	min-width: 50%;
	/*	border: dashed #000 1px; */
}

.recipeBottle { 
	float: left;
	position: relative;
	top: -100px;
	opacity:0;
	width:28%;
	/*
    max-width: 278px;
	min-width: 130px;
    */
	/*	border: dashed #000 1px; */
}

#scrollDown {
	width: 118px;
	margin: 0 auto; 
	margin-bottom: -90px;
	margin-top: 30px;
}	

.recipeBottle img {
	width:100%;
}

.splashBottle{ 
	float: left;
	position: relative;
	margin-left: -277px;
	top: -42px;	
	opacity:0;
	/*	border: dashed #000 1px; */
}

.backtop { 
	bottom:50px; 
	right:50px; 
	position:fixed; 
	z-index: 9999;
}

.recipeBottleLRG {
	float: left;
	position: relative;
	top: 0px;
	opacity:0;
	width:35%;
	max-width: 340px;
	min-width: 130px;	
	margin-left: -70px;
	/*border: dashed #fff 1px; 	*/
}

.recipeBottleLRG img {
	width:100%;
}

.bottleInfo, .bottleInfoLRG {
	float: left;
	color: #fff;
	width: 60%;
	margin-bottom: 40px;
	max-width: 60%;
	min-width: 30%;
}

.bottleInfo, .bottleInfo p, .bottleInfoLRG p{
	margin-bottom:40px;
}

.flavorHeader {
	float:left;
	margin-top: 20px;
	margin-bottom: 20px;
	width:100%;
}

.bottleInfo img, .bottleInfoLRG img{
	width: 100%;
	max-width: 739px;
	min-width: 400px;
}

.sizeDesk {
	display: block;
}

.sizeMob {
	display: none;
}

.dividerHR {
	background: #ffffff;
	height: 1px;
	width: 100%;
	float: left;
	margin-top: 25px;
	margin-bottom: 60px;
}

.clear { clear: both;}

#flavorsWrapper {
	background: url('../img/backgrounds/flavorInnerPage_BG.jpg') repeat-x top center fixed;
}

/*------------------------------------------------------------------------------*/

/* Large screens */
@media only screen and (min-width : 1824px) {

	hr { width: 30%; }

}

/* Laptops */
@media only screen and (min-width : 1025px) and (max-width : 1600px)  {

	hr { width: 25%; }
	hr.longWord { width:20%; }

}

/* iPads (landscape) */
@media all and (min-width: 768px) and (max-width: 1024px){	
	
	hr { width: 20%; }
	hr.longWord { width:10%; }

	.productTitle {
		font-size: 50px;	
	}		

	.recipeHeader {
		font-size: 28px;
	}
	
	.recipeDets {
		padding: 20px 25px;
	}

	.recipeBottleLRG {
		float: left;
		position: relative;
		top: 0px;
		opacity:1;
		width:30%;
		max-width: 400px;
		min-width: 130px;	
		margin-left: -70px;
		/*border: dashed #fff 1px; 	*/
	}

	.recipeBottleLRG img {
		width:150%;
	}

	.recipeCardLRG{
		float: right;
		max-height: 100%;
		max-width:797px;
	}
	
}

/* iPads (portrait) */
@media all and (min-width: 768px) and (max-width: 1024px){
	
	hr { width: 20%; }

	.productTitle {
		font-size: 60px;
		line-height: 1.2;	
	}
	
	.flavorTitle {
		font-size: 30px;
	}

	.recipeHeader {
		font-size: 28px;
	}
	
	.recipeDets {
		padding: 20px 25px;
	}
	
	.productTitle p{
		font-size: 16px;
		line-height: 1.4;	
	}

	.recipeCard, .recipeCardLRG {
		background: #0a60ac;	
	}					
}

/* phones */
@media all and (max-width : 767px) {  

	#recipesWrapper {
	background: url('../img/backgrounds/recipes-mobile-bg.jpg') top center scroll no-repeat;
	background-size: 100%;
	margin-top: 68px !important;
	padding-top: 150px !important;
}

	#flavorsWrapper {
		background: url('../img/backgrounds/flavorInnerPageMOB_BG.png') repeat-x top fixed;
	}

	.productTitle {
		font-size: 30px;
		padding-top: 20px; 
		background: none;		
	}	

	.productTitle .book_icon{width: 50px}
	.productTitle span.title {
		font-size: 25px;
		top: -18px
	}
	
	.productTitle img{
		left: -5px;
		top: 0px;
	}

	#sections {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.container_flavor { 
		margin-top: -40px;
	}	

	.bluebutton, .orangeButton {
	font-size: 80%;
	color: white;
	text-decoration: none;
	padding:  5px 10px;
	font-weight: bold;
	font-family: arial;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px; 
	}

	hr {
		height: 3px;
		width: 17%;
		margin-top: 15px;
	}

	.leftHR {
		margin-left: 10px;
	}

	.rightHR {
		float:right;
		margin-right: 10px;
	}

	.dividerHR {
		background: #ffffff;
		height: 1px;
		width: 90%;
		float: left;
		margin-top: 25px;
		margin-left: 15px;
		margin-bottom: 60px;
	}

	.flavorHeader{
		font-size: 20px;
	}

	.flavorTitle {
		font-size: 20px;
		margin-top: 120px;
		margin-bottom: 40px;
	}
	.recipeBottle, .recipeBottleLRG { 
		float: left;
		opacity: 0;
		max-width: 130px;
		min-width: 102px; 
		/*	border: dashed #000 1px; */
	}

	.recipeBottle img {
		margin-left: 10px;		
		width:100%;
	}

	 .recipeBottleLRG img{	
		margin-left: 40px;
		width:120%;
	}


	#topOpt { 
		display: none;
	}


	.bottleInfoLRG {
		float: left;
		color: #fff;
		width: 50%;
		margin-left:85px;
		margin-bottom: 40px;
		font-size: 14px;
		line-height: 1.2;
/*		border: dashed #f00 1px;	*/
	}
	
	.recipeHeader {
		font-size: 20px;
		margin-top: 5px;
		/* margin-left:-30px; */
		/* width: 100%; */
	}

	.recipeDets {
		padding: 0;
		padding-top: 10px;
		padding-left: 20px;
		width: auto !important;
	}
	

	.ingredientsCol {
		margin-right: 10px;
	}
	
	.recipeCard, .recipeCardLRG {
		position: relative;
		left: -5px;
		float: right;
		background: #0a60ac;	
	}
	
	.recipeCardLRG	{
		width:220px;
	}

	.sizeDesk {
		display: none;
	}

	.sizeMob {
		display: block;
		margin-left: 15px;
	}	

	.bottleInfo, .bottleInfoLRG {
		margin-bottom: 20px;
	}

	.ingredientsCol, .directionsCol {
		float: left;
		width: 80%;
		margin-top: 10px;
		margin-bottom: 10px;
		color: #fff;
		font-size: 14px;
	}
	.directionsCol {
		clear:both;
	}	

	.backtop {
		display: none;
	}

}