@charset "utf-8";
/* Open Sans Font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&subset=latin,latin-ext,greek,cyrillic');

@import url('https://fonts.googleapis.com/css?family=Aldrich');


/* INDEX PAGE SECTION */

/*html
{
	width: 100%; 
	height: 100%;  
	-ms-touch-action: manipulation; 
	touch-action: manipulation;
}*/

/*body
{
	color: #000;
	font-weight: 400;
	font-size: 1.4rem;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #000;
}*/

.htmlView
{	
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.htmlView * 
{
	color: #000;
	font-family: "Open Sans", sans-serif;
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color:transparent;
	-webkit-touch-callout: none; 
}

#notsupported-img
{
	display: none;
	margin: 0 auto 0 auto;
	width: 90%;
}

#notsupported-text
{
	display: none;
	text-align: center;
	position: relative;
	text-shadow: 1px 1px 1px #FFF;
	color: #000;
	margin: 25% auto 0 auto;
}

#gameArea
{
	position: absolute;
	top: 0; 
	left: 0;
	z-index: 100 !important;
	cursor: pointer;
}

#gameCanvas
{
	position: absolute;
	width: 100%;  
	height: 100%;
	margin: 0;
	padding: 0;
	cursor:none;
}

#htmlViewSystem, #viewsContainer, #viewLoader
{
	position: absolute;
	top: 0;
	left: 0;
}

#htmlViewSystem
{
	z-index: 1000;
}

#viewLoader
{
	width: 960px; height: 540px;
	text-align: center;
}

#viewLoader #loaderAnim
{
	margin: 182px auto 0 auto;
}


/* Stat Render Tool */
.stat_render_tool
{
    position: absolute;
    top: 327px;
    left: 0px;
    width: 174px !important;
    z-index: 200;
}

.stat_render_tool div div
{
	font-size: 16px !important;
}

/* END OF INDEX PAGE SECTION */


/* MISC CSS */

.fakeButton, .fakeButton * { cursor: none }

.gv 
{
	display:inline-block;
	overflow:hidden;
	background-repeat: no-repeat;
}

.hide 
{ 
	display:none;
}

.show
{
	display: block;
}

/* END OF MISC CSS */



/* FONTS SETTINGS */
.blackTextTitleBold20
{
    color: black;	
	font-weight: 800;
	font-size: 20px;
}

.blackTextTitleBold25
{
    color: black;	
	font-weight: 600;
	font-size: 25px;
}

.blackTextTitleBold30
{
    color: black;	
	font-weight: 800;
	font-size: 30px;
}

.blackTextTitleBold40
{
    color: black;	
	font-weight: 800;
	font-size: 40px;
}

.whiteTextTitle40
{
    color: white;	
	font-weight: 600;
	font-size: 40px;
}

.whiteTextTitle50
{
    color: white;	
	font-weight: 600;
	font-size: 50px;
}

.whiteTextTitle16
{
    color: white;	
	font-weight: 600;
	font-size: 16px;
}

.orangeText13 {
    color: #f26522;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
}

.whiteTextTitle20
{
    color: white;	
	font-weight: 600;
	font-size: 20px;
}

.whiteTextTitleShadow20
{
    color: white;
    font-weight: 900;
    font-size: 20px;
    text-shadow: 2px 2px 1px black;
    line-height: 20px;
}

.whiteTextTitleShadow16
{
    color: white;	
	font-weight: 600;
	font-size: 16px;
	text-shadow: 2px 2px 1px black;
}

.whiteTextTitle30
{
    color: white;	
	font-weight: 600;
	font-size: 30px;
}

.whiteTextTitle40
{
    color: white;	
	font-weight: 600;
	font-size: 40px;
}

.whiteTextTitle60
{
    color: white;
	font-weight: 600;
	font-size: 60px;
}

.whiteTextTitleBold20
{
    color: white;	
	font-weight: 800;
	font-size: 20px;
}

.whiteTextTitleBold30
{
    color: white;	
	font-weight: 800;
	font-size: 30px;
}

.whiteTextTitleBold40
{
    color: white;	
	font-weight: 800;
	font-size: 40px;
}

.whiteTextTitleBold60
{
    color: white;
	font-weight: 800;
	font-size: 60px;
}

.orangeTextTitle20
{
    color: #FB652A;
	font-weight: 600;
	font-size: 20px;
}

.orangeTextTitle30
{
    color: #FB652A;
	font-weight: 600;
	font-size: 30px;
}

.orangeTextTitle50
{
    color: #FB652A;
	font-weight: 600;
	font-size: 50px;
}

.orangeTextTitle70
{
    color: #FB652A;
	font-weight: 600;
	font-size: 70px;
}


.greenTextTitleBold30
{
    color: #03FE01;
	font-weight: 800;
	font-size: 30px;
}

.blueTextTitle18
{
    color: #00CCFF;	
	font-weight: 600;
	font-size: 18px;
}

.txtOrange
{
	color: #F36523;
}

.txtWhite
{
	color: #FFF;
}

.txtLightblue
{
	color: #06C9FF;
}

.txtDarkblue
{
	color: #141D26;
}

/* END OF FONTS SETTINGS */

/* PRELOAD SCREEN */
#percentageContainer
{
	position:absolute;
	top:340px;
	text-align:center;
	width:100%;
}

#percentSign
{
	position:absolute;
	top:1px;
}


/* TITLE SCREEN */
#titleScreen
{ 
	width: 960px; 
	height: 540px;
	z-index: 200;
}

#titleScreen #background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 960px; 
	height: 540px;
	background-color: #151F2B;
}

#titleScreen #logoNerf
{
    position: absolute;
    top: 32px;
    left: 417px;
}

#titleScreen #logo360
{
    position: absolute;
    top: 155px;
    left: 325px;
}

#titleScreen #btnStartContainer
{
    position: absolute;
    bottom: 0px;
    left: 320px;
}

/* END OF TITLE SCREEN */


/* MENU SCREEN */
#menuScreen
{ 
	width: 960px; 
	height: 540px;
	z-index: 200;
}

#menuScreen #background
{
	position: absolute;
	top: 0;
	left: 0;
}
	

#menuScreen #btnVolume {
    position: absolute;
    top: 5px;
    right: 35px;
	z-index: 0;
}

#menuScreen #btnNoVolume {
    position: absolute;
    top: 5px;
    right: 35px;
	z-index: 0;
}

#menuScreen #btnHowToPlay {
    position: absolute;
    top: 5px;
    left: 35px;
	z-index: 0;
}

#menuScreen #btnPlay {
	position: absolute;
    bottom: 0;
    left: 379px;
}

#menuScreen #segmentSection
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#menuScreen #contentSegementTextContainer
{
	width: 960px;
    position: absolute;
    top: 217px;
    text-align: center;
    z-index: 1;
	text-transform: uppercase;
}

#menuScreen #blasterName
{
	text-shadow: none;
    font-size: 16px;
    line-height: 36px;
}

#menuScreen #blasterLoader
{
	z-index:50;
	position:absolute;
	text-align:center;
	width:100%;
	height:100%;
	transform:translateY(50%);
}

#menuScreen #blasterLoader img
{
	transform:translateY(-50%);
}

#menuScreen #accustrikeContainer
{
	width: 50%;
    margin-left: 26%;
    margin-top: 7%;
}

#menuScreen #segmentCarouselContainer
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 270px;
}

#menuScreen #blastersSection
{
	position: absolute;
	top: 115px;
	left: 0px;
}

#menuScreen #blasterSectionColoration
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#menuScreen #blasterSectionEffects
{
	position: absolute;
	top: 47px;
	left: 0px;
}

#menuScreen #selectedBlaster
{
	position: absolute;
	top: 270px;
	left: 320px;
	height: 270px;
	width: 640px;
}

#menuScreen #preview-canvas
{
	position: absolute;
	top: -25px;
	left: -260px;
}

#menuScreen #btnInfo
{
	position: absolute;
	top: -30px;
	right: 231px;
	z-index: 1;
}

#menuScreen #popupInfoOverlay 
{
	width: 960px;
	height: 540px;
}

#menuScreen #infoContainer
{
	width: 100%;
	height: 100%;
}

#menuScreen #btnCloseInfo
{
	background-color: black;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 35px;
	height: 35px;
	border-radius: 20px;
	text-align: center;
	line-height: 35px;
	z-index: 10;
}

#menuScreen #blasterCarouselContainer
{
	position:absolute;
	top:150px;
	left:0px;
	width:1158px;
	height:260px;
}

/*#menuScreen #segmentCarousel
{
	position: absolute;
    top: 115px;
    left: 0px;	
}*/

#menuScreen #thumbsPositioner
{
    position: absolute;
    top: 10px;
    left: 0;
	width: 100%;
	z-index: 0;
}
#menuScreen #thumbsContainer
{
	width: 50%;
	margin: 0 auto;
}

#menuScreen .owl-thumbs
{
	display: table;
	margin: 0 auto;
}

#menuScreen .btnSegmentPreviousWrapper {
    position: absolute;
    top: 95px;
    left: 25px;
    width: 45px;
	z-index: 5;
}

#menuScreen div[data-btn-id="btnSegmentPrevious"] {
	float: right;
	z-index:100;
	-webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}

#menuScreen .disabled div[data-btn-id="btnSegmentPrevious"] {
	display: none;
}

#menuScreen .btnSegmentNextWrapper {
    position: absolute;
    top: 95px;
    right: 25px;
    width: 45px;
	z-index: 5;
}

#menuScreen div[data-btn-id="btnSegmentNext"] {
	float: left;
	z-index:100;
}

#menuScreen .disabled div[data-btn-id="btnSegmentNext"] {
	display: none;
}


#menuScreen #blasterCarousel
{
	position:absolute;
	top: 75px;
}

#menuScreen .blasterImg
{
	margin: 0 auto;
}

#menuScreen #blasterCarousel .blasterItem
{
	width:386px;
}

#menuScreen #blasterNav
{
	position: absolute;
	top:220px;
	left: 20px;
	width: 35px;
	height: 120px;
}

#menuScreen .btnBlasterPreviousWrapper {
    position: absolute;
    top: 15px;
    left: 6px;
    width: 25px;
}

#menuScreen div[data-btn-id="btnBlasterPrevious"] {
	position:absolute;
	left:130px;
	z-index:100;
	/*-webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);*/
    transform:rotate(180deg);
}

#menuScreen .disabled div[data-btn-id="btnBlasterPrevious"] {
	display: none;
}

#menuScreen .btnBlasterNextWrapper {
    position: absolute;
    top: 15px;
    left: 6px;
    width: 25px;
}

#menuScreen div[data-btn-id="btnBlasterNext"] {
	position:absolute;
	left:700px;
	z-index:100;
}

#menuScreen .disabled div[data-btn-id="btnBlasterNext"] {
	display: none;
}

#menuScreen #bkgLoader
{
	position:absolute;
	z-index:150;
}
/* END OF MENU SCREEN */


/* GAME HUD */
#gameHud { 
	width: 960px;
	z-index: 100;
}

#gameHud #leftUpFrame
{
	position: absolute;
	top: 0;
	left: 49px;
}

#gameHud #rightUpFrame
{
	position: absolute;
	top: 0;
	right: 49px;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

#gameHud #leftBottomFrame
{
	position: absolute;
	top: 502px;
	left: 49px;
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}

#gameHud #rightBottomFrame
{
	position: absolute;
	top: 502px;
	right: 49px;
	-moz-transform: scale(-1, -1);
	-o-transform: scale(-1, -1);
	-webkit-transform: scale(-1, -1);
	transform: scale(-1, -1);
}

#gameHud #leftSideUpFrame
{
	position: absolute;
	top: 0;
	left: 0;
}

#gameHud #leftSideDownFrame
{
	position: absolute;
	top: 270px;
	left: 0;
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}

#gameHud #rightSideUpFrame
{
	position: absolute;
	top: 0;
	right: 0;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

#gameHud #rightSideDownFrame
{
	position: absolute;
	top: 270px;
	right: 0;
	-moz-transform: scale(-1, -1);
	-o-transform: scale(-1, -1);
	-webkit-transform: scale(-1, -1);
	transform: scale(-1, -1);
}

#gameHud #crosshair
{
	background: url(../assets/html/img/crosshair.png) no-repeat;
	width: 100px;
	height: 100px;
	position: absolute;
	cursor: none;
	opacity:0.7;
	pointer-events: none;
}

#gameHud .noPointerEvent
{
	pointer-events: none;
}

#gameHud #degreesBar
{
	position: absolute;
	top: 105px;
	right: 0;
}

#gameHud #degreesIndicator
{
	position: absolute;
	top: 241px;
	right: 0;
}

#gameHud #btnPause {
    position: absolute;
    top: 450px;
    left: 20px;
}

#gameHud #stats
{
	position: absolute;
	top: 0;
	left: 0;
}

#gameHud #countdownContainer
{
	width: 199px;
	height: 199px;
	margin: 0 auto;
	position: absolute;
	top:130px;
	left:380px;
	/*overflow: hidden;*/
}

#gameHud .round
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#gameHud .indicator
{
	position: absolute;
	top: 10px;
    left: 10px;
    width: 90%;
    height: 90%;
	background: url(../assets/html/img/bracket-rotation.png) no-repeat;
	-webkit-animation:orbit 1s linear infinite;
	animation:orbit 1s linear infinite;
	transition:background-position 0.8s;
	
}

@-webkit-keyframes orbit
{
	from {
		-webkit-transform:rotate(360deg);}
	
	to {
	-webkit-transform:rotate(0deg);}
	}
}

@keyframes orbit
{
	from {
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
	}
	
	to {
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
	}
}

#gameHud #countdownTextContainer
{
	position:relative;
}

body.isMac #gameHud #countdownTextContainer
{
	top:5px
}

#gameHud #countdown
{
    font-size: 80px;
    font-weight: 800;
	font-family: "Aldrich";
    color: #FFF;
	line-height:199px;
	text-align:center;
}

body.isAndroid #gameHud #countdown
{
	line-height:213px;
}

body.isIos #gameHud #countdown
{
	line-height:213px;
}

#gameHud #timerWraper
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#gameHud #timerCircle
{
	position: absolute;
	top: -67px;
	left: 412px;
	-moz-transform: scale(0.84, 0.84);
	-o-transform: scale(0.84, 0.84);
	-webkit-transform: scale(0.84, 0.84);
	transform: scale(0.84, 0.84);
}

#gameHud #segmentBackground
{
	position: absolute;
	top: 0;
	left: 303px;
}

#gameHud #timerContainer
{
    margin: 0 auto;
}

#gameHud #timerBackground
{
    margin: 0 auto;
}

#gameHud #timerContent
{
	width: 50%;
    margin: 0 auto;
	text-align: center;
}

#gameHud #timer
{
    position: absolute;
    top: 32px;
    width: 50%;
	font-family: "Aldrich";
	font-size: 22px;
	font-weight: 600;
	color: #FFF;
	margin: 0;
}


#gameHud #stepOne
{
	position: absolute;
	top: 7px;
	left: 101px;
}

#gameHud #stepOneWhiteShadow
{
	position: absolute;
	top: -2px;
	left: 92px;
}

#gameHud #stepTwo
{
	position: absolute;
	top: 7px;
	left: 134px;
}

#gameHud #stepTwoWhiteShadow
{
	position: absolute;
	top: -2px;
	left: 125px;
}

#gameHud #stepThree
{
	position: absolute;
	top: 7px;
	left: 165px;
}

#gameHud #stepThreeWhiteShadow
{
	position: absolute;
	top: -2px;
	left: 156px;
}

#gameHud #stepFour
{
	position: absolute;
	top: 7px;
	left: 196px;
}

#gameHud #stepFourWhiteShadow
{
	position: absolute;
	top: -2px;
	left: 187px;
}

#gameHud #stepFive
{
	position: absolute;
	top: 7px;
	left: 227px;
}

#gameHud #stepFiveWhiteShadow
{
	position: absolute;
	top: -2px;
	left: 218px;
}

#gameHud .whiteShadow
{
	-moz-box-shadow: 0 0 5px #fff;
	-webkit-box-shadow: 0 0 5px #fff;
	box-shadow: 0px 0px 6px #fff;
}

#gameHud #controllerWraper
{
	position: absolute;
	top: 440px;
	left: 0;
	width: 100%;
}

#gameHud #controllerContainer
{
    position: absolute;
    top: 0px;
    left: 296px;
}

#gameHud #controllerBackground
{
    margin: 0 auto;
}

#gameHud #reloadCircle
{
	position: absolute;
	top: 33px;
	left: 116px;
}

#gameHud #txtReloadContainer
{
    position: absolute;
    top: 82px;
    left: 139px;
    text-transform: uppercase;
    text-align: center;
    width: 93px;
}


#gameHud #reloadClickableZone
{
	position: absolute;
    top: 450px;
    left: 380px;
    width: 200px;
    height: 200px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

#gameHud #remainingDarts
{
	position: absolute;
    top: 56px;
    left: 181px;
    font-family: "Aldrich";
    font-size: 22px;
    font-weight: 600;
    color: #FFF;
    text-align: right;
    width: 29px;
}

#gameHud .dartMeter
{
	position: absolute;
    top: 70px;
    left: 43px;
    width: 120px;
    height: 120px;
    transform: rotate(-60deg);
}

#gameHud .clip
{
    position: absolute;
    top: 30px;
    left: 30px;
    width: 180px;
    height: 180px;
    clip: rect(0px, 180px, 180px, 90px);
}

#gameHud .slice
{
    position: absolute;
    width: 180px;
    height: 180px;
    clip: rect(0px, 90px, 180px, 0px);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #03FE01;
    border-color: #03FE01;
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}

#gameHud #topMeter
{
	position: absolute;
    top: 32px;
    left: 109px;
}

#gameHud #bulletsIcon
{
	position: absolute;
    top: 61px;
    left: 161px;
}

#gameHud #blueLine
{
    position: absolute;
    top: 79px;
    left: 159px;
    width: 50px;
    height: 0px;
    border: solid 1px #06C9FF;
}

#gameHud #btnBulletContainer
{
	position: absolute;
	bottom: 75px;
	right: 10px;
}

#gameHud #btnMissileContainer
{
	position: absolute;
	bottom: 20px;
	right: 68px;
}

#gameHud #btnMegaContainer
{
	position: absolute;
	bottom: 20px;
	right: 10px;
}

#gameHud #btnMega, #gameHud #btnMissile, #gameHud #btnBullet
{
	font-size: 12px;
	font-weight: 600;
	color: #000;
	text-align: center;
	line-height: 50px;
}

/* END OF GAME HUD */



/* PAUSE SCREEN */
#pauseScreen
{
	width: 960px; 
	height: 540px;
	z-index: 210;
}

#pauseScreen #pauseScreenContainer
{
	position: absolute;
	top: 45px;
	left: 280px;
	text-align: center;
}

#pauseScreen .btn_element_container
{
    width: 288px;
    height: 56px;
    position: absolute;
    top: 17px;
    left: 17px;
}

#pauseScreen #titlePauseContainer
{
	position: absolute;
    width: 100%;
	top:30px;
	left: 0;
	text-transform: uppercase;
}

#pauseScreen #titlePause
{
	text-align: center;
}

#pauseScreen .btn_element_container .btn_iconeContainer
{
	display: table-cell;
    width: 60px;
    vertical-align: middle;
}

#pauseScreen .btn_element_container .btn_text
{
    max-width: 226px;
    height: inherit;
    display: table-cell;
    line-height: 20px;
    vertical-align: middle;
    text-align: left;
	text-transform: uppercase;

}

#pauseScreen #txtHowToPlay, #pauseScreen #txtSounds, #pauseScreen #txtRestartGame, #pauseScreen #txtQuitGame
{
	height: 100%;
	line-height: 60px;
	vertical-align: middle;
}

#pauseScreen #btnHowtoPlay
{
	position: absolute;
    top: 75px;
    left: 45px;
    text-align: center;
}

#pauseScreen #howToPlayIcon
{
    display: inline-block;
    width: 17px;
    height: 26px;
}

#pauseScreen #btnSounds
{
	position: absolute;
    top: 146px;
    left: 45px;
    text-align: center;
}

#pauseScreen #soundsIcon
{
	display: inline-block;
    width: 29px;
    height: 26px;
}

#pauseScreen #btnRestart
{
	position: absolute;
    top: 215px;
    left: 45px;
    text-align: center;
}

#pauseScreen #restartIcon
{
	display: inline-block;
    width: 29px;
    height: 27px;
}

#pauseScreen #btnQuit
{
	position: absolute;
    top: 285px;
    left: 45px;
    text-align: center;
}

#pauseScreen #quitIcon
{
	display: inline-block;
    width: 24px;
    height: 29px;
}

#pauseScreen #btnResume
{
    position: absolute;
    top: 356px;
    left: 45px;
    text-align: center;
}

#pauseScreen #txtResume
{
	height: inherit;
    width: inherit;
    display: table-cell;
    vertical-align: middle;
	text-transform: uppercase;
}

#pauseScreen #popupConfirmOverlay
{
	position: absolute;
	top: 0;
	left: 0;
}

#pauseScreen #confirmContainer
{
	position: absolute;
	top: 145px;
    left: 190px;
}

#pauseScreen #titleConfirm
{
	text-align: center;
	line-height: 5;
}

#pauseScreen #txtRestart, #pauseScreen #txtQuit, #pauseScreen #txtCancel
{
    position: absolute;
    top: 20px;
    left: 65px;
    width: 160px;
    height: 49px;
    line-height: 56px;
}

#pauseScreen #btnQuitGame
{
	position: absolute;
	top: 70px;
	left: 47px;
}

#pauseScreen #btnRestartGame
{
	position: absolute;
	top: 70px;
	left: 47px;
}
	
#pauseScreen #btnCancel
{
	position: absolute;
	top: 70px;
	left: 295px;
}

/* ENF OF PAUSE SCREEN */


/* SOUND SETTINGS SCREEN */
#soundsScreen
{
	width: 960px; 
	height: 540px;
	z-index: 210;
}

#soundsScreen #controlsContainer
{
	position: absolute;
	top: 100px;
	left: 235px;
}

#soundsScreen #titleSoundsScreenContainer
{
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

#soundsScreen #btnClose
{
    position: absolute;
    top: -15px;
    right: -10px;
}

#soundsScreen #musicSection
{
    position: absolute;
    top: 90px;
    left: 30px;
    width: 425px;
    height: 100px;
    /*border: solid;*/
}

#soundsScreen #fxSection
{
    position: absolute;
    top: 200px;
    left: 30px;
    width: 425px;
    height: 100px;
    /*border: solid;*/
}

#soundsScreen .label_container
{
	position: absolute;
    top: 5px;
    left: 0;
    text-align: center;
    width: 100%;
	text-transform: uppercase;
}

#soundsScreen #musicSlider
{
	position: absolute;
	top: 17px;
	left: 11px;
}

#soundsScreen #fxSlider
{
	position: absolute;
	top: 31px;
	left: 26px;
}

#soundsScreen #btnMusicOn, #soundsScreen #btnMusicOff, #soundsScreen #btnFxOn, #soundsScreen #btnFxOff
{
	position: absolute;
	top: 30px;
	left: 25px;
}

#soundsScreen .section_container
{
	position: absolute;
	top: 22px;
	left: 60px;
}

#soundsScreen #musicSection01, #soundsScreen #fxSection01
{
	position: absolute;
	top: 9px;
	left: 95px;
}
#soundsScreen #musicSection02, #soundsScreen #fxSection02
{
	position: absolute;
	top: 9px;
	left: 135px;
}
#soundsScreen #musicSection03, #soundsScreen #fxSection03
{
	position: absolute;
	top: 9px;
	left: 175px;
}
#soundsScreen #musicSection04, #soundsScreen #fxSection04
{
	position: absolute;
	top: 9px;
	left: 215px;
}
#soundsScreen #musicSection05, #soundsScreen #fxSection05
{
	position: absolute;
	top: 9px;
	left: 255px;
}

#soundsScreen #musicVolumeValueContainer
{
	position: absolute;
	top: 30px;
	left: 366px;
	width: 60px;
}

#soundsScreen #musicVolumeValue
{
	text-align: right;
	font-family: "Aldrich";
}

#soundsScreen #fxVolumeValueContainer
{
	position: absolute;
	top: 30px;
	left: 366px;
	width: 60px;
}

#soundsScreen #fxVolumeValue
{
	text-align: right;
	font-family: "Aldrich";
}

/* END OF SOUNDS SCREEN */


/* HOW TO PLAY */
#howToPlayScreen 
{ 
	width: 960px; 
	height: 540px;
	z-index: 210;
}

#howToPlayScreen #howtoplayContainer
{
	position: absolute;
	top: 25px;
	left: 35px;

}

#howToPlayScreen #btnClose
{
	position: absolute;
	top: -13px;
    right: -7px;
}

#howToPlayScreen #titleHowToPlayScreenContainer
{
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    text-align: center;
	text-transform: uppercase;
}

#howToPlayScreen #carouselContainer
{
	position: absolute;
    top: 60px;
    left: 95px;
    width: 700px;
    height: 350px;
}

#howToPlayScreen #howToPlayCarousel
{
	height: 350px;
}


#howToPlayCarousel .owl-item .item {
    height: 350px;
    text-align: center;
}

#howToPlayCarousel .owl-controls .owl-dot span {
    display: block;
    width: 14px;
    height: 14px;
    margin: 5px 4px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #FFF;
    border: 2px solid #FFF;
}

#howToPlayCarousel .owl-controls .owl-dot.active span {
	background: #F36523;
}

#howToPlayCarousel .owl-controls
{
    text-align: center;
    position: absolute;
    top: 360px;
    left: 0px;
    width: 696px;
}

#howToPlayCarousel .owl-controls .owl-dot {
    display: inline-block;
}


/* How to play OWL carousel */
#howToPlayScreen .btnCarouselPreviousWrapper {
    position: absolute;
    top: 140px;
    left: -46px;
    width: 45px;
}
#howToPlayScreen div[data-btn-id="btnCarouselPrevious"] {
	float: right;
	z-index:100;
	-webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}
#howToPlayScreen .disabled div[data-btn-id="btnCarouselPrevious"] {
	display: none;
}
#howToPlayScreen .btnCarouselNextWrapper {
    position: absolute;
    top: 140px;
    right: -46px;
    width: 45px;
}
#howToPlayScreen div[data-btn-id="btnCarouselNext"] {
   float: left;
   z-index:100;
}
#howToPlayScreen .disabled div[data-btn-id="btnCarouselNext"] {
	display: none;
}
#howToPlayScreen .carousel-image {
    position: relative;
}
#howToPlayScreen .howtoplay_slide1 .carousel-image {
    left: 0;
    top: 20px;
}
#howToPlayScreen .howtoplay_slide2 .carousel-image {
    left: 0;
    top: 20px;
}
#howToPlayScreen .howtoplay_slide3 .carousel-image {
    left: 0;
    top: 20px;
}
#howToPlayScreen .howtoplay_slide4 .carousel-image {
    left: 0;
    top: 20px;
}
#howToPlayScreen .howtoplay_slide5 .carousel-image {
    left: 0;
    top: 20px;
}
#howToPlayScreen .howtoplay_slide6 .carousel-image {
    left: 0;
    top: 20px;
}


#howToPlayCarousel .howtoplay_slide1 .message
{
	position: absolute;
    top: 270px;
    left: 0px;
    padding: 0 20px;
    width: 665px;
	height:274;
}

#howToPlayCarousel .howtoplay_slide2 .message,
#howToPlayCarousel .howtoplay_slide3 .message, #howToPlayCarousel .howtoplay_slide4 .message,
#howToPlayCarousel .howtoplay_slide5 .message, #howToPlayCarousel .howtoplay_slide6 .message
{
	position: absolute;
    top: 320px;
    left: 0px;
    padding: 0 20px;
    width: 665px;
	height:274;
}

/* BLASTER INFO SCREEN */
#blasterInfoScreen
{
	width: 960px;
    height: 540px;
    z-index: 250;
}

#blasterInfoScreen #txtTitle
{
	position:absolute;
	width:100%;
	text-align:center;
	top:24px;
}

#blasterInfoScreen #txtContent
{
	position:absolute;
	top:125px;
	width:80%;
	left:12%;
	text-align:left;
}

#blasterInfoScreen #btnClose
{
	position: absolute;
	top: -13px;
    right: -7px;
}

#blasterInfoScreen #blasterInfoContainer {
    position: absolute;
    top: 25px;
    left: 35px;
}

#blasterInfoScreen #imgBlasterContainer
{
	position:absolute;
	top:300px;
	width:100%;
}

#blasterInfoScreen #imgBlaster
{
	position:absolute;
	left:50px;
}

#blasterInfoScreen #blasterInfo
{
	position:absolute;
	top:300px;
	text-align:left;
	width:45%;
	left:450px;
}

/*  SECTION MISC */

.blackBackground
{
    position: absolute;
    width: 960px;
    height: 540px;
    background-color: black;
    opacity: 0.75;
    display: block;
    top: 0;
    left: 0;
	z-index: 10;
}

/*  END SECTION MISC */


/* RESULT SCREEN */
#resultScreen
{
	width: 960px; 
	height: 540px;
	z-index: 100;
}

#resultScreen #background
{
	width: 960px; 
	height: 540px;
	/*background-image:url("../images/results-screen/bkg-coloration.png");*/
}

#resultScreen #frame
{
	position: absolute;
    top: 25px;
    left: 33px;
}

#resultScreen #resultSideScreen
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#resultScreen #titleResultScoreContainer
{
    position: relative;
    top: 70px;
	text-transform: uppercase;
}

#resultScreen #scoreContainer
{
    position: relative;
    top: 116px;
}

#resultScreen #animScoreContainer
{
	position:absolute;
	left:480px;
}

#resultScreen #animScore
{
	background: url(../assets/shared/anims/FX_Score.png) no-repeat;
}

#resultScreen #animScoreQualifierContainer
{
	position:absolute;
	left:480px;
	top:25px;
}

#resultScreen #animScoreQualifier
{
	background: url(../assets/shared/anims/FX_NameQualifier.png) no-repeat;
}

#resultScreen #score
{
	font-family: "Aldrich";
	width:400px;
	text-align:center;
}

#resultScreen .centerText
{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
}

#resultScreen #resultSection
{
	position: absolute;
	top: 125px;
	left: 25px;
}

#resultScreen .text_metrics_container
{
    position: relative;
    top: 171px;
	text-transform: uppercase;
}

#resultScreen .note
{
	position: absolute;
	top: 121px;
	left: 78px;
}

#resultScreen #accuracyValues
{
	position: absolute;
	top: 15px;
	left: 75px;
}

#resultScreen #accuracyAnim, #resultScreen #distanceAnim, #resultScreen #speedAnim, #resultScreen #completionAnim
{
    position: absolute;
    top: 29px;
    left: 29px;
    width: 111px;
    height: 111px;
	background: #FFFFFF;
	border-radius: 50%;
}

#resultScreen #accuracyAnim .half1, #resultScreen #distanceAnim .half1, #resultScreen #speedAnim .half1, #resultScreen #completionAnim .half1 
{
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0px;
}

#resultScreen #accuracyAnim .half2, #resultScreen #distanceAnim .half2, #resultScreen #speedAnim .half2, #resultScreen #completionAnim .half2
{
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 50%;
}

#resultScreen #accuracyAnim .half-circle-container, #resultScreen #distanceAnim .half-circle-container, #resultScreen #speedAnim .half-circle-container, #resultScreen #completionAnim .half-circle-container
{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	outline: 1px solid transparent;
}

#resultScreen #accuracyAnim .half-circle, #resultScreen #distanceAnim .half-circle, #resultScreen #speedAnim .half-circle, #resultScreen #completionAnim .half-circle
{
	width: 200%;
	height: 100%;
	border-radius: 50%;
	background: #141C28;
	position: absolute;
	outline: 1px solid transparent;
}

#resultScreen #accuracyAnim .half1 .half-circle-container, #resultScreen #distanceAnim .half1 .half-circle-container, #resultScreen #speedAnim .half1 .half-circle-container, #resultScreen #completionAnim .half1 .half-circle-container
{
	-webkit-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

#resultScreen #accuracyAnim .half2 .half-circle-container, #resultScreen #distanceAnim .half2 .half-circle-container, #resultScreen #speedAnim .half2 .half-circle-container, #resultScreen #completionAnim .half2 .half-circle-container
{
	-webkit-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

#resultScreen #accuracyAnim .half2 .half-circle, #resultScreen #distanceAnim .half2 .half-circle, #resultScreen #speedAnim .half2 .half-circle, #resultScreen #completionAnim .half2 .half-circle
{
	left: -100%;
}

#resultScreen .foreground-icon
{
    position: absolute;
    top: 39px;
    left: 39px;
}

#resultScreen #distanceValues
{
	position: absolute;
	top: 15px;
	left: 265px;
}

#resultScreen #speedValues
{
	position: absolute;
	top: 15px;
	left: 455px;
}

#resultScreen #completionValues
{
	position: absolute;
	top: 15px;
	left: 660px;
}


#resultScreen #buttonsContainer
{
    position: absolute;
    top: 0;
    left: 0;
}

#resultScreen #btnRestart
{
    position: absolute;
    top: 400px;
    left: 320px;
}

#resultScreen #txtHomeContainer
{
    position: absolute;
    top: 515px;
    left: 690px;
	width: 165px;
	text-align: center;
}

#resultScreen #txtHome
{
	text-transform: uppercase;
}

#resultScreen #btnReplay
{
	position: absolute;
    top: 407px;
    left: 689px;
}

#resultScreen #btnLearnMore
{
	position: absolute;
    top: 407px;
    left: 110px;
}

#resultScreen #blasterIconContainer
{
    transform: scale(0.5, 0.5);
    position: absolute;
    top: 0px;
    left: 0px;
}

#resultScreen #txtLearnMoreContainer
{
    position: absolute;
    top: 515px;
    left: 110px;
    width: 165px;
	text-align: center;
}

#resultScreen #txtLearnMore
{
	text-transform: uppercase;
}

#resultScreen #qualifierContainer
{
	position: absolute;
    top: 340px;
    width: 100%;
    text-align: center;
}

#resultScreen #qualifierText
{
	width: 100%;
}


/* LOW FPS SCREEN */
#lowFpsScreen
{
	width: 960px; 
	height: 540px;
	z-index: 100;
}

#lowFpsScreen #lowFpsFrame
{
	position: absolute;
    top: 25px;
    left: 33px;
}

#lowFpsScreen #phoneIcon
{
    position: absolute;
    top: 80px;
    left: 60px;
}

#lowFpsScreen #txtBadGameExperienceContainer
{
    position: absolute;
	top: 90px;
    left: 150px;
    width: 730px;
}

#lowFpsScreen #txtBadExperience
{
	
}

/*#lowFpsScreen #txtTryTestRangeContainer
{
    position: absolute;
	width:730px;
    top: 170px;
    left: 150px;
}

#lowFpsScreen #txtTryTestRange
{
	
}*/

#lowFpsScreen #btnPlay360
{
    position: absolute;
	top: 275px;
    left: 43px;
}

#lowFpsScreen #txtPlay360
{
	position: absolute;
    top: 110px;
    right: 50px;
}

#lowFpsScreen #titleGame360
{
	position: absolute;
    top: 170px;
    right: 50px;
}

#lowFpsScreen #pastille
{
    position: absolute;
    top: 370px;
    left: 431px;
}

#lowFpsScreen #txtOr
{
	line-height:95px;
    text-align: center;	
}

#lowFpsScreen #btnPlayClassic
{
    position: absolute;
    top: 275px;
    left: 520px;
}

#lowFpsScreen #txtPlayExperience
{
	position: absolute;
    top: 110px;
    left: 50px;
}

#lowFpsScreen #titleGameExperience
{
	position: absolute;
    top: 170px;
    left: 50px;
}

/* NO WEB GL SCREEN */
#noWebGLScreen { width: 960px; height: 540px; z-index: 600; }
#noWebGLScreen * { position: absolute; }
#noWebGLScreen .lowFpsBkg { top: 0; left: 5.5px; }
#noWebGLScreen #noWebGLContent { top: 130px; left: 110px; width: 740px; height: 310px; }
#noWebGLScreen .disabled_illustration { top: -74.5px; left: 50%; margin-left: -101.5px; }
#noWebGLScreen #noWebGLTitle,
#noWebGLScreen #noWebGLDescription { width: 88%; top: 100px; left: 7%; }
#noWebGLScreen #noWebGLTitle { text-transform: uppercase; text-align: center; }
#noWebGLScreen #noWebGLDescription br { position: relative; }
#noWebGLScreen #noWebGLDescription { top: 180px; }