@charset "utf-8";
/* CSS Document */

#quiz_description {
	display:block;
	/*display:none;*/
	text-align:center;
}
#quiz_container {
	display:none
	/*display:block;*/
}
.question_wrapper{display:none}
/*
#question_wrapper_0 {
	display:block
}
*/
body {
	margin:0;
	padding:0;
	direction:rtl;
	font-family:'Alef';
	font-size:20px;
	color:#ffffff;
	background-color:#00aced;
}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.background > img {
	min-height: 100%;
	min-width: 1012px;
	width: 100%;
	height: auto;
	position: fixed;
	bottom: 0;
	right:0;
}
.content {
	position:absolute;
	width:100%;
}
h1 {
	background-color:#00aced;
	color:#FFF;
	font-size:4em;
	text-align:center;
	padding:10px;
	line-height:1em;
	margin-bottom:15px;
}
h2 {
	background-color:#f48366;
	color:#fff;
	font-size:2em;
	font-weight:normal;
	padding:15px 10%;
	text-align:center;
	line-height:1em;
	margin-top:0;
}
a.start-button {
	text-decoration:none;
	display:inline-block;
	width:auto;
	font-size:2em;
	margin:20px auto;
	padding:5px 15px;
	background-color:#ffffff;
	border:solid 2px #00aced;
	color:#00aced;
}
.question-bg{
	display:block;
	float:right;
	border-left:solid 4px #f48366;
}
.question-content{
	width:675px;
	padding-top:50px;
	float:right;
}

.quiz-container{width:1024px; margin:0 auto; position:relative;}
.question-title{text-align:center; font-size:1.5em; padding:20px 50px;}
.answers-list{
	list-style:none;
	padding:0;
	margin:80px 35px 80px 35px;
}
.answers-list li{
	padding:0;
	margin:0 0 10px 0;
}
.answers-list li .label-text{
	margin-right: 44px;
	cursor:pointer;
}
/* Radio buttons styling */
input[type="radio"] {
    display:none;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  10%;
    border-radius:  10%;
	border:solid 2px #ffffff;
	margin-left:25px;
	float:right;
}
input[type="radio"] + label span {
     background-color:#ffffff;
}

input[type="radio"]:checked + label span{
     background-color:#00aced;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}
/* Answers with images */
.question-content.type-image .answers-list{
	margin:0 35px 20px 35px;
}
.question-content.type-image .answers-list li{
	float:right; 
	display:inline-block;
}
.question-content.type-image .answers-list li:first-child{
	margin-left:30px;
}
.question-content.type-image .answers-list li:nth-child(3){
	margin:0 auto 0 auto;
	padding-top:10px;
	display:block;
	clear:both;
	float:none;
	text-align:center;
}
.question-content.type-image .answers-list li input[type="radio"] + label span{
	display:block;
	margin:0 auto 10px auto;
	float:none;
}

.question-content.type-image .answers-list li label{
	display:inline-block;
	position:relative;
	line-height:0;
	margin-top:10px;
	cursor:pointer;
}
.question-content.type-image .answers-list li label .img-caption{
	display:none;
	position:absolute;
	text-align:center;
	bottom:0;
	right:0;
	background:url(images/caption.png);
	padding:3px 0;
	width:100%;
	line-height:normal;
}

.continue-button-wrapper{
	text-align:center;
	margin-bottom:30px;
}
.continue-button{
	display:inline-block;
	width: 80px;
	text-align:center;
	background-color:#ffffff;
	color:#00aced;
	font-size:1.2em;
	position:relative;
	cursor:pointer;
}
.continue-button:after{
	content: "";
    display: block;
    position: absolute;
    left: -16px;
    top: 0;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 16px 16px 17px 0;
    border-color: transparent transparent transparent transparent;
	border-right-color: #ffffff;
}
.quiz-progress-bar {
	text-align:center;
	margin:0 auto;
}
.progress_img {
	margin-right:5px;
}
.countdown-wrapper{
	text-align:center;
	position:absolute;
	z-index:20;
	width:100%;
	
}
.countdown-content{
	display:inline-block; 
	color:#00aced; 
	margin-top:30px;
	margin-right:340px;
	padding:0 0 2px 0; 
	line-height:1em; 
	width:110px; 
	text-align:center; 
	background:#ffffff url(images/time.png) no-repeat 85px center; 
	font-size:1.3em
}
.logos{
	display:inline-block;
	background-color:#ffffff;
	padding:10px 10px 0 0;
	position:absolute;
	bottom:0;
	right:0;
	-moz-border-radius: 10px 0 0 0;
	-webkit-border-radius: 10px 0 0 0;
	border-radius: 10px 0 0 0;
	-khtml-border-radius: 10px 0 0 0;
}
.logos img{
	margin-left:20px;
}
.mobile{display:none;}
@media screen and (max-width: 1370px) {
	.background > img { }
	h2{padding:15px 5%}
}
@media screen and (max-width: 1024px) {
	h2{padding:15px 2%; font-size:1.5em;}
	h1{font-size:3em}
	.quiz-container{width:100%}
	.question-bg{width:33%; height:auto;}
	.question-content{width:65%; padding-left:1%;}
	
	.question-content.type-image .answers-list li{width:45%}
	.question-content.type-image .answers-list li:first-child{margin-left:10%px;}
	.question-content.type-image .answers-list li label img{width:100%; height:auto;}
	.progress_img {	margin-right:3px;}
	.logos{display:none;}
	.mobile{display:block; }
	.logos.mobile{
		display:inline-block; 
		position:static; 
		margin-top:40px; 
		margin-bottom: 3px;
		-moz-border-radius: 10px 0 0 10px;
		-webkit-border-radius: 10px 0 0 10px;
		border-radius: 10px 0 0 10px;
		-khtml-border-radius: 10px 0 0 10px;
	}
	.quiz-description-wrapper .logos.mobile{
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-khtml-border-radius:10px;
	}
}
@media screen and (max-width: 860px) {
	h2{font-size:1.2em}
	.continue-button-wrapper{	margin-bottom:10px;	}
	.question-content.type-image .answers-list{	margin-bottom:10px;	}
	.question-content.type-image .answers-list li label{margin-top:0;}
	.countdown-content{	margin-top:10px;	margin-right:37%;}
	.question-content{	padding-top:25px;}
}
@media screen and (max-width:680px) {
	.question-bg{display:none;}
	.question-content{width:98%; padding: 50px 1%; float:none;}
	.countdown-content{margin-right:0}
	.progress_img {	margin-right:1px;}
	.answers-list{margin:30px 15px}
	.question-title{padding:15px 1%}
	h1, h2{margin:0}
	.mobile-share{text-align:center}
}
@media screen and (max-width: 560px) {
	h1{font-size:2em}
	.background > img { right: 0%; margin-right: -70%}
}
@media screen and (max-width: 400px) {
	.question-content.type-image .answers-list li, .question-content.type-image .answers-list li:first-child{
		padding-top:10px;
		display:block;
		clear:both;
		float:none;
		text-align:center; 
		margin:0 auto;
		width:80%
	}
	
}