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

@font-face {
    font-family: 'ralewayextrabold';
    src: url('../font/ralewayextrabold/raleway-extrabold-webfont.eot?') format('eot'),
	     url('../font/ralewayextrabold/raleway-extrabold-webfont.woff') format('woff'),
	     url('../font/ralewayextrabold/raleway-extrabold-webfont.ttf')  format('truetype'),
	     url('../font/ralewayextrabold/raleway-extrabold-webfont.svg#raleway-extrabold-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaymedium';
	src: url('../font/ralewaymedium/raleway-medium-webfont.eot?') format('eot'),
	     url('../font/ralewaymedium/raleway-medium-webfont.woff') format('woff'),
	     url('../font/ralewaymedium/raleway-medium-webfont.ttf')  format('truetype'),
	     url('../font/ralewaymedium/raleway-medium-webfont.svg#raleway-medium-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaylight';
    src: url('../font/ralewaylight/raleway-light-webfont.eot?') format('eot'),
	     url('../font/ralewaylight/raleway-light-webfont.woff') format('woff'),
	     url('../font/ralewaylight/raleway-light-webfont.ttf')  format('truetype'),
	     url('../font/ralewaylight/raleway-light-webfont.svg#raleway-light-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway';
	src: url('../font/ralewayregular/raleway-regular-webfont.eot?') format('eot'),
	     url('../font/ralewayregular/raleway-regular-webfont.woff') format('woff'),
	     url('../font/ralewayregular/raleway-regular-webfont.ttf')  format('truetype'),
	     url('../font/ralewayregular/raleway-regular-webfont.svg#raleway-regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* =reset.css */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0; padding : 0; border : 0; outline : 0; font-weight : inherit; font-style : inherit; font-size : 100%; font-family : inherit; vertical-align: baseline; background:transparent; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

:focus {
	outline : 0;
}
ol, ul {
	list-style : none;
}
strong {
	font-weight:bold;
}
html, body {
	height: 100%;
	min-height: 100%;
}
* {
	margin: 0;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

a { text-decoration:none; color:inherit; }

.pull-left { float: left; }
.pull-right { float: right; }

.unselectable { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}

.transition-on-05 { transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease; }
.no-flick { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}

ul.scenarios { width:96%; padding:20px 2% 0 2%; text-align:center;}

.game-container .btn {
	position: relative;
	color: #FFF;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'ralewayextrabold';
	font-size: 0.8em;
	margin: 0 auto;
	margin-bottom: 12px;
	border: solid 1px #D94E3B;
	padding: 2% 0;
	background: #dc4242;
	text-align: center;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	-webkit-box-shadow: 2px 2px 0px 1px #84261a;
	-moz-box-shadow: 2px 2px 0px 1px #84261a;
	box-shadow: 2px 2px 0px 1px #84261a;
}

.playgame .btn {
	position: relative;
	color: #9c9c9c;
	display: inline-block;
	width:30%;
	text-decoration: none;
	font-family: 'ralewayextrabold';
	font-size: 1em;
	margin:0 1% 20px 1%;
	margin-bottom: 12px;
	padding: 2% 0;
	cursor:pointer;
	text-align:left;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

.btn-sharefb {
	position: relative;
	color: #FFF;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'ralewayextrabold';
	font-size: 0.8em;
	margin: 0 auto;
	margin-top: 18px;
	border: solid 1px #415fa8;
	padding: 2% 8%;
	background: #415fa8;
	text-align: center;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	-webkit-box-shadow: 2px 2px 0px 1px #264281;
	-moz-box-shadow: 2px 2px 0px 1px #264281;
	box-shadow: 2px 2px 0px 1px #264281;
}

.btn-sharefb:hover { background: #375dba; border-color: #375dba;}

.btn-sharefb img{
	margin-right: 0.846em;
}

.game-container .btn:hover { background: #AD4032; border-color: #AD4032;}
.playgame .btn:hover { transform:scale(1.05);}
.ctshell .ct-cnt .btn a { display:block;}
.ctshell .ct-cnt .btn p { float:none !important; display:inline-block; vertical-align:top; font-size:1.3em; margin:35px 0 0 10px;}
.ctshell .ct-cnt .btn img { float:none; display:inline-block;}
.ctshell .ct-cnt .text { width:94%; padding:20px 0%; margin: 0 3%; display:inline-block; margin-bottom: 16px;}
.playgame .ctshell .ct-cnt .text {border-top: 3px solid #da5449; border-bottom: 3px solid #da5449;}

div.border-top { height: 3px; background:white;border-top: 1px solid #eeeeee; -webkit-box-shadow: 0px -1px 2px 0px rgba(80, 80, 78, 0.50); -moz-box-shadow: 0px -1px 2px 0px rgba(80, 80, 78, 0.50); box-shadow: 0px -1px 2px 0px rgba(80, 80, 78, 0.50); }
div.border-bottom { height: 3px; background:white; border-bottom: 1px solid #eeeeee; -webkit-box-shadow: 0px -1px 2px 0px rgba(80, 80, 78, 0.50); -moz-box-shadow: 0px -1px 2px 0px rgba(80, 80, 78, 0.50); box-shadow: 0px -1px 2px 0px rgba(80, 80, 78, 0.50);}
em.arrow-down { display:inline-block; width: 13px; height: 10px; background: url(../img/arrow_down.png); }
em.arrow-up { display:inline-block; width: 13px; height: 10px; background: url(../img/arrow_up.png); }


.image-loader { position:fixed; z-index:-12; visibility:hidden;  }

.game-container { width:100%; height:512px; position:relative; margin: 0 auto; background-color:white; overflow:hidden; display: inline-block; background-size: cover!important; background-repeat: no-repeat!important; background-position: center;}
.game-container .panel { border: 2px solid #4672CE; background: rgba(110, 145, 255, 0.8); color:white; padding: 2%; margin:0.5%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

.game-container .content { position:absolute; height:100%; top:0; bottom:0; left:0; right:0;  vertical-align: baseline; width:100%; display:table; overflow:hidden; box-shadow: 8px 8px 8px -9px #868788;}
.game-container .content .overlay {position:absolute; height:100%; top:0; bottom:0; left:0; right:0; background: black; zoom: 1; filter: alpha(opacity=50); opacity: 0.5; z-index: 10000; display:none}
.game-container .content .question-popup { position:absolute; top:0; z-index: 20000; width: 60%; font-size:2em; text-align:center; zoom: 1; filter: alpha(opacity=0); opacity: 0;  background-image: url('../img/question_background.png');  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding:5px;}
.game-container .content .question-popup .inner { background:white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding:18px; width: auto; padding: 18px; min-height: initial; max-width: initial; margin: auto;}
.game-container .content .question-popup .inner .text { font-family: 'raleway'; text-align: justify; margin-bottom: 5%; font-size: 0.7em; line-height: 1.5em; color: #524E4E;}
.game-container .content .question-popup .inner .text .highlighted { text-align: center; margin-top: 5%; color: #dc4242}
.game-container .content .question-popup .btn { display:inline-block; margin:2% auto 0 auto; padding: 2% 1%;}

.game-container .content-with-background {position:relative; background-size:cover; background-repeat: no-repeat!important; display:table-cell; vertical-align: top; }

.game-container .content.landing-content { vertical-align:middle }

.game-container .content-with-background .landing-page-loader { width:90%; font-size: 2.5em; margin: 5%; text-align: center}
.game-container .content-with-background .landing-page-loader .loader-holder { border: 1px solid #4672CE; margin-top: 5%; position: relative; overflow: hidden; height: 4px; }
.game-container .content-with-background .landing-page-loader .loader { height: 4px; background-color: #4672CE; left: 0; position: absolute;}

.game-container .content-with-background .landing-page-wrapper { width:349px; height: 357px; position:relative; font-size: 2em; margin: 4% 8%; background-color: #f9f9f9; border: 2px solid #b7b7b7; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.game-container .content-with-background .landing-page-wrapper.loading-wrapper { border:none; background:transparent; }
.game-container .content-with-background .landing-page-text { width:349px; position:relative; font-size: 2em; margin: 4% 8%; background-color: #f9f9f9; border: 2px solid #b7b7b7; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.game-container .content-with-background .landing-page-text .ribbon { position: absolute; width:368px; height:41px; top: 10px; left:-10px; text-align: center;}
.game-container .content-with-background .landing-page-text .ribbon em { font-family: 'ralewaymedium'; color: white; margin: 8px; font-weight: bold; line-height: 37px;}
.game-container .content-with-background .landing-page-text .text { font-family: 'raleway'; font-size: 0.6em; margin: 15% 7% 2% 7%; line-height: 1.5em; text-align: justify; color: #0F0B0B; }
.game-container .content-with-background .landing-page-text ul { list-style: none}
.game-container .content-with-background .landing-page-text p { margin-top: 6%;}
.game-container .content-with-background .landing-page-text .btn.btn-continue { width: 40%; margin-top: 10%; }

.game-container .content .question-content { vertical-align: bottom; }
.game-container .content .question-content .question { opacity: 0; overflow:hidden; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.game-container .content .question-content .hide-question { padding:0; position:relative; z-index:1000; width:100%; background:white; }
.game-container .content .question-content .hide-question div { width:100%;}
.game-container .content .question-content .hide-question .hide-btn { color:#dc4242; font-size: 1.2em; font-family:"ralewayextrabold"; text-align: center; line-height: 30px; min-height: 30px; text-transform:uppercase;}
.game-container .content .question-data { background-image: url('../img/question_background.png'); display: block; }
.game-container .content .question-text { float:left; width: 47%; font-size: 1.385em; color: #666666; opacity:0; padding: 2%; line-height: 1.5em;}
.game-container .content .question-text p { font-family: 'raleway'; font-size: 0.9em; color: #0F0B0B}
.game-container .content .extra-options { position:absolute; bottom:0; left:0; right:0; display:block; margin: 1%; }

.game-container .content .question-answers { padding:0.5%; width: 46%; font-size: 1.7em; }
.game-container .content .question-answers ul { margin: 4% 4% 1% 1%; border: 2px solid #BBBBBB; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #F7F7F7;}
.game-container .content .question-answers ul li { position: relative; background: url("../img/bullet.png") 2% 41% no-repeat /* 7 9 */; padding-bottom: 1%; padding-left: 25px; border-bottom: 2px solid #BBBBBB; font-family:"ralewaymedium"; font-size: 0.8em; color:#dc4242; opacity:0}
.game-container .content .question-answers ul li:active { background-color: white}
.game-container .content .question-answers ul li.first { border-top-left-radius: 10px; border-top-right-radius: 10px; moz-border-radius-topleft: 10px; moz-border-radius-topright: 10px; webkit-border-top-left-radius: 10px; webkit-border-top-right-radius: 10px; }
.game-container .content .question-answers ul li.last { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; moz-border-radius-bottomleft: 10px; moz-border-radius-bottomright: 10px; webkit-border-bottom-left-radius: 10px; webkit-border-bottom-right-radius: 10px; }
.game-container .content .question-answers ul li .answer {margin-right: 3px; background:url(../img/arrow_right.png) no-repeat; background-position: right center;}
.game-container .content .question-answers ul li.last { border-bottom: none}
.game-container .content .question-answers .btn-answer { display:block; padding: 2%; font-size: 0.9em;}


.game-container .content.info-content { vertical-align: middle; }
.game-container .content .infowindow { max-width: 60%; margin:auto; font-size: 2em; text-align: center; opacity:0;}
.game-container .content .infowindow .btn { display:inline-block; margin:2% auto 0 auto;}

/* Loader */

@-webkit-keyframes rotate {
  from {
	-webkit-transform: rotate(0deg);
  }
  to {
	-webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
	-moz-transform: rotate(0deg);
  }
  to {
	-moz-transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  from {
	-o-transform: rotate(0deg);
  }
  to {
	-o-transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
	transform: rotate(0deg);
  }
  to {
	transform: rotate(360deg);
  }
}
.progress-circle-container {
  position: relative;
  height: 230px;
  width: 230px;
  margin: 35px auto 0;
}
.progress-circle-container .progress-circle-outer {
  background-color: #faef85;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(0deg, #dc4242, #f9f9f9);
  background-image: -webkit-linear-gradient(0deg, #dc4242, #f9f9f9);
  background-image: -o-linear-gradient(0deg, #dc4242, #f9f9f9);
  background-image: linear-gradient(0deg, #dc4242, #f9f9f9);
  width: 230px;
  height: 230px;
  position: absolute;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation: rotate 2.2s infinite linear;
  -moz-animation: rotate 2.2s infinite linear;
  -o-animation: rotate 2.2s infinite linear;
  animation: rotate 2.2s infinite linear;
  -webkit-box-shadow: inset 0 2px 10px #84261a, inset 0 0 20px #84261a, 0 0 15px rgba(126, 35, 35, 0.25);
  -moz-box-shadow: inset 0 2px 10px #84261a, inset 0 0 20px #84261a, 0 0 15px rgba(126, 35, 35, 0.25);
  box-shadow: inset 0 2px 10px #84261a, inset 0 0 20px #84261a, 0 0 15px rgba(126, 35, 35, 0.25);
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}
.progress-circle-container .progress-circle-outer.animate {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
.progress-circle-container .progress-circle-inner {
	font-family: 'raleway';
	height: 170px;
	width: 170px;
	margin: 0 auto;
	position: absolute;
	left: 30px;
	top: 30px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	background-color: #ebeae5;
	-webkit-box-shadow: inset 0 2px 1px #ffffff, inset 0 -1px 1px rgba(0, 0, 0, 0.08), inset 0 -3px 1px rgba(0, 0, 0, 0.09), 0 2px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 2px 1px #ffffff, inset 0 -1px 1px rgba(0, 0, 0, 0.08), inset 0 -3px 1px rgba(0, 0, 0, 0.09), 0 2px 2px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 2px 1px #ffffff, inset 0 -1px 1px rgba(0, 0, 0, 0.08), inset 0 -3px 1px rgba(0, 0, 0, 0.09), 0 2px 2px rgba(0, 0, 0, 0.3);
	text-align: center;
}
.progress-circle-container .progress-circle-inner .number,
.progress-circle-container .progress-circle-inner .unit {
  line-height: 165px;
  color: #dc4242;
  font-size: 74px;
  font-weight: normal;
  text-shadow: 0 -1px 1px #8F3737, 0 1px 1px #ffffff;
}
.progress-circle-container .progress-circle-inner .number {
  position: relative;
  left: 3px;
}
.progress-circle-container .progress-circle-inner .unit {
  font-size: 18px;
  text-shadow: 0 1px 1px white;
  position: relative;
  left: -2px;
}


@media (max-width: 1200px) {
	body { font-size: 12px; line-height: 17px; }
}


@media (max-width: 767px) {
	body { font-size: 10px; line-height: 14px; }
}

@media (max-width: 650px) {
	.game-container .content-with-background .landing-page-wrapper { height: 278px; margin: 4% 4%; }
	.game-container .content-with-background .landing-page-text { margin: 6% }
	.progress-circle-container .progress-circle-inner { height: 170px; width: 170px; position: absolute; left: 30px; top: 30px; }
	.progress-circle-container .progress-circle-inner .number, .progress-circle-container .progress-circle-inner .unit { line-height: 170px; font-size: 55px; font-weight: bold; }

	.progress-circle-container { margin: 5px auto; }

	.game-container .content .question-popup .btn {  font-size: 0.65em; }
	.btn-sharefb {  font-size: 0.65em; padding: 2% 3%; }
	.btn-sharefb img { max-height:11px; }
}


@media (max-width: 620px) {

	.game-container .content-with-background .landing-page-text { margin: 4% }
	.game-container .content .question-popup { width:80%;}
	.game-container .content .question-popup .inner .text { margin-bottom: 2% }
	.game-container .content .question-popup .inner .text .highlighted { margin-top: 2% }

}

@media (max-width: 550px) {
	.game-container .content-with-background .landing-page-wrapper { margin: 4% 0%; }
	.game-container .content-with-background .landing-page-text { margin: 4% 14% }

	.game-container .content .question-popup .inner .text { margin-bottom: 2%; font-size: 0.6em; }
	.game-container .content .question-popup .btn {  font-size: 0.6em; }
}
/*Animation Quiz */

em.arrow-down {
	margin-right: 3px;
	margin-left: 3px;
}
.game-container .content .question-answers .btn-answer {
	padding-right: 20px !important;
}

.game-container .content .question-answers ul li .answer {
	margin-right: 8px;
	transition: 0.2s;
}

.question-answers {
	opacity: 0;
	-webkit-animation-name: questionAnswer;  /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s;  /* Safari 4.0 - 8.0 */
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	animation-name: questionAnswer;
	animation-duration: 1s;
	animation-delay:2s;
	animation-fill-mode: forwards;
}

.question-answers ul li:hover {
	background-color: #f2f2f2 !important;
	transition:0.2s;
}

.game-container .content > .question-content  {
	opacity: 0;
	-webkit-animation-name: backgroundAnimation;  /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 3s;  /* Safari 4.0 - 8.0 */
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	animation-name: backgroundAnimation;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

.question-text p {
	width: 100%;
	opacity: 0;
	-webkit-animation-name: questionText;  /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s;  /* Safari 4.0 - 8.0 */
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	animation-name: questionText;
	animation-duration: 1s;
	animation-delay:2s;
	animation-fill-mode: forwards;
}

.question {
	opacity: 0;
	-webkit-animation-name: question;  /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s;  /* Safari 4.0 - 8.0 */
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	animation-name: question;
	animation-duration: 1s;
	animation-delay:1s;
	animation-fill-mode: forwards;
}

.game-container {
	background-image:none !important;
}

.game-container .content .overlay {
	z-index: 0 ;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes question {
	from {margin-bottom: -400px; opacity: 0;}
	to {margin-bottom: 0; opacity: 1;}
}

@keyframes question {
	from {margin-bottom: -400px; opacity: 0;}
	to {margin-bottom: 0; opacity: 1;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes questionText {
	from {margin-left: -400px; opacity: 0;}
	to {margin-left: 0; opacity: 1;}
}

@keyframes questionText {
	from {margin-left: -400px; opacity: 0;}
	to {margin-left: 0; opacity: 1;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes questionAnswer {
	from {margin-right: -600px; opacity: 0;}
	to {margin-right: 0; opacity: 1;}
}

@keyframes questionAnswer {
	from {margin-right: -600px; opacity: 0;}
	to {margin-right: 0; opacity: 1;}
}

/*!* Safari 4.0 - 8.0 *!*/

@-webkit-keyframes backgroundAnimation {
	from {background-size: 120% 120%; opacity: 0;}
	to {background-size: 100% 100%; opacity: 1;}
}

@keyframes backgroundAnimation {
	from {background-size: 120% 120%; opacity: 0;}
	to {background-size: 100% 100%; opacity: 1;}
}