/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
	background: #ccc;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body{
	background: url(../images/bg.jpg) repeat-x #e9e2d2;/* 1250 1177 */
	font-family: 'Orienta', sans-serif;
	font-size: 100%;
	color: #523535;
}

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

.pageWrap{
	position: relative;
	width: 1010px;
	margin: 0 auto;	
}

h3{
	font-size: 1.125em; /* 18 / 16*/
	line-height: 1em;
	margin: 0;
	padding: 0;
	font-weight: bold;
}
p{
	margin: 0; padding: 0; border: 0;
	font-size: 0.875em;
	line-height: 1.1em;
}

ul{
	list-style: none;
	margin: 0; padding: 0; border: 0;	
}


/*
 ############# Navigation ###############
*/

.logoSmall{
	float: left;
	margin-left: 80px;	
}

.mainNav{
	width: 684px;
	height: 48px;
	background: url(../images/nav/navBG.png) no-repeat;		
	float: right;
	clear:	right;
	margin-top: 15px;
	margin-right: 25px;	
}

.mainNavProducts{
	margin-right: 50px;	
}
	.mainNav1st{
		margin: 10px 0 0 140px;	
	}

	.mainNav1st > li{
		float: left;
		margin: 0 2px;	
		text-transform: uppercase;
		font-size: 1.3em; /* 22 / 16 */
		font-weight: bold;
		color: white;
		text-shadow: 2px 2px 2px #000;
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
		
	}
		.mainNav1st > li:before{
			content: "- ";	
		}
		.mainNav1st > li:first-child:before{
			content: " ";	
		}
	.mainNav1st li a{
		color: white;
		text-decoration: none;	
	}
	.mainNav1st li a:hover{
		color: #72c91e;
		text-decoration: none;	
	}	
	.mainNav1st li .active{ color: #72c91e;}
		
		.mainNav2nd{			
			position:absolute;
			z-index: 200;
			margin: 0; padding: 0; border: 0;
			margin-top: 9px;
			width: 105px;		
			box-shadow: 1px 2px 3px #000;	
			box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.7);			
			background: #74b126;
			background: rgba(116,177,38, 0.9);	
		}
			
			.mainNav2nd li{
				margin: 0; padding: 0; border: 0;
				float: left;
				width: 105px;
				height: 25px;
				padding-bottom: 10px;
				display: block;			
			}
				.mainNav2nd li a{
					font-size: 0.65em; /* 18 / 22 */
					color: #fff;
					text-transform:capitalize;
					font-weight: normal;
					margin-left: 10px;
					text-shadow: 2px 2px 2px #000;
					text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
				}
					.mainNav2nd li a:hover{
						color: #fff;
						font-weight: bold;
					}
					
/*
	########## home ###########
*/

.homeSideMenu{
	position: relative;
	float: left;
	width: 290px;
	margin-top: 0;
	clear: left;
}
	.homeSideMenu ul li{
		margin-top: -5px;
		list-style: none;	
	}
	
	.homeSideMenu ul li:first-child{
		margin-top: 0;	
	}
	.homeSideMenu ul li:nth-child(3){
		margin-left: 10px;	
	}
.homeVideo{
	width: 714px;
	height: 573px;
	display: block;	
	float: right;
	margin-top: -550px;
	margin-left: 30px;
	clear: both;	
}
#homeSlogan{
	position: absolute;
	margin-left: 175px;	
	margin-top: -20px;
	z-index: 101;
}
#frameLeft, #frameRight, #frameTop, #frameBottom{
	position: absolute;	
	z-index: 100;
}
#frameTop{
	margin-left: 84px;		
}
#frameRight{
	margin-left: 626px;	
}
#frameBottom{
	margin-top: 454px;	
	margin-left: 84px;
}
#videoAdvert{
	position: relative;
	margin-left: 64px;
	margin-top: 67px;
	z-index: 0;
}
.videoText{
	height: 120px;
	width: 600px;
	display: block;
	background: #fbf6ef;
	margin-left: 60px;	
	margin-top: -10px;
	padding-top: 10px;
}
	.videoText h3{
		margin-left: 20px;
		margin-top: 2px;	
		width: 550px;
		text-align: left;
	}

	.videoText p{
		font-size: 0.875em; /* 14px;	*/
		width: 550px;
		margin-left: 20px;
	}

/*
	########## mini Articles ###########
*/

.noStyle{
	margin: 0; padding: 0; border: 0;	
	font-size:1em;
	color: #523535;
}

.miniArticles{
	position: relative;
	clear: both;	
}
	.miniArticles ul{
		clear: both;	
		margin-left: 22px;
	}
		.miniArticles ul li{
			float: left;
			width: 335px;
			height: 170px;
			cursor: pointer;
		}
		.miniArticles ul li > img{
			float: left;	
		}
		.miniArticles ul li h3{
			margin-top: 20px;
		}
		.miniArticles ul li p{
			font-size: 0.75em; /* 12px  */	
			width: 300px;
		}
		
			.miniArticles ul li:first-child{
				background: url(../images/home/box1.png) no-repeat;
			}
				.miniArticles ul li:first-child > img{
					margin-left: 20px;
					margin-top: 25px;
					margin-right: 6px;
				}
			.miniArticles ul li:nth-child(2){
				background: url(../images/home/box2.png) no-repeat;
				margin-left: -23px;
				margin-right: 5px;
				margin-top: 5px;
			}
				.miniArticles ul li:nth-child(2) > img{
					margin-left: 25px;
					margin-top: 25px;
					margin-right: 0px;
				}
				.miniArticles ul li:nth-child(2) h3{
					margin-top: 15px;
				}
				.miniArticles ul li:nth-child(2) p{
					width: 310px;
				}
			.miniArticles ul li:last-child{
				margin: 0;	
				background: url(../images/home/box3.png) no-repeat;
			}
				.miniArticles ul li:last-child > img{
					margin-left: 10px;
					margin-top: -10px;
				}
				.miniArticles ul li:last-child p{
					width: 280px;
				}
			.miniRolomex3{
				padding-top: 30px;	
			}
	
/*
	########### Social Media #######
*/

		
.socialMediaPlank{
	position: relative;
	width: 930;
	height: 206px;
	display: block;
	background: url(../images/common/facebookFooter.png) no-repeat;	
	margin-left: 35px;
	clear: both;
}
	.socialLeft{
		float: left;
		clear: both;	
		margin-top: 140px;
		margin-left: 20px;
	}
		#youtube{ margin-left: 10px;}
	.socialRight{
		position: absolute;
		margin-left: 760px;
		margin-top: 20px;
	}
		.footer-fb-like{
		margin-top: 30px;	
		margin-left: 10px;
		color: #fff;
	}
	
	.facebookLogoText{
		float: right;
		margin-right: 80px;	
		margin-top: 30px;
	}

	#kankunFBImg{
		float: left;
		margin-top: 30px;	
		margin-left: 10px;	
	}
/*
	########### Footer #######
*/
.mainFooter{
	position: relative;
	width: 100%;	
	min-width: 920px;
	display: block;	
}
	.mainFooter > nav{
		width: 560px;
		margin: 0 auto;	
		clear: both;
	}
		.mainFooter > nav ul{
			display: block;
			clear: left;
		}
		.mainFooter > nav ul li{			
			float: left;	
			magin: 0;
			margin-right: 20px;	
			display: block;
		}
		.mainFooter > nav ul li:last-child{
			margin-right: 0;
		}
		.mainFooter > nav ul li a{
			color: #523535;
			text-transform: uppercase;
			font-weight: bold;
		}
		.mainFooter > nav p{
			text-align: center;
			font-size: 0.75em;
			line-height: 2.5em;
			margin-top: 15px;
		}
	#cancunTemple{ position: absolute; margin-top: -120px; z-index: -100;}

.rolomexFooter{
	position: relative;
	width: 100%;
	min-width: 1010px;
	height: 150px;
	background: #000;
	display: block;	
	clear: both;
}
.footerWrap{
	width: 920px;
	padding-top: 20px;
	margin: 0 auto;	
	clear: both;
}
	#rolomexFooterLogo{
		float: left;	
	}
	#footerCopy{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px; color: #fff;
		float: left;
		width: 415px;
		margin: 0;padding:0;
		margin-left: 50px;
	}
	#newsletterDiv{
		float: right;
		width: 300px;		
	}
		.newsletterLeft{
			float: left;
		}		
			.newsletterTitle{
				margin: 0; padding: 0;
				font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #fff;	
			}			
		.newsletterRight{ margin-left: 20px; float: left; width: 200px;}
			#newsletterForm{ float: left;}
				#newsletterForm input { width: 200px; background: #c6c6c6; margin-bottom: 10px; border: none; font-family: Arial, Helvetica, sans-serif; 
				font-size: 12px; padding: 2px;
				}
				#newsletterSubmit{ width: 96px; border: 1px solid #fff; clear: both; cursor: pointer;}					
					#newsletterSubmit p{ font-size: 11px; color: #fff; font-family: Arial, Helvetica, sans-serif; text-align: center; padding-top: 3px; 
					background: #000; margin: 0;}
						#newsletterSubmit p:hover{ background: #fff; color: #000;}
		.newsletterError{ margin: 0; margin-right: 20px; padding: 0; padding-top: 10px; clear: both;
				font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #ff0000; text-align: right;	
			}
/*
	########### Products #######
*/	

.ourProductsContent{
	clear: both;
	width: 972px; height: 613px;	
	padding-bottom: 20px;
	background: url(../images/products/ourProductsContentBG.png) no-repeat;
	display: block;
}

	.productsLeftMain{
		width: 560px;	
		float: left;
	}
	
		#ourProducts{
			margin: 45px 0 0 45px;
		}
		#ourProductsSub{
			font-size: 18px;
			color: #e61f1f;
			margin-left: 45px;
			margin-top: 10px;
			font-weight: bold;
		}
		#ourProductsSubSub{
			font-size: 17px;
			margin-left: 45px;
			margin-top: 10px;
			font-weight: bold;	
		}
		.productsLeftMain p{
			font-size: 12px;
			margin-left: 45px;	
		}
		#rangeOfUses{
			margin-left: 30px;	
			margin-top: 10px;
		}
	.productsRightMain{
		float: left;
		width: 390px;	
		margin-top: 60px;
	}
		#ourProductsMild{
			margin-left: 10px;	
		}
		.productBtns{
			margin-top: -15px;	
		}
		#ourProductsBtnHot{ clear: both;}
	
	.productsBottomMain{
		clear: both;	
	}	
	#ourProductsWhereToBuy{
		margin-left: 45px;
		margin-top: 35px;
		float: left;
		cursor: pointer;
	}
		
	.whereToBuyPopProducts{
		position: absolute;
		background: url(../images/products/popUpBG.png)	no-repeat;
		cursor: pointer;
		width: 520px;
		height: 313px;
		display: block;
		margin-top: -250px;
		margin-left: 100px;
		display: none;
		z-index: 2;
	}
		.whereToBuyPopProducts h3{
			margin-left: 5%;	
			margin-top: 5%;
			font-weight: bold;
		}
		.whereToBuyPopProducts a{
			color: 	#523535;
			text-decoration: underline;
		}
		.whereToBuyList{
			margin-left: 5%;
			width: 87%;	
			margin-top: 2%;
			height: 130px;	
			overflow: auto;
		}
		.whereToBuyList table{	
			width: 100%;		
			font-size: 0.875em;
		}
			.whereToBuyList table td{
				width: 50%;	
			}
				.whereToBuyList table .odd{
					background: #fff;
					background: rgba(255,255,255, 0.4);
				}
		.whereToBuyPopProducts p{
			margin-left: 5%;
			margin-right: 5%;
			width: 90%;	
		}
	
	#ourFormula{
		float: left;	
		margin-top: 25px;
		margin-left: 20px;
	}

/*
	########### Products Hot Medium Mild #######
*/	

.productsContent{
	clear: both;
	width: 972px; height: 559px;	
	padding-bottom: 20px;
	background: url(../images/products/contentBG.png) no-repeat;
	display: block;
}

.productsLeft{
	float: left;
	clear: left;	
	width: 220px;
	margin: 25px 0 0 45px;
}
	.backToProducts{
		color: 	#523535; font-size: 14px;
	}
	.productChilliTitle{
		float: left;
		clear: right;
	}
	
	.productChilliBottle{	
		float: left;
		margin-left: 45px;
	}

.productsRight{
	float: right;
	clear: right;	
	margin: 45px 30px 0 0;
	width: 670px;
}

	.productHeadline{	
		clear: both;
		margin-bottom: 10px;
	}

	.productsRight p{
		font-size: 14px; margin-bottom: 10px;
	}
	
	.productsRight p .redText{
		color: #e61f1f;	
		font-size: 17px;
		font-weight: bold;
	}
	.redTextMild{
		font-size: 16px;
		color: #e61f1f;			
		font-weight: bold;	
	}
	.smallTitle{ font-size: 14px; font-weight: bold; text-transform: uppercase;}
	.productsRight .font12{ font-size: 12px;}
	
	.ladiesWillLoveIt{ float: right; margin-top: -20px;}
	
	.tableImages{ float: left; width: 190px;}
		.whereToBuy{ float: left; margin-left: 5px; margin-top: 5px; cursor: pointer;}
		.madeWithLove{ float: left; clear: both; margin-top: 22px;}
	
	.nutritionTable{
		width: 463px;
		font-size: 12px;
		color: #523535;
		border: 2px solid #e4d7cd;
	}
		.nutritionTable thead tr td{
			background: #ccc58f;
			text-align: center;	
			font-weight: bold;
			border: 3px solid #523535;
			padding: 0;
		}
		
		.nutritionTable tr td{
			border: 3px solid #523535;	
			padding-left: 15px;
		}
		
		.nutritionTable .even{
			background: #e4d7cd;
		}
.whereToBuyPop{
	position: absolute;
	background: url(../images/products/popUpBG.png)	no-repeat;
	cursor: pointer;
	width: 520px;
	height: 313px;
	display: block;
	margin-top: -285px;
	margin-left: 65px;
	display: none;
	z-index: 2;
}
	.whereToBuyPop h3{
		margin-left: 5%;	
		margin-top: 5%;
		font-weight: bold;
	}
	.whereToBuyPop a{
			color: 	#523535;
			text-decoration: underline;
		}
	.whereToBuyPop p{
			margin-left: 5%;
			margin-right: 5%;
			width: 90%;	
		}

/*
	########### Story Styles #######
*/
.submitBtn{
	background: url(../images/story/submitBtn.png)	no-repeat; display:block; width: 114px; height: 39px;
}

.storyLeft{
	width: 335px; margin-left: 30px; margin-top: 40px; float: left;
}
	.storyTitle{ margin-left: 20px; margin-top: 10px;}
	.storyChipotleBlurb{ font-size: 13px; margin-left: 20px; margin-top: 10px; width: 300px;}
	.storyRolomexBlurb{ font-size: 13px; margin-left: 20px; margin-top: 10px; width: 300px;}
		.storyRolomexBlurb .pTitle{ font-size: 14px;}
	
	.storyLuchaBlurb{ font-size: 13px; margin-left: 20px; padding-top: 25px; padding-bottom: 10px; width: 240px;}
	.storyWrestler{ position: relative; margin-top: -133px; margin-left: 230px; float: right; }
	
	.storyLeft h4{ margin: 10px 0 5px 20px; font-size: 14px;}
	.p13{ font-size: 12px;}
	.pStoryLeft{ margin-left: 20px; margin-bottom: 10px; width: 300px;}
		
	.pTitle{ font-size: 14px; font-weight: bold;}
	.chiptoleLearnMoreDiv{ background:url(../images/story/chipotleLearnBG.png) no-repeat; width: 286px; height: 181px; display: block; 
		margin-top: 15px; margin-left: 20px;}
		.chipotleLearnMore{ color: 	#523535; font-size: 14px; float: left; margin-top: 150px; margin-left: 30px;}
			.redLink{ text-decoration: underline; color: #c1524d; }
	.learnMorePop{
		position: absolute;
		background: url(../images/products/popUpBG.png)	no-repeat;
		cursor: pointer;
		width: 520px;
		height: 313px;
		display: none;
		margin-top: -315px;
		margin-left: 20px;
		z-index: 2;
	}
		.learnMorePop h3{
			margin-left: 5%;	
			margin-top: 5%;
			font-weight: bold;
		}
		.learnMorePop p{
			margin-left: 5%;
			margin-right: 5%;
			margin-top: 5px;
			font-size: 11px;
			width: 90%;	
		}
		
	#nameGeneratorDiv{
		background: url(../images/story/nameGeneratorBG.png) no-repeat; width: 305px; height: 214px; display: block;
		margin-left: 10px; float: left; margin-top: -20px; clear: right; position: relative;
	}
		#theName{ position: absolute; left: 47px; top: 70px; width:200px; text-align: center; font-family: 'Orienta', sans-serif; color: #523535;}
		#nameSubmit{ position: relative; margin: 100px auto 0 auto;}
		 .resultCopy{ width: 275px; margin: 0 auto; text-align:center; color: #fbf6ef; font-size: 12px;}
		 	.realName{ font-size: 14px; color: #fff; font-weight: bold;}
		.returnedName{ font-size: 22px; color: #e13535; font-weight: bold; text-align:center;}
			
.storyRight{
	float: left; width:	580px; margin-top: 45px;
}
	.slideContainer{ position: relative; clear:}
		.slideImages{ position: relative; width: 570px; height: 339px; overflow: hidden;} /*overflow: hidden;}*/		
			.slideImages img{ width: 570px; position: absolute; top:0; left:0;} 
		.slideControls{ background: #f4eee9; padding: 5px; border: 2px solid #d4c6a9; height: 15px; width: 60px; position: absolute; 
			margin-top: -30px; right: 10px;}
			.slideControls a{ width: 15px; height: 15px; display: block; background-image: url(../images/story/slideControlsCircle.png); 
				background-repeat: no-repeat; float: left; margin-left: 5px; opacity: 1;}
				.slideControls a:hover{ opacity : 0.7; }
				.slideControlActive{ background-position: 0 -15px; opacity: 1;}
.storyBottom{
	padding-top: 10px; clear: both; position: relative;
}
	.storyBottom p { width: 864px; margin: 0 auto; font-size: 12px;}
	.storyBottom .pRolomexBottom{ width: 600px; float: left; margin-left: 50px; margin-top: 15px;}
	.storyRolomexLogo{ clear: left; margin-left: 20px; margin-top: 15px;}
		.storyBottom .luchaFirstBottomP{ width: 270px; margin: 0; margin-left: 45px; float: left;}
		.storyBottom .luchaBottomP{ width: 320px; margin: 0; margin-left: 10px; float: left;}
		.storyBottom .luchaLastBottomP{ width: 280px; margin: 0; margin-left: 20px; float: left;}

.important{
	font-size: 1.2em;
	font-weight: bold;	
}
	
.luchaGuideCTA{ margin-top: 15px; margin-left: 35px; cursor: pointer; }
	.luchaGuide{ position: absolute;
		background: url(../images/story/popBgBig.png)	no-repeat;
		cursor: pointer;
		width: 700px;
		height: 403px;
		display: none;
		margin-top: -430px;
		margin-left: 230px;
		z-index: 2;
	}
		.luchaGuide h3{
			margin-left: 5%;	
			margin-top: 5%;
			font-weight: bold;
		}
		.luchaGuide p{
			margin-left: 5%;
			margin-right: 5%;
			margin-top: 5px;
			font-size: 11px;
			padding-right: 15px;
			width: 88%;	
			height: 240px;
			overflow: auto;
		}
		
/*
	########### Contact Styles #######
*/		

.contactContent{
	clear: both;
	width: 970px; height: 442px;	
	padding-bottom: 20px;
	background: url(../images/contact/contactContentBg.png) no-repeat;
	display: block;
}
	
.contactLeft{
	width: 450px;
	margin-left: 25px; padding-top: 40px; 
	float: left;
}
	.contactTitle{ margin-top: 10px; margin-left: 20px;}
	.contactFormDiv{ background: url(../images/contact/formBG.png) no-repeat; width: 420px; height: 332px; display: block; 
		margin-left: 20px; margin-top: 10px;
	}
		#contactForm{ width: 380px;}
		#contactName{ margin-top: 42px; margin-left: 30px; width: 340px; }
		#contactEmail{ margin-top: 22px; margin-left: 30px; width: 340px; }
		#contactMsg{ margin-top: 25px;  margin-left: 30px; width: 340px; height: 80px; }
		#contactNL{ margin-left: 30px; margin-top: 15px; float: left;}
		.signUpText { font-size: 11px; float: left; width: 300px; margin: 10px 0 0 10px;}
		.contactError{ margin-left: 30px; margin-top: 50px; width: 230px; color: #ff0000;  font-size: 12px; clear: left; position: absolute;}
		.contactSubmit{ float:right; clear: left; margin-right: 20px;}

.contactRight{
	float: left; width: 440px;	margin-top: 70px;
}
	.contactBlurbP{ font-size: 14px; }
		.contactPTitle{ font-size: 18px; font-weight: bold; }
.h3Red{ color: #e61f1f; margin-top: 20px;}
	.addressP{ margin-top: 10px; font-size: 12px; }
	
	
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}