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;
}
.clear{
	display: block;
	clear: both;
	
}

.color1{
	background-color: #ef3d3d;
	/* e98ee2  */
}
.color2{	
	background-color: #bf0f11;
	/* b96ed5  */
}
.color3{	
	background-color: #810100;
	/* a2a2f3  */
}
.color4{	
	background-color: #2f1506;
	/* 8181fa  */
}
.color5{	
	background-color: #5f4f4f;
	/* 6767d5  */
}
.color6{	
	background-color: #b39b77;
	/* b6b6e8  */
}
.color7{	
	background-color: #947a63;
	/* 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 #bf0f11;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #bf0f11;
	border-right: 24px solid #bf0f11;
	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 #810100;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #810100;
	border-right: 24px solid #810100;
	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 #2f1506;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #2f1506;
	border-right: 24px solid #2f1506;
	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 #5f4f4f;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #5f4f4f;
	border-right: 24px solid #5f4f4f;
	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 #b39b77;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #b39b77;
	border-right: 24px solid #b39b77;
	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 #947a63;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #947a63;
	border-right: 24px solid #947a63;
	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 #634a34;
	border-left: 24px solid transparent;
	border-bottom: 237px solid #634a34;
	border-right: 24px solid #634a34;
	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;
	padding-top: 124px;
}
.btitle{
	display: block;
	padding-right: 20px;
	color: #fff;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 120%;
}
.stext{
	display: block;
	color: #fff;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 120%;
}
.buttonstart{
	display: block;
	margin-top: 60px;
	color: #fff;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 38px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 26.4px;
	cursor: pointer;	
}
.buttonstart:hover{
	color: #000;
}

.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;
	padding-left: 40px;
	color: #fff;
	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;
	min-height: 474px;
	background-color: #fff;
	background-image: url("../img/quiz/res-bg.jpg");
}
.resprod{
	display: block;
	width: 55%;
	float: left;
}
.respadd{
	display: block;
	margin-left: 14%;	
}
.res1{
	dispaly: block;
	width: 57.3%;
	float: left;
}
.res1 > a{
	margin-left: 41%;
}
.res2{
	dispaly: block;
	width: 42.5%;
	float: right;	
}
.res2 > a{
	margin-left: 18%;
}
.res1 > img{
	display: block;
	width: 100%;
}
.res2 > img{
	display: block;
	width: 100%;
}
.resdetails{
	display: block;
	width: 45%;
	float: right;	
}
.detailsbox{
	display: block;
	margin-top: 30px;
	margin-right: 30px;
	padding: 20px;
	background-image: url("../img/quiz/transbg.png");
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
	
	
}
.restitle{
	display: block;
	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: 24px;
	padding-left: 40px;
}
.radio div{
	margin-top: 14px;
}

/* 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: #fff;
   	cursor: pointer;
	
	
}
.radio input[type="radio"] + label:hover {
   	color: #fff;
	text-decoration: underline;
   	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 #fff; /* have to be of the same color */

}

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

@media only screen and (max-width : 700px) {	
	.textcenter {
		padding-right: 40px;
		padding-top: 100px;
	}

	.respadd{
		display: block;
		margin-left: 6%;	
	}
	.res1 > a{
		margin-left: 38%;
	}
	.res2 > a{
		margin-left: 14%;
	}
	
	.restitle{
		font-size: 18px;		
	}
	.restext{
		font-size: 14px;
		line-height: 120%;
	}
	.detailsbox{
		padding: 6px;
	}

	.questiontext{
		padding-top: 60px;
		font-size: 24px;
		font-style: normal;
		font-variant: normal;
		font-weight: 200;
		line-height: 22px;
		text-align: center;
	}
	
}

@media only screen and (max-width : 520px) {
	
	.textcenter {
		padding-right: 40px;
		padding-top: 60px;
	}
	.btitle{
		font-size: 22px;
	}
	.stext{
		font-size: 20px;
	}
	
	.respadd{
		display: block;
		margin-left: 1%;	
	}
	.res1 > a{
		margin-left: 34%;
	}
	.res2 > a{
		margin-left: 10%;
	}
	
	.share{
		font-size: 12px;
		height: auto;
		padding: 1px 30px 1px 10px;
	}
	.buy{
		font-size: 12px;
		height: auto;
		padding: 1px 30px 1px 10px;
	}
	.reloadq {
		font-size: 12px;
		height: auto;
		padding: 1px 6px 1px 6px;
		margin-top: 7px;
	}
	.questiontext{
		padding-left: 10px;
		
	}
	.radio{
		padding-left: 10px;
	}
	.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: 14px;
		line-height: 12px;
		padding-left: 8px;
	}
	.imagecontainer {
		display: block;
		width: 57%;
		margin: 0 auto;
		float: none;
	}

	
	.detailsbox{
		margin-right: 3px;
	}
	.restext{
		margin-top: 4px;
		font-size: 13px;
		line-height: 110%;
	}
	
}

@media only screen and (max-width : 320px) {	
	.questiontext{
		padding-left: 10px;
		
	}
	.radio{
		padding-left: 10px;
	}


	.textcenter {
		padding-right: 30px;
		padding-top: 30px;
	}
	.btitle{
		font-size: 20px;
	}
	.stext{
		font-size: 18px;
	}

	.respadd{
		display: block;
		margin-left: -10px;	
	}
	.res1 > a{
		margin-left: 25%;
	}
	.res2 > a{
		margin-left: 0;
	}

	.detailsbox{
		margin-right: 3px;
	}
	.restitle{
		font-size: 16px;	
		line-height: 100%;
	}
	.restext{
		margin-top: 4px;
		font-size: 12px;
		line-height: 120%;
	}
	.detailsbox{
		padding: 4px;
	}

	.questiontext{
		padding-top: 20px;
		font-size: 20px;
		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;
	}

	
	

	
}