@charset "utf-8";
/* Open Sans Font */
@import url(//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%;}
body { color: #000; font-weight: 400; font-size: 1.4rem; font-family: sans-serif; margin: 0; padding: 0; background: #000; overflow: hidden; width: 100%; height: 100%;}

html, body
{
    width:  100%;
    height: 100%;
    margin: auto;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1000;
    background: #000;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -ms-touch-action: none;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

br, #resultScreen br, #gameHud br{
    position: relative !important; 
}

*
{
	-webkit-tap-highlight-color:transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;
}


#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 {
	display:none;
	z-index: -999;
}
#gameAreaWrapper{
	position: absolute;
	top: 0; 
	left: 0;
	z-index: 100 !important;
	width: 960px;
	height: 540px;
}

canvas, #wade_main_div
{
    margin: auto;
    position: absolute;
    padding: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: none;
    outline: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.loadingImage_class
{
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}



[id^=wade_layer]{
	/*position: absolute;
	top: 0;
	left: 0;*/
}


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

#htmlViewSystem
{
	z-index: 1000;
}

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

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


/* Stat Render Tool */
.stat_render_tool, .stat_physics_tool
{
    position: absolute;
    top: 1px;
    left: 570px;
    width: 80px !important;
    z-index: 200;
}

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

.stat_physics_tool .stat_title, .stat_render_tool .stat_title
{
	font-size: 13px !important;
	padding: 0px 0px 3px 3px;
    text-align: center;
    background-color: rgb(0, 0, 34);
	color: rgb(255,167,0) !important;
	font-weight: bold;
}
.stat_render_tool .stat_title
{
	color: rgb(0,255,255) !important;
}
.stat_physics_tool #fpsText
{
	font-size: 16px !important;
    color: rgb(255,167,0) !important;
}
.stat_physics_tool #fpsGraph {
	background-color: rgb(255,167,0) !important;
}

.stat_physics_tool
{
    top: 1px;
    left: 320px;
}



/* 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 */

/* Transformers Robots in Disguise Combiner Force FONT STYLES */

.actionButton, .popupTitle, .popupSubtitle, .volumeValue,
.characterName, .screenTitle, .nameplate, .htpTitle,
.btnTapToLoad, .hudTimer, .htpText { color: #fff; font-weight: 900; text-align: center; text-transform: uppercase; }
.statTitle, .statValue, .tutorialText, .confirmButton, .statLabel, .weaponName, .transformerName, .upgradeLevel { color: #000; text-transform: uppercase; }
.confirmText, .popupText, .resultSpeech { color: #000; font-weight: 900; }

.statValue, .weaponName { font-size: 36px; line-height: 36px; }
.actionButton, .popupTitle, .screenTitle { font-size: 34px; line-height: 34px; }
.popupSubtitle, .volumeValue, .transformerName { font-size: 30px; line-height: 30px; }
.resultSpeech { font-size: 26px; line-height: 30px; }
.characterName, .confirmText, .popupText, .upgradeLevel { font-size: 24px; line-height: 24px; }
.confirmButton, .btnTapToLoad { font-size: 22px; line-height: 22px; }
.htpTitle { font-size: 20px; line-height: 24px; }
.statTitle, .tutorialText, .statLabel, .hudTimer { font-size: 16px; line-height: 20px; }
.nameplate, .htpText { font-size: 14px; line-height: 16px; }

/* END OF Transformers Robots in Disguise Combiner Force FONT STYLES */

/* Patching for mobile devices */

.pl-pl .popupTitle { top: 16px !important; font-size: 25px; }
.pl-pl.isIos .popupTitle { top: 20px !important; }
.pl-pl.isAndroid .popupTitle { top: 22px !important; }

/*.isIos .actionButton { top: 16px !important; }
.isAndroid .actionButton { top: 18px !important; }
.isIos .screenTitle { top: 14px !important; }
.isAndroid .screenTitle { top: 16px !important; }
.isIos .popupTitle { top: 16px !important; }
.isAndroid .popupTitle { top: 18px !important; }
.isIos .resultScreen-upgrade-continue-tooltip div { top: 18px !important; }
.isAndroid .resultScreen-upgrade-continue-tooltip div { top: 20px !important; }
.isIos .confirmButton { top: 25px !important; }
.isAndroid .confirmButton { top: 27px !important; }*/

/* END OF Patching for mobile devices */

/* PRELOAD SCREEN */

#preloadScreen { width: 960px; height: 540px; z-index: 200; }
#preloadScreen * { position: absolute; }
#preloadScreen #background { top: 0; left: 0; width: 960px; height: 540px; background: url("../images/bkg.jpg") scroll no-repeat left top; }
#preloadScreen #logoRID { top: 20px; left: 30px; }

#preloadScreen #loadingProgress { top: 160px; right: 20px; width: 397px; height: 314px; }
#preloadScreen #loadingProgress #logoCF { top: 0; left: calc(50% - 147.5px); z-index: 1; }

#preloadScreen .robot-ultrabee { bottom: 0; left: 0; }

#preloadScreen #progressBar { top: 120px; left: calc(50% - 125px); width: 250px; height: 35px; }
	#preloadScreen #progressBar .icon { opacity: .2; transition: opacity .25s ease-out; }
	#preloadScreen #progressBar .icon.active { opacity: 1; }

#preloadScreen:not(.mobile) #btn_tapToLoad { display: none; }
#preloadScreen #btn_tapToLoad { position: absolute; width: 100%; height: 30px; left: 0; bottom: 50px; z-index: 100; text-align: center; animation: tapToLoad 2s linear infinite alternate; }
@keyframes tapToLoad {
    from { opacity: 0.25; }
    to { opacity: 0.8}
}

/* END OF PRELOAD SCREEN */

/* TITLE SCREEN */

#titleScreen { width: 960px; height: 540px; z-index: 200; }
#titleScreen * { position: absolute; }
#titleScreen .noUserData, #titleScreen.noUserData .userData { display: none; }
#titleScreen.noUserData .noUserData, #titleScreen .userData { display: block; }
#titleScreen .titleScreen-bkg { width: 960px; height: 540px; background: url("../images/bkg.jpg") scroll no-repeat left top; }
#titleScreen .titleScreen-logo-rid { top: 20px; left: 30px; }
#titleScreen #btnHowToPlay, #titleScreen #btnAudioSettings { top: 20px; }
#titleScreen #btnHowToPlay { right: 120px; }
#titleScreen #btnAudioSettings { right: 25px; }

/* Title screen block when NO user data is present */
#titleScreen #noUserDataBlock { top: 160px; right: 20px; width: 397px; height: 314px; }
#titleScreen #noUserDataBlock .titleScreen-logo-cf { top: 0; }
#titleScreen #noUserDataBlock .btnStart { bottom: 105px; }


#titleScreen #ultrabee_container { bottom:0px; left:0px; width: 579px; height:429px;}
#titleScreen #ultrabee_container .torsos { animation: torsos 8s ease-in infinite alternate; z-index:20; top: 42px; left: 94px; background: url("../assets/html/img/ultrabee/torsos.png") scroll no-repeat left top; width:315px; height:232px; }
#titleScreen #ultrabee_container .legs { z-index:18; top: 213px; left: 103px; background: url("../assets/html/img/ultrabee/legs.png") scroll no-repeat left top; width:550px; height:216px; }
#titleScreen #ultrabee_container .hand-right { /*animation: handRight 10s ease-in infinite alternate;*/ z-index:25; top: 160px; left: 25px; background: url("../assets/html/img/ultrabee/hand-right.png") scroll no-repeat left top; width:170px; height:210px;}
#titleScreen #ultrabee_container .arm-right { transform-origin: 34px 90px; animation: armRight 8s ease-in infinite alternate;  z-index:21; top: 0px; left: 384px; background: url("../assets/html/img/ultrabee/arm-right.png") scroll no-repeat left top; width:169px; height:210px;}
#titleScreen #ultrabee_container .hand-left { /*animation: handLeft 10s ease-in infinite alternate;*/  z-index:25; top: 153px; left: -13px; background: url("../assets/html/img/ultrabee/hand-left.png") scroll no-repeat left top; width:204px; height:214px;}
#titleScreen #ultrabee_container .arm-left { transform-origin: 180px 87px; animation: armLeft 8s ease-in infinite alternate; z-index:21; top: 0px; left: -87px; background: url("../assets/html/img/ultrabee/arm-left.png") scroll no-repeat left top; width:228px; height:232px;}


@keyframes torsos {
	0% {-webkit-transform: scale(1); transform: scale(1); -ms-transform: scale(1); }
	48% {-webkit-transform: scale(1.03); transform: scale(1.03);  -ms-transform: scale(1.03) rotate(0.1deg); }
	100% { -webkit-transform: scale(1); transform: scale(1); -ms-transform: scale(1);}
}
@keyframes armRight {
	0% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0);  }
	50% { -webkit-transform: rotate3d(0,0,1, -3.2deg); transform: rotate3d(0,0,1, -3.2deg);  }
	100% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0);   }
}
@keyframes armLeft {
	0% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0);  }
	50% { -webkit-transform: rotate3d(0,0,1, 3.2deg); transform: rotate3d(0,0,1, 3.2deg);  }
	100% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0);   }
}
@keyframes handRight {
	0% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0);  }
	33% { -webkit-transform: rotate3d(0,0,1, 3deg); transform: rotate3d(0,0,1, 3deg);  }
	66% { -webkit-transform: rotate3d(0,0,1, -3deg); transform: rotate3d(0,0,1, -3deg);  }
	100% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0);  }
}
@keyframes handLeft {
	0% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0);  }
	33% { -webkit-transform: rotate3d(0,0,1, -3deg); transform: rotate3d(0,0,1, -3deg);  }
	66% { -webkit-transform: rotate3d(0,0,1, 3deg); transform: rotate3d(0,0,1, 3deg);  }
	100% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0);  }
}
/* End of Title screen block when NO user data is present */

/* Title screen block when user data is present */
#titleScreen #userDataBlock { top: 160px; right: 20px; }
#titleScreen #userDataBlock .titleScreen-logo-cf { top: -90px; pointer-events: none; }
#titleScreen #userDataBlock .btnStart { bottom: -35px; }

#titleScreen #userDataBlock #playerStats { position: relative; }
#titleScreen #userDataBlock #playerStats .statHolder { top: 40px; width: 130px; height: 219px; }
	#titleScreen #userDataBlock #playerStats .statHolder.timeStat { left: 50px; }
	#titleScreen #userDataBlock #playerStats .statHolder.unlockProgressStat { right: 46px; }
#titleScreen #userDataBlock #playerStats .statIcon { top: 0; left: 11px; }
#titleScreen #userDataBlock #playerStats .titleScreen-stats-holder { bottom: 0; left: 0; }
	#titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle { top: 30px; left: 5%; width: 90%; text-align: center; font-weight: bold; }
		.de-ch #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.de-de #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.el-gr #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.es-ar #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.es-cl #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.es-co #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.es-es #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.es-lam #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.es-mx #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.es-pe #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.fr-be #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.fr-ca #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.fr-ch #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.fr-fr #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.it-it #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.nl-be #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.nl-nl #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.pl-pl #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.pt-br #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.pt-pt #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle,
		.tr-tr #titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statTitle { font-size: 12px; line-height: 12px; }
	#titleScreen #userDataBlock #playerStats .titleScreen-stats-holder .statValue { bottom: 9px; left: 5%; width: 90%; text-align: center; font-weight: 900; }

/*End of Title screen block when user data is present */
#titleScreen .titleScreen-logo-cf { left: calc(50% - 147.5px); z-index: 1; }
#titleScreen .btnStart { left: calc(48.5% - 169px); }
#titleScreen .btnStart .actionButton { top: 21px; left: 20px; width: calc(100% - 40px); text-align: center; }
	.fr-be #titleScreen .btnStart .actionButton,
	.fr-ca #titleScreen .btnStart .actionButton,
	.fr-ch #titleScreen .btnStart .actionButton,
	.fr-fr #titleScreen .btnStart .actionButton,
	.pl-pl #titleScreen .btnStart .actionButton { top: 22px; font-size: 30px; line-height: 30px; }

#titleScreen .titleScreen-robot-ultrabee { bottom: 0; left: 0; }
#titleScreen .titleScreen-speech-bubble { top: 26px; left: 297px; }
	#titleScreen .titleScreen-speech-bubble .tutorialText { top: 15px; left: 80px; width: 315px; font-style: italic; font-weight: bold; }

/* END OF TITLE SCREEN */


/* MENU SCREEN */

#menuScreen { width: 960px; height: 540px; z-index: 200; }
#menuScreen * { position: absolute; }
#menuScreen #background { top: 0; left: 0; width: 960px; height: 540px; background: url("../images/bkg.jpg") scroll no-repeat left top; z-index: 1; }

#menuScreen #menuHeader { top: 0; left: 0; width: 960px; height: 90px; z-index: 1; }
	#menuScreen #menuHeader #btnBackToTitle { top: 17px; left: 20px; }
	#menuScreen #menuHeader #menuTitle { top: 20px; left: calc(50% - 344.5px); }
		#menuScreen #menuHeader #menuTitle div { top: 19px; width: 100%; text-align: center; }

#menuScreen .characterSelector { bottom: 10px; width: 263px; height: 430px; z-index: 1; }
#menuScreen .characterSelector:not(.cleared) .cleared,
#menuScreen .characterSelector.cleared .active { display: none; }
#menuScreen .characterSelector .characterImage { bottom: 0; }
#menuScreen .characterSelector .characterImage.normal { bottom: 22px; }
#menuScreen .characterSelector .characterImage.hover { display: none; }
#menuScreen .characterSelector .characterImage.cleared { bottom: 22px; }
#menuScreen .characterSelector:not(.cleared).-over .characterImage.hover,
#menuScreen .characterSelector:not(.cleared).-click .characterImage.hover { display: block; }
#menuScreen .characterSelector.-over .characterImage.normal,
#menuScreen .characterSelector.-click .characterImage.normal { display: none; }
#menuScreen .characterSelector .characterName { bottom: 42px; left: 10%; width: 80%; text-align: center; }
	.zh-hant-hk #menuScreen .characterSelector .characterName,
	.zh-hant-tw #menuScreen .characterSelector .characterName { font-size: 18px; }
#menuScreen .characterSelector .checkmark { top: calc(50% - 61.5px); left: calc(50% - 61px); }

#menuScreen #characterBumblebee { left: calc(14% - 131.5px); }
#menuScreen #characterGrimlock { left: calc(38% - 131.5px); bottom: 11px; }
#menuScreen #characterSideswipe { right: calc(38% - 136px); }
#menuScreen #characterStrongarm { right: calc(14% - 131.5px); }

#menuScreen #characterBumblebee .characterImage.normal, #menuScreen #characterBumblebee .characterImage.cleared { left: 5px; }
#menuScreen #characterGrimlock .characterImage.normal, #menuScreen #characterGrimlock .characterImage.cleared { left: 20px; }
#menuScreen #characterSideswipe .characterImage.normal, #menuScreen #characterSideswipe .characterImage.cleared { left: 17px; }
#menuScreen #characterStrongarm .characterImage.normal, #menuScreen #characterStrongarm .characterImage.cleared { left: 23.5px; }

#menuScreen #characterBumblebee .characterImage.hover { left: 0; }
#menuScreen #characterGrimlock .characterImage.hover { left: 12px; }
#menuScreen #characterSideswipe .characterImage.hover { left: 7.5px; }
#menuScreen #characterStrongarm .characterImage.hover { left: 8.5px; }

/* END OF MENU SCREEN */

/* GAME HUD */
#gameHud { width: 960px; z-index: 100; height: 540px; overflow: hidden; pointer-events: none; }
#gameHud * { position: absolute; }
#gameHud div { pointer-events: auto; }

#gameHud #btnShowHideTestButtons { bottom: 0; left: 0; width: 30px; height: 30px; background-color: #f0f; opacity: .1; z-index: 1000; }
#gameHud .testButtons { display: block; left: 30px; width: 900px; height: 35px; }
#gameHud .testButtons.hidden { display: none; }

#gameHud .btnEnergy { display: inline-block;
    position: relative;
    width: auto;
    height: 30px;
    margin-left: 20px;
    background-color: #00f;
    font-size: 18px;
    padding: 5px;
    color: white;
    border: 1px solid black; }
	#gameHud .btnEnergy[data-value="-25"] { background-color: #f00; }
	#gameHud .btnEnergy[data-value="-5"] { background-color: #900; }
	#gameHud .btnEnergy[data-value="5"] { background-color: #090; }
	#gameHud .btnEnergy[data-value="25"] { background-color: #0f0; }

#gameHud #HUDTopDisplay { width: 960px; height: 130px; }
#gameHud #HUDTopDisplay .game-frame-under-gradient { top: 0; left: 0; }
#gameHud #HUDTopDisplay #playerHUD { z-index: 1; }
#gameHud #HUDTopDisplay #playerHUD, #gameHud #HUDTopDisplay #bossHUD { width: 960px; height: 130px; }
	#gameHud #HUDTopDisplay #playerHUD .frame { opacity: .5; }
	#gameHud #HUDTopDisplay #playerHUD.solo .boss.frame { display: none; }
	#gameHud #HUDTopDisplay #playerHUD.boss .solo.frame { display: none; }
	#gameHud #HUDTopDisplay #playerHUD.solo .solo.frame { display: block; }
	#gameHud #HUDTopDisplay #playerHUD.boss .boss.frame { display: block; }

#gameHud #HUDTopDisplay #playerHUD .frame.right { left: auto; right: -2px; -webkit-transform: scaleX(-1); transform: scaleX(-1); }

#gameHud #HUDTopDisplay #playerHUD.solo #bossHUD { display: none; }

#gameHud #HUDTopDisplay #playerHUD div.portrait { top: 13px; left: 84px; }
	#gameHud #HUDTopDisplay #playerHUD div.portrait div { display: none; }
	#gameHud #HUDTopDisplay #playerHUD.bumblebee div.portrait .bumblebee { display: block; top: 8px; left: 18px; }
	#gameHud #HUDTopDisplay #playerHUD.grimlock div.portrait .grimlock { display: block; top: 14px; left: 14px; }
	#gameHud #HUDTopDisplay #playerHUD.sideswipe div.portrait .sideswipe { display: block; top: -35px; left: 20px; }
	#gameHud #HUDTopDisplay #playerHUD.strongarm div.portrait .strongarm { display: block; top: -36px; left: 5px; }
	#gameHud #HUDTopDisplay #playerHUD.ultrabee div.portrait .ultrabee { display: block; top: 5px; left: 9px; }
#gameHud #HUDTopDisplay #playerHUD.boss #bossHUD div.portrait { top: 13px; right: 83px; left: auto; }
	#gameHud #HUDTopDisplay #bossHUD div.portrait .game-portrait-galvatronus { display: block; top: -13px; right: -13px; }

#gameHud #playerHUD .nameplate { top: 13px; left: 210px; width: 205px; text-align: left; }
	#gameHud #playerHUD.boss #bossHUD .nameplate { right: 210px; left: auto; text-align: right; }
	
#gameHud #playerHUD .stats { top: 43px; left: 189px; width: 220px; height: 150px; }
#gameHud #playerHUD.boss #bossHUD .stats { right: 189px; left: auto; }

#gameHud #playerHUD .stats .energybar {  }
	#gameHud #playerHUD.boss .stats .energybar { display: none; }
	#gameHud #playerHUD .stats .energybar div { top: 5px; }
	#gameHud #playerHUD .stats .energybar .start { left: 6px; }
	#gameHud #playerHUD .stats .energybar .middle { left: 23px; width: 155px; transition: width .1s linear; }
	#gameHud #playerHUD .stats .energybar .end { left: 178px; transition: left .1s linear, opacity .1s linear; }
	#gameHud #playerHUD .stats .energybar .end.hidden { opacity: 0; }

#gameHud #playerHUD .stats .lives { top: 48px; left: 25px; }
	#gameHud #playerHUD.boss .stats .lives { top: 0; left: 5px; }
	#gameHud #playerHUD .stats .lives .lifemarker { position: relative; display: inline-block; margin-right: 6px; }
	#gameHud #playerHUD .stats .lives .lifemarker .indicator { transition: opacity .25s linear; }
	#gameHud #playerHUD .stats .lives .lifemarker.empty .indicator { opacity: 0; }
	#gameHud #playerHUD #bossHUD .stats .lives { left: auto; right: 0; }
		#gameHud #playerHUD #bossHUD .stats .lives .lifemarker { margin: 0 0 0 8px; }

#gameHud #HUDBottomDisplay { bottom: 0; width: 960px; height: 130px; }
	#gameHud #HUDBottomDisplay .game-frame-under-gradient { bottom: 0; -webkit-transform: rotate3d(1, 0, 0, 180deg); transform: rotate3d(1, 0, 0, 180deg); }
	#gameHud #HUDBottomDisplay .game-frame-bottom { bottom: 0; opacity: .5; }

#gameHud #HUDBottomDisplay div.weapon { width: 150px; height: 130px; }
	#gameHud #HUDBottomDisplay div.weapon div.ready { bottom: 0; left: calc(50% - 48px); animation: alertBlink 0.5s linear infinite alternate; }
	#gameHud #HUDBottomDisplay div.weapon:not(.ready) div.ready { display: none; }

	#gameHud #HUDBottomDisplay div.weapon.bumblebee { left: 223px; }
	#gameHud #HUDBottomDisplay div.weapon.grimlock { left: 346px; }
	#gameHud #HUDBottomDisplay div.weapon.sideswipe { right: 340px; }
	#gameHud #HUDBottomDisplay div.weapon.strongarm { right: 219px; }
	#gameHud #HUDBottomDisplay div.weapon .game-weapon-locked { top: 10.5px; left: calc(50% - 45px); }
		#gameHud #HUDBottomDisplay div.weapon.unlocked .game-weapon-locked { display: none; }
	#gameHud #HUDBottomDisplay div.weapon .progressIndicator { top: 9px; left: calc(50% - 48px); width: 96px; height: 97px; overflow: hidden; }
		#gameHud #HUDBottomDisplay div.weapon:not(.unlocked) .progressIndicator { display: none; }
	#gameHud #HUDBottomDisplay div.weapon .progress, #gameHud #HUDBottomDisplay div.weapon .unlocked { bottom: 6.5px; left: calc(50% - 42px); }
	#gameHud #HUDBottomDisplay div.weapon.unlocked {  }
	#gameHud #HUDBottomDisplay div.weapon .progress { transition: height .25s linear; -webkit-transform: rotate3d(1, 0, 0, 180deg); transform: rotate3d(1, 0, 0, 180deg); }
		#gameHud #HUDBottomDisplay div.weapon.bumblebee .icon { z-index: 100; top: calc(50% - 28.5px); left: calc(50% - 38.5px); }
		#gameHud #HUDBottomDisplay div.weapon.grimlock .icon { z-index: 100; top: calc(50% - 21px); left: calc(50% - 20px); }
		#gameHud #HUDBottomDisplay div.weapon.sideswipe .icon { z-index: 100; top: calc(50% - 27.5px); left: calc(50% - 26px); }
		#gameHud #HUDBottomDisplay div.weapon.strongarm .icon { z-index: 100; top: calc(50% - 31.5px); left: calc(50% - 16px); }
	#gameHud #HUDBottomDisplay div.nameplate { bottom: 5px; width: 100%; text-align: center; }
		.zh-hant-hk #gameHud #HUDBottomDisplay div.nameplate,
		.zh-hant-tw #gameHud #HUDBottomDisplay div.nameplate { font-size: 10px; }
	
	#gameHud #HUDBottomDisplay div.keyboard-shortcut {
		top: 67px;
		width: 35px;
		height: 39px;
		text-align: center;
		left: 18px;
		z-index: 10;
		color: white;
		font-size: 15px;
		font-weight: 800;
		line-height: 32px;
	}
	
	#gameHud #HUDBottomDisplay div.keyboard-shortcut span {
		text-align: center;
		padding: 0 1px 0 0;
		width: 100%;
		position: relative;
	}

	#gameHud #HUDBottomDisplay div.rankIndicators { top: 2px; left: 10px; }
	#gameHud #HUDBottomDisplay div.weapon:not(.unlocked) div.rankIndicators { display: none; }
	#gameHud #HUDBottomDisplay div.rankIndicators div.rankIndicator {  }
	#gameHud #HUDBottomDisplay div.rankIndicators div.rankIndicator.rank1 { top: 30px; left: 10px; }
	#gameHud #HUDBottomDisplay div.rankIndicators div.rankIndicator.rank2 { top: 15px; left: 25px; }
	#gameHud #HUDBottomDisplay div.rankIndicators div.rankIndicator.rank3 { top: 0; left: 40px; }

#gameHud #btnPause { top: 34.5px; left: calc(50% - 31px); z-index: 101; }

#gameHud #alertPanel  {  }
#gameHud #alertPanel.on { animation: alertBlink 0.5s linear infinite alternate; }
#gameHud #alertPanel.left.on { top: 135px; left: -55px; z-index: 101; }
#gameHud #alertPanel.right.on { top: 135px; right: -55px; z-index: 101; 
	-ms-transform: scale3d(-1,1,1);
	-webkit-transform: scale3d(-1,1,1);
	-moz-transform: scale3d(-1,1,1);
	-o-transform: scale3d(-1,1,1);
	transform: scale3d(-1,1,1);
}
#gameHud #alertPanel.off { display: none; }

@keyframes alertBlink {
    from { opacity: 0.25; }
    to { opacity: 1}
}

#gameHud #keyPad {     
    top: 373px;
    left: 36px;
    z-index: 101;
    width: 205px;
    height: 205px;	
}
#gameHud #keyPad #btnKeyPadUp {     
    top: -30px;
    left: 0px;
    width: 54px;
    height: 54px;
	-ms-transform: rotateZ(-90deg);
	-webkit-transform: rotateZ(-90deg);
	-moz-transform: rotateZ(-90deg);
	-o-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
    background: url("../assets/html/img/bt-control-off.png") no-repeat 0 0;
}
#gameHud #keyPad #btnKeyPadDown {         
    top: 80px;
    left: 110px;
    width: 54px;
    height: 54px;
	-ms-transform: rotateZ(90deg);
	-webkit-transform: rotateZ(90deg);
	-moz-transform: rotateZ(90deg);
	-o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    background: url(../assets/html/img/bt-control-off.png) no-repeat 0 0;
}
#gameHud #keyPad #btnKeyPadLeft {        
	top: 80px;
    left: 0px;
    width: 54px;
    height: 54px;
	-ms-transform: rotateZ(-180deg);
	-webkit-transform: rotateZ(-180deg);
	-moz-transform: rotateZ(-180deg);
	-o-transform: rotateZ(-180deg);
    transform: rotateZ(-180deg);
	background: url("../assets/html/img/bt-control-off.png") no-repeat 0 0; 
}
#gameHud #keyPad #btnKeyPadRight {     
	top: -30px;
    left: 110px;
    width: 54px;
    height: 54px;
	-ms-transform: rotateZ(0);
	-webkit-transform: rotateZ(0);
	-moz-transform: rotateZ(0);
	-o-transform: rotateZ(0);
	transform: rotateZ(0);
    background: url(../assets/html/img/bt-control-off.png) no-repeat 0 0;
}

#gameHud #keyPad #btnKeyPadUp.on, 
#gameHud #keyPad #btnKeyPadDown.on, 
#gameHud #keyPad #btnKeyPadLeft.on, 
#gameHud #keyPad #btnKeyPadRight.on
{ 
	background: url("../assets/html/img/bt-control-on.png") no-repeat 0 0; 	
}


#gameHud #btnShoot {
    top: 370px;
    left: 794px;
    z-index: 101;
    width: 145px;
    height: 145px;
    background: url(../assets/html/img/bt-attack-off.png) no-repeat 0 0;
}

#gameHud #btnShoot.on {
    background: url(../assets/html/img/bt-attack-on.png) no-repeat 0 0;
}


#gameHud #timerContainer { top: 0; left: calc(50% - 62.5px); z-index: 2; }
	#gameHud #timerContainer #timer { top: 6px; left: calc(50% - 40px); width: 80px; }

/* END OF GAME HUD */

/* PAUSE SCREEN */

#pauseScreen { width: 960px; height: 540px; z-index: 210; -webkit-transform: translateZ(0); }
#pauseScreen * { position: absolute; }
#pauseScreen .pauseScreen-bkg-transparent { top: 0; left: 0;  }
#pauseScreen .pauseScreen-popup-background { top: 0; left: 0; }
#pauseScreen #titlePauseContainer { top: 20px; left: calc(50% - 344.5px); }
	#pauseScreen #titlePauseContainer div { top: 19px; left: 20px; width: calc(100% - 40px); text-align: center; }
#pauseScreen #frameBottom { bottom: 0; left: 0; }
#pauseScreen .viewButton { bottom: 33px; }
#pauseScreen #btnQuit { left: calc(27% - 45.5px); }
#pauseScreen #btnRestart { left: calc(37.5% - 45.5px); }
#pauseScreen #btnResume { bottom: 15px; left: calc(50% - 64px); }
#pauseScreen #btnHowtoPlay { right: calc(37.5% - 45.5px); }
#pauseScreen #btnSounds { right: calc(27% - 45.5px); }

/* END OF PAUSE SCREEN */

/* CONFIRM LEAVING GAME SCREEN */

#confirmScreen { width: 960px; height: 540px; z-index: 250; -webkit-transform: translateZ(0); }
#confirmScreen * { position: absolute; }
#confirmScreen .pauseScreen-bkg-transparent { top: 0; left: 0; }
#confirmScreen .pauseScreen-popup-container { top: calc(50% - 203.5px); left: calc(50% - 415.5px); }
#confirmScreen #titleConfirmContainer { top: 33px; left: calc(50% - 344.5px); }
	#confirmScreen #titleConfirmContainer div { top: 19px; left: 20px; width: calc(100% - 40px); text-align: center; }
	.de-ch #confirmScreen #titleConfirmContainer div.restart,
	.de-de #confirmScreen #titleConfirmContainer div.restart,
	.el-gr #confirmScreen #titleConfirmContainer div.restart,
	.es-ar #confirmScreen #titleConfirmContainer div.restart,
	.es-cl #confirmScreen #titleConfirmContainer div.restart,
	.es-co #confirmScreen #titleConfirmContainer div.restart,
	.es-es #confirmScreen #titleConfirmContainer div.restart,
	.es-lam #confirmScreen #titleConfirmContainer div.restart,
	.es-mx #confirmScreen #titleConfirmContainer div.restart,
	.es-pe #confirmScreen #titleConfirmContainer div.restart,
	.fr-be #confirmScreen #titleConfirmContainer div.restart,
	.fr-ca #confirmScreen #titleConfirmContainer div.restart,
	.fr-ch #confirmScreen #titleConfirmContainer div.restart,
	.fr-fr #confirmScreen #titleConfirmContainer div.restart,
	.nl-be #confirmScreen #titleConfirmContainer div.restart,
	.nl-nl #confirmScreen #titleConfirmContainer div.restart,
	.tr-tr #confirmScreen #titleConfirmContainer div.restart { top: 14px; font-size: 30px; }
	.it-it #confirmScreen #titleConfirmContainer div.restart { top: 15px; font-size: 28px; }
#confirmScreen #textConfirmContainer { top: 140px; left: 64.5px; width: calc(100% - 129px); padding: 10px 0; background: #fff; }
	#confirmScreen #textConfirmContainer div { position: relative; left: 20px; width: calc(100% - 40px); text-align: center; }

#confirmScreen .viewButton { left: calc(50% - 145px); }
#confirmScreen #btnYes { top: 50%; }
#confirmScreen #btnNo { top: 68%; }
	#confirmScreen .viewButton div.confirmButton { top: 28px; left: 20px; width: calc(100% - 40px); text-align: center; font-weight: 900; }
	.el-gr #confirmScreen .viewButton div.confirmButton,
	.es-ar #confirmScreen .viewButton div.confirmButton,
	.es-cl #confirmScreen .viewButton div.confirmButton,
	.es-co #confirmScreen .viewButton div.confirmButton,
	.es-es #confirmScreen .viewButton div.confirmButton,
	.es-lam #confirmScreen .viewButton div.confirmButton,
	.es-mx #confirmScreen .viewButton div.confirmButton,
	.es-pe #confirmScreen .viewButton div.confirmButton,
	.fr-be #confirmScreen .viewButton div.confirmButton,
	.fr-ca #confirmScreen .viewButton div.confirmButton,
	.fr-ch #confirmScreen .viewButton div.confirmButton,
	.fr-fr #confirmScreen .viewButton div.confirmButton,
	.it-it #confirmScreen .viewButton div.confirmButton,
	.nl-be #confirmScreen .viewButton div.confirmButton,
	.nl-nl #confirmScreen .viewButton div.confirmButton,
	.pt-br #confirmScreen .viewButton div.confirmButton,
	.pt-pt #confirmScreen .viewButton div.confirmButton,
	.tr-tr #confirmScreen .viewButton div.confirmButton { top: 26px; font-size: 18px; }
	.pl-pl #confirmScreen #btnYes.viewButton div.confirmButton.restart { top: 16px; font-size: 16px; }

#confirmScreen div.restart, #confirmScreen div.quit { display: none; }
#confirmScreen.restart div.restart { display: block; }
#confirmScreen.quit div.quit { display: block; }

#confirmScreen div.bot { display: none; bottom: 0; left: 0; }
#confirmScreen.bumblebee div.bumblebee { display: block; }
#confirmScreen.grimlock div.grimlock { display: block; }
#confirmScreen.sideswipe div.sideswipe { display: block; }
#confirmScreen.strongarm div.strongarm { display: block; }
#confirmScreen.ultrabee div.ultrabee { display: block; }

/* END OF CONFIRM LEAVING GAME SCREEN */

/* SOUND SETTINGS SCREEN */

#soundsScreen { position: absolute; width: 960px; height: 540px; z-index: 210; -webkit-transform: translateZ(0); }
#soundsScreen * { position: absolute; }
#soundsScreen #btnClose { top: 32px; right: 31px; z-index: 10; }
#soundsScreen #controlsContainer { top: 65px; left: 64.5px; }
#soundsScreen #titleSoundsScreenContainer { top: -34px; left: calc(50% - 344.5px); }
	.es-mx #soundsScreen #titleSoundsScreenContainer,
	.es-cl #soundsScreen #titleSoundsScreenContainer,
	.es-co #soundsScreen #titleSoundsScreenContainer,
	.es-pe #soundsScreen #titleSoundsScreenContainer { font-size: 25px; }
	#soundsScreen #titleSoundsScreenContainer .popupTitle { top: 19px; left: 6%; width: 88%; text-align: center; }
#soundsScreen #musicSection, #soundsScreen #sfxSection { top: 65px; left: calc(50% - 270px); width: 540px; height: 160px; }
#soundsScreen #sfxSection { top: 245px; }
#soundsScreen .label_container { top: 0; left: 0; width: 100%; }

#soundsScreen .musicFXToggleButton { top: 45px; left: 0; }
	#soundsScreen #musicSection.muted #btnMusicToggleActive { display: none; }
	#soundsScreen #musicSection:not(.muted) #btnMusicToggleInactive { display: none; }
	#soundsScreen #sfxSection.muted #btnSfxToggleActive { display: none; }
	#soundsScreen #sfxSection:not(.muted) #btnSfxToggleInactive { display: none; }

#soundsScreen .section_container { left: 135px; top: 60px; width: 325px; height: 75px; }
#soundsScreen #musicSection01, #soundsScreen #fxSection01 { left: 0; }
#soundsScreen #musicSection02, #soundsScreen #fxSection02 { left: 70px; }
#soundsScreen #musicSection03, #soundsScreen #fxSection03 { left: 140px; }
#soundsScreen #musicSection04, #soundsScreen #fxSection04 { left: 210px; }
#soundsScreen #musicSection05, #soundsScreen #fxSection05 { left: 280px; }
#soundsScreen .section_container .viewButton.soundsScreen-dot-music-inactive { top: 2px; margin-left: 1px; }
#soundsScreen #musicVolumeValueContainer, #soundsScreen #fxVolumeValueContainer { top: 80px; left: 475px; width: 60px; height: 30px; }
#soundsScreen .volumeValue { width: 100%; text-align: center; }

/* END OF SOUND SETTINGS SCREEN */

/* HOW TO PLAY */

#howToPlayScreen { position: absolute; width: 960px; height: 540px; z-index: 210; -webkit-transform: translateZ(0); }
#howToPlayScreen #howToPlayContainer { top: 65px; left: 64.5px; position: absolute; }
#howToPlayScreen #btnClose { top: 32px; right: 31px; z-index: 10; position: absolute; }
#howToPlayScreen #titleHowToPlayScreenContainer { top: -34px; left: calc(50% - 344.5px); position: absolute; }
	#howToPlayScreen #titleHowToPlayScreenContainer .popupTitle { top: 19px; left: 6%; width: 88%; text-align: center;  position: absolute;}
#howToPlayScreen #carouselContainer { top: 50px; left: 65px; width: 705px; height: 350px; position: absolute;}
	#howToPlayScreen #carouselContainer .htpText { width: 100%; margin-top: 5px; }
	#howToPlayScreen #carouselContainer.desktop .carousel-image .mobile { display: none; }
	#howToPlayScreen #carouselContainer.mobile .carousel-image .desktop { display: none; }
	#howToPlayScreen #carouselContainer.desktop .htpText.mobile { display: none; }
	#howToPlayScreen #carouselContainer.mobile .htpText.desktop { display: none; }
#howToPlayScreen #howToPlayCarousel { height: 350px; width: 705px; }
#howToPlayCarousel .owl-item .item { height: 350px; text-align: center; }

#howToPlayCarousel .owl-controls { bottom: -67px; left: calc(50% - 175.5px); }
#howToPlayCarousel .owl-controls * { position: relative; top: 2px; }
#howToPlayCarousel .owl-controls .owl-dot { display: inline-block; }
#howToPlayCarousel .owl-theme .owl-controls { margin-top: 5px; }
#howToPlayCarousel .owl-controls .owl-dot span { display: block; margin: 5px 4px; }


/* How to play OWL carousel */
#howToPlayScreen .carousel_nav { width: 100%; height: 100%; }
#howToPlayScreen .carouselNavButton { top: calc(50% - 65px); z-index: 10; position: absolute;}
	#howToPlayScreen #btnPreviousSlide { left: 12px; position: absolute; }
	#howToPlayScreen #btnNextSlide { right: 12px; position: absolute; }
#howToPlayScreen .carouselNavButton { top: 160px; z-index: 10; position: absolute; }
#howToPlayScreen .btnCarouselPreviousWrapper { left: -65px; position: absolute; }
#howToPlayScreen div#btnPreviousSlide {
	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#btnPreviousSlide { display: none; }

#howToPlayScreen .btnCarouselNextWrapper { right: -65px; position: absolute; }
#howToPlayScreen div#btnPreviousSlide { float: left; z-index: 100; }
#howToPlayScreen .disabled div#btnNextSlide { display: none; }
#howToPlayScreen .carousel-image { position: relative; }
#howToPlayScreen .item .carousel-image { left: 0; top: 5px; min-height: 255px; margin: 0 auto; }
#howToPlayScreen .item .carousel-image div { margin: auto; }

#howToPlayCarousel div.item.howtoplay_slide1 .carousel-image div { position: absolute; top: 10px; left: calc(50% - 340px); }
#howToPlayCarousel div.item.howtoplay_slide1 .carousel-image div.mobile { position: absolute; top: 10px; left: calc(50% - 226px); }
#howToPlayCarousel div.item.howtoplay_slide5 .carousel-image div { position: absolute; top: 50px; left: calc(50% - 285.5px); }

.el-gr #howToPlayScreen .htpTitle,
.es-ar #howToPlayScreen .htpTitle,
.es-cl #howToPlayScreen .htpTitle,
.es-co #howToPlayScreen .htpTitle,
.es-es #howToPlayScreen .htpTitle,
.es-lam #howToPlayScreen .htpTitle,
.es-mx #howToPlayScreen .htpTitle,
.es-pe #howToPlayScreen .htpTitle { font-size: 18px; }
.fr-be #howToPlayScreen .htpTitle,
.fr-ca #howToPlayScreen .htpTitle,
.fr-ch #howToPlayScreen .htpTitle,
.fr-fr #howToPlayScreen .htpTitle { font-size: 16px; }

/* END OF HOW TO PLAY */


/* HELP SCREEN */

#helpScreen { position: absolute; width: 960px; height: 540px; z-index: 310; -webkit-transform: translateZ(0); }
#helpScreen .helpScreen-bkg-transparent {
	background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;	
}
#helpScreen #helpScreen-bkg-transparent { position: absolute; }
#helpScreen #controlsContainer {     top: 85px;
    left: calc(50% - 368px);
    position: absolute; }
#helpScreen #contentContainer {     top: 60px;
    left: 15px;
    width: 705px;
    height: 322px;
    position: absolute;}
#helpScreen #btnClose {     top: 51px;
    right: 78px;
    z-index: 10;
    position: absolute; }

#helpScreen .helpSafeZone .carousel-image {
	left: 115px;
    top: 10px;
    min-height: 255px;
    position: relative;
}
#helpScreen .helpDefeat .carousel-image {
    left: 33px;
    top: -25px;
    min-height: 255px;
    position: relative;
}
#helpScreen .htpText {
    font-size: 18px;
    line-height: 27px;
}

.el-gr #helpScreen .htpTitle,
.es-ar #helpScreen .htpTitle,
.es-cl #helpScreen .htpTitle,
.es-co #helpScreen .htpTitle,
.es-es #helpScreen .htpTitle,
.es-lam #helpScreen .htpTitle,
.es-mx #helpScreen .htpTitle,
.es-pe #helpScreen .htpTitle { font-size: 18px; }
.fr-be #helpScreen .htpTitle,
.fr-ca #helpScreen .htpTitle,
.fr-ch #helpScreen .htpTitle,
.fr-fr #helpScreen .htpTitle { font-size: 16px; }
	
/* END OF HELP SCREEN */

/*  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: 300; -webkit-transform: translateZ(0); }
#resultScreen * { position: absolute; }
#resultScreen .resultScreen-bkg-transparent { top: 0; left: 0; }
#resultScreen .resultScreen-background { top: calc(50% - 203.5px); left: calc(50% - 415.5px); }

#resultScreen .menuButton { top: 27px; left: 26px; z-index: 100; }
	#resultScreen.bosscleared .menuButton, #resultScreen.missioncleared .menuButton { display: none; }

#resultScreen .bot { display: none; bottom: 0; left: 0; }
	#resultScreen.bumblebee .bot.bumblebee { display: block; }
	#resultScreen.grimlock .bot.grimlock { display: block; }
	#resultScreen.sideswipe .bot.sideswipe { display: block; }
	#resultScreen.strongarm .bot.strongarm { display: block; }
	#resultScreen.ultrabee .bot.ultrabee { display: block; }

#resultScreen div.displayMode { width: 100%; height: 100%; }

#resultScreen.failed .failed { display: block; }
#resultScreen:not(.failed) .failed { display: none; }
#resultScreen.missioncleared .missioncleared { display: block; }
#resultScreen:not(.missioncleared) .missioncleared { display: none; }
#resultScreen.bosscleared .bosscleared { display: block; }
#resultScreen:not(.bosscleared) .bosscleared { display: none; }
#resultScreen.upgrade .upgrade { display: block; }
#resultScreen:not(.upgrade) .upgrade { display: none; }

#resultScreen .resultScreen-title-holder { top: 33px; left: calc(50% - 344.5px); }
	#resultScreen .resultScreen-title-holder div { top: 19px; left: 20px; width: calc(100% - 40px); text-align: center; }

#resultScreen .failed .resultScreen-failure-speech-bubble { top: 160px; left: 210px; }
	#resultScreen .failed .resultScreen-failure-speech-bubble div { top: 52px; left: 130px; width: calc(100% - 180px); text-align: center; }

#resultScreen .failed .viewButton { bottom: 10px; }
	#resultScreen .failed .replayButton { left: calc(42% - 57px); }
	#resultScreen .failed .transformerButton { right: calc(42% - 57px); }
	#resultScreen .failed.restartOnly .replayButton { left: calc(50% - 57px); }

#resultScreen .missioncleared .resultScreen-missioncleared-speech-bubble { top: 160px; left: 195px; }
	#resultScreen .missioncleared .resultScreen-missioncleared-speech-bubble div { top: 16px; left: 105px; width: calc(100% - 135px); text-align: center; }
#resultScreen .statBlock { bottom: 40px; width: 156px; height: 260px; }
	#resultScreen .missioncleared .statBlock.time { left: calc(33% - 78px); }
	#resultScreen .missioncleared .statBlock.accuracy { left: calc(50% - 78px); }
	#resultScreen .missioncleared .statBlock.lives { right: calc(33% - 78px); }
#resultScreen .statBlock .statIcon { top: 0; left: calc(50% - 65px); }
#resultScreen .statBlock .statHolder { bottom: 0; }
#resultScreen .statBlock .statLabel { top: 45px; left: 5%; width: 90%; text-align: center; font-weight: bold; }
	.nl-be #resultScreen .statBlock .statLabel,
	.nl-nl #resultScreen .statBlock .statLabel { font-size: 14px; }
#resultScreen .statBlock .statValue { bottom: 30px; left: 5%; width: 90%; text-align: center; font-weight: 900; }

#resultScreen .bosscleared .statBlock.time { left: calc(40% - 78px); }
#resultScreen .bosscleared .statBlock.accuracy { right: calc(40% - 78px); }

#resultScreen .playButton { bottom: 30px; right: 30px; }

#resultScreen .bosscleared .medal { top: 100px; right: 200px; }
	#resultScreen .bosscleared .medal div { display: none; }
	#resultScreen .bosscleared .medal.bronze div.bronze { display: block; }
	#resultScreen .bosscleared .medal.silver div.silver { display: block; }
	#resultScreen .bosscleared .medal.gold div.gold { display: block; }

#resultScreen .bosscleared .resultTextHolder { top: 140px; left: 64.5px; width: calc(100% - 129px); padding: 10px 0; background: #fff; }
	#resultScreen .bosscleared .resultTextHolder div { position: relative; left: 20px; width: calc(100% - 40px); text-align: center; }
	.de-ch #resultScreen .bosscleared .resultTextHolder div,
	.de-de #resultScreen .bosscleared .resultTextHolder div,
	.it-it #resultScreen .bosscleared .resultTextHolder div { font-size: 20px; }

#resultScreen .upgrade .upgradeSupport { top: 150px; left: calc(50% - 240.5px); }
	#resultScreen .upgrade .upgradeSupport .transformerName { top: 35px; width: 100%; text-align: center; font-weight: bold; }
		#resultScreen.strongarm .upgrade .upgradeSupport .transformerName { color: #fff; }
	#resultScreen .upgrade .upgradeSupport .weaponName { top: 65px; width: 100%; text-align: center; font-weight: 900; }
		#resultScreen.strongarm .upgrade .upgradeSupport .weaponName { color: #fff; }
	.cs-cz #resultScreen .upgrade .upgradeSupport .weaponName,
	.pt-br #resultScreen .upgrade .upgradeSupport .weaponName,
	.pt-pt #resultScreen .upgrade .upgradeSupport .weaponName { top: 75px; font-size: 26px; }

#resultScreen .upgrade .resultScreen-upgrade-upgrade-level-holder { top: 310px; left: calc(50% - 136px); }
	#resultScreen .upgrade .resultScreen-upgrade-upgrade-level-holder .upgradeLevel { top: 4px; left: 20px; width: calc(100% - 40px); font-weight: 900; text-align: center; }

#resultScreen .upgrade .upgradeHolder { bottom: 97px; width: 84px; height: 84px; }
	#resultScreen .upgrade .upgradeHolder.rank1 { left: 279px; }
	#resultScreen .upgrade .upgradeHolder.rank2 { left: 439px; }
	#resultScreen .upgrade .upgradeHolder.rank3 { left: 608px; }
	#resultScreen .upgrade .upgradeHolder div.unlocked { -webkit-transform: rotate3d(0,0,1, 180deg); transform: rotate3d(0,0,1, 180deg); }
	#resultScreen .upgrade .upgradeHolder div.locked { top: -17px; left: -19px; opacity: .8; -webkit-transform: scale(0.78); transform: scale(0.78); }
	#resultScreen .upgrade .upgradeHolder:not(.locked) div.locked { display: none; }
	#resultScreen .upgrade .upgradeHolder div.locked.reveal { animation: revealAnim 2s linear .5s; animation-fill-mode: forwards; }
		#resultScreen.bumblebee .upgrade .upgradeHolder div.icon { top: calc(50% - 27.5px); left: calc(50% - 38.5px); }
		#resultScreen.grimlock .upgrade .upgradeHolder div.icon { top: calc(50% - 21px); left: calc(50% - 20px); }
		#resultScreen.sideswipe .upgrade .upgradeHolder div.icon { top: calc(50% - 27.5px); left: calc(50% - 26px); }
		#resultScreen.strongarm .upgrade .upgradeHolder div.icon { top: calc(50% - 31.5px); left: calc(50% - 16px); }

	#resultScreen .upgrade .upgradeHolder div.rankIndicators { top: -12px; left: -21px; }
    #resultScreen .upgrade .upgradeHolder.locked div.rankIndicators { display:none; }
	#resultScreen .upgrade .upgradeHolder div.weapon:not(.unlocked) div.rankIndicators { display: none; }
	#resultScreen .upgrade .upgradeHolder div.rankIndicators div.rankIndicator.rank1 { top: 30px; left: 10px; }
	#resultScreen .upgrade .upgradeHolder div.rankIndicators div.rankIndicator.rank2 { top: 15px; left: 25px; }
	#resultScreen .upgrade .upgradeHolder div.rankIndicators div.rankIndicator.rank3 { top: 0; left: 40px; }

@keyframes revealAnim {
	0 { -webkit-transform: scale(1); transform: scale(1); }
	8% { -webkit-transform: scale(1.2); transform: scale(1.2); }
	16% { -webkit-transform: rotate3d(1,0,1, 0); transform: rotate3d(1,0,1, 0); }
	24% { -webkit-transform: rotate3d(1,0,1, 15deg); transform: rotate3d(1,0,1, 15deg); }
	32% { -webkit-transform: rotate3d(1,0,1, -15deg); transform: rotate3d(1,0,1, -15deg); }
	40% { -webkit-transform: rotate3d(0,1,1, 0); transform: rotate3d(0,1,1, 0); }
	48% { -webkit-transform: rotate3d(0,1,1, 30deg); transform: rotate3d(0,1,1, 30deg); }
	56% { -webkit-transform: rotate3d(0,1,1, -30deg); transform: rotate3d(0,1,1, -30deg); }
	64% { -webkit-transform: rotate3d(0,0,1, 0); transform: rotate3d(0,0,1, 0); -webkit-transform: scale(1); transform: scale(1); }
	100% { -webkit-transform: scale(0); transform: scale(0); }
}
#resultScreen .upgrade .upgradeLink { bottom: 125px; width: 132px; height: 30px; background-color: #83c2cc; opacity: .5; }
	#resultScreen .upgrade .upgradeLink.ranks1and2 { left: 340px; }
	#resultScreen .upgrade .upgradeLink.ranks2and3 { left: 500px;  }
	#resultScreen .upgrade .upgradeLink div { display: none; }
	#resultScreen .upgrade .upgradeLink.active div { display: block; top: 3px; animation: upgradeArrow 1.25s linear infinite; }

@keyframes upgradeArrow {
    from { left: -20%; }
    to { left: 100%; }
}

#resultScreen .upgrade .resultScreen-upgrade-continue-tooltip { top: 160px; right: 8px; }
	#resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div { top: 16px; left: 40px; width: calc(100% - 80px); font-size: 16px; font-weight: 900; text-align: center; line-height: 20px; text-transform: uppercase; }
		#resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div p { position: relative; margin: 11px 0 0; }
	.cs-cz #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.de-ch #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.de-de #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.el-gr #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.es-ar #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.es-cl #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.es-co #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.es-es #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.es-lam #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.es-mx #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.es-pe #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.fr-be #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.fr-ca #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.fr-ch #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.fr-fr #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.it-it #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.nl-be #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.nl-nl #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.pl-pl #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.pt-br #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.pt-pt #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.tr-tr #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div { left: 20px; width: calc(100% - 40px); font-size: 13px; }
	.nl-be #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div,
	.nl-nl #resultScreen .upgrade .resultScreen-upgrade-continue-tooltip div { top: 8px; }

/* END OF RESULT SCREEN */

/* LOW FPS SCREEN */

#lowFpsScreen { width: 960px; height: 540px; z-index: 600; }
#lowFpsScreen * { position: absolute; }
#lowFpsScreen .fpsScreen-bkg { top: 0; left: 5.5px; }
#lowFpsScreen #lowFPSContent { top: 130px; left: 210px; width: 540px; height: 310px; }
#lowFpsScreen .fpsScreen-img-fps { top: -50px; left: 50%; margin-left: -32.5px; }
#lowFpsScreen #lowFPSTitle, #lowFpsScreen #lowFPSDescription { width: 80%; top: 10px; left: 10%; }
	.de-de #lowFpsScreen #lowFPSTitle,
	.de-ch #lowFpsScreen #lowFPSTitle,
	.fr-ca #lowFpsScreen #lowFPSTitle { font-size: 25px; }
#lowFpsScreen #lowFPSDescription { top: 70px; line-height: 22px; }
	.fr-be #lowFpsScreen #lowFPSDescription,
	.fr-fr #lowFpsScreen #lowFPSDescription,
	.fr-ca #lowFpsScreen #lowFPSDescription,
	.fr-ch #lowFpsScreen #lowFPSDescription,
	.it-it #lowFpsScreen #lowFPSDescription,
	.pl-pl #lowFpsScreen #lowFPSDescription { font-size: 14px; }
#lowFpsScreen #btnAccept { bottom: 0; left: 50%; margin-left: -115px; height: 65px; padding-top: 7px; }

/* END OF LOW FPS SCREEN */

/* NO WEB GL SCREEN */
#noWebGLScreen
{
	width: 960px; 
	height: 540px;
	z-index: 100;
}

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

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

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

#noWebGLScreen #txtTryTestRangeContainer
{
    position: absolute;
    top: 170px;
    left: 150px;
}

#noWebGLScreen #btnPlayClassic
{
    position: absolute;
    top: 275px;
    left: 283px;
}

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

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

/* Collider State debug */
#colliderState {
    height: 378px;
    width: 345px;
    border: 1px solid #444;
    padding: 3px;
    background: rgba(16, 16, 16, 0.31);
    position: absolute;
    top: 141px;
    right: 0;
}
#colliderState h1 {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: white;
	position: relative !important;
}
#colliderState h1 span {
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    border-bottom: 1px solid #b9b9b9;
    padding: 4px;
    border-left: 1px solid #b9b9b9;
	position: relative !important;
}
.colliderStateGrid {
    display: grid;
    grid-template-columns: 26px 26px 26px 26px 26px 26px 26px 26px 26px 26px 26px 26px;
    grid-gap: 3px;
    height: auto;
    position: relative !important;
}

.collider {
	background-color: #ff5b5b;
    color: #ffffff;
    padding: 1px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 21px;
    border: 2px solid #da1313;
    border-radius: 22px;
    position: relative !important;
}
.collider.hasBeenTouch {
    border: 2px solid white;
}
.collider.MeshCollider {
   border-radius: 22px;
}
.collider.BoxCollider {
   border-radius: 0px;
}
.collider.collision_flags0 {
	background-color: #00ff57;
    color: #000000;
    border: 2px solid #5ade81;
}
.collider.collision_flags4 {
	background-color: #d17cff;
    color: #000000;
    border: 2px solid #905ee8;
    border-radius: 8px 8px 0 0;
}
.collider.waiting {
    background-color: #ffe800;
    color: #000000;
    border: 2px solid #f9c000;
	animation: blinker 1s linear infinite;
}
@keyframes blinker {  
  50% { opacity: 0.3; }
}