@charset "utf-8";
/* CSS Document */
#pi-quiz {
	font-family: 'Ubuntu', sans-serif;
	background:url(../assets/background.jpg) no-repeat top center;
	background-size: cover;
	padding-top: 20px;
	position: relative;
}
#pi-quiz .row {
    margin-top: 0;
}
.quiz-control-play,
.quiz-control-pause,
.quiz-yes-btn,
.quiz-no-btn,
.quiz-control-sound,
.quiz-control-mute,
#pi-quiz .lifeline-ask,
.li-incorrect,
.li-correct,
#pi-quiz .quiz-submit,
.tooltip-inner {
	background: transparent url(../assets/icon-sprite.png) 0 0 no-repeat;
}		
.quiz-control-play,
.quiz-control-pause,
.quiz-yes-btn,
.quiz-no-btn,
.quiz-control-sound,
.quiz-control-mute {
	display: inline-block;
}
.quiz-control-play {
	background-position: -517px 0;
    border: 0;
    width: 52px;
    height: 52px;
	display: inline-block;
}
.quiz-control-pause {
	background-position: -408px 0;
    border: 0;
    width: 52px;
    height: 52px;
	display: inline-block;
}
/* yes/no form */
.quiz-form-yn {
	display: inline-block;
    margin: 5px;
}
.quiz-yes-btn,
.quiz-yes-btn:focus,
.quiz-yes-btn:hover,
.quiz-yes-btn:active {
	background-position: -712px 0;
    border: 0;
    width: 52px;
    height: 52px;
	margin: 5px 8px;
}
.quiz-no-btn,
.quiz-no-btn:focus,
.quiz-no-btn:hover,
.quiz-no-btn:active {
	background-position: -622px 0;
    border: 0;
    width: 52px;
    height: 52px;
	margin: 5px 8px;
}
.quiz-control-sound	{
	background-position: -297px 0;
    border: 0;
    width: 52px;
    height: 52px;
}
.quiz-control-mute {
	background-position: -187px 0;
    border: 0;
    width: 52px;
    height: 52px;
}
#pi-quiz .disabled {
	cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .5;
}
#pi-quiz .quiz-lifeline .tooltip {
	top: -45px !important;
}
#pi-quiz .tooltip.right .tooltip-arrow,
#pi-quiz .tooltip.left .tooltip-arrow {
	border:none;
}

#pi-quiz .tooltip-inner {
    background-position: -552px -77px;
    width: 122px;
    height: 70px;
    padding: 16px 8px;
    color: #000;
    text-transform: uppercase;
    font-weight: bold;
	background-color: transparent;
}
#pi-quiz .quiz-lifeline .tooltip-inner {
    background-position: -401px -77px;
}
.pi-intro,
.pi-question,
.pi-answer {
	margin-bottom: 10px;
	padding: 15px 30px 22px;
	border-radius:12px;
	line-height:1.3;
	/* can be treated like a fallback */
	background-color: #233a92;
	
	/* will be "on top", if browser supports it */
	background-image:
    linear-gradient(
      to right, 
      #0064d3, 
	  #233a92, 
      #0064d3
    );
	border: 2px solid #233a92;
	font-weight: bold;
	width: 100%;
	color: #fff;
	font-size:24px;
	text-shadow: 1px 1px 1px #000, 3px 3px 5px #233a92;
}
#pi-quiz .pi-intro p {
	font-size: 21px;
    line-height: 25px;
    margin: 25px 0;
	font-weight: normal;
}
#pi-quiz .pi-intro a {
	color: #b4fef9;
	text-decoration: underline;
}
.pi-intro {
	margin-top: 212px;
    margin-bottom: 90px;
}
.pi-question {
	font-size: 32px;
	line-height:1.2;
	margin-top: 160px;
}
.pi-answer:hover,
.pi-answer.checked {
	/* can be treated like a fallback */
	background-color: #ff6600;
	
	/* will be "on top", if browser supports it */
	background-image:
    linear-gradient(
      to right, 
      #ffa800, 
	  #ff6600, 
      #ffa800
    );
	border: 2px solid #ff6600;
}
.display-answer .pi-answer:hover,
.display-answer .pi-answer.checked {
	/* can be treated like a fallback */
	background-color: #233a92;
	
	/* will be "on top", if browser supports it */
	background-image:
    linear-gradient(
      to right, 
      #0064d3, 
	  #233a92, 
      #0064d3
    );
	border: 2px solid #233a92;
}
.display-answer .pi-answer.correct:hover,
.display-answer .pi-answer.correct,
.pi-answer.correct:hover,
.pi-answer.correct {
	/* can be treated like a fallback */
	background-color: #00aa00;
	
	/* will be "on top", if browser supports it */
	background-image:
    linear-gradient(
      to right, 
      #6cff00, 
	  #00aa00, 
      #6cff00
    );
	border: 2px solid #00aa00;
}
.display-answer .pi-answer.incorrect:hover,
.display-answer .pi-answer.incorrect,
.pi-answer.incorrect:hover,
.pi-answer.incorrect {
	/* can be treated like a fallback */
	background-color: #f61a03;
	
	/* will be "on top", if browser supports it */
	background-image:
    linear-gradient(
      to right, 
      #a20303, 
	  #f61a03, 
      #a20303
    );
	border: 2px solid #f61a03;
}
.pi-answer input {
	display:none;
}
#pi-quiz .quiz-submit {
	background-position: -3px 0px;
    border: 0;
    width: 132px;
    height: 49px;
	margin-top: 30px;
	margin-bottom: 30px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
    font-size: 18px;
}
#pi-quiz .quiz-submit:hover {
	background-position: -3px -97px;
}
#pi-quiz .lifeline-ask {
	background-position: -303px -81px;
    width: 40px;
    border: none;
    height: 40px;
}
/* footer lists */
.quiz-lifeline,
.quiz-progress{
	padding-left:0;
}
.quiz-lifeline li,
.quiz-progress li{
	font-family: 'Montserrat', sans-serif;
	list-style:none;
	display: inline-block;
	text-decoration: none;
	position: relative;
    font-size: 32px;
	font-weight: bold;
}
.quiz-progress li{
    width: 40px;
    height: 40px;
    line-height: 1.2;
    text-align: center;
    border: 2px solid #0080ff;
    color: #0080ff;
	background: #151b2c;
	cursor: default;
}
li.text-uppercase {
    width: auto;
    border: 0;
    background: none;
    color: #fff;
    font-size: 26px;
}
.li-incorrect,
.li-correct  {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 4px;
    z-index: 999;
	display:block;
}
.li-correct {
	background-position: -195px -80px;
}
.li-incorrect {
	background-position: -195px -152px;
}
.quiz-man{
	background: transparent url(../assets/man.png) top center no-repeat;
	display:block;
	width:100%;
	height:90%;
	position:absolute;
	bottom:0;
	left:0;
	background-size: contain;
}
#pi-quiz .modal-dialog {
	text-align:center;
}
@media (max-width: 767px) {
	#pi-quiz .modal-dialog {
		width: 90%;
		margin: 100px auto 0;
	}
}
@media (min-width: 768px) {
	#pi-quiz .modal-dialog {
		width: 600px;
		margin: 210px auto 0;
	}
}
#pi-quiz .modal-content {
	background-color: transparent;
    color: #fff;
    border-radius: 12px;
}
#pi-quiz .modal-content h1 {
	text-transform:uppercase;	
}
#pi-quiz .modal-content h1,
#pi-quiz .modal-content p {
	font-weight: bold;
}
#pi-quiz .modal-content .lead {
    font-size: 120px;
}
#pi-quiz .modal-content .quiz-points {
    font-size: 60px;
}
#pi-quiz .modal-content .quiz-points sub {
	text-align: left;
	text-transform:uppercase;
    font-size: 40%;
    line-height: 1;
    vertical-align: initial;
    width: 100px;
    display: inline-block;
	bottom: initial;
	margin-left: 10px;
}
#pi-quiz .modal-content .close {
    color: #fff;
    text-shadow: none;
    filter: alpha(opacity=90);
    opacity: .9;
}
#pi-quiz .modal-content .close:hover, 
#pi-quiz .modal-content .close:focus {
    color: #fff;
    filter: alpha(opacity=100);
    opacity: 1;
}
#pi-quiz .popup-green .modal-content {
	background:url(../assets/quiz-design-popup-green.png) repeat 50% 50%;
}
#pi-quiz .popup-light-blue .modal-content {
	background:url(../assets/quiz-design-popup-light-blue.png) repeat 50% 50%;
}
#pi-quiz .popup-red .modal-content {
	background:url(../assets/quiz-design-popup-red.png) repeat 50% 50%;
}
#pi-quiz .popup-purple .modal-content {
	background:url(../assets/quiz-design-popup-purple.png) repeat 50% 50%;
}
.modal-dialog:before {
	content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 90px;
    bottom: -50px;
    border: 25px solid;
    border-color: #123801 transparent transparent #1c5901;
    z-index: 999; 
	-webkit-box-shadow: -2px 0px 0px rgba(0, 0, 0, .5);
    box-shadow: -2px 0px 0px rgba(0, 0, 0, .5);
}
.popup-light-blue .modal-dialog:before {
    border-color: #013234 transparent transparent #015053;
}
.popup-red .modal-dialog:before {
    border-color: #740101 transparent transparent #920101;
}
.popup-purple .modal-dialog:before {
    border-color: #0e0188 transparent transparent #1301ba;
}
@media (max-width: 767px) {
	#pi-quiz .modal-content h1 {
		font-size: 20px;	
	}
	.quiz-man {
		height: 560px;
		top: 80px;
		bottom: initial;
	}
	.pi-intro {
		margin-top: 170px;
		margin-bottom: 30px;
	}
	.col-sm-9.text-right {
		text-align: left;
	}
	#pi-quiz .container,
	#pi-quiz .container-fluid {
		width: auto;
	}
	#pi-quiz h1 {
		font-size: 24px;
	}	
	#pi-quiz .pi-intro p {
		font-size: 16px;
		line-height: 18px;
		margin: 17px 0;
	}
}