/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
@font-face {
	font-family:"digital display tfb";
	src:url("../fonts/digital_display_tfb.eot?") 
	format("eot"),url("../fonts/digital_display_tfb.woff") 
	format("woff"),url("../fonts/digital_display_tfb.ttf") 
	format("truetype"),url("../fonts/digital_display_tfb.svg#digitaldisplaytfb") format("svg");
	font-weight:normal;
	font-style:normal;
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}

html {height: 100%;}
body {
	color:#fff;
	font-family: "proxima-nova", Arial;
	background: #000;
	overflow: hidden;
	margin: 0;
	padding: 0;
	height: 100%;
}

body.rotate {
	background: #000 url('../imx/rotate.png') center center no-repeat;
	background-size: contain;	
}
body.rotate #main {display: none;}

#main {
	position: relative;
	overflow: hidden;
	width: 1852px;
	height: 1200px;
}
canvas {
	background-color: transparent;
	position: absolute;
	pointer-events: none;
}

#main div, #main img, h1, h2, h3 {
	position: absolute; 
	margin: 0;
}
#mute_button {
	left: 25px;
	top: 25px;
	width: 109px;
	height: 109px;
	background-image: url('../imx/mute.png');
	background-position-x: -109px;
	cursor: pointer;
}
#mute_button.unmute {background-position-x: 0px;}

#disclaimer {
	left: 15px;
	bottom: 12px;
	width: calc(100% - 30px);
	font-size: 20px;
	color: #000;
	text-align: center;
}
#disclaimer a{
	color: #000;
}

/* #mark INTRO */

#intro {
	position: absolute;
	top: 0;
	left: 0;
/* 	background: url('../imx/intro_bg.jpg') top center no-repeat; */
	background: url('../imx/intro_bg_small.gif') top center / cover no-repeat;
}

#intro .lockup {
	left: 126px;
	top: 100px;
}
#intro .ketchup {
	left: 1038px;
	bottom: 0px;
}
#intro .button { left: 228px; }
#intro .button-start {
	top: 520px;
	background-image: url('../imx/btn_start.png');
}
#intro .button-how {
	top: 720px;
	background-image: url('../imx/btn_how.png');
}
#intro .button-prizes {
	top: 920px;
	background-image: url('../imx/btn_prizes.png');
}

/* #mark PRIZES */
.prizes {
	display: none;
	background: url('../imx/intro_bg.jpg') top center no-repeat;
}

.prizes h1 {
	top: 50px;
	width: 100%;
	text-align: center;
	font-size: 110px;
	font-weight: 800;
}

.prizes h2 {
	top: 190px;
	width: 100%;
	text-align: center;
	font-size: 54px;
	font-weight: normal;
	position: absolute;
}

.prizes h3 {
	top: 330px;
	width: 100%;
	text-align: center;
	font-size: 37px;
	font-weight: 800;
	position: absolute;
}

.prizes .meter {
	left: 400px;
	top: 388px;
}

.prizes .points, .prizes .discount {
	font-size: 38px;
	color: #0b7ab0;
	top: 467px;
}

.prizes .points ul, .prizes .discount ul {
	font-size: 61px;
	color: #fff;
	list-style: none;
	padding-left: 0;
}

.prizes .points {left: 890px;}

.prizes .discount {left: 1176px;}

.prizes .ball {
	left: 950px;
	top: 487px;
}

.prizes .trophy {
	left: 59px;
	top: 474px;
}

.prizes .desc {
	font-size: 38px;
	width: 450px;
}

.prizes .desc div{position: relative !important;}

.prizes .desc > div:first-of-type, .prizes .desc > div:first-of-type {
	color: #199cdc;
	font-weight: 800;
	margin-bottom: 24px;
	text-transform: uppercase;
}

.prizes .desc-trophy {left: 413px; top: 780px;}
.prizes .desc-ball {left: 1346px; top: 538px;}

.prizes .shirts {left: 20px; top: 469px;}
.prizes .sweat {left: 947px; top: 447px;}
.prizes .desc-shirts {left: 450px; top: 650px;}
.prizes .desc-sweat {left: 1354px; top: 450px;}

.prizes .button {
	left: 1475px;
	top: 962px;
}

.prizes a {
	right: 400px;
	top: 1075px;
	font-size: 35px;
	color: #fff;
	text-decoration: underline;
	position: absolute;
}

/* #mark INSTR */

#instr {
	background: url('../imx/instr/instr_bg.jpg');
	opacity: 0;
}

#instr .msg {
	width: 100%;
	top: 60px;
	font-size: 119px;
	color: #fff;
}
#instr .msg div{
	font-size: 122px;
	width: 100%;
	text-align: center;
	position: relative;
}
#instr .msg .msg-hd {
	font-size: 165px;
	font-weight: 800;
	margin-bottom: -25px;
}
#instr .msg span {font-size: 190px; font-weight: 800;}
#instr .msg-3 {left: 1080px; top: 645px;}
#instr .msg-4 {left: 460px; top: 645px;}

#instr .button {bottom: 50px; right: 50px;}

#instr .hand {left: 1000px; top: 571px; opacity: 0.6;}

#instr .pts2 {bottom: 0px; right: 0px;}
#instr .pts3 {bottom: 0px; left: 0px;}

#instr .ketchup1 {left: 685px; top: 465px;}
#instr .ketchup2 {left: 623px; top: 475px;}
#instr .ketchup3 {left: 686px; top: 463px;}
#instr .ketchup4 {left: 820px; top: 420px;}
#instr .ketchup5 {left: 193px; top: 420px;}
#instr .instr-tot {
	left: 1000px; 
	top: 357px;
	-ms-transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}
#instr .crosshairs {left: 688px; top: 474px;}
#instr .aimer {left: 530px; top: 545px;}

/* #mark SCOREBOARD AND METER THRESHOLD*/

#scoreboard {
	left: 447px;
	top: 0;
	font-family:"digital display tfb";
	font-size: 126px;
	background: url('../imx/scoreboard.png') top center no-repeat;
	width: 946px;
	height: 230px;
	display: none;
}
#scoreboard .score{
	color: #90ff00;
	top: 34px;
	left: 628px;
	text-align: right;
	width: 100px;
}
#scoreboard .score.score-ones{left: 676px;}
#scoreboard .time{
	color: #f00;
	top: 34px;
	left: 453px;
}
#scoreboard .time.time-ones{left: 498px;}

#meter_threshold {
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	width: 300px;
	left: 1596px;
	top: 712px;
	display: none;
}

/* #mark END */

#end {
	display: none;
	background: url('../imx/intro_bg.jpg') top center no-repeat;
}

#end h1 {
	top: 420px;
	width: 100%;
	text-align: center;
	font-size: 93px;
	font-weight: 800;
	position: absolute;
}
#end h2 {
	top: 560px;
	width: 100%;
	text-align: center;
	font-size: 54px;
	font-weight: normal;
	color: #199cdc;
	position: absolute;
}

#end .button {top: 856px;}
#end .button-try-again {
	left: 223px;
	background-image: url('../imx/btn_try_again.png');
}
#end .button-quit {
	left: 977px;
	background-image: url('../imx/btn_quit.png');
}

/* #mark INPUT */
#input {
	display: none;
	background: url('../imx/intro_bg.jpg') top center no-repeat;
}

#input a{color: #fff;}

#input h1 {
	position: absolute;
	top: 250px;
	font-size: 61px;
	width: 100%;
	text-align: center;
}

#input input {
	position: absolute;
	background: rgba(255,255,255,1.0);
	width: 604px;
	height: 116px;
	font-family: 'proxima-nova', sans-serif;
	color: #d6d6d6;
	font-size: 58px;
	border: 0;
	padding: 0 15px;
	left: 290px;
	top: 350px;
	background: #222222;
	border: 2px solid #484848;
}

#input input[name="last_name"], #input input[name="CaptchaCode"] { left: 950px; }
#input input[name="email"] {
	width: 1263px;
	top: 508px;;
}
#input input[name="CaptchaCode"] { top: 760px; }

#CaptchaCodeHolder {
	left: 950px;
	top: 650px;
}
#CaptchaCodeHolder label {font-size: 25px;}
#FormCaptcha_CaptchaDiv { position: relative; margin-top: 8px;}
#FormCaptcha_CaptchaDiv.LBD_CaptchaDiv {margin-right: 20px; margin-left: 20px; float: left;}
#FormCaptcha_CaptchaIconsDiv {
	position: absolute; right: -140px; 
	top: -7px;
	-ms-transform: scale(1.5,1.5); /* IE 9 */
	-webkit-transform: scale(1.5,1.5); /* Safari */
	transform: scale(1.5,1.5);	
}
#FormCaptcha_CaptchaImage { height: 150%; }
#FormCaptcha_ReloadLink.LBD_ReloadLink {margin-top: 25px;}

#input .button {
	left: 565px;
	top: 945px;
	background-image: url('../imx/btn_get_code.png');
}

#input .checkbox {
	width: 40px;
	height: 40px;
	background: #222;
	border: 2px solid #484848;
	border-radius: 12px;
}
#input .checkbox img{
	top: -6px;
	display: none;
}
#input .checkbox.checked img{display:inline;}
#input .checkbox-holder {
	left: 290px;
	top: 672px;
	width: 600px;
	font-size: 40px;
	color: #d6d6d6;
}
#input .checkbox-holder label {
	left: 70px;
	position: absolute;
}
#input .checkbox-holder:nth-of-type(2) {top: 811px;}

/* #mark CODE */
#code {
	display: none;
	background: url('../imx/intro_bg.jpg') top center no-repeat;
}

#code h1 {
	top: 300px;
	font-size: 61px;
	width: 100%;
	text-align: center;
}
#code h2 {
	top: 604px;
	font-size: 45px;
	width: 100%;
	text-align: center;
	font-weight: normal;
}
#code h2 a {
	color: #ffc63d;
}

#code h3 {
	top: 780px;
	font-size: 57px;
	width: 100%;
	text-align: center;
	color: #199cdc;
	text-transform: uppercase;
}

#code .codebox {
	background: rgba(255,255,255,1.0);
	width: 1290px;
	color: #d6d6d6;
	font-size: 94px;
	padding: 0 15px;
	left: 290px;
	top: 400px;
	background: #222222;
	border: 2px solid #484848;
	text-align: center;
}

#code .button {
	top: 890px;
	left: 505px;
	width: 388px;
	background-color: #3f5a97;
	background-image: url('../imx/btn_facebook.png');
	box-shadow: 0 9px 0 0 #294582;
	display: block;
	position: absolute;
}
#code .button-twitter {
	left: 955px;
	background-color: #67beea;
	background-image: url('../imx/btn_twitter.png');
	box-shadow: 0 9px 0 0 #4391b8;
}

/* #mark - */
/* #mark DIALOG */
#dialog {
/* 	height: 600px; */
	background: rgba(0,0,0,0.8);
}
.dialog-message {
	width: 1168px;
	left: 50%;
	top: 50%;
	padding: 100px 100px 100px 215px;
	margin-left: -584px !important;
	text-align: left;
	font-size: 58px;
	color: #000;
	background: #fff;
	border-radius: 20px;
	background: #fff url('../imx/alert.png') 65px center no-repeat;
}

/* #mark - */
/* #mark LOADER */

#loader {
	background: rgba(0,0,0,0.8) url('../imx/loading.gif') center center no-repeat;
}
#pop-a-tot-loader-outline {
	width: 300px;
	height: 10px;
	border: 1px solid #666;
	background: #ccc;
	left: 50%;
	top: 50%;
	margin: -5px 0 0 -150px;
	border-radius: 5px;
	overflow: hidden;
}
#pop-a-tot-loader-bar {
	width: 100%;
	height: 10px;
	background: #666;
}
#pop-a-tot-loader-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 800;
	color: #666;
	width: 600px;
	text-align: center;
	top: 280px;
}

/* #mark - */

/* full size of containing element; remember, parent must have position: relative; */
.full {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.red {background-color: #d3232d;}
.yellow {background-color: #f4a814;}
.blue {background-color: #199cdc;}

.button {
	width: 640px;
	height: 146px;
	border-radius: 20px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
.button.red {box-shadow: 0 9px 0 0 #931027;}
.button.blue {box-shadow: 0 9px 0 0 #0b7ab0;}
.button.yellow {box-shadow: 0 9px 0 0 #c9890e;}
.button.red.glow {box-shadow: 0 9px 0 0 #931027, 0px 0px 36px #fff, 0px 0px 36px #fff;}


.button-next, .button-got-it {
	width: 326px;
	background-image: url('../imx/btn_next.png');
}
.button-got-it {background-image: url('../imx/btn_got_it.png');}

.selectable {
	-moz-user-select: auto;
	-khtml-user-select: auto;
	-webkit-user-select: auto;
	-o-user-select: auto;
	user-select: auto;
}

.cf:before, .cf:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.cf:after { clear: both; }


#dot {
	background: #f00;
	border-radius: 2px;
	width: 4px;
	height: 4px;
}