/* Landing */
.box.landing_quiz{ text-align: center; }
.box.landing_quiz h1{ padding: 3% 10%; }
.box.landing_quiz .description{ padding: 6% 10% 4%; }

/* Questions */
.box.question_quiz {max-width:100%;}
.box.question_quiz .content{ position: relative; }
/* Questions */
.quiz_question{ margin: 0 auto; }
.quiz_question ul.center_inline li{ min-width: 50%; }
.box.question_number{ width: 100%; display: inline-block; margin-bottom: 0; }
.box.question_number .content{ padding-top: 7px; padding-bottom: 7px; }
.box.question_number h1{ font-size: 22px; }
.box.question_quiz .content{ position: relative; }

.quiz_question .box.question_quiz{padding: 0px 20px;}
.quiz_question .box.question_quiz h1{ margin-bottom: 0;}
.box.question_quiz .countdown{ position: absolute; top: 50%; font-size: 5.5em; margin-top: -0.5em; }
.box.question_quiz .countdown .icon_bk{ z-index: 3; position: absolute; top: 0.1em; left: 0.1em; width: 0.8em; height: 0.8em; background-color: #dadada; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }
.box.question_quiz .countdown .icon{ z-index: 4; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.box.question_quiz .countdown .icon.question{ background: url(../../apps/images/countdown_icon_question.png) no-repeat center center; background-size: auto 55%; }
.box.question_quiz .countdown .icon.play{ cursor: pointer; background: url(../../apps/images/countdown_icon_play.png) no-repeat 0 0; background-size: auto 200%; }
.desktop .box.question_quiz .countdown .icon.play:hover{ background-position: 0 100%; }
.box.question_quiz .countdown .icon.bonus{ color: #262626; font-weight: bold; font-size: 0.18em; text-align: center; }
.box.question_quiz .countdown .icon.bonus .v_center1{ width: 100%; height: 4.4em; min-height: 4.4em; }
.box.question_quiz .countdown .icon .bonus_text{ display: none; }
.box.question_quiz .countdown .icon.bonus .bonus_text{ width: 100%; display: block; cursor: default; }
.box.question_quiz .countdown .timer{ z-index: 2; position: absolute; top: 0; left: 0; width: 1em; height: 1em; overflow: hidden; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
.box.question_quiz .countdown .timer .bar{ position: absolute; bottom: 0; left: 0; width: 1em; height: 0.01em; background-color: #262626; }
.box.question_quiz .countdown .timer .slice{ position: absolute; width: 1em; height: 1em; clip: rect(0px,1em,1em,0.5em); }
.box.question_quiz .countdown .timer .slice.gt50{ clip: rect(auto, auto, auto, auto) !important; }
.box.question_quiz .countdown .timer .slice .pie{ position: absolute; width: 1em; height: 1em; clip: rect(0em,0.51em,1em,0em); background-color: #262626; }
.box.question_quiz .countdown .timer .slice .fill{ position: absolute; top: 0; left: 0; width: 1em; height: 1em; clip: rect(0em,1em,1em,0.5em); background-color: #262626; }
.box.question_quiz .countdown .timer_bk{ z-index: 1; position: absolute; top: 0; left: 0; width: 1em; height: 1em; background-color: #ffffff; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }

.box.question_quiz p{ padding-bottom: 0; }

/* Answers */
.answers{ text-align: center; }
.answers ul{ display: block; list-style: none; text-align: center; }
.answers li{ display: inline-block; vertical-align: middle; }
.answers li a{ display: block; text-decoration: none; }
.answers li a .img{ display: block; }

.answers.image_text{ position: relative; }

.answers.video{ position: relative; margin: 0 auto; }

/* Desktop + Tablet */
@media all and (min-width: 641px) {
	/* Landing */
	.box.landing_quiz h1{ font-size: 0.650rem; }
	.box.landing_quiz p{ font-size: 0.244rem; }

	/* Questions */
	.quiz_question{ width: 85%; padding: 0 5% 0 10%; }
	.box.question_quiz .content{  width: 77%; padding-top: 0; padding-bottom: 0; padding-left: 16.5%; }
	.box.question_quiz .countdown{ left: -45px; }
	.box.question_quiz .content > .v_center1{ padding: 0.5em 0; }
	.box.question_quiz .v_center1{ height: 104px; min-height: 104px; }
	.box.question_quiz .countdown{ font-size: 128px; margin-top: -64px; }
	.box.question_quiz .countdown .icon_bk{ top: 12px; left: 12px; width: 104px; height: 104px; -moz-border-radius: 52px; -webkit-border-radius: 52px; border-radius: 52px; }
	.box.question_quiz .countdown .icon{ width: 104px; height: 104px; }
	.desktop .box.question_quiz .countdown .icon.play:hover{ background-position: 0 -104px; }
	.box.question_quiz .countdown .icon.bonus{ font-size: 24px; }
	.box.question_quiz .countdown .icon.bonus .v_center1{ height: 104px; min-height: 104px; }
	.box.question_quiz p{ font-size: 23px; }
	.box.question_quiz .countdown .icon.question{    line-height: 1rem; }

	/* Answers */
	.answers ul{ font-size: 0; }
	.answers li{ font-size: 14px; }
	.answers li a{ padding: 5px; }

	.answers.image{ width: 100%; padding: 2% 0; margin: 0 auto 5%; }
	.answers.image img{ width: 100%; }
	.answers.image li{ width: 22%; padding: 0.75%; }

	.answers.image_text,
	.answers.video{ padding: 2% 0; }
	.answers.image_text,
	.answers.video{ margin-bottom: 5%; }
	.answers.image_text .image_container,
	.answers.video .video_container{ width: 45%; padding-left: 4%; }
	.answers.image_text .image_container img{ width: 100%; display: block; }
	.answers.image_text .answers_list,
	.answers.video .answers_list{ width: 43%; padding: 0 4%; }
	.answers.image_text .answers_list > .v_center1,
	.answers.video .answers_list > .v_center1{ height: 3.250rem; min-height: 3.250rem; }
	.answers.image_text li li,
	.answers.video li li{ display: block; padding: 2% 0; }
	.answers.image_text li a,
	.answers.video li a{ font-size: 0.203rem; }
	.answers.image_text.amount2 li a .v_center1,
	.answers.image_text.amount3 li a .v_center1,
	.answers.video.amount2 li a .v_center1,
	.answers.video.amount3 li a .v_center1{ height: 0.569rem; min-height: 0.569rem; }
	.answers.image_text.amount4 li a .v_center1,
	.answers.image_text.amount5 li a .v_center1,
	.answers.image_text.amount6 li a .v_center1,
	.answers.video.amount4 li a .v_center1,
	.answers.video.amount5 li a .v_center1,
	.answers.video.amount6 li a .v_center1{ height: 0.244rem; min-height: 0.244rem; }

	.answers.text{ padding: 2% 0; margin-bottom: 5%; }
	.answers.text li{ width: 40%; padding: 0.75%; }
	.answers.text li a{ font-size: 0.203rem; }
	.answers.text > .v_center1{ height: 3.250rem; min-height: 3.250rem; }
	.answers.text.amount1 li a .v_center1,
	.answers.text.amount2 li a .v_center1,
	.answers.text.amount3 li a .v_center1,
	.answers.text.amount4 li a .v_center1{ height: 0.650rem; min-height: 0.650rem; }
	.answers.text.amount5 li a .v_center1,
	.answers.text.amount6 li a .v_center1{ height: 0.488rem; min-height: 0.488rem; }
	.answers.text.amount7 li a .v_center1,
	.answers.text.amount8 li a .v_center1{ height: 0.325rem; min-height: 0.325rem; }
}

/* Smartphone */
@media all and (max-width: 640px) {
	/* Landing */
	.box.landing_quiz h1{ font-size: 0.900rem; }
	.box.landing_quiz p{ font-size: 0.350rem; }

	/* Questions */
	.quiz_question{ width: 85%; padding: 0 5% 0 10%; }
	.box.question_quiz .content{ width:70%; padding-top: 0; padding-bottom: 0; padding-left: 30%; }
	.box.question_quiz .countdown{ left: -0.4em; font-size: 6.5em; margin-top: -0.5em; }
	.box.question_quiz .countdown .icon_bk{ top: 0.1em; left: 0.1em; width: 0.8em; height: 0.8em; -moz-border-radius: 0.4em; -webkit-border-radius: 0.4em; border-radius: 0.4em; }
	.box.question_quiz .countdown .icon{ width: 0.8em; height: 0.8em; }
	.desktop .box.question_quiz .countdown .icon.play:hover{ background-position: 0 -0.8em; }
	.box.question_quiz .countdown .icon.bonus{ width: 100%; font-size: 0.15em; }
	.box.question_quiz .countdown .icon.bonus .v_center1{ height: 5.3em; min-height: 5.3em; }
	.box.question_quiz .v_center1{ height: 6em; min-height: 6em; }
	.box.question_quiz p{ font-size: 35px; font-size: 0.35rem; }

	/* Answers */
	.answers li a{ padding: 5px; }

	.answers.image{ width: 100%; margin: 0 auto 5%; }
	.answers.image img{ width: 100%; }
	.answers.image li{ width: 46%; padding: 1%; }

	.answers.image_text .image_container,
	.answers.video .video_container{ position: relative; width: 90%; margin: 5% auto; }
	.answers.image_text .image_container img,
	.answers.video .video_container img{ width: 100%; }
	.answers.image_text .answers_list,
	.answers.video .answers_list{ padding: 0 5%; margin-bottom: 5%; }
	.answers.image_text li,
	.answers.video li{ display: block; padding: 1% 0; }
	.answers.image_text li a,
	.answers.video li a{ font-size: 0.400rem; }

	.answers.text{ width: 90%; margin: 5% auto; }
	.answers.text li{ width: 100%; padding: 1% 0; }
	.answers.text li a{ font-size: 0.400rem; }
}