@font-face {
    font-family: 'Montserrat-Black';
    src: url('../fonts/Montserrat/Montserrat-Black.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url('../fonts/Montserrat/Montserrat-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Regular';
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Light';
    src: url('../fonts/Montserrat/Montserrat-Light.ttf');
    font-weight: normal;
    font-style: normal;
}

.container{
	width: 1024px;
	max-width: 1024px;
	position: relative;
	padding: 0;
	height: 672px;
}

.pop_up{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5;
}

.table-container{
	height: 672px;
	background-image: url("../img/Background.png");
	background-size: cover;
}

#logo{
	width: 158.5px;
	height: 72.5px;
	margin-top: 17px;
}

.questions > .table-container{
	padding-right: 38px;
	padding-left: 38px;
}

.header-row{
	margin-top: 5px;
	margin-bottom: 20px;
}

.close_button{
	position: absolute;
	z-index: 6;
}

/* hide begin button on load; display when how to play is clicked */
#begin_button, #begin-cta, #instr_reminder {
    display: none;
}

#begin_reminder {
    visibility: hidden;
}

.col-2.content-row > div, .col-2.top-row > div{
	width: 130.76px;
	float: right;
}

#splash, #compliance_pop, #instruction_pop, #prev, .reveal-answer, .results-screen, #instruction_pop > div.instructions > div:not(:first-child), .table-container, #incorrectAnswer, #correctAnswer, #timeUp, .next-clue-hiden, .next-round{
	display: none;
}

.answer-row > div > div > div:hover, .reveal-answer, .next-clue > div, .next-round, .close_button, #next, #prev, #instr_pop, .submit > div, #incorrectAnswer > div, #correctAnswer > div, #timeUp > div{
	cursor: pointer;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#instr_pop{
	position: absolute;
	bottom: 64px;
	height: 64px;
	width: 203px;
	right: 384px;
}

#prev{
	position: absolute;
	width: 113px;
	height: 43px;
	bottom: 47px;
	right: 242px;
	z-index: 6;
}

#next{
	position: absolute;
	width: 113px;
	height: 43px;
	bottom: 47px;
	right: 113px;
	z-index: 6;
}

.pop_instructions_text{
	position: absolute;
	z-index: 5;
	right: 70px;
	top: 185px;
	height: 370px;
	overflow-y: scroll;
}

.pop_instructions_text > img{
	width: 353px;
}

/* width */
.pop_instructions_text::-webkit-scrollbar {
    width: 15px;
}

/* Track */
.pop_instructions_text::-webkit-scrollbar-button:vertical:increment {
	background-image: url("../img/btn_down-arrow.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.pop_instructions_text::-webkit-scrollbar-button:vertical:decrement  {
	background-image: url("../img/btn_scrollup-arrow.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.pop_instructions_text::-webkit-scrollbar-track {
    background: #f1f1f1;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 25px;
}
 
/* Handle */
.pop_instructions_text::-webkit-scrollbar-thumb {
    background: #888;
	border-radius: 25px;
}

/* Handle on hover */
.pop_instructions_text::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.table-container{
	margin-left: auto;
	margin-right: auto;
}

.modal-open{
	padding-right: 0px !important;
}

.table-container > div >  div{
	padding-bottom: 5px;
}

.top-row > div{
	background-color: rgb(33,142,139,0.5);
	font-size: 24px;
	font-family: 'Montserrat-Black';
}

.content-row.col-10 > div{
	background-color: rgb(17,96,126);
	height: 50px;
	font-family: 'Montserrat-Black';
}

.content-row.col-10 > div > div.col-1{
	font-size: 40px;
	margin-top: -5px;
}

.content-row.col-10 > div > div.col-11{
	padding-right: 10px;
	font-family: 'Montserrat-Light';
	font-size: 13px;
	margin-top: 5px;
}

.content-row.col-2 > div{
	background-color: rgb(40,131,129);
	border: solid #F1F2F2 2.67px;
	height: 50px;
	font-size: 24px;
	padding-top: 5px;
	font-family: 'Montserrat-Medium';
}

.table-container > div > div > div{
	color: white;
}

.table-container > div >  div.content-row:nth-child(2n-1) > div, .table-container > div >  div.top-row:nth-child(2n-1) > div{
	padding-left: 15px;
}

.table-container > div >  div:nth-child(2n) > div{
	text-align: center;
}

.answer-row > div > div > div{
	background-color: #157195;
	text-align: center;
	height: 50px;
	padding-top: 10px;
	border: solid #F1F2F2 2.67px;
	width: 180.5px;
	height: 68.5px;
	/*width: 177.5px;
	height: 66.5px;*/
	float: right;
	font-size: 20px;
	line-height: 1;
	font-family: 'Montserrat-Light';
}

.answer-row > div > div > div.col-12{
	height: 30px;
	font-size: 13px;
	line-height: 0.3;
}

.answer-row > div > div > div.col-12:last-child{
	margin-top: 8.5px;
}

.answer-row > div > div > div.single_line_answer{
	padding-top: 22px;
}

.answer-section{
	margin-top: 25px;
}

.selected_answer_image{
	width: 218.5px;
	position: absolute;
	left: -2px;
	top: -18px;
}

.score_hilight{
	width: 218.5px;
	position: absolute;
	left: -12px;
	top: -18px;
}

.actual_answer_image{
	width: 218.5px;
	position: absolute;
	left: -2px;
	top: -20px;
}

.content-row.col-10 > div > div.col-11.single_line_hint{
	margin-top: 14px;
}

.next-clue, .submit, .next-round{
	margin-top: 10px;
	text-align: center;
	font-size: 24px;
	line-height: 32px;
}

.next-round > div{
	background-color: #84C05C;
	border: solid #F1F2F2 2.67px;
	width: 432.5px;
	height: 40px;
	float: right;
	color: #000 !important;
	font-family: 'Montserrat-Light';
}

.last-round > div{
	background-color: #CDAE31;
}

.disclaimer{
	color: #fff;
	text-align: center;
	margin-top: 40px;
	font-size: 12px;
}

.next-clue > div{
	background-color: #288381;
	border: solid #F1F2F2 2.67px;
	width: 186.5px;
	height: 40px;
	float: right;
	color: #000 !important;
	font-family: 'Montserrat-Light';
}

.submit  > div{
	background-color: #CDAE32;
	border: solid #F1F2F2 2.67px;
	margin-right: 0px !important;
	width: 130.76px;
	height: 40px;
	float: right;
	color: #000 !important;
	font-family: 'Montserrat-Light';
}

.round-number{
	font-size: 40px;
	font-family: 'Montserrat-Light';
}

.round-number > div{
	margin-top: 41px;
}

.time-counter{
	height: 119.5px;
}

.time-counter > div > img{
	width: 221px;
	position: absolute;
	left: -40px;
}

.time-counter > div > div{
	position: absolute;
	top: 55px;
	left: 10px;
	font-size: 20px;
	color: #000;
	font-family: 'Montserrat-Light';
}

.time-counter > div > div.current-time{
	left: 65px;
    top: 22px;
	font-size: 60px;
	color: #208D8D;
	width: 70px;
	text-align: center;
	font-family: 'Montserrat-Medium';
}

.submission_space_filler{
	height: 55px;
}

.score > div > img{
	width: 198px;
	position: absolute;
	right: -33px;
	top: 9px;
}

.score > div > img.score_hilight{
	left: 142px;
	width: 215.5px;
	top: 0px;
}

.indiv_score_hilight{
	width: 195px;
	position: absolute;
	left: -4px;
	top: -32px;
}

.score > div > div{
	position: absolute;
	top: 60px;
	right: 150px;
}

.score > div > div.score-number{
	top: 38px;
	right: 0px;
	height: 60px;
	width: 131px;
	font-size: 60px;
	color: #208D8D;
	margin-top: -9px;
	font-family: 'Montserrat-Medium';
}

.results-screen{
	width: 100%;
	text-align: center;
	font-size: 60px;
	color: #208D8D;
}

.total_score{
	position: absolute;
	top: 160px;
	left: 426px;
	width: 173px;
	font-family: 'Montserrat-Medium';
}

#incorrectAnswer > img, #correctAnswer > img, #timeUp > img{
	width: 1024px;
}

#incorrectAnswer > div, #correctAnswer > div, #timeUp > div{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 217px;
	right: 280px;
	z-index: 30;
}

#incorrectAnswer, #correctAnswer, #timeUp{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}

/* adjust the logo to the right on the ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    #logo {
        margin-left: 15px;
    }
}