body{
	margin: 0;
	padding: 0;
	height: 100%;
	-webkit-text-size-adjust: none;
	scroll: auto;	
	background-color: #fff;
	font-family: arial;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	color: #333;	
}


@font-face {
  font-family: "coalhandluke";
  src: url("CHL_AVON_CG.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}



.clear{
	display: block;
	clear: both;	
}
#pcontent{
	display: block;
	width: 100%;
	max-width: 960px;/* FULL PAGE */
	margin: 0 auto;
}

#countdown{
	display: block;
	width: 100%;
	background-color: #0bc9d9;
	padding-bottom: 10px;
	background-image: url("../img/countbg.png");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 40%;
	
}
.counttitle{
	display: block;
	padding: 10px;
	text-align: center;	
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 600;
}
.tblack{
	color: #333;
}
.twhite{
	color: #fff;
}

.maincounter{
	display: table;
	width: 100%;	
}
.ftb{
	display: table-cell;
	vertical-align: middle;	
}
.oferready{
	width: 20%;
	text-align: right;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #000;
	
}



.counttable{
	display: table;
	width: 100%;
	table-layout: auto;
	text-align: center;	
}
.ctb{
	display: table-cell;
	text-align: center;	
	vertical-align: middle;	
}
.lastctb{
	width: 10%;
}
.tval{
	display: table-cell;
	text-align: center;
	background-color: #484747;
	background-image: url("../img/countdigitsbg.jpg");
	background-position: top center;
	background-repeat: repeat-y;
	
	
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 40px;
	color: #fff;
	padding-top: 4px;
	padding-bottom: 4px;	
	padding-left: 6px;
	padding-right: 6px;
	
	
	
}
.ttext{
	display: table-cell;
	text-align: center;	
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #000;
	text-indent: 6px;
	vertical-align: middle;	
}



.topreadmore{
	display: block;
	text-align: right;
}
.topreadmore > a{
	dispaly: inline-block;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
	margin-right: 10px;
	padding-bottom: 20px;
}



.hero{
	display: block;
	background: #fac900;	
}
.hleft{
	display: block;
	width: 50%;
	float: left;
}
.hleft > img{
	display: block;
	width: 100%;
	max-width: 462px;
}
.hright{
	display: block;
	width: 50%;
	float: right;
	padding-bottom: 20px;
}
.hp_herro_title{
	display: block;
	padding: 10px;
	text-align: center;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 58px;
	font-weight: 600;
	color: #fff;
	line-height: 100%;
}
.hp_herro_text{
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 32px;
	font-weight: 300;
	color: #fff;
	line-height: 100%;
}
.shoptop{
	display: block;
	text-align: center;
	
}
.shoptop > .hp_herro_sptext{
	font-family: "coalhandluke", "Helvetica Neue", Helvetica, Arial, cursive;
	font-size: 32px;
	font-weight: 400;
	line-height: 100%;
	color: #000;
}
.shoptop > .hp_herro_price{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 100%;
	color: #000;
}
.shopnowcontainertop{
	display: block;
	text-align: center;
}
.shopnowcontainertop > .shopnowbut{
	display: inline-block;
	padding-left: 14px;
	padding-right: 14px;
	padding-top: 10px;
	padding-bottom: 8px;
	background: #000000;
	color: #fff;
	margin-top: 10px;
	margin-bottom: 10px;
	
	font-size: 16px;
	text-decoration: none;
}
.shopbottom{
	dispaly: block;
	text-align: center;
}
.shopbottom > .hp_herro_sptext{
	font-family: "coalhandluke", "Helvetica Neue", Helvetica, Arial, cursive;
	font-size: 16px;
	font-weight: 400;
	line-height: 100%;
	color: #000;
}
.shopbottom > .hp_herro_price{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 100%;
	color: #000;
}
.shopnowcontainerbottom{
	display: block;
	clear: both;
	
}
.shopnowcontainerbottom > .shopnowbut{
	display: none;
	width: 100%;
	padding-top: 18px;
	padding-bottom: 16px;
	background: #000000;
	color: #fff;
	margin-top: 10px;
	margin-bottom: 10px;
	
	font-size: 16px;
	text-decoration: none;
	text-align: center;
}


.hp_herro_box{
	display: block;
}
.hp_herro_box > img{
	display: block;
	margin: 0 auto;
	width: 50%;
	max-width: 215px;
}
.hp_link{
	display: inline-block;
	float: right;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 6px;
	padding-bottom: 8px;
	background: #372c00;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px; /* future proofing */
	-khtml-border-radius: 8px; /* for old Konqueror browsers */
	
}
.ptitle{
	display: block;
	padding-top: 20px;
	padding-bottom: 1px;
	font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
	font-size: 22px;
	font-style: italic;
	text-align: center;
}
.ptitleline{
	display: block;
	width: 85%;
	height: 1px;
	background: #000;
	margin: 6px auto 28px auto;
}

.steps{
	display: table;
	table-layout: fixed;
	min-height: 159px;
}
.stepitem{
	display: table-cell;
	width: 33%;
	padding: 20px;
	vertical-align: middle;
	height: 100%;
}
.stepone{
	background-image: url("../img/one.png");
	background-position: center center;
	background-repeat: no-repeat;
}
.steptwo{
	background-image: url("../img/two.png");
	background-position: center center;
	background-repeat: no-repeat;
}
.stepthree{
	background-image: url("../img/three.png");
	background-position: center center;
	background-repeat: no-repeat;
}
.steptext{
	display: block;
	padding: 10px;
	text-align: center;
	height: 100%;
}
.stepbtext{
	font-size: 14px;
	font-weight: 600;
}
.stepntext{
	font-size: 14px;
	font-weight: 200;
}











.slide{
	display: block;
}
.slideitem{
	display: block;
	
}
.slidetext{
	display: table;
	width: 100%;
	table-layout: fixed;
	height: 300px;
}
.slsmtext{
	display: table-cell;
	font-size: 13px;
	text-align: center;
	padding: 4px;
	vertical-align: bottom;
}
.sllgtext{
	display: none;
	font-size: 13px;
	text-align: center;
	padding: 4px;
	vertical-align: middle;
	background-image: url("../img/trans.png");
	
	padding-left: 30px;
	padding-right: 30px;
}
.sl01{
	background-image: url("../img/d01.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 95%; 
		
}
.sl01 .slcolor{
	color: #ba824b;
	font-weight: 600;
}
.sl02{
	background-image: url("../img/d02.jpg");
	background-position: center center;
	background-repeat: no-repeat;	
	background-size: 95%; 
}
.sl02 .slcolor{
	color: #cd1e91;
	font-weight: 600;
}
.sl03{
	background-image: url("../img/d03.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 95%; 	
}
.sl03 .slcolor{
	color: #17d29b;
	font-weight: 600;
}
.sl04{
	background-image: url("../img/d04.jpg");
	background-position: center center;
	background-repeat: no-repeat;	
	background-size: 95%; 
}
.sl04 .slcolor{
	color: #f8a710;
	font-weight: 600;
}
.sl05{
	background-image: url("../img/d05.jpg");
	background-position: center center;
	background-repeat: no-repeat;	
	background-size: 95%; 
}
.sl05 .slcolor{
	color: #f38392;
	font-weight: 600;
}
.sl06{
	background-image: url("../img/d06.jpg");
	background-position: center center;
	background-repeat: no-repeat;	
	background-size: 95%; 
}
.sl06 .slcolor{
	color: #00999c;
	font-weight: 600;
}
.sl07{
	background-image: url("../img/d07.jpg");
	background-position: center center;
	background-repeat: no-repeat;	
	background-size: 95%; 
}
.sl07 .slcolor{
	color: #601135;
	font-weight: 600;
}
.sl08{
	background-image: url("../img/d08.jpg");
	background-position: center center;
	background-repeat: no-repeat;	
	background-size: 95%; 
}
.sl08 .slcolor{
	color: #ff00b4;
	font-weight: 600;
}





.blocks{
	display: block;
}
.blocktable{
	display: table;
	width: 100%;
	margin-bottom: 8px;
	table-layout: fixed;
}
.blockitem{
	display: table-cell;
	padding: 0;	
	vertical-align: bottom;
}

.blcontent{
	display: block;	
	margin-left: 4px;
	margin-right: 4px;
	background: #aaa;				
}
.bla{
	display: block;
	width: 100%;
	height: 246px;
	
}
.blb{
	display: none;
	height: 246px;	
}
.blc{
	display: none;	
}
.blmcontent{
	display: block;
	position: realtive;
	height: 0px;
	z-index: 99;
}
.blc > img{
	display: block;
	width: 100%;
}
.blmrelative{
	display: block;
	position: relative;
}
.blmtitle{
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	
}
.blmtext{
	display: block;
	font-size: 13px;
	font-weight: 200;
}
.smcircle{
	display: block;
	margin: 8px auto;
}
.bltitle{
	display: block;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 10px;
}
.bltexte{
	display: block;
	font-size: 13px;
	font-weight: 200;
	text-align: center;
}


.bl01{
	width: 50%;	
}
.bl01 .bla{
	background-image: url("../img/bl01-a.jpg");
	background-position: center center;
	background-repeat: no-repeat;
}
.bl01 .blb{
	background-image: url("../img/bl01-b-corner.png"), url("../img/bl01-b.jpg");
	background-position: right bottom, center center;
	background-repeat: no-repeat, no-repeat;
}

.bl01 .bla > .bltext{
	display: block;
	width: 40%;
	margin-left: 20px;
	padding-top: 8%;
}


.bl01 .blc > .blmcontent > .blmrelative{
	margin: 0 auto;
	padding-top: 8%;
	width: 70%;
	text-align: center;
}
.bl01 .blmtitle{
	text-align: center;
}
.bl01 .blmtext{
	text-align: center;
}
.bl01 .blc > .blmcontent > .blmrelative > .blmtext > .msmcircle{
	diplay: inline-block;
	width: 13px;
	vertical-align: middle;
}





.bl02{
	width: 50%;	
}
.bl02 .bla{
	background-image: url("../img/bl02-a-corner.png"), url("../img/bl02-a.jpg");
	background-position: right bottom, center center;
	background-repeat: no-repeat, no-repeat;
}
.bl02 .blb{
	background: #64a8fa;
}
.bl02 .blb > .bltext{
	display: block;
	width: 60%;
	margin: 0 auto;
	padding-top: 18%;
}
.bl02 .blc > img{
	display: block;
	width: 100%;
}


.bl02 .blc > .blmcontent > .blmrelative{
	margin: 0 10px;
	padding-top: 8%;
	width: 50%;
}
.bl02 .blc > .blmcontent > .blmrelative > .blmtitle{
	text-align: left;
}
.bl02 .blc > .blmcontent > .blmrelative > .blmtext{
	text-align: left;
}
.bl02 .blc > .blmcontent > .blmrelative > .blmtext > .msmcircle{
	diplay: block;
	width: 13px;
	vertical-align: middle;
	margin: 0 0;
}



.bl03{
	width: 34%;	
}
.bl03 .bla{
	background-image: url("../img/bl03-a-corner.png"), url("../img/bl03-a.jpg");
	background-position: right bottom, center center;
	background-repeat: no-repeat, no-repeat;
}
.bl03 .blb{
	background: #ff8400;
}
.bl03 .blb > .bltext{
	display: block;
	width: 80%;
	margin: 0 auto;
	padding-top: 18%;
}


.bl03 .blc > .blmcontent > .blmrelative{
	margin: 0 10px;
	padding-top: 8%;
	width: 50%;
}
.bl03 .blc > .blmcontent > .blmrelative > .blmtitle{
	text-align: left;
}
.bl03 .blc > .blmcontent > .blmrelative > .blmtext{
	text-align: left;
}
.bl03 .blc > .blmcontent > .blmrelative > .blmtext > .msmcircle{
	diplay: block;
	width: 13px;
	vertical-align: middle;
	margin: 0 0;
}




.bl04{
	width: 66%;	
}
.bl04 .bla{
	background-image: url("../img/bl04-a.jpg");
	background-position: center right;
	background-repeat: no-repeat;
	overflow: hidden;
}
.bl04 .blb{
	background-image: url("../img/bl04-b-corner.png"), url("../img/bl04-b.jpg");
	background-position: right bottom, center right;
	background-repeat: no-repeat, no-repeat;
}
.bl04 .bla > .bltext{
	display: block;
	width: 40%;
	padding-top: 3%;
	padding-left: 8px;
	padding-right: 8px;
	height: 246px;
	background: #90d185;
}

.bl04 .blc > .blmcontent > .blmrelative{
	margin: 0 auto;
	padding-top: 8%;
	width: 80%;
	text-align: center;
}
.bl04 .blmtitle{
	text-align: center;
}
.bl04 .blmtext{
	text-align: center;
}
.bl04 .blc > .blmcontent > .blmrelative > .blmtext > .msmcircle{
	diplay: inline-block;
	width: 13px;
	vertical-align: middle;
}


.bl05{
	width: 66%;	
}


.bl05 .bla{
	background-image: url("../img/bl05-b-corner.png"),url("../img/bl05-a.jpg");
	background-position: center left, center right 15%;
	background-repeat: no-repeat, no-repeat;
	background-size: 55% 100%, auto;
	overflow: hidden;
}
.bl05 .blb{
	background-image: url("../img/bl05-b-corner.png"),url("../img/bl05-b.jpg");
	background-position: center left, center right 15%;
	background-repeat: no-repeat, no-repeat;
	background-size: 55% 100%, auto;
	overflow: hidden;
}
.bl05 .bla > .bltext{
	display: block;
	width: 35%;
	padding-top: 3%;
	padding-left: 8px;
	padding-right: 8px;
}
.bl05 .blb > .bltext{
	display: block;
	width: 35%;
	padding-top: 3%;
	padding-left: 8px;
	padding-right: 8px;
}

.bl05 .blc > .blmcontent > .blmrelative{
	margin: 0 10px;
	padding-top: 8%;
	width: 80%;
	text-align: left;
}
.bl05 .blmtitle{
	text-align: left;
}
.bl05 .blmtext{
	text-align: left;
}
.bl05 .blc > .blmcontent > .blmrelative > .blmtext > .msmcircle{
	diplay: inline-block;
	width: 13px;
	vertical-align: middle;
}


.bl06{
	width: 34%;	
}
.bl06 .bla{
	background: #fbc900;
}
.bl06 .bla > .bltext{
	display: block;
	padding-top: 18%;
	width: 80%;
	margin: 0 auto;
}
.bl06 .blb{
	background-image: url("../img/bl06-b-corner.png"), url("../img/bl06-b.jpg");
	background-position: right bottom, center center;
	background-repeat: no-repeat, no-repeat;
}
.bl06 .blc > .blmcontent > .blmrelative{
	margin: 0 auto;
	padding-top: 8%;
	width: 80%;
	text-align: center;
}
.bl06 .blmtitle{
	text-align: center;
}
.bl06 .blmtext{
	text-align: center;
}
.bl06 .blc > .blmcontent > .blmrelative > .blmtext > .msmcircle{
	diplay: inline-block;
	width: 13px;
	vertical-align: middle;
}


@media only screen and (max-width : 790px) {
	.lastctb{
		display: none;
	}
	.tval{
		font-size: 32px;		
	}
	.ttext{
		font-size: 16px;
	}
	.oferready{
		font-size: 16px;
	}
	#countdown{
		background-size: 50%;
	}
	
	.hp_herro_title{
		font-size: 48px;
	}
	.hp_herro_text{
		font-size: 28px;
	}
	.hp_herro_smtext{
		font-size: 28px;
	}
	
}

@media only screen and (max-width : 738px) {

	
}

@media only screen and (max-width : 650px) {

	.hp_herro_title{
		font-size: 38px;
	}
	.hp_herro_text{
		font-size: 22px;
	}
	.hleft{
		width: 50%;
	}
	
	.hright{
		width: 50%;
	}
	.shoptop > .hp_herro_sptext{
		font-size: 28px;
	}
	.shoptop > .hp_herro_price{
		font-size: 28px;
	}
	.shopbottom > .hp_herro_sptext{
		font-size: 15px;
	}
	.shopbottom > .hp_herro_price{
		font-size: 14px;
	}
	.stepitem{
		padding: 10px;
	}
	.stepbtext{
		font-size: 12px;
	}
	.stepntext{
		font-size: 13px;
	}
	
	
}

@media only screen and (max-width : 580px) {
	
	.bla, .blb{
		display: none;
	}
	.blc{
		display: block;
	}
	.bl01,.bl02,.bl03,.bl04,.bl05,.bl06{
		width: 50%;	
	}
	.blocks{
		margin-top: 25px;
	}
	
}




@media only screen and (max-width : 550px) {
	.oferready{
		display: block;
		width: 100%;
		text-align: left;
		text-indent: 10px;
		margin-bottom: 6px;
	}
	.timerdays{
		padding-left: 10px;
	}
	.tval{
		font-size: 28px;		
	}
	.ttext{
		font-size: 14px;
	}
	.oferready{
		font-size: 14px;
	}
	.topreadmore{
		margin-top: 6px;
	}
	#countdown{
		background-size: 70%;
	}
	.hp_herro_title{
		font-size: 28px;
	}
	.hp_herro_text{
		font-size: 18px;
	}
	
	.blmtitle{
		font-size: 14px;
	}
	.blmtext{
		font-size: 12px;
	}
	
	
	
}
@media only screen and (max-width : 500px) {
	
	.hp_herro_title{
		text-align: left;
	}
	.hp_herro_text{
		text-align: left;
	}
	.shopnowcontainertop{
		display: none;
	}
	.shoptop{
		margin-top: 20px;
		text-align: right;
		padding-right: 20px;
	}
	.shopbottom{
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: right;
		padding-right: 20px;
	}
	.shopnowcontainerbottom > .shopnowbut{
		display: block;
	}
	.hp_herro_box{
		display: none;
	}
	
	.steps{
		display: block;
	}
	.stepitem{
		display: block;
		width: auto;
		margin-bottom: 20px;
	}
	.steptext{
		text-align: left;
		padding-left: 80px;
	}
	.stepone, .steptwo, .stepthree{
		background-position: left 5% center;
		background-size: auto 90px;
	}
	
	.ptitle, .ptitleline{
		display: none;
	}
	
}
@media only screen and (max-width : 450px) {
	
	
	.blmtitle{
		font-size: 13px;
		margin-bottom: 4px;
	}
	.blmtext{
		font-size: 12px;
	}
	.bl01 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 90%;
	}
	.bl02 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
	}
	.bl03 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 60%;
	}
	.bl04 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 95%;
	}
	.bl05 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 65%;
	}
	.bl06 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 95%;
	}
	
}
@media only screen and (max-width : 400px) {
	.counttitle{
		font-size: 22px;
	}
	.oferready{
		font-size: 12px;		
	}
	.tval{
		font-size: 26px;		
	}
	.ttext{
		font-size: 12px;
		text-indent: 1px;
	}
	#countdown{
		background-size: 85%;
	}
	.hp_herro_title{
		font-size: 22px;
	}
	.hp_herro_text{
		font-size: 16px;
	}
	.hp_herro_smtext{
		font-size: 22px;
	}
	    
}

@media only screen and (max-width : 370px) {
	.blmtitle{
		font-size: 12px;
		margin-bottom: 2px;
	}
	.blmtext{
		font-size: 11.5px;
		line-height: 100%;
	}
	.bl01 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 98%;
	}
	.bl02 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
	}
	.bl03 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 65%;
	}
	.bl04 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 98%;
	}
	.bl05 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 68%;
	}
	.bl06 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 98%;
	}
	
	
	.sl01,.sl02,.sl03,.sl04,.sl05,.sl06,.sl07,.sl08{
		background-position: left 12px center ;
		background-repeat: no-repeat;
		background-size: 35%; 
	}
	
	.sl01{
		background-image: url("../img/m01.jpg");			
	}
	.sl02{
		background-image: url("../img/m02.jpg");			
	}
	.sl03{
		background-image: url("../img/m03.jpg");			
	}
	.sl04{
		background-image: url("../img/m04.jpg");			
	}
	.sl05{
		background-image: url("../img/m05.jpg");			
	}
	.sl06{
		background-image: url("../img/m06.jpg");			
	}
	.sl07{
		background-image: url("../img/m07.jpg");			
	}
	.sl08{
		background-image: url("../img/m08.jpg");			
	}
	.slsmtext{
		display: none;
	}
	.sllgtext{
		display: table-cell;
		width: auto;
		padding-left: 37%;
		padding-right: 10%;
		vertical-align: middle;
		background: none;
		text-align: left;
	}
	.slidetext{
		height: 200px;
	
	}
	
	
}


@media only screen and (max-width : 350px) {
	.counttitle{
		font-size: 18px;
	}
	.oferready{
		font-size: 12px;		
	}
	.tval{
		font-size: 22px;		
	}
	.ttext{
		font-size: 11px;
		text-indent: 1px;
	}
	
	
	
	
	
	
	
	
	
}

@media only screen and (max-width : 330px) {
	.blmtitle{
		font-size: 11px;
		margin-bottom: 1px;
	}
	.blmtext{
		font-size: 11px;
		line-height: 95%;
	}
	.bl01 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 98%;
	}
	.bl02 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
	}
	.bl03 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 65%;
	}
	.bl04 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 98%;
	}
	.bl05 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 68%;
	}
	.bl06 .blc > .blmcontent > .blmrelative{
		padding-top: 5%;
		width: 98%;
	}
	
}