html { -webkit-font-smoothing: antialiased; }
body{
	margin: 0;
	padding: 0;
}
.clear{
	display: block;
	margin: 0;
	padding: 0;
	height: 0;
	clear: both;
}

/* Custom Radio Buttons */
/* ------------------------------------------ */
.radio{
	margin-top: 20px;
}
.radio div{
	margin-top: 15px;
}

/* Radio button */
.radio input[type="radio"] {
    display:none;
}

.radio input[type="radio"] + label {
	
	

	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

	font-size: 22px;
	font-weight: lighter;
	line-height: 20px;
	letter-spacing: 0.8px;
   	color: #fff;
   	cursor: pointer;
	
	
}
.radio input[type="radio"] + label:hover {
   	color: #fff;	
   	cursor: pointer;
	font-weight: bold;
	font-size: 22px;
	letter-spacing: 0px;
}

.radio input[type="radio"] + label span {
    display:inline-block;
    width:12px;
    height:12px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

/* The trick: border creates same look as the radio button usually have */
/* remove it to see what happens */
.radio input[type="radio"] + label span {
	border: 2px solid #fff; /* have to be of the same color */

}

/* Checked state for radio */
.radio input[type="radio"]:checked + label span{
	border: 2px solid #000;
    background-color: #000; /* have to be of the same color */
    
}
.radio input[type="radio"]:checked + label{
	color: #fff;
	font-weight: 600;
}







.res{
	display: block;
	width: 100%;
	max-width: 738px;
	min-height: 100px;
	margin: 0 auto;
	overflow: hide;
}


.titleline{
	display: block;
	width: 100%;
	position: realtive;
	z-index: 1;
	padding-top: 16%;
	
}

.bga{
	background-color: #d48650;
	background-image: url("../img/rbgs/a.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bga > .titleline > .bgcolor{
	background: #bd5f1f;
}
.bgb{
	background-color: #dc91a9;
	background-image: url("../img/rbgs/b.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bgb > .titleline > .bgcolor{
	background: #c15d7c;
}
.bgc{
	background-color: #81a37e;
	background-image: url("../img/rbgs/c.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bgc > .titleline > .bgcolor{
	background: #4e7b4b;
}
.bgd{
	background-color: #c77062;
	background-image: url("../img/rbgs/d.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bgd > .titleline > .bgcolor{
	background: #ae4535;
}
.bge{
	background-color: #694077;
	background-image: url("../img/rbgs/e.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bge > .titleline > .bgcolor{
	background: #451c54;
}
.bgf{
	background-color: #70acc2;
	background-image: url("../img/rbgs/f.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bgf > .titleline > .bgcolor{
	background: #4289a3;
}
.bgg{
	background-color: #7297ed;
	background-image: url("../img/rbgs/g.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bgg > .titleline > .bgcolor{
	background: #3665d2;
}
.bgh{
	background-color: #a474a6;
	background-image: url("../img/rbgs/h.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bgh > .titleline > .bgcolor{
	background: #854c87;
}



.tw{
	display: block;
	width: 50%;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	padding-left: 20px;
	padding-top: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	
}
.shoplinelink{
	display: block;
	width: 50%;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 17px;
	padding-left: 20px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-bottom: 8px;
}
.shoplinelink > a{
	text-decoration: none;
	color: #fff;
}
.smresprods{
	display: none;
}
.resprods{
	display: block;
	position: relative;
	float: right;
	z-index: 999;
	width: 50%;
	z-index: 2;
}
.resprods > img{
	display: block;
	width: 90%;
}

/*
.checklink{
	display: block;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 5px;
	padding-bottom: 7px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #eee;
	text-decoration: none;
	background: #000;
	float: right;
	margin: 10px;	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;	
}
*/
.checklink{
	display: block;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	/*background: #fff;*/
	float: right;
	margin: 10px;
	cursor: pointer;	
	/*
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;	
	*/
}
.checklink > img{
	display: inline;
	vertical-align:middle;
	margin-left: 4px;
}








.step{
	dispaly: block;
	width: 100%;
	max-width: 738px;
	min-height: 100px;
	margin: 0 auto;
}

.mcircle{
	display: none;
	text-align: center;
}
.mcircle > img{
	display: block;
	margin: 0 auto;
	width: 60%;
}

.bg1{
	background-color: #453733;
	background-image: url("../img/bg1.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bg2{
	background-color: #583b36;
	background-image: url("../img/bg2.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bg3{
	background-color: #34476a;
	background-image: url("../img/bg3.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bg4{
	background-color: #493c2d;
	background-image: url("../img/bg4.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bg5{
	background-color: #b09f76;
	background-image: url("../img/bg5.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.leftmodel{
	display: block;
	float: left;
	width: 43%;
	background: #aaa;
}
.leftmodelimg{
	display: block;
	width: 100%;
}
.rightquestions{
	display: block;
	float: right;
	width: 57%;
}

.maintitle > .t1{
	display: block;
	text-align: center;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 100;
	margin-top: 5%;
}
.maintitle > .t2{
	display: block;
	text-align: center;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 600;
	margin-top: 2%;
}
.maintitle > .t3{
	display: block;
	text-align: center;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 100;
	margin-top: 5%;
}
.maintitle > .t4{
	display: block;
	text-align: center;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 600;
	margin-top: 15%;
}
.roundbg{
	display: block;
	min-height: 150px;
	margin-top: 25px;
	background-image: url("../img/bcircle.png");
	background-repeat: no-repeat;
	background-position: center center;
}
.steptitle > .t1{
	display: block;
	text-align: center;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 100;
	padding-top: 35px;
}
.steptitle > .t2{
	display: block;
	text-align: center;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 600;
	margin-top: 2%;
}
.ba{
	display: block;
	text-align: center;
	margin-top: 10px;
}

/*
.mainoptions{
	display: block;
	margin: 20px;
	padding: 20px;	
}
.bg2 > .rightquestions > .mainoptions {
	border: 1px solid #9d8c89;	
}
.bg3 > .rightquestions > .mainoptions {
	border: 1px solid #838fa3;	
}
.bg4 > .rightquestions > .mainoptions {
	border: 1px solid #9c9389	;	
}
.bg5 > .rightquestions > .mainoptions {
	border: 1px solid #cec8b9	;	
}
*/
.mainoptions{
	display: block;
	margin: 20px;
	padding: 20px;	
	
	background-image: url(../img/frame.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}



.mainbutcon{
	display: block;
	min-height: 150px;

	background-image: url("../img/bcircle.png"),url("../img/la.png"),url("../img/ra.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center center, center left, center right;
	margin-top: 25%;
}
.mainbutt1{
	display: block;
	text-align: center;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 600;
	padding-top: 39px;
	margin-bottom: 12px;
	cursor: pointer;
}
.mainbutt1:hover{
	color: #ccc;
}
.mainbutt2{
	display: block;
	text-align: center;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 100;
	text-decoration: none;
}
.mainbutt2:hover{
	color: #ccc;
}
.ta{
	display: inline-block;
	vertical-align: middle;
}

.ptable{
	display: table;
	width:100%;
	table-layout: fixed;
	overflow: hidden;
}
.pcell{
	display: table-cell;
	vertical-align: bottom;
}
.pcell > img{
	display: block;
	width: 100%;
	max-width: 100px;
    margin: 0 auto;
}
.pcell > .spsize{
	position: relative;
    min-width: 160%;
    z-index: 999;
    margin-left: -30%;
}
.pcell > .smsize{
	position: relative;
    max-width: 60%;
    z-index: 999;
    margin-left: 20%;
}

@media only screen and (max-width : 620px) {
	.tw{
		font-size: 18px;
		padding-left: 10px;
		padding-top: 4px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.shoplinelink{
		font-size: 14px;
		padding-left: 10px;
		padding-top: 4px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	
	.steptitle > .t1{
		font-size: 17px;
	}
	.steptitle > .t2{
		font-size: 21px;
	}
	.radio input[type="radio"] + label {
		font-size: 17px;
	}
	.maintitle > .t1{
		font-size: 17px;
		margin-top: 5%;
	}
	.maintitle > .t2{
		font-size: 21px;
		margin-top: 0%;
	}
	.maintitle > .t3{
		font-size: 15px;
		margin-top: 5%;
	}
	.maintitle > .t4{
		font-size: 17px;
		margin-top: 10%;
	}
	.mainbutcon{
		margin-top: 18%;
		
	}
	.mainbutt1{
		font-size: 19px;
	}
	.mainbutt2{
		font-size: 16px;
	}
}
@media only screen and (max-width : 450px) {
	.titleline{
		padding-top: 20px;
		
	}
	
	.tw{
		width: auto;
		font-size: 24px;
		padding-left: 20px;
		padding-top: 8px;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.shoplinelink{
		width: auto;
		font-size: 17px;
		padding-left: 20px;
		padding-top: 8px;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.resprods{
		display: none;
	}
	.smresprods{
		display: block;
		clear: both;
		width: 100%;
	}
	.smresprods > img{
		display: block;
		width: 90%;
		margin: 0 auto;
	}
	/*
	.checklink{
		display:none;
	}
	*/
	
	
	.steptitle > .t1{
		font-size: 22px;
	}
	.steptitle > .t2{
		font-size: 28px;
	}
	.radio input[type="radio"] + label {
		font-size: 22px;
	}
	.maintitle > .t1{
		font-size: 22px;
		margin-top: 5%;
	}
	.maintitle > .t2{
		font-size: 28px;
		margin-top: 2%;
	}
	.maintitle > .t3{
		font-size: 20px;
		margin-top: 5%;
	}
	.maintitle > .t4{
			font-size: 24px;
		margin-top: 15%;
	}
	.mainbutcon{
		margin-top: 22%;
		
	}
	.mainbutt1{
		font-size: 19px;
	}
	.mainbutt2{
		font-size: 16px;
	}
	.leftmodel{
		display: none;
	}
	.rightquestions{
		width: 100%;
	}
	.bg1 > .rightquestions{
		background-image: url("../img/01m.jpg");
		background-size: cover;
	}
	.mcircle{
		display: block;
	}
	.roundbg{
		background: none;
	}
	.mainoptions{
		border: 0;
		padding: 0;
		margin: 0;
		background: none;
	}
	.bg2 > .rightquestions > .mainoptions {
		border: 0;
	}
	.bg3 > .rightquestions > .mainoptions {
		border: 0;	
	}
	.bg4 > .rightquestions > .mainoptions {
		border: 0;	
	}
	.bg5 > .rightquestions > .mainoptions {
		border: 0;	
	}
	
	
	
	
	.radio > div{
		padding: 20px;
		margin-bottom: 1px;
		margin-top: 0;
		background-image: url("../img/bgoption1.png");
	}
	.radio > div:hover{
		background-image: url("../img/bgoption2.png");
	}
	
	
	.radio input[type="radio"] + label span {
		display:inline-block;
		width:12px;
		height:12px;
		margin:-1px 4px 0 0;
		vertical-align:middle;
		cursor:pointer;
		-moz-border-radius:  50%;
		border-radius:  50%;
		background-color: #aaa;
	}

	/* The trick: border creates same look as the radio button usually have */
	/* remove it to see what happens */
	.radio input[type="radio"] + label span {
		border: 0px solid #fff; /* have to be of the same color */
		background-color: #aaa;
	}

	/* Checked state for radio */
	.radio input[type="radio"]:checked + label span{
		border: 0px solid #000;
		background-color: #aaa; /* have to be of the same color */
		
	}
	
	
	
	
	
}