/*  -----------
COLORS

green		#3dcd58
green dk	#009530	
green		#3dcd58 (old)
gray dk txt	#626469 (and modal OL)
gray modal bg	#9fa0a4
------------- */

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NunitoMedium';
    src: url('../fonts/Nunito-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NunitoBold';
    src: url('../fonts/Nunito-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NunitoBoldItalic';
    src: url('../fonts/Nunito-BoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
  	background: #666;
  	padding: 0px;
  	font-family: "Nunito", sans-serif;
  	font-size: 14px;
  	color: #626469;
}
#quiz-wrapper {
	position: absolute;
	width: 1024px;
	height: 576px;
	padding: 0px;
	margin: 0px;
	background: black;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	max-width: 100%;
	overflow-x: hidden;
}
#quiz-header {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1024px;
  	height: 45px;
  	background: url(../images/header.png) no-repeat;
  	background-size: 1024px, 45px;
}
#version-txt {
	position: absolute;
	top: 26px;
	left: 992px;
	font-size: 8px;
	line-height: 20px;
	color: rgba(0, 0, 0, .2);
	text-align: right;
}
.centered {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	max-width: 100%;
}

.bold-italic {font-family: "NunitoBoldItalic", sans-serif;}
.superscript { position: relative; top: -0.5em; font-size: 0.6em; }

/*----------------------------------------------------\
|	                      QUIZ                        |
\----------------------------------------------------*/

#quiz-shell {
	position: absolute;
	display: none;
	left: 0px;
	top: 45px;
	width: 1024px;
  	height: 531px;
  	margin: 0;
  	background: none;
}

/*-*-*  PROGRESS *-*-*/

#progress-bar {
	position: absolute;
	top: 22px;
	width: 1024px;
  	height: 27px;
	background: url(../images/progress-dots.png) no-repeat;
  	background-size: 1024px 27px;
}

.progress-dot, .progress-dot-on, .progress-dot-off {
	position: absolute;
    display: flex;
    top:-1px;
    width:45px;
    height:27px;
    border-radius:14px;
    font-size: 12px;
    padding-top: 1px;
    color:#fff;
    background:#bbb;
    align-items: center;
    justify-content: center;
}

#prog-1 {left: 76px;}
#prog-2 {left: 188.5px;}
#prog-3 {left: 299.5px;}
#prog-4 {left: 411.5px;}
#prog-5 {left: 523px;}
#prog-6 {left: 634.5px;}
#prog-7 {left: 748px; width:55px;}
#prog-8 {left: 871px; width:87px;}

/*-*-*  IMAGE AND QUIZ CONTENT BLOCKS *-*-*/

.quiz-side {
	position: absolute;
	left: 546px;
	top: 49px;
	width: 477px;
  	height: 482px;
  	/* border: 1px dotted pink; */
}
.q-block {
	position: absolute;
	left: 0px;
	top: 82px;
	width: 477px;
}
.q-ttl {
	font-size: 24px;
	line-height: 24px;
	color: #3dcd58;
	font-style: bold;
	margin-bottom: 10px;
	
}
.q-txt {
	font-size: 15x;
	color: #626469;
	padding-right: 80px;
	margin: 0px;
}
.c-block {
	position: relative;
	left: 0px;
	top: 195px;
	background: white;	
}

.image-side, #image-underlay {
	position: absolute;
	left: 30px;
	top: 49px;
	width: 500px;
  	height: 450px;
}

/*-*-*  GRID BG *-*-*/

#image-grid {
	position: absolute;
	display: none;
	left: 0px;
	top: 49px;
	width: 513px;
  	height: 482px;
	background: url(../images/grid.png) no-repeat;
  	background-size: 513px 482px;
}

/*---------- BUTTONS ----------*/

/***  NEXT ***/
#btn-next {
	position: absolute;
	left: 820px;
	top: 480px; /* 478 */
	width: 170px;
	height: 33px;
	z-index: 100;
	opacity: .3;
}

#btn-next:after {
	content: '';
	position: absolute;
	top: -10px;
	left: -16px;
	width: 196px;
	height: 53px;
}
#btn-next-txt {
	position: relative;
	left: 0px;
	top: 5px;
	width: 120px;
	font-family: "NunitoBold", sans-serif;
	font-size: 18px;
	color: #3dcd58;
	z-index: 100;
	text-align: right;
}
#btn-next-icn {
	position: absolute;
	left: 130px;
	top: 0px;
	width: 33px;
  	height: 33px;
	background: url(../images/next-arrow.png) no-repeat;
	background-size: 33px 33px;
}
#next-reminder {
	position: absolute;
	display:none;
	left: -32px;
	top: 4px;
	width:150px;
	font-size: 10px;
	color: #009530;
	text-align: center;
	padding: 6px 3px;
	background: white;
	z-index: 300;
}

#btn-info {
	position: absolute;
	left: 426px;
	top: 110px;
	width:44px;
	height:44px;
	scale: 0;
}
#btn-info img {
	width:44px;
}

.btn-small {
	position: absolute;
	display: none;
	top:492px;
    width: 80px;
    border-radius:14px;
    font-size: 9px;
    padding: 4px 3px 3px ;
    color:#fff;
    background:#ccc;
    text-align: center;
}
.btn-small:after {
	content: '';
	position: absolute;
	top: -8px;
	left: -9px;
	height: 34px;
}
.btn-small:active {
	 background: #9fa0a4;
}

#btn-reset {
	left: 24px;
}
#btn-full {
	left: 124px;
}
#btn-full-exit {
	left: 124px;
	width: 100px;
}
#btn-reset:after, #btn-full:after {
	width: 100px;
}
#btn-full-exit:after {
	width: 120px;
}

.btn-modal {
	position: relative;
	width: 80px;
    border-radius:14px;
    font-size: 9px;
    padding: 4px 3px 3px ;
    color:#fff;
    background:#ccc;
    text-align: center;
}
.btn-small:active {
	 background: #9fa0a4;
}


/***  CHOICE ***/
.btn-choice {     
	position: absolute;
 	border: 1px solid #3dcd58;
   	width: 188px;
   	height: 55px;
    border-radius: 28px;
}
.btn-choice:after {
	content: '';
	position: absolute;
	top: -8px;
	left: -10px;
	height: 69px;
}

.btn-choice-txt {     
	position: absolute;
	width: 168px;
 	font-family: "NunitoMedium", sans-serif;  
    font-size: 21px;
    line-height: 21px;
    color: #626469;
	padding: 17px 10px;
    text-align: center;   
}

.two-line {     
	padding: 6px 10px;
}

.btn-choice:hover {
	transform: scale(1);
	transform-origin: center center;
}
.btn-choice:active {
	transform: scale(.97);
	transform-origin: center center;
}

/* CHOICE positioning */

.r1c1 {
	left: 0;
	top: 0;
}
.r1c2 {     
	left: 210px;
	top: 0;
}
.r2c1 {     
	left: 0;
	top: 70px;
}
.r2c2 {     
	left: 210px;
	top: 70px;
}
.r3c1 {     
	left: 0;
	top: 140px;
}
.r3c2 {     
	left: 210px;
	top: 140px;
}

/*---------- MODALS ----------*/

.info-modal {
	position: absolute;
	width:322px;
	background: #9fa0a4; 
	border: 1px solid #626469;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	max-width: 100%;
}

.no-close {
 	border: 1px solid #3dcd58;
 	border-radius:6px;
 }

.info-modal-icn {
	position: absolute;
	top: -17px;
	left: -17px;
	width: 34px;
  	height: 34px;
  	background: url(../images/info-icon.png) no-repeat;
  	background-size: 34px, 34px;
}

.info-modal-close {
	position: absolute;
    display: flex;
    top: -1px;
    left: 305px;
	width:16px;
    height:16px;
    font-size:10px;
    padding-top: 1px;
    color:#fff;
    background: #9fa0a4;
    border: 1px solid #626469;
    align-items: center;
    justify-content: center;
}

.info-modal-close:active {
	 background: #626469;
}

.info-modal-icn-right {
	position: absolute;
	top: -17px;
	left: 305px;
	width: 34px;
  	height: 34px;
  	background: url(../images/info-icon.png) no-repeat;
  	background-size: 34px, 34px;
}

.info-modal-txt {
	position: relative;
	overflow: clip;
	top: 0px;
	color: white;
	font-size: 12px;
	line-height: 18px;
	padding:20px 20px;
}

.warning-modal {
	position: absolute;
	display: none;
	z-index: 600;
	width:380px;
	background: white;
	border: 2px solid #009530;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	max-width: 100%;
	padding: 24px;
}

.warning-modal h1 {
	font-family: "NunitoBold", sans-serif;
	font-size: 26px;
	line-height: 26px;
	color: #626469;
	margin: 0px;
	padding-bottom: 6px;
	text-align: center;
}

.warning-modal p {		
	font-family: "Nunito", sans-serif;
	font-size: 16px;
	color: #626469;
	margin: 0px;
	padding-bottom: 6px;
	text-align: center;
}

.btn-modal {
	position: relative;
	width: 120px;
    border-radius:16px;
    font-size: 14px;
    padding: 8px 6px 6px ;
    color:#fff;
    background:#3dcd58;
    text-align: center;
    margin: 14px auto 6px;
}

.btn-modal:active {
	 background: #009530;
}

#time-out-mod, #confirm-mod {
	 display: none;
}

/*---------- MISC ----------*/

#fader {
	position: absolute;
	display: none;
	left: 0px;
	top: 0px;
	width: 1024px;
  	height: 531px;
  	margin: 0;
  	background: black;
}

#curtain {
	position: absolute;
	display: none;
	z-index: 500;
	left: 0px;
	top: 0px;
	width: 1024px;
	height: 576px;
	background: rgba(0, 0, 0, .8);
}