body{
	margin: 0;
	padding: 0;
}
.buts{
	display: block;
	float: left;
	padding: 4px;
	margin: 1px;
	background: #eee;
}
.sliders{
	display: block;
	max-width: 952px; /*MAX WIDTH USED IN AO*/
	margin: 0 auto;
	height: 474px;
	overflow: hidden;
}
.sliders .slide{
	display: block;
	width: 100%;
	height: 474px;
	outline: none;
}

.color1{
	background-color: #ddd8fe;
	/* e98ee2  */
}
.color2{	
	background-color: #ffffff;
	/* b96ed5  */
}
.color3{	
	background-color: #ffffff;
	/* a2a2f3  */
}
.color4{	
	background-color: #ffffff;
	/* 8181fa  */
}
.color5{	
	background-color: #ffffff;
	/* 6767d5  */
}
.color6{	
	background-color: #ffffff;
	/* b6b6e8  */
}
.color7{	
	background-color: #ffffff;
	/* ffffff  */
}


/*LEFT FLAG*/
.color1:before {
	display: block;
	position: absolute;
	content: ' ';
	float: right;
	margin-top: 0px;
	right:0;
	width: 10px;
	z-index: 0;
	border-top: 237px solid #ffffff;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #ffffff;
	border-right: 24px solid #ffffff;
	z-index: 1;
}
/*LEFT FLAG*/
.color2:before {
	display: block;
	position: absolute;
	content: ' ';
	float: right;
	margin-top: 0px;
	right:0;
	width: 10px;
	z-index: 0;
	border-top: 237px solid #b96ed5;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #b96ed5;
	border-right: 24px solid #b96ed5;
	z-index: 1;
}
/*LEFT FLAG*/
.color3:before {
	display: block;
	position: absolute;
	content: ' ';
	float: right;
	margin-top: 0px;
	right:0; 
	width: 10px;
	z-index: 0;
	border-top: 237px solid #a2a2f3;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #a2a2f3;
	border-right: 24px solid #a2a2f3;
	z-index: 1;
}
/*LEFT FLAG*/
.color4:before {
	display: block;
	position: absolute;
	content: ' ';
	float: right;
	margin-top: 0px;
	right:0; 
	width: 10px;
	z-index: 0;
	border-top: 237px solid #8181fa;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #8181fa;
	border-right: 24px solid #8181fa;
	z-index: 1;
}
/*LEFT FLAG*/
.color5:before {
	display: block;
	position: absolute;
	content: ' ';
	float: right;
	margin-top: 0px;
	right:0; 
	width: 10px;
	z-index: 0;
	border-top: 237px solid #6d6ddd;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #6d6ddd;
	border-right: 24px solid #6d6ddd;
	z-index: 1;
}
/*LEFT FLAG*/
.color6:before {
	display: block;
	position: absolute;
	content: ' ';
	float: right;
	margin-top: 0px;
	right:0; 
	width: 10px;
	z-index: 0;
	border-top: 237px solid #b6b6e8;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #b6b6e8;
	border-right: 24px solid #b6b6e8;
	z-index: 1;
}
/*LEFT FLAG*/
.color7:before {
	display: block;
	position: absolute;
	content: ' ';
	float: right;
	margin-top: 0px;
	right:0; 
	width: 10px;
	z-index: 0;
	border-top: 237px solid #9aa7b7;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #9aa7b7;
	border-right: 24px solid #9aa7b7;
	z-index: 1;
}


.buy{
	display: inline-block;
	margin-top: 10px;
	height: 24px;
	padding: 2px 30px 2px 12px;	
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;	
	line-height: 22px;
	font-size: 14px;
	border: 1px solid #ddd;
	text-decoration: none;
	color: #000;	
	border-radius: 8px;
	background-color: #fff;
	background-image: url(../img/quiz/buy.jpg);
	background-repeat: no-repeat;
	background-position: center right;}
.buy:hover{
	color: #464646;
	text-decoration: underline;	
}
.share{
	display: inline-block;
	margin-top: 10px;
	height: 24px;
	padding: 2px 30px 2px 12px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;	
	line-height: 22px;
	font-size: 14px;
	border: 1px solid #ddd;
	text-decoration: none;
	color: #000;	
	border-radius: 8px;
	background-color: #fff;
	background-image: url(../img/quiz/share.jpg);
	background-repeat: no-repeat;
	background-position: center right;}
.share:hover{
	color: #464646;
	text-decoration: underline;	
}
.reloadq{
	display: inline-block;
	margin-top: 10px;
	height: 24px;
	padding: 2px 12px 2px 12px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;	
	line-height: 22px;
	font-size: 14px;
	border: 1px solid #ddd;
	text-decoration: none;
	color: #000;	
	border-radius: 8px;
	background-color: #fff;
	cursor: pointer;
	
	}
.reloadq:hover{
	color: #464646;
	text-decoration: underline;	
}



.slide{
	display: block;
	position: relative;	
}

.sliders .slide .slidecontent{
	display: block;
	position: relative;	
	margin: 6px;
	z-index: 99;
}
.textcenter{
	display: block;
	text-align: center;
	padding-right: 40px;
}
.btitle{
	display: block;
	padding-top: 110px;
	padding-right: 20px;
	color: #000;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 32px;
}
.stext{
	display: block;
	margin-top: 60px;
	color: #000;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
}
.buttonstart{
	display: block;
	margin-top: 60px;
	color: #000;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 26.4px;
	cursor: pointer;	
}
.buttonstart:hover{
	color: #464646;
}

.slidequestions{
	display: block;
	width: 50%;
	float: left;
}
.imagecontainer{
	display: block;
	width: 50%;
	float: right;
}
.imagecontainer .slideimage{
	display: block;
	width: 90%;
	margin: 0 auto;
}

.questiontext{
	display: block;
	padding-top: 80px;
	color: #000;
	text-align: center;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 32px;
}


.sliderescontent{
	display: block;
	width: 100%;
	/*max-width: 587px;*/
	margin: 0 auto;
}
.resprod{
	display: block;
	width: 50%;
	float: left;
}
.resimage{
	display: block;
	width: 100%;
}
.resdetails{
	display: block;
	width: 50%;
	float: right;	
}
.restitle{
	display: block;
	padding-top: 80px;
	color: #000;
	text-align: left;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 26px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 26px;
}
.resname{
	display: block;
	margin-top: 10px;
	color: #000;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-variant: normal;
	font-weight: 600;
	line-height: 18px;
}
.restext{
	display: block;
	margin-top: 10px;
	color: #000;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
}
/*
#ro{
	background-color: #fff;
	background-image: url(../img/o_bg_1.png), url(../img/o_bg_2.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom left, top right;
}
#rc{
	background-color: #fff;
	background-image: url(../img/c_bg_1.png), url(../img/c_bg_2.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom left, top right;
}
#rb{
	background-color: #fff;
	background-image: url(../img/b_bg_1.png), url(../img/b_bg_2.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom left, top right;
}
#re{
	background-color: #fff;
	background-image: url(../img/e_bg_1.png), url(../img/e_bg_2.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom left, top right;
}
*/




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

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

.radio input[type="radio"] + label {
	
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;

   	color: #000;
   	cursor: pointer;
	
	
}
.radio input[type="radio"] + label:hover {
   	color: #464646;
   	cursor: pointer;
}

.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 #ccc; /* have to be of the same color */

}

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

@media only screen and (max-width : 520px) {	
	.btitle{
		font-size: 28px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 22px
	}
	.stext{
		display: block;
		margin-top: 40px;
		font-size: 18px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 18px;
	}
	.questiontext{
		padding-top: 20px;
		font-size: 22px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 22px;
		text-align: left;
	}
	.slidequestions {
		display: block;
		width: 100%;
	}
	.radio input[type="radio"] + label{
		font-size: 12px;
		line-height: 12px;
		padding-left: 8px;
	}
	.imagecontainer {
		display: block;
		width: 57%;
		margin: 0 auto;
		float: none;
	}
	.restitle {
		display: block;
		padding-top: 30px;
		
		font-size:22px;
		font-style: normal;
		font-variant: normal;
		font-weight: 300;
		line-height: 22px;
	}
	.resname {
		display: block;
		margin-top: 8px;
		font-size: 18px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		line-height: 18px;
	}
	.restext {
		display: block;
		margin-top: 12px;
		font-size: 16px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 18px;
	}
	
	

	
}

@media only screen and (max-width : 320px) {	
	.btitle{
		font-size: 22px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 22px
	}
	.stext{
		display: block;
		margin-top: 40px;
		font-size: 16px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 18px;
	}
	.questiontext{
		padding-top: 20px;
		font-size: 22px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 22px;
		text-align: left;
	}
	.slidequestions {
		display: block;
		width: 100%;
	}
	.radio input[type="radio"] + label{
		font-size: 12px;
		line-height: 12px;
		padding-left: 8px;
	}
	.imagecontainer {
		display: block;
		width: 80%;
		float: none;
	}
	.restitle {
		display: block;
		padding-top: 20px;
		
		font-size:18px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 18px;
	}
	.resname {
		display: block;
		margin-top: 8px;
		font-size: 16px;
		font-style: normal;
		font-variant: normal;
		font-weight: 300;
		line-height: 16px;
	}
	.restext {
		display: block;
		margin-top: 8px;
		font-size: 12px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 16px;
	}
	
	

	
}