@font-face{
	font-family: "ND LOGOS REGULAR";
	src: url("../fonts/ND LOGOS REGULAR.ttf") format("truetype");
}
@font-face{
	font-family: "DS-DIGI";
	src: url("../fonts/DS-DIGI.TTF") format("truetype");
}
@font-face{
	font-family: "Apex";
	src: url("../fonts/ApexSans-Medium.otf") format("opentype");
}
@font-face{
	font-family: "ApexBold";
	src: url("../fonts/ApexSans-Bold.otf") format("opentype");
}
/*General*/
body{color: white;}
#pleaserotate-message{color: black !important;}
.hide{display: none;}
.vid-bg{background:url("../images/TitleScreen_bkgrd.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 100vh; position: fixed;z-index:-1;}
.vidChange{width:100%; height: 100vh;}
.btn:focus{box-shadow: none !important;}
.qbox{margin: 0;}
video{position: fixed;}
.centerAlign{height: 70vh;}
/*FONTS*/
.ndFont{font-family: "ND LOGOS REGULAR" !important;}
.ds-digi{font-family: "DS-DIGI" !important;}
.apexFont{font-family: "Apex" !important;}
.apexBFont{font-family: "ApexBold" !important;}

/*Title*/
.homeTitle{line-height: 185px;}
.titleStyle{font-size: 8rem; margin-bottom: 50px; word-spacing: 20px;}
.subtitle{font-size: 5rem; margin-bottom: 5px;}
.btn.subtitle{color: white;}
.btnImg{width: 70%;}
.picIn{width: 11%;}
.picIn img{width:100%;}

/*Car Select*/
.carImg{width: 500px;}

/*Profile*/
label.subtitle{margin-bottom: 0;}
.nameField{margin-bottom: 75px; font-size: 5rem; line-height: 0;}
#my_camera{width: 400px; height: 400px; margin: auto; margin-bottom: 20px;}
.timerUserPic{position: fixed; width: 105px; left: 73px; top: 34px;}
.profile-btn{visibility: hidden;}
.default-pic, .default-pic2, .default-pic3, .default-pic4, .default-pic5{padding: 0;}

/*Timer*/
.timer p{top: 20px; left: 175px; position: fixed; font-size: 5rem;}
.timer{position: fixed; margin-top: 25px; margin-left: 25px;}
.timerPic{width: 35%;}
.QtitleStyle{font-size: 3rem; margin-bottom: 1.5%;}
.timer span{float: right; font-size: 4rem;}
.timer .wrong{position: fixed; top: 35px; left: 385px;}

/*Question*/
.qbox{height:100vh;}
.answer{width: 65%; margin:auto}
.answer button{font-family: "Apex"; font-size: 3rem; display: block; margin-top: 5px; margin-bottom: 5px; text-align: left; width:100%;color: #ffffff; line-height: 60px; background-repeat: no-repeat !important; background-size: 70px !important; background-position: 15px top !important;}
.answer p{padding-left:100px; }
.answer .btnA{background:url("../images/Yellow_A.png");}
.answer .btnB{background:url("../images/Yellow_B.png");}
.answer .btnC{background:url("../images/Yellow_C.png");}
.answer button:hover{color: #fff282;}
.answer button:focus{box-shadow: none; color: #fff282;}
.ansBtn{width:70px; margin-right: 3%;float: left;}

.question p{font-family: "ApexBold"; font-size: 5rem; margin-bottom:50px;}
.question .titleStyle{margin-bottom: 5%;}
.qTrack{position: fixed; top: 60px; right: 50px;}
.longText .answer{width: 80%;}
.answer button img{vertical-align: top; margin-top:5px;}

/*Result*/
.resultTitle{font-size: 3rem; margin-bottom: 0;margin-top:30px;}
table.dataTable thead th, .table thead th{border: none !important;}
table.dataTable{width: 50%;border-collapse: collapse;table-layout:fixed;}
table.dataTable thead{visibility: hidden;}
table.dataTable tbody tr{background-color: #dddddd; color: #373737;border-bottom: 3px solid black;}
table.dataTable td img{width: 55px; border-radius: 500px;margin-top: 10px;}
table.dataTable tbody td{text-align: left; padding-top: 0; padding-bottom: 0;}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter{display: none !important;}
.dataTables_wrapper .dataTables_paginate{position: fixed; top: 0; right: 0; font-family: "Apex";}
.dataTables_wrapper .dataTables_paginate a{color: #666;}
.dataTables_wrapper .dataTables_paginate a.current{border: none; background-color: none;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background-color: none; border: none;}
.tblIndex{font-family: "Apex" !important; font-size: 2.5rem; color: #f3080f;padding-left: 25px; text-align: center !important;}
.tblTimer{font-family: "DS-DIGI" !important; font-size: 3rem; text-align: left !important;}
.tblScore{font-family: "Apex" !important; font-size: 2.5rem;text-align: right !important; padding-right:25px;}
.tblScoreGreen{color: #3c6d02;}
.tblName{font-family: "Apex" !important; font-size: 2.5rem; text-transform: capitalize;}
.nocentering{align-items:normal !important;}

/*LOGO*/
.logo{position: fixed; right: 40px; bottom: 0;width: 350px;z-index:99;}
.logo-btn{text-align: right;width:100%;}
.logoImg{width: 100%;}
@media(max-width: 2500px){
	.logo{width: 250px;}
}
@media(max-width: 1920px){
	.titleStyle{font-size: 5rem; margin-bottom: 20px;}
	.homeTitle{line-height: 125px;}
	.subtitle{font-size: 4rem;}
	.nameField{font-size: 4rem; width: 600px;}
	.picIn{width: 150px;}
	.btnImg{width: 60%;}
	
	.carImg{width: 300px;}
	.timer{margin-top: 15px; margin-left: 15px;}
	.timerPic{width: 30%;}
	.answer button{font-size: 2.5rem; line-height: 50px; background-size: 65px !important;;}
	.question p{font-size: 3.5rem; margin-bottom: 25px;}
	.timer p{top: 15px; left: 150px;font-size: 4rem;}
	.timer span{font-size: 3rem;}
	.timer .wrong{top: 32px; left: 325px;}
	.timerUserPic{width: 89px; left: 57px; top: 25px;}
	.qTrack{top: 20px; right: 50px;}
	.result{margin-bottom: 200px;}
	.logo{width: 225px;}
}
@media(max-width: 1590px){
	.titleStyle{font-size: 4rem;}
	.homeTitle{line-height: 105px;}
	.question p{font-size: 3rem; margin-bottom: 25px;}
	.answer button{font-size: 2rem; line-height: 40px; background-size: 55px !important;}
}
@media(max-width: 1367px){
	.carImg{width: 250px;}
	.qboxarea.longText{max-width: 75%; flex: 0 0 75%;}
	.question p{font-size: 2.5rem;}
	.answer button{font-size: 1.75rem;}
	.picIn{width: 130px;}
}
@media(max-width: 1280px){
	.titleStyle{font-size: 3.5rem;}
	.subtitle{font-size: 3rem;}
	.homeTitle{line-height: 95px;}
	.btnImg{width: 50%;}
	.nameField{font-size: 3rem; width: 500px;}
	
	.timer p{top: 12px; left: 125px;font-size: 3.5rem;}
	.carImg{width: 200px;}
	
	.timerPic{width: 250px;}
	.timer span{font-size: 2.5rem;}
	.timer .wrong{top: 25px; left: 270px;}
	.QtitleStyle{font-size: 2rem;}
	.question p{font-size: 2.5rem; margin-bottom: 15px;}
	.answer button{font-size: 1.5rem;}
	.answer p{margin-top: 0px; margin-bottom: 0;}
	.ansBtn{width: 50px;}
	.answer{width: 65%}
	.timerUserPic{left: 48px; top: 22px; width: 75px;}
	.qboxarea{max-width: 70%; flex: 0 0 70%;}
	.tblIndex{font-size: 1.5rem; padding-left: 25px;}
	.tblTimer{font-size: 1.7rem; }
	.tblScore{font-size: 1.5rem;padding-right:25px;}
	.tblName{font-size: 1.5rem;}
	table.dataTable td img{width: 35px; margin-top: 0px;}
	.longText .answer{width: 82%;}
	.logo{width: 200px;}
}
@media(max-width:1150px){
	.titleStyle{font-size: 3rem;}
	.subtitle{font-size: 3rem;}
	.homeTitle{line-height: 85px;}
	.btnImg{width: 45%;}
	.nameField{font-size: 3rem; width: 450px;}
	.picIn{width: 110px;}
	.question p{font-size: 2rem;}
}
@media(max-width: 1025px){
	.titleStyle{font-size: 2.5rem;}
	.subtitle{font-size: 2.5rem;}
	.homeTitle{line-height: 75px;}
	.btnImg{width: 45%;}
	.nameField{font-size: 2.5rem; width: 400px;}
	.picIn{width: 100px;}
	
	.longText .answer{width: 85%;}
	.question p{font-size: 2rem;}
	.answer button{font-size: 1.25rem;background-size: 50px !important;}
	.answer p{padding-left: 60px;}
	.timer{margin-top:5px; margin-bottom: 5px; margin-left: 5px;}
	.timerPic{width:150px;}
	.timer p{top: 5px; left: 70px; font-size: 2rem;}
	.timerUserPic{left: 25px; top: 9px; width: 45px;}
	.timer span{font-size: 2rem;}
	.timer .wrong{top:5px; left: 170px;}
}
@media(max-width: 950px){
	.carImg{width: 130px;}
	label.subtitle{margin-bottom: 70px; margin-top:0;}
	.nobotmob{margin-bottom: 0 !important;}
	.nameField{margin-bottom: 50px;}
	.question p{font-size: 2rem;margin-bottom: 0px;}
	.answer button{font-size: 1.25rem; line-height: 35px; background-size: 45px !important;}
	.qTrack{top:10px; right: 10px;}
	.QtitleStyle{font-size: 1.5rem;}
	.qboxarea.longText{max-width: 90%; flex: 0 0 90%;}
	.qboxarea{max-width: 75%; flex: 0 0 75%;}
	.answer{width: 75%;}
	.question p{font-size: 1.75rem;}
	.profile .text-right{flex: 0 0 40%; max-width: 40%;}
	.profile .text-left{flex: 0 0 60%; max-width: 60%;}
}
@media(max-width:845px){
	.titleStyle{font-size: 2rem;}
	.subtitle{font-size: 2rem;}
	.homeTitle{line-height: 55px;}
	.btnImg{width: 45%;}
	.nameField{font-size: 2rem; width: 100%; margin-bottom: 20px;}
	label.subtitle{margin-bottom: 20px;}
	.profile-btn{margin-top: 0 !important;}
	.logo{width: 200px;}
}
@media(max-width: 760px){
	.nameField{font-size: 2rem; width: 100%}
	.answer p{float: none; display: inline-block; margin-bottom: 0; margin-top: 0;}
	.answer button{font-size: 1.25rem; line-height: 30px;}
	.profile .text-right{flex: 0 0 40%; max-width: 40%;}
	.profile .text-left{flex: 0 0 60%; max-width: 60%;}
	.picIn{width: 90px; margin-bottom: 20px;}
	.btnImg{width: 40%;}
	.logo{width: 150px;}
}
@media(max-width: 720px){
	.qboxarea{max-width: 85%; flex: 0 0 85%;}
	.timer{margin-top:5px; margin-bottom: 5px; margin-left: 5px;}
	.timerPic{width:150px;}
	.timer p{top: 5px; left: 70px; font-size: 2rem;}
	.titleStyle{word-spacing: 15px;}
	.carImg{width: 100px;}
	.ansBtn{float: none; width: 30px;}
	.timerUserPic{left: 25px; top: 9px; width: 45px;}
	#my_camera{margin-bottom: 0px;}
	.timer span{font-size: 2rem;}
	.timer .wrong{top:5px; left: 160px;}
	.subtitle{font-size: 1.5rem;}
	.nameField{font-size: 1.5rem;}
	.answer button{background-size: 40px !important;}
	
}
@media(max-width: 685px){
	.homeScreen{max-width: 90%; flex: 0 0 90%;}
	.qboxarea{max-width: 90%; flex: 0 0 90%;}
	.answer{width: 80%;}
	label.subtitle{margin-bottom: 20px;}
	.profile-btn{margin-top: 0 !important;}
	.picIn{width: 80px; margin-bottom: 20px;}
}
@media(max-width: 620px){
	.picIn{width: 75px; margin-bottom: 0px;}
}
@media(max-width: 565px){
	.picIn{width: 60px; margin-bottom: 20px;}
}
@media(max-width: 550px){
	.titleStyle{font-size: 1.5rem;}
	.homeTitle{line-height: 45px;}
	.subtitle{font-size: 1.5rem;}
	.carImg{width: 75px;}
	.picIn{margin-right: 0 !important;}
	.mobSizeMove{max-width: 40%;}
	.qboxarea{max-width: 100%; flex: 0 0 100%;}
	.nameField{font-size: 1.5rem; width: 100%; margin-bottom: 20px;}
}
/*@media(min-height: 750px) and (max-height: 950px){
	.question p{font-size: 3.5rem;}
	.answer button{font-size: 2rem; line-height: 50px;}
	.ansBtn{width: 50px;}
}*/
@media(max-height: 420px){
	.qboxarea{margin-top: 0px;}
	.answer button{line-height:25px;}
}
@media(max-height: 376px){
	.qboxarea.longText{max-width: 100%; flex: 0 0 100%;}
	.btnImg{width: 35%;}
}
@media(max-height: 350px){
	.qbox{position: fixed;}
	.qboxarea{margin-top: 35px;}
	.question p{font-size: 1.25rem; line-height: 25px;}
	.answer button{font-sizE: 1rem; line-height: 25px; background-size: 35px !important;}
	.answer p{padding-left: 45px;}
	.btnImg{width: 35%;}
	.picIn{margin-bottom: 0px;}
}

@media(max-height: 300px){
	.question p{font-size: 1rem; line-height: 25px;}
	.answer button{font-sizE: 1rem; line-height: 25px; background-size: 35px !important;}
	.answer p{padding-left: 45px;}
	.homeTitle{line-height: 55px;}
	.car .subtitle{margin-bottom: 10px;}
	label.subtitle{margin-bottom: 0;}
	.profile .titleStyle{margin-bottom: 10px;}
	.profile-btn{margin-top: 5px;}
	.profile.centerAlign{margin-top:15px; !important;}
}
@media(max-width: 1200px) and (max-height: 400px){
	.titleStyle{font-size: 2rem; margin-bottom: 0;}
	.profile .titleStyle{margin-bottom: 20px;}
	.centerAlign{height:100%; margin-top: 45px !important;}
	.homeTitle{line-height: 65px;}
	.subtitle{font-size: 1.75rem;}
	.btnImg{width: 35%;}
	.carImg{width: 150px;}
	.nameField{font-size: 1.75rem; width: 80%; margin-bottom: 20px;}
	.picIn{width: 70px;}
	.profile-btn{margin-top: 10px !important;}
	.answer button{background-size: 35px !important;}
	.QtitleStyle{font-size: 1.25rem;}
	.timer{margin-top:5px; margin-bottom: 5px; margin-left: 5px;}
	.timerPic{width:150px;}
	.timer p{top: 5px; left: 70px; font-size: 2rem;}
	.timerUserPic{left: 25px; top: 9px; width: 45px;}
	.timer span{font-size: 2rem;}
	.timer .wrong{top:5px; left: 170px;}
}
@media(max-width: 950px) and (max-height: 300px){
	.question p{font-size: 1rem; line-height: 25px;}
	.answer button{font-sizE: 1rem; line-height: 25px; background-size: 35px !important;}
	.answer p{padding-left: 45px;}
	.homeTitle{line-height: 55px;}
	.car .subtitle{margin-bottom: 10px !important;}
	label.subtitle{margin-bottom: 0;}
	.profile .titleStyle{margin-bottom: 10px !important;}
	.profile-btn{margin-top: 5px;}
	.profile.centerAlign{margin-top:15px !important;}
	.btnImg{width: 30%;}
}
@media(max-width: 650px) and (max-height: 250px){
	.titleStyle{font-size: 1.5rem;}
	.subtitle{font-size: 1.25rem;}
	.nameField{font-size: 1.25rem; width: 80%; margin-bottom: 20px;}
	.picIn{width: 65px;}
	.carImg{width: 100px;}
	.question p{font-size: 1rem; line-height: 25px;}
	.answer button{font-sizE: 1rem; line-height: 15px; background-size: 30px !important;}
	.answer p{padding-left: 40px;}
	.timerPic{width: 125px;}
	.timerUserPic{width: 36px; left: 21px;}
	.timer .wrong{top: 6px; left: 135px;}
	.timer p{top: 6px; left: 63px; font-size: 1.6rem;}
	.timer span{font-size: 1.5rem;}
	
	.homeTitle{line-height: 55px;}
	.car .subtitle{margin-bottom: 10px !important;}
	label.subtitle{margin-bottom: 0;}
	.profile .titleStyle{margin-bottom: 10px;}
	.profile-btn{margin-top: 5px;}
	.profile.centerAlign{margin-top:15px !important;}
}