@font-face {
    font-family: 'GothamBold';
    src: url('../fonts/gotham-bold-webfont.woff2') format('woff2'),
         url('../fonts/gotham-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face
{	font-family : 'BurbankBigRegularBold';
	src :	url('../fonts/BurbankBigRegular-Bold.otf') format("embedded-opentype"),
		url('../fonts/BurbankBigRegular-Bold.eot') format("opentype"),
		url('../fonts/BurbankBigRegular-Bold.ttf') format("truetype");
	font-weight : bold;
	font-style : normal;
}

@font-face {
	font-family : 'BurbankBigWide-Black';
	src:	url('../fonts/BurbankBigWide-Black.eot?#iefix') format('embedded-opentype'),
		url('../fonts/BurbankBigWide-Black.otf')  format('opentype'),
		url('../fonts/BurbankBigWide-Black.woff') format('woff'),
		url('../fonts/BurbankBigWide-Black.ttf')  format('truetype'),
		url('../fonts/BurbankBigWide-Black.svg#BurbankBigWide-Black') format('svg');
	font-weight: normal;
	font-style: normal;
}

.gameContainer { margin: 0 auto; }

#gameContainer
{
	display : block;
	position : relative;
	width : 1920px;
	height : 1080px;
	max-width : 1920px;
	max-height : 1080px;
	padding : 0px;
	margin : 0 auto;
	font-family : GothamBold, Arial;
	font-weight : normal;
	text-shadow : none;
	color : #000000;
	-ms-transform-origin: top left;
	-webkit-transform-origin: top left;
	transform-origin: top left;
	-ms-transform : scale(1.0, 1.0);
	-webkit-transform : scale(1.0, 1.0);
	transform : scale(1.0, 1.0);
	line-height : normal;
	text-align : left;
}


#gameContainer #video
{
	width : 1920px;
	height : 1080px;
	position : absolute;
	top : 0px;
	left : 0px;
	z-index : 0;
}

#gameContainer div
{	padding : 0px;
	margin : 0px;
}


#gameContainer canvas
{
	position : absolute;
	left : 0px;
	top : 0px;
}
#gameContainer canvas#gesturesBoard
{
	visibility : hidden;
}
#gameContainer canvas#gesturesBoard.active
{
	visibility : visible;
}


#gameContainer p
{	margin : 60px 0px;
}

#gameContainer p.noPadding
{	margin : 0px 0px;
}


#bg
{
	position : absolute;
	top : 0px;
	left: 0px;
	background-color : #000000;
	height : inherit;
	width : inherit;
	padding : 0px;
	margin : 0px;
}


#screenBG
{
	position : absolute;
	top : 0px;
	left: 0px;
	width : inherit;
	height : inherit;
	background : none;
}

#screenBG.preloader
{	background : url('../images/scn_loading.png') no-repeat 0px 0px;
}

#screenBG.mainMenu
{	background : url('../images/scn_splash.png') no-repeat 0px 0px;
}

#screenBG.gameOver
{	background : url('../images/scn_death.png') no-repeat 0px 0px;
}
#screenBG.gameOver.victory
{	background : url('../images/scn_endgame.png') no-repeat 0px 0px;
}




.gameScreen
{
	display : none;	
	height: inherit;
	width : inherit;
	position : absolute;
	top : 0px;
	left: 0px;
	color : #ffffff;
	overflow : hidden;
}

.gameScreen.activeScreen
{	display : block;
}




#mainMenuScreen #mainMenuDiff1, #mainMenuScreen #mainMenuDiff2, #mainMenuScreen #mainMenuDiff3
{
	position : absolute;
	top : 906px;
	width : 408px;
	height : 128px;
	cursor : pointer;
}

#mainMenuScreen #mainMenuDiff1
{
	left : 298px;
	background : url('../images/buttons/btn_normal_diff.png') no-repeat 0px 0px;
}

#mainMenuScreen #mainMenuDiff2
{
	left : 756px;
	background : url('../images/buttons/btn_hard_diff.png') no-repeat 0px 0px;
}

#mainMenuScreen #mainMenuDiff3
{
	left : 1216px;
	background : url('../images/buttons/btn_epic_diff.png') no-repeat 0px 0px;
}



#gameOverScreen
{
	width : inherit;
	height : inherit;
}

#gameOverScreen #gameOverPlayAgainBtn
{
	position : absolute;
	left : 655px;
	top : 880px;
	height : 148px;
	width : 608px;
	cursor : pointer;
	pointer-events : auto;
	background : url('../images/buttons/btn_try_again.png') no-repeat 0px 0px;
}
#gameOverScreen.victory #gameOverPlayAgainBtn
{	background : url('../images/buttons/btn_play_again.png') no-repeat 0px 0px;
}

#gameBoardScreen
{
	height : inherit;
	width : inherit;
	pointer-events : none;
}


#gameBoardScreen #HUD
{
	position : absolute;
	left : 0px;
	top : 0px;
	width : inherit;
	height : inherit;
	pointer-events : none;
}



#quizScreen
{
	display : none;
	height: inherit;
	width : inherit;
	position : absolute;
	top : 0px;
	left: 0px;
	overflow : hidden;
}
#quizScreen.active, #quizResponseScreen.active
{	display : block;
}


#quizScreen #quizQuestionHeader, #quizResponseScreen #quizResponseHeader
{
	font-family : 'BurbankBigWide-Black';
	position : absolute;
	top : 21px;
	left : 0px;
	padding : 5px;
	width : 100%;
	height : 170px;
	text-align : center;
	color : #ff9900;
	overflow : hidden;
	font-size : 120px;
}

#quizScreen #quizQuestionText, #quizResponseScreen #quizResponseText
{
	position : absolute;
	top : 244px;
	left : 88px;
	padding : 5px;
	width : 1783px;
	overflow : hidden;
	font-size : 100px;
	color : #ffffff;
	text-shadow : 6px 6px 0px #000000;
}


#quizScreen #quizPanelBtnSafe
{
	position : absolute;
	display : block;
	top : 780px;
	left : 195px;
	background : url('../images/buttons/btn_quiz_safe.png') no-repeat 0px 0px;
	width : 696px;
	height : 226px;
	cursor : pointer;
}

#quizScreen #quizPanelBtnUnsafe
{
	position : absolute;
	top : 780px;
	left : 1035px;
	background : url('../images/buttons/btn_quiz_unsafe.png') no-repeat 0px 0px;
	width : 696px;
	height : 226px;
	cursor : pointer;
}


#quizResponseScreen
{	display : none;
}


#quizResponseScreen #quizResponseHeader.correct
{	color : #00ff00;
}

#quizResponseScreen #quizResponseHeader.wrong
{	color : #ff0000;
}

#quizResponseContinueBtn
{
	position : absolute;
	left : 655px;
	top : 830px;
	background : url('../images/buttons/btn_quiz_continue.png') no-repeat 0px 0px;
	height : 226px;
	width : 696px;
	cursor : pointer;
	pointer-events : auto;
}

@media only screen and (max-width: 1920px) {
	.gameContainer { width: 1824px; height: 1026px; }
	#gameContainer { -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
}

@media only screen and (max-width: 1850px) {
	.gameContainer { width: 1728px; height: 972px; }
	#gameContainer { -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
}

@media only screen and (max-width: 1750px) {
	.gameContainer { width: 1632px; height: 918px; }
	#gameContainer { -ms-transform: scale(0.85, 0.85); -webkit-transform: scale(0.85, 0.85); transform: scale(0.85, 0.85); }
}

@media only screen and (max-width: 1650px) {
	.gameContainer { width: 1536px; height: 864px; }
	#gameContainer { -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); }
}

@media only screen and (max-width: 1550px) {
	.gameContainer { width: 1440px; height: 810px; }
	#gameContainer { -ms-transform: scale(0.75, 0.75); -webkit-transform: scale(0.75, 0.75); transform: scale(0.75, 0.75); }
}

@media only screen and (max-width: 1450px) {
	.gameContainer { width: 1344px; height: 756px; }
	#gameContainer { -ms-transform: scale(0.7, 0.7); -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); }
}

@media only screen and (max-width: 1350px) {
	.gameContainer { width: 1248px; height: 702px; }
	#gameContainer { -ms-transform: scale(0.65, 0.65); -webkit-transform: scale(0.65, 0.65); transform: scale(0.65, 0.65); }
}

@media only screen and (max-width: 1250px) {
	.gameContainer { width: 1152px; height: 648px; }
	#gameContainer { -ms-transform: scale(0.6, 0.6); -webkit-transform: scale(0.6, 0.6); transform: scale(0.6, 0.6); }
}

@media only screen and (max-width: 1150px) {
	.gameContainer { width: 1056px; height: 594px; }
	#gameContainer { -ms-transform: scale(0.55, 0.55); -webkit-transform: scale(0.55, 0.55); transform: scale(0.55, 0.55); }
}

@media only screen and (max-width: 1050px) {
	.gameContainer { width: 960px; height: 540px; }
	#gameContainer { -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); }
}

@media only screen and (max-width: 950px) {
	.gameContainer { width: 864px; height: 486px; }
	#gameContainer { -ms-transform: scale(0.45, 0.45); -webkit-transform: scale(0.45, 0.45); transform: scale(0.45, 0.45); }
}

@media only screen and (max-width: 850px) {
	.gameContainer { width: 768px; height: 432px; }
	#gameContainer { -ms-transform: scale(0.4, 0.4); -webkit-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); }
}

@media only screen and (max-width: 750px) {
	.gameContainer { width: 672px; height: 378px; }
	#gameContainer { -ms-transform: scale(0.35, 0.35); -webkit-transform: scale(0.35, 0.35); transform: scale(0.35, 0.35); }
}

@media only screen and (max-width: 650px) {
	.gameContainer { width: 576px; height: 324px; }
	#gameContainer { -ms-transform: scale(0.3, 0.3); -webkit-transform: scale(0.3, 0.3); transform: scale(0.3, 0.3); }
}

@media only screen and (max-width: 550px) {
	.gameContainer { width: 480px; height: 270px; }
	#gameContainer { -ms-transform: scale(0.25, 0.25); -webkit-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); }
}

@media only screen and (max-width: 450px) {
	.gameContainer { width: 384px; height: 216px; }
	#gameContainer { -ms-transform: scale(0.2, 0.2); -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); }
}

@media only screen and (max-width: 360px) {
	.gameContainer { width: 345.6px; height: 194.4px; }
	#gameContainer { -ms-transform: scale(0.18, 0.18); -webkit-transform: scale(0.18, 0.18); transform: scale(0.18, 0.18); }
}