@charset "utf-8";

/* INDEX PAGE SECTION */


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: #00a9bb;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -ms-touch-action: none;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
	text-align: center;
}

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;
}


#debugTilesTable { display: none; z-index: 99; position: absolute; top: 85px; right: 0; width: 328px; background: #333; }
#debugTilesTable .container { display: block; position: relative; color: #fff; font-family: Arial, sans-serif; font-size: 12px; text-shadow: none; }
#debugTilesTable .container table td.type0 { background: green; }
#debugTilesTable .container table td.type1 { background: pink; color: #000; }
#debugTilesTable .container table td.type2 { background: orange; }
#debugTilesTable .container table td.type3 { background: blue; }
#debugTilesTable .container table td.type4 { background: purple; }

#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 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; cursor: pointer; display: none; }

#gameCanvas {
	display: none;
	z-index: -999;
}

canvas, #wade_main_div
{
    margin: auto;
    position: absolute;
    padding: 0;
    left: 0px;
    top: 0px;
    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;
	cursor: pointer;
	width: 304px;
    height: 450px;
}

#wade_main_div {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 205;
}

.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;
	width: 100%;
	height: 100%;
}

#htmlViewSystem { z-index: 1000; }

#viewLoader { text-align: center; }

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

.portrait #viewLoader #loaderAnim { 
	margin: 611px auto 0 auto;
    transform: scale(2);
}

/* END OF INDEX PAGE SECTION */

/* TEXT STYLES */

.actionButton .text,
.popupTitle .text { position: absolute; width: 100%; color: #fff; text-align: center; text-shadow: 2px 2px #000; }

.actionButton .text { /*top: 35px;*/ bottom: 30px; font-size: 40px; transform: scale(2); }
	.fr-ca .actionButton .text { bottom: 38px; font-size: 34px; }
	/*.isMac .actionButton .text,
	.isIos .actionButton .text,
	.isAndroid .actionButton .text { top: 50px; }*/
	.isAndroid .actionButton.btnSkipDialogue .text { top: 60px; }

	.actionButton.popupButton .text { bottom: 42px; font-size: 30px; transform: scale(2); }
		.fr-ca .actionButton.popupButton .text,
		.nl-be .actionButton.popupButton .text,
		.nl-nl .actionButton.popupButton .text,
		.ro-ro .actionButton.popupButton .text { bottom: 48px; font-size: 24px; }
	.isMac .actionButton.popupButton .text,
	.isIos .actionButton.popupButton .text,
	.isAndroid .actionButton.popupButton .text { bottom: 42px; }


.popupTitle .text, .timerValue { top: 9px; font-size: 24px; color: #fff; letter-spacing: 1px; }
	.de-de .popupTitle .text { top: 12px; font-size: 20px; }
	.pt-br .popupTitle .failure .text,
	.fr-ca .popupTitle .failure .text { top: 14px; font-size: 18px; }
	.portrait .popupTitle .text, .portrait .timerValue { top: 18px; font-size: 48px; }
		.hu-hu.portrait .popupTitle .text,
		.it-it.portrait .popupTitle .text { font-size: 40px; }
	/*.isMac .popupTitle .text,
	.isIos .popupTitle .text,
	.isAndroid .popupTitle .text,
	.isMac .timerValue,
	.isIos .timerValue,
	.isAndroid .timerValue { top: 17px; }*/
	.portrait.isMac .popupTitle .text,
	.portrait.isIos .popupTitle .text,
	.portrait.isAndroid .popupTitle .text,
	.portrait.isMac .timerValue,
	.portrait.isIos .timerValue,
	.portrait.isAndroid .timerValue { top: 20px; }

.popupTitle.tabs .text { top: 12px; font-size: 18px; letter-spacing: 1px; }
	.ro-ro .popupTitle.tabs .text,
	.it-it .popupTitle.tabs .text { font-size: 16px; }
	.fr-ca .popupTitle.tabs .text,
	.fr-fr .popupTitle.tabs .text,
	.fr-be .popupTitle.tabs .text,
	.de-de .popupTitle.tabs .text,
	.tr-tr .popupTitle.tabs .text { top: 16px; font-size: 14px; }
	.hu-hu .popupTitle.tabs .text,
	.pl-pl .popupTitle.tabs .text { top: 16px; font-size: 12px; letter-spacing: 0; }
	.portrait .popupTitle.tabs .text { top: 32px; font-size: 32px; }
		.portrait.ro-ro .popupTitle.tabs .text,
		.portrait.it-it .popupTitle.tabs .text { font-size: 28px; }
		.portrait.fr-ca .popupTitle.tabs .text,
		.portrait.fr-fr .popupTitle.tabs .text,
		.portrait.fr-be .popupTitle.tabs .text,
		.portrait.de-de .popupTitle.tabs .text,
		.portrait.tr-tr .popupTitle.tabs .text { top: 32px; font-size: 25px; }
		.portrait.hu-hu .popupTitle.tabs .text,
		.portrait.pl-pl .popupTitle.tabs .text { top: 32px; font-size: 20px; letter-spacing: 0; }
	.isMac .popupTitle.tabs .text,
	.isIos .popupTitle.tabs .text,
	.isAndroid .popupTitle.tabs .text { top: 18px; }
	.portrait.isMac .popupTitle.tabs .text,
	.portrait.isIos .popupTitle.tabs .text,
	.portrait.isAndroid .popupTitle.tabs .text { top: 36px; }

.panelTitle { color: #fff; font-size: 28px; }
	.es-es .panelTitle,
	.es-mx .panelTitle { font-size: 24px; }
	.fr-ca .panelTitle,
	.fr-fr .panelTitle,
	.fr-be .panelTitle,
	.hu-hu .panelTitle,
	.pl-pl .panelTitle,
	.it-it .panelTitle { font-size: 20px; }

.label_container { color: #fff; font-size: 20px; text-shadow: 2px 2px #000; letter-spacing: 2px; }
	.portrait .label_container { font-size: 40px; }

.objectiveTitle { color: #fff; font-size: 22px; letter-spacing: 1px; }
	.nl-be .objectiveTitle,
	.nl-nl .objectiveTitle { font-size: 20px; }
	.ro-ro .objectiveTitle { font-size: 18px; }
.objectiveValue { color: #fff; font-size: 48px; }

#dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
.howToPlayDescription { color: #fff; text-shadow: none; font-family: "Open Sans", sans-serif; font-weight: bold; }

#dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text { font-size: 36px; line-height: 48px; }
	.de-de #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text { font-size: 26px; line-height: 40px; }
	.es-es #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.es-mx #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.fr-ca #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.fr-fr #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.fr-be #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.hu-hu #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.nl-be #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.nl-nl #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.pt-br #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.ru-ru #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.tr-tr #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.cs-cz #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.pl-pl #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text,
	.ro-ro #dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text { font-size: 32px; line-height: 40px; }

	.hu-hu #dialogueScreen .dialogueStage .dialogueFrame .smaller .speechBubble .text,
	.ro-ro #dialogueScreen .dialogueStage .dialogueFrame .smaller .speechBubble .text { font-size: 28px; line-height: 35px; }
.howToPlayDescription { font-size: 18px; line-height: 24px; }
	.de-de .howToPlayDescription,
	.hu-hu .howToPlayDescription,
	.nl-be .howToPlayDescription,
	.nl-nl .howToPlayDescription,
	.cs-cz .howToPlayDescription,
	.ru-ru .howToPlayDescription { font-size: 14px; line-height: 21px; }
	.it-it .howToPlayDescription,
	.fr-be .howToPlayDescription,
	.fr-ca .howToPlayDescription,
	.fr-fr .howToPlayDescription { font-size: 16px; }
	.portrait .howToPlayDescription { font-size: 36px; line-height: 48px; }
		.portrait.de-de .howToPlayDescription,
		.portrait.hu-hu .howToPlayDescription,
		.portrait.nl-be .howToPlayDescription,
		.portrait.nl-nl .howToPlayDescription,
		.portrait.es-es .howToPlayDescription,
		.portrait.es-mx .howToPlayDescription,
		.portrait.ru-ru .howToPlayDescription,
		.portrait.cs-cz .howToPlayDescription { font-size: 28px; line-height: 35px; }
		.portrait.it-it .howToPlayDescription,
		.portrait.fr-be .howToPlayDescription,
		.portrait.fr-ca .howToPlayDescription,
		.portrait.fr-fr .howToPlayDescription { font-size: 32px; }

/* END OF TEXT STYLES */


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


/* MENU SCREEN */

#menuScreen { position: absolute; width: 960px; height: 540px; z-index: 210; }
	.portrait #menuScreen { width: 608px; height: 1080px; }
#menuScreen div { pointer-events: auto; }
#menuScreen .background { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}

#menuScreen .landscape { display: block; }
#menuScreen .portrait { display: none; }
	.portrait #menuScreen .landscape { display: none; }
	.portrait #menuScreen .portrait { display: block; }

#menuScreen .menuMap { position: absolute; left: 0; top: 0; width: 2160px; height: 540px; background: url("../assets/html/img/ponyville-map.jpg") no-repeat left top;
	-webkit-transition: left 250ms ease-out; /* older webkit */
	-webkit-transition: left 250ms ease-out; 
	   -moz-transition: left 250ms ease-out; 
		 -o-transition: left 250ms ease-out; 
			transition: left 250ms ease-out; /* custom */
	}
	.portrait #menuScreen .menuMap { width: 4320px; height: 1080px; background-image: url("../assets/html/img/ponyville-map-mobile.jpg"); background-position: left center; }
#menuScreen .mapNavigation .navButton { position: absolute; top: calc(50% - 69px); transform-origin: center center; }
	#menuScreen .mapNavigation .navButton.disabled { display: none; }
#menuScreen .mapNavigation .navButton.left { left: 0; transform: rotateZ(180deg) scale(.5); }
	.portrait #menuScreen .mapNavigation .navButton.left { transform: rotateZ(180deg) scale(.75); }
#menuScreen .mapNavigation .navButton.right { right: 0; transform: scale(.5); }
	.portrait #menuScreen .mapNavigation .navButton.right { transform: scale(.75); }

#menuScreen .levels { width: 100%; height: 100%; }
#menuScreen .levels .levelBlock { position: absolute; width: 70px; height: 80px; transform: scale(.75); transform-origin: left top; }
	.portrait #menuScreen .levels .levelBlock { transform: scale(1.5); }
#menuScreen .levels .levelBlock .dot { position: absolute; bottom: 0; left: calc(50% - 28px); transform: scale(1.2); }
	#menuScreen .levels .levelBlock.locked .dot { opacity: .75; transform: scale(1.2);
	-webkit-transition: opacity 500ms linear; /* older webkit */
	-webkit-transition: opacity 500ms linear; 
	   -moz-transition: opacity 500ms linear; 
		 -o-transition: opacity 500ms linear; 
			transition: opacity 500ms linear; /* custom */
	}
	#menuScreen .levels .levelBlock.locked.hidden .dot { opacity: 0; transform: scale(0); }
#menuScreen .levels .levelBlock .stars { position: absolute; bottom: 80px; left: -10%; width: 120%; height: 39px; transform: scale(.66); }
	#menuScreen .levels .levelBlock.locked .stars, #menuScreen .levels .levelBlock.nextLevel .stars { display: none; }
	#menuScreen .levels .levelBlock .stars .star { position: absolute; }
	#menuScreen .levels .levelBlock .stars .star.active { animation: starSpin 5s ease-out 3s infinite forwards; }
	#menuScreen .levels .levelBlock .stars .star.star1 { left: calc(10% - 19px); }
	#menuScreen .levels .levelBlock .stars .star.star2 { left: calc(50% - 19px); }
	#menuScreen .levels .levelBlock .stars .star.star3 { right: calc(10% - 19px); }
#menuScreen .levels .levelBlock .number { position: absolute; bottom: 15px; left: 0; width: 100%; height: 50px; }
	#menuScreen .levels .levelBlock.locked .number { display: none; }
	#menuScreen .levels .levelBlock.nextLevel .number { animation: nextLevel 2s ease-in-out infinite forwards; }
	#menuScreen .levels .levelBlock:not(.locked):hover .number { animation: activeLevel .333s ease-in-out infinite alternate; }
	#menuScreen .levels .levelBlock .number .digit { position: absolute; }
	#menuScreen .levels .levelBlock .number.singledigit .digit { left: calc(50% - 17px); }
	#menuScreen .levels .levelBlock .number.doubledigit .digit.tens { left: calc(30% - 17px); }
	#menuScreen .levels .levelBlock .number.doubledigit .digit.units { right: calc(30% - 17px); }

#menuScreen .levels .levelBlock.arcade { position: absolute; top: -10px; left: 1910px; width: 331px; height: 331px; transform: scale(.5); transform-origin: left top; color: #fff;
		-webkit-transition: top 500ms 250ms cubic-bezier(0.140, 0.575, 0.230, 1); /* older webkit */
		-webkit-transition: top 500ms 250ms cubic-bezier(0.140, 0.575, 0.230, 1.270); 
		   -moz-transition: top 500ms 250ms cubic-bezier(0.140, 0.575, 0.230, 1.270); 
			 -o-transition: top 500ms 250ms cubic-bezier(0.140, 0.575, 0.230, 1.270); 
				transition: top 500ms 250ms cubic-bezier(0.140, 0.575, 0.230, 1.270); /* custom */
	}
		#menuScreen .portrait .levels .levelBlock.arcade { left: 3820px; transform: scale(1); }
	#menuScreen .levels .levelBlock.arcade.hidden { top: -400px; }
	#menuScreen .levels .levelBlock.arcade .billboardAnimationHolder { position: absolute; bottom: 18px; left: 18px; width: 300px; height: 220px; }
	#menuScreen .levels .levelBlock.arcade .billboard { position: absolute; top: 0; left: 0; }
	#menuScreen .levels .levelBlock.arcade .title { position: absolute; bottom: 149px; left: 5%; width: 90%; font-size: 40px; }
		.tr-tr #menuScreen .levels .levelBlock.arcade .title { bottom: 153px; font-size: 30px; }
		.pl-pl #menuScreen .levels .levelBlock.arcade .title { bottom: 159px; font-size: 20px; }
		.ro-ro #menuScreen .levels .levelBlock.arcade .title { bottom: 154px; font-size: 28px; }
		/*.isMac #menuScreen .levels .levelBlock.arcade .title,
		.isIos #menuScreen .levels .levelBlock.arcade .title,
		.isAndroid #menuScreen .levels .levelBlock.arcade .title { top: 145px; }*/
	#menuScreen .levels .levelBlock.arcade .highscore { position: absolute; bottom: 90px; left: 5%; width: 90%; font-size: 40px; }
	#menuScreen .levels .levelBlock.arcade .start { display: none; position: absolute; bottom: -36.5px; left: calc(50% - 50.5px); }
	#menuScreen .levels .levelBlock.arcade .start.off,
	#menuScreen .levels .levelBlock.arcade.-off .start.off { display: block; }
	#menuScreen .levels .levelBlock.arcade.-over .start.over,
	#menuScreen .levels .levelBlock.arcade.-click .start.over { display: block; }

@keyframes nextLevel {
	0% { bottom: 15px; }
	5% { bottom: 25px; }
	15% { bottom: 15px; }
	25% { bottom: 15px; }
	30% { bottom: 25px; }
	40% { bottom: 15px; }
	100% { bottom: 15px; }
}
@keyframes activeLevel {
	0% { bottom: 15px; }
	100% { bottom: 25px; }
}
@keyframes starSpin {
	0% { transform: rotateY(0); }
	10% { transform: rotateY(180deg); }
	100% { transform: rotateY(180deg); }
}

#menuScreen .btnSettings { position: absolute; top: 18.5px; right: 13.5px; transform-origin: right top; transform: scale(.5); }
	.portrait #menuScreen .btnSettings { transform: scale(1); }

#menuScreen .debugButtons { position: absolute; left: 20px; width: 920px; height: 60px; display: none; }
#menuScreen .debugButtons .btnDialogueScreen { position: relative; float: left; width: 80px; height: 12px; margin: 5px 5px 0 0; background: #bf4; font-size: 10px; font-family: Arial, sans-serif; }
	.portrait #menuScreen .debugButtons .btnDialogueScreen { width: 15%; height: 30px; font-size: 16px; }
#menuScreen .debugButtons.shortcuts { bottom: 0; height: 100px; display: none; }
#menuScreen .debugButtons.dialogues { bottom: 0; height: 150px; display: none; }
	.portrait #menuScreen .debugButtons.shortcuts { bottom: 0; left: 0; width: 100%; height: 140px; }
	.portrait #menuScreen .debugButtons.dialogues { bottom: 55px; left: 15px; width: 100%; height: 280px; }

/* SETTINGS MENU */

#settingsScreen { position: absolute; width: 960px; height: 540px; overflow: hidden; z-index: 310; }
	.portrait #settingsScreen { width: 608px; height: 1080px; }

#settingsScreen .background.blocker { pointer-events: none; }
	.portrait #settingsScreen .background.blocker { width: 100%; height: 100%; background: #00a9bb; opacity: .6; }

#settingsScreen .popup,
#resultScreen .popup,
#howToPlayScreen .popup,
#pauseScreen .popup { position: absolute; left: calc(50% - 146.5px); top: 0; width: 297px; height: 521.5px; }
	#settingsScreen .popup .background,
	#resultScreen .popup .background,
	#howToPlayScreen .popup .background,
	#pauseScreen .popup .background { position: absolute; top: 0; left: 0; transform: scale(.5); transform-origin: left top; }

	#settingsScreen .portrait,
	.portrait #settingsScreen .landscape { display: none; }
	#settingsScreen .landscape,
	.portrait #settingsScreen .portrait { display: block; }

	#settingsScreen .popup .popupTitle,
	#howToPlayScreen .popup .popupTitle { position: absolute; top: 80px; left: calc(50% - 185px); }
		.portrait #settingsScreen .popup .popupTitle,
		.portrait #howToPlayScreen .popup .popupTitle { top: 190px; left: calc(50% - 267.5px); }

.portrait #settingsScreen .popup,
.portrait #resultScreen .popup,
.portrait #howToPlayScreen .popup,
.portrait #pauseScreen .popup { position: absolute; left: calc(50% - 293.5px); top: 0; width: 587px; height: 1043px; }
	.portrait #settingsScreen .popup .background,
	.portrait #resultScreen .popup .background,
	.portrait #howToPlayScreen .popup .background,
	.portrait #pauseScreen .popup .background { transform: scale(1); }

.popup .settingsContents { position: absolute; top: 150px; left: 7%; width: 86%; height: 300px; }
	.portrait .popup .settingsContents { top: 370px; }
.popup .section { position: absolute; width: 100%; height: 100px; }
	.popup .section .iconOnOff { position: absolute; top: 35px; transform-origin: center top; transform: scale(.5); }
		.portrait .popup .section .iconOnOff { top: 55px; transform: scale(1); }
	.popup .section .btnMusicOff { left: 15px; }
		.portrait .popup .section .btnMusicOff { left: 45px; }
		.popup .section.on .btnMusicOff { opacity: .25; }
	.popup .section .btnMusicOn { right: 25px; }
		.portrait .popup .section .btnMusicOn { right: 55px; }
		.popup .section.off .btnMusicOn { opacity: .25; }
	.popup .section .musicSlider { position: absolute; top: 35px; left: calc(50% - 33.5px); transform-origin: left top; transform: scale(.5); }
		.popup .section .musicSlider .indicator { position: absolute; }
		.popup .section .musicSlider .indicator { top: 7.5px; }
		.popup .section.on .musicSlider .indicator { left: 61.5px; }
		.popup .section.off .musicSlider .indicator { left: 8px; }

		.portrait .popup .section .musicSlider { top: 60px; left: calc(50% - 67px); transform: scale(1); }
		
.popup.transition .section .btnMusicOff {
	-webkit-transition: opacity 200ms ease-in; /* older webkit */
	-webkit-transition: opacity 200ms ease-in; 
	   -moz-transition: opacity 200ms ease-in; 
		 -o-transition: opacity 200ms ease-in; 
			transition: opacity 200ms ease-in; /* custom */
	}
.popup.transition .section .musicSlider .indicator {
	-webkit-transition: left 200ms ease-in; /* older webkit */
	-webkit-transition: left 200ms ease-in; 
	   -moz-transition: left 200ms ease-in; 
		 -o-transition: left 200ms ease-in; 
			transition: left 200ms ease-in; /* custom */
	}

.popup .musicSection { top: 0; }
.popup .fxSection { top: 100px; }
	.portrait .popup .fxSection { top: 200px; }

#settingsScreen .btnClose,
#pauseScreen .btnClose { position: absolute; top: 18.5px; right: 13.5px; transform-origin: top right; transform: scale(0.50877); }
	.portrait #settingsScreen .btnClose,
	.portrait #pauseScreen .btnClose { top: 70px; right: 40px; transform: scale(.8); }

#settingsScreen .characters { position: absolute; top: 0; left: 0; pointer-events: none; }
	#settingsScreen .characters div { position: absolute; }
	#settingsScreen .characters .spike { left: 417px; top: 360px; transform: scale(0.49588); transform-origin: left top; }
	#settingsScreen .characters .rainbowdash { left: 61.5px; top: 106px; }
	#settingsScreen .characters .pinkie { left: 400px; top: 300px; transform: scale(-0.48246, 0.48246); transform-origin: right top; }
	#settingsScreen .characters .yona { left: 12px; top: 352px; transform: scale(0.45783); transform-origin: left top; }
	.portrait #settingsScreen .characters div:not(.spike) { display: none; }
	.portrait #settingsScreen .characters .spike { top: 725px; left: 450px; transform: scale(-1,1); }

/* END OF SETTINGS MENU */

/* HOW TO PLAY SCREEN */

#howToPlayScreen { position: absolute; width: 960px; height: 540px; overflow: hidden; z-index: 210; }
	.portrait #howToPlayScreen { width: 608px; height: 1080px; }

#howToPlayScreen .background { pointer-events: none; }
#howToPlayScreen .background.blocker {  }

.portrait #howToPlayScreen .popup .popupTitle.portrait,
#howToPlayScreen .popup .popupTitle.landscape { display: block; }
.portrait #howToPlayScreen .popup .popupTitle.landscape,
#howToPlayScreen .popup .popupTitle.portrait { display: none; }
	
.popup .howToPlayContents { position: absolute; top: 150px; left: 8%; width: 84%; height: 280px; }
	.portrait .popup .howToPlayContents { top: 350px; height: 550px; }
	.popup .howToPlayContents .page { display: none; position: absolute; left: 0; width: 100%; height: 100%; }
		.popup .howToPlayContents .page .image { position: absolute; top: 0; left: 0; transform-origin: left top; transform: scale(.5); }
			.portrait .popup .howToPlayContents .page .image { left: 0; transform: scale(1); }
			.portrait .popup .howToPlayContents .page.powerups .image { display: none; }
		.popup .howToPlayContents .page .description { position: absolute; bottom: 0; width: 100%; text-align: center; }
		.popup .howToPlayContents .page.powerups .description { bottom: auto; top: 25px; }
			.portrait .popup .howToPlayContents .page.powerups .description { bottom: auto; top: 100px; }
			.popup .howToPlayContents .page .description .text { position: relative; left: 2.5%; width: 95%; }
				.popup .howToPlayContents .page .description .text .iconHolder { position: relative; top: 10px; width: 30px; height: 30px; display: inline-block; }
					.portrait .popup .howToPlayContents .page .description .text .iconHolder { top: 20px; width: 50px; height: 50px; }
				.popup .howToPlayContents .page .description .text .iconHolder .icon { position: absolute; top: 0; left: 0; transform-origin: left top; transform: scale(.2); }
					.portrait .popup .howToPlayContents .page .description .text .iconHolder .icon { transform: scale(.33); }

#howToPlayScreen .btnActionHowToPlay { position: absolute; bottom: 10px; left: calc(50% - 92.5px); transform-origin: bottom left; transform: scale(.5); }
	.portrait #howToPlayScreen .btnActionHowToPlay { bottom: 20px; left: calc(50% - 186px); transform: scale(1); }

#howToPlayScreen .characters { position: absolute; top: 0; left: 0; pointer-events: none; }
	#howToPlayScreen .characters div { position: absolute; }
		.portrait #howToPlayScreen .characters div { display: none; }
	#howToPlayScreen .characters .pinkie { left: 400px; top: 300px; transform: scale(-0.48246, 0.48246); transform-origin: right top; }
	#howToPlayScreen .characters .silverstream { left: 44.5px; top: 297px; transform: scale(0.47847); transform-origin: left top; }

/* END OF HOW TO PLAY SCREEN */

/* PAUSE SCREEN */

#pauseScreen { position: absolute; width: 960px; height: 540px; overflow: hidden; z-index: 250; }
	.portrait #pauseScreen { width: 608px; height: 1080px; }

#pauseScreen .background { pointer-events: none; }
	#pauseScreen .background.blocker { width: 100%; height: 100%; background: #00a9bb; opacity: .9; }

#pauseScreen .popup .popupTitle.landscape { display: block; }
#pauseScreen .popup .popupTitle.portrait { display: none; }

.portrait #pauseScreen .popup .popupTitle.landscape { display: none; }
.portrait #pauseScreen .popup .popupTitle.portrait { display: block; }

#pauseScreen .popup .popupTitle { position: absolute; top: 80px; left: calc(50% - 185px); }
	.portrait #pauseScreen .popup .popupTitle { top: 170px; left: calc(50% - 267.5px); }

	#pauseScreen .popup .popupTitle .btnTab { position: absolute; width: 35%; height: 60px; }
		#pauseScreen .popup .popupTitle .btnTab.settings { left: 15%; }
		#pauseScreen .popup .popupTitle .btnTab.howtoplay { right: 15%; }
	
		.portrait #pauseScreen .popup .popupTitle .btnTab { width: 40%; height: 100px; }
			.portrait #pauseScreen .popup .popupTitle .btnTab.settings { left: 8%; }
			.portrait #pauseScreen .popup .popupTitle .btnTab.howtoplay { right: 8%; }
	#pauseScreen .popup .popupTitle .text { position: absolute; width: 100%; text-align: center; }

#pauseScreen .popup .popupTitle .underline { position: absolute; top: 38.5px; transform-origin: left top; transform: scale(.5);
	-webkit-transition: left 500ms ease-in-out; /* older webkit */
	-webkit-transition: left 500ms ease-in-out; 
	   -moz-transition: left 500ms ease-in-out; 
		 -o-transition: left 500ms ease-in-out; 
			transition: left 500ms ease-in-out; /* custom */
	}
	.portrait #pauseScreen .popup .popupTitle .underline { transform: scale(1); }
	#pauseScreen .popup.settings .popupTitle .underline { left: calc(33% - 33.5px); }
	#pauseScreen .popup.howtoplay .popupTitle .underline { left: calc(67% - 33.5px); }
	.portrait #pauseScreen .popup .popupTitle .underline { top: 68px; }
		.portrait #pauseScreen .popup.settings .popupTitle .underline { left: calc(28% - 67px); }
		.portrait #pauseScreen .popup.howtoplay .popupTitle .underline { left: calc(72% - 67px); }

#pauseScreen .popup .popupContents { position: absolute; top: 150px; left: 7%; width: 86%; height: 320px; overflow: hidden; }
	.portrait #pauseScreen .popup .popupContents { top: 350px; height: 600px; }
#pauseScreen .popup .tab {
	-webkit-transition: left 500ms ease-in-out; /* older webkit */
	-webkit-transition: left 500ms ease-in-out; 
	   -moz-transition: left 500ms ease-in-out; 
		 -o-transition: left 500ms ease-in-out; 
			transition: left 500ms ease-in-out; /* custom */
	}
#pauseScreen .popup.settings .tab.howtoplay { left: 100%; }
#pauseScreen .popup.howtoplay .tab.settings { left: -100%; }

#pauseScreen .actions { position: absolute; top: 200px; left: 0; width: 100%; height: 100px; }
	.portrait #pauseScreen .actions { top: 400px; }
	#pauseScreen .actions div.menu { position: absolute; top: calc(50% - 28.5px); left: calc(33% - 28px); transform-origin: left top; transform: scale(.5); }
		.portrait #pauseScreen .actions div.menu { transform: scale(1); left: calc(33% - 54.5px); }
	#pauseScreen .actions div.restart { position: absolute; top: calc(50% - 28.5px); right: calc(33% - 28px); transform-origin: right top; transform: scale(.5); }
		.portrait #pauseScreen .actions div.restart { transform: scale(1); right: calc(33% - 54.5px); }
	
#pauseScreen .popup .tab { position: absolute; top: 0; left: 0; width: 100%; height: 280px; }
	.portrait #pauseScreen .popup .tab.howToPlayContents { top: 0; height: 550px; }

#pauseScreen .characters { position: absolute; top: 0; left: 0; pointer-events: none; }
	.portrait #pauseScreen .characters { display: none; }
	#pauseScreen .characters div { position: absolute; }
	#pauseScreen .characters .pinkie { left: 400px; top: 300px; transform: scale(-0.48246, 0.48246); transform-origin: right top; }
	#pauseScreen .characters .rainbowdash { left: 61.5px; top: 106px; }

/* END OF PAUSE SCREEN */

/* DIALOGUE SCREEN */

#dialogueScreen { position: absolute; width: 960px; height: 540px; overflow: hidden; z-index: 210; }
	.portrait #dialogueScreen { width: 608px; height: 1080px; }

#dialogueScreen #stageBackground { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent no-repeat center center; z-index: 1; pointer-events: none; }


	#dialogueScreen #stageBackground.arcade,
	#resultScreen .screenBackground.arcade,
	#gameHud .background.arcade { background-image: url("../assets/html/img/background_arcade.jpg"); }
	.portrait #dialogueScreen #stageBackground.arcade,
	.portrait #resultScreen .screenBackground.arcade,
	.portrait #gameHud .background.arcade { background-image: url("../assets/html/img/background_arcade_mobile.jpg"); }

	#dialogueScreen #stageBackground.carousel_boutique,
	#resultScreen .screenBackground.carousel_boutique,
	#gameHud .background.carousel_boutique { background-image: url("../assets/html/img/background_carousel_boutique.jpg"); }
	.portrait #dialogueScreen #stageBackground.carousel_boutique,
	.portrait #resultScreen .screenBackground.carousel_boutique,
	.portrait #gameHud .background.carousel_boutique { background-image: url("../assets/html/img/background_carousel_boutique_mobile.jpg"); }

	#dialogueScreen #stageBackground.kitchen,
	#resultScreen .screenBackground.kitchen,
	#gameHud .background.kitchen { background-image: url("../assets/html/img/background_kitchen.jpg"); }
	.portrait #dialogueScreen #stageBackground.kitchen,
	.portrait #resultScreen .screenBackground.kitchen,
	.portrait #gameHud .background.kitchen { background-image: url("../assets/html/img/background_kitchen_mobile.jpg"); }

	#dialogueScreen #stageBackground.las_pegasus,
	#resultScreen .screenBackground.las_pegasus,
	#gameHud .background.las_pegasus { background-image: url("../assets/html/img/background_las_pegasus.jpg"); }
	.portrait #dialogueScreen #stageBackground.las_pegasus,
	.portrait #resultScreen .screenBackground.las_pegasus,
	.portrait #gameHud .background.las_pegasus { background-image: url("../assets/html/img/background_las_pegasus_mobile.jpg"); }

	#dialogueScreen #stageBackground.maud_pie_home,
	#resultScreen .screenBackground.maud_pie_home,
	#gameHud .background.maud_pie_home { background-image: url("../assets/html/img/background_maud_pie_home.jpg"); }
	.portrait #dialogueScreen #stageBackground.maud_pie_home,
	.portrait #resultScreen .screenBackground.maud_pie_home,
	.portrait #gameHud .background.maud_pie_home { background-image: url("../assets/html/img/background_maud_pie_home_mobile.jpg"); }

	#dialogueScreen #stageBackground.park,
	#resultScreen .screenBackground.park,
	#gameHud .background.park { background-image: url("../assets/html/img/background_park.jpg"); }
	.portrait #dialogueScreen #stageBackground.park,
	.portrait #resultScreen .screenBackground.park,
	.portrait #gameHud .background.park { background-image: url("../assets/html/img/background_park_mobile.jpg"); }

	#dialogueScreen #stageBackground.river,
	#resultScreen .screenBackground.river,
	#gameHud .background.river { background-image: url("../assets/html/img/background_river.jpg"); }
	.portrait #dialogueScreen #stageBackground.river,
	.portrait #resultScreen .screenBackground.river,
	.portrait #gameHud .background.river { background-image: url("../assets/html/img/background_river_mobile.jpg"); }

	#dialogueScreen #stageBackground.sugarcube_corner,
	#resultScreen .screenBackground.sugarcube_corner,
	#gameHud .background.sugarcube_corner { background-image: url("../assets/html/img/background_sugarcube_corner.jpg"); }
	.portrait #dialogueScreen #stageBackground.sugarcube_corner,
	.portrait #resultScreen .screenBackground.sugarcube_corner,
	.portrait #gameHud .background.sugarcube_corner { background-image: url("../assets/html/img/background_sugarcube_corner_mobile.jpg"); }

	#dialogueScreen #stageBackground.school_of_friendship,
	#resultScreen .screenBackground.school_of_friendship,
	#gameHud .background.school_of_friendship { background-image: url("../assets/html/img/background_school_of_friendship.jpg"); }
	.portrait #dialogueScreen #stageBackground.school_of_friendship,
	.portrait #resultScreen .screenBackground.school_of_friendship,
	.portrait #gameHud .background.school_of_friendship { background-image: url("../assets/html/img/background_school_of_friendship_mobile.jpg"); }
#dialogueScreen .blocker { position: absolute; top: 0; left: 0; z-index: 10; }
	.portrait #dialogueScreen .blocker { width: 100%; height: 100%; background: #00a9bb; opacity: .6; }
#dialogueScreen .dialogueStage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; }

#dialogueScreen .dialogueStage .dialogueFrame { opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame { opacity: 1; }

#dialogueScreen .dialogueStage .dialogueFrame .characterText { width: 100%; height: 100%; }

#dialogueScreen .dialogueStage .dialogueFrame .characterHolder { position: absolute; bottom: 0; width: 675px; height: 625px; transform: scale(.5); display: flex; align-items: center; justify-content: center;
	-webkit-transition: right 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340); /* older webkit */
	-webkit-transition: right 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340); 
	   -moz-transition: right 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340); 
		 -o-transition: right 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340); 
			transition: right 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 350ms cubic-bezier(0.810, 0.090, 0.425, 0.340); /* custom */
}
	.portrait #dialogueScreen .dialogueStage .dialogueFrame .characterHolder { transform: scale(1); }
#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.exit {
	-webkit-transition: right 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340); /* older webkit */
	-webkit-transition: right 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340);
	   -moz-transition: right 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340);
		 -o-transition: right 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340);
			transition: right 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), left 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340), bottom 200ms 50ms cubic-bezier(0.810, 0.090, 0.425, 0.340); /* custom */
	}

	/* For landscape layout */
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.right { right: -500px; transform-origin: right bottom; }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.right.onstage { right: 222px; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .characterHolder.right { right: -1000px; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .characterHolder.right.onstage { right: -120px; }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.right .character { transform: scaleX(-1) translateX(50%); transform-origin: center bottom; }

	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.left { left: -500px; transform-origin: left bottom; }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.left.onstage { left: 222px; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .characterHolder.left { left: -1000px; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .characterHolder.left.onstage { left: -120px; }

	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.bottom { bottom: -350px; left: calc(50% - 337.5px); transform-origin: center bottom; }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.bottom.onstage { bottom: 0; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .characterHolder.bottom { bottom: -700px; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .characterHolder.bottom.onstage { bottom: 0; }
	/* Special classes for non-standard characters */
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.bottom.group .character { transform: scale(.75) translateX(-66%); transform-origin: center bottom; }

	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.discord .character { transform-origin: center bottom; }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.discord.left .character { transform: scale(.7) translateX(-65%); left: 50%; }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.discord.right .character { transform: scale(-.7, .7) translateX(-35%); }

/* Ugly hacks for Internet Explorer for the character positioning in dialogues */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.right .character { transform: scaleX(-1) translateX(50%); }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.left .character { transform: translateX(-50%); }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.bottom .character { transform: translateX(-50%); }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.bottom.group .character { transform: scale(.75) translateX(-66%); }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.discord.left .character { transform: scale(.7) translateX(-60%); }
	#dialogueScreen .dialogueStage .dialogueFrame .characterHolder.discord.right .character { transform: scale(-.7, .7) translateX(60%); }
}

#dialogueScreen .dialogueStage .dialogueFrame .character { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

#dialogueScreen .dialogueStage .dialogueFrame .speechBubble { opacity: 0; position: absolute; top: 20px;
	-webkit-transition: opacity 250ms cubic-bezier(0.810, 0.090, 0.425, 0.340); /* older webkit */
	-webkit-transition: opacity 250ms cubic-bezier(0.810, 0.090, 0.425, 0.340);
	   -moz-transition: opacity 250ms cubic-bezier(0.810, 0.090, 0.425, 0.340);
		 -o-transition: opacity 250ms cubic-bezier(0.810, 0.090, 0.425, 0.340);
			transition: opacity 250ms cubic-bezier(0.810, 0.090, 0.425, 0.340); /* custom */
	}
	.portrait #dialogueScreen .dialogueStage.skippable .dialogueFrame .speechBubble { top: 55px; }
	#dialogueScreen .dialogueStage .dialogueFrame .speechBubble.visible { opacity: 1; transition-delay: 300ms; }
	#dialogueScreen .dialogueStage .dialogueFrame .speechBubble.left { left: 385px; transform-origin: left top; transform: scale(.5); }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .speechBubble.left { left: 140px; transform: scale(1); }
	#dialogueScreen .dialogueStage .dialogueFrame .speechBubble.right { right: 385px; transform-origin: right top; transform: scale(.5); }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .speechBubble.right { right: 140px; transform: scale(1); }
	#dialogueScreen .dialogueStage .dialogueFrame .speechBubble.bottom { left: 410px; transform-origin: left top; transform: scale(.5); }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .speechBubble.bottom { left: 140px; transform: scale(1); }
	#dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text { position: absolute; top: 25px; left: 5%; width: 90%; }
	#dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text .objectiveImageHolder { position: relative; top: 6px; left: 6px; display: inline-block; width: 60px; height: 50px; overflow: hidden; }
	#dialogueScreen .dialogueStage .dialogueFrame .speechBubble .text .objectiveImageHolder .objectiveImage { position: absolute; left: 0; bottom: 0; transform-origin: left bottom; transform: scale(.33); }
	
	#dialogueScreen .dialogueStage .dialogueFrame .speechBubble.groupBubble { transform-origin: left top; }
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble1 { top: 20px; left: 550px; z-index: 5; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble1 { top: 55px; left: auto; right: 5px; }
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble2 { top: 110px; left: 320px; z-index: 10; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble2 { top: 203px; left: 35px; }
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble3 { top: 20px; left: 300px; z-index: 5; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble3 { top: 55px; left: 15px; }
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble4 { top: 64px; left: 422px; z-index: 8; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble4 { top: 130px; left: 200px; }
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble5 { top: 90px; left: 520px; z-index: 10; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble5 { top: 190px; left: auto; right: 12px; }

	#dialogueScreen .dialogueStage .dialogueFrame .characterText.group .speechBubble .text { color: #000; font-size: 32px; line-height: 36px; }
		.ru-ru #dialogueScreen .dialogueStage .dialogueFrame .characterText.group .speechBubble .text,
		.it-it #dialogueScreen .dialogueStage .dialogueFrame .characterText.group .speechBubble .text { font-size: 26px; }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame .characterText.group .speechBubble .text { font-size: 24px; }
	#dialogueScreen .dialogueStage .dialogueFrame .characterText.group .speechBubble { top: 500px; transform: scale(0); }
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble1 {
		-webkit-transition: top 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1), transform 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1); /* older webkit */
		-webkit-transition: top 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
		   -moz-transition: top 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
			 -o-transition: top 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
				transition: top 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 83ms cubic-bezier(0.945, 0.005, 0.435, 1.250);/* custom */
	}
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble2 {
		-webkit-transition: top 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1), transform 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1); /* older webkit */
		-webkit-transition: top 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
		   -moz-transition: top 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
			 -o-transition: top 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
				transition: top 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 250ms cubic-bezier(0.945, 0.005, 0.435, 1.250); /* custom */
	}
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble3 {
		-webkit-transition: top 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1), transform 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1); /* older webkit */
		-webkit-transition: top 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
		   -moz-transition: top 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
			 -o-transition: top 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
				transition: top 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 166ms cubic-bezier(0.945, 0.005, 0.435, 1.250); /* custom */
	}
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble4 {
		-webkit-transition: top 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1), transform 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1); /* older webkit */
		-webkit-transition: top 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
		   -moz-transition: top 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
			 -o-transition: top 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
				transition: top 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 417ms cubic-bezier(0.945, 0.005, 0.435, 1.250); /* custom */
	}
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble.groupBubble5 {
		-webkit-transition: top 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1), transform 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1); /* older webkit */
		-webkit-transition: top 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
		   -moz-transition: top 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
			 -o-transition: top 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1.250);
				transition: top 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1.250), transform 333ms 333ms cubic-bezier(0.945, 0.005, 0.435, 1.250); /* custom */
	}
	#dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble { transform: scale(.5); }
		.portrait #dialogueScreen .dialogueStage .dialogueFrame.currentFrame .characterText.group .speechBubble { transform: scale(1); }

#dialogueScreen .btnNextFrame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; z-index: 50; }

#dialogueScreen .btnSkipDialogue { position: absolute; right: 10px; top: 10px; width: 200px; height: 40px; transform-origin: right top; transform: scale(.5); opacity: 1; color: #fff; font-size: 36px; text-align: right; z-index: 100; }
	.de-de #dialogueScreen .btnSkipDialogue,
	.nl-be #dialogueScreen .btnSkipDialogue,
	.nl-nl #dialogueScreen .btnSkipDialogue,
	.ru-ru #dialogueScreen .btnSkipDialogue,
	.cs-cz #dialogueScreen .btnSkipDialogue { width: 250px; }
#dialogueScreen .btnAdvanceDialogue { position: absolute; right: 10px; bottom: 10px; z-index: 10001; transform-origin: right bottom; transform: scale(.85); opacity: 1;
	-webkit-transition: opacity 500ms linear; /* older webkit */
	-webkit-transition: opacity 500ms linear;
	   -moz-transition: opacity 500ms linear;
		 -o-transition: opacity 500ms linear;
			transition: opacity 500ms linear; /* custom */
	}
	#dialogueScreen .btnAdvanceDialogue.hidden,
	#dialogueScreen .btnSkipDialogue.hidden { opacity: 0;
		-webkit-animation: none; /* older webkit */
		-webkit-animation: none;
		   -moz-animation: none;
			 -o-animation: none;
				animation: none; /* custom */
	}
	.portrait #dialogueScreen .btnAdvanceDialogue,
	.portrait #dialogueScreen .btnSkipDialogue { transform: scale(1); }

/* END OF DIALOGUE SCREEN */

/* GAME HUD */
#gameHud { position: absolute; width: 960px; height: 540px; overflow: hidden; z-index: 200; }
	.portrait #gameHud { width: 608px; height: 1080px; }
	#gameHud .background { position: absolute; width: 100%; height: 100%; background: transparent no-repeat center center; pointer-events: none;}
	#gameHud .backgroundOverlay { position: absolute; width: 100%; height: 100%; background: #00a9bb; opacity: .75; }

#gameHud .landscape { display: block; }
	.portrait #gameHud .landscape { display: none; }

#gameHud .centerPanel .portrait { display: none; }
	.portrait #gameHud .centerPanel .portrait { display: block; }

#gameHud .centerPanel .title { position: absolute; top: -1.5px; right: -3.5px; z-index: 300; }
	#gameHud .centerPanel .panelTitle { position: absolute; top: 28px; width: 100%; font-size: 56px; }
	.isMac #gameHud .centerPanel .panelTitle,
	.isIos #gameHud .centerPanel .panelTitle,
	.isAndroid #gameHud .centerPanel .panelTitle { top: 36px; }

#gameHud .centerPanel .title .score.portrait { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	#gameHud .centerPanel .title .score .scoreboard { position: absolute; width: 94%; height: 94%; top: 3%; left: 3%; }
		#gameHud .centerPanel .title .score .scoreboard.collect .objective { top: 0; left: 0; width: 150px; transform-origin: left top; transform: scale(0.75); }
		#gameHud .centerPanel .title .score .scoreboard.collect .progress { position: absolute; top: 16px; left: 140px; width: 130px; height: 44px; font-size: 60px; text-align: left; color: #fff; }
	#gameHud .centerPanel .title .score .scoreboard.meter {}
		#gameHud .centerPanel .title .score .scoreboard.meter .progress { top: 15px; left: 10px; width: 326px; height: 74px; }
		#gameHud .centerPanel .title .score .scoreboard.meter .progress .meterTop { top: 0; right: 10px; left: auto; }
		#gameHud .centerPanel .title .score .scoreboard.meter .progress .meterBody { top: 0; left: 0; }
			#gameHud .centerPanel .title .score .scoreboard.meter .progress .meterBody .meterContent { top: 21px; left: 84px; height: 34px; transform: none; }
		#gameHud .centerPanel .title .score .scoreboard.meter .progress .meterBottom { top: 0; left: 0; }
		#gameHud .centerPanel .title .scoreboard.meter .progress .meterTop .meterObjective { transform: scale(.5); }
		#gameHud .centerPanel .title .scoreboard.meter .progress .meterBottom .objectToCollect { transform: scale(.5); }
	#gameHud .centerPanel .title .score .scoreboard.clear {}
		#gameHud .centerPanel .title .score .scoreboard.clear .progress { top: 3%; left: 3%; width: 94%; height: 100px; }
			#gameHud .centerPanel .title .score .scoreboard.clear .progress .stopwatch { top: 5px; left: 10px; transform-origin: left top; transform: scale(.9); }
			#gameHud .centerPanel .title .score .scoreboard.clear .progress .timer { top: 7px; left: 110px; }
	#gameHud .centerPanel .title .score .scoreboard.arcade {}
		#gameHud .centerPanel .title .score .scoreboard.arcade .progress { top: 3%; left: 3%; width: 94%; height: 100px; }
		#gameHud .centerPanel .title .score .scoreboard.arcade .progress .coin { left: 0; }
		#gameHud .centerPanel .title .score .scoreboard.arcade .progress .score { top: 15px; left: 100px; width: 333px; height: 70px; background: none; }
		#gameHud .centerPanel .title .score .scoreboard.arcade .progress .score .scoreValue { font-size: 48px; text-align: left; }

	
#gameHud .centerPanel #drop-progress { position: absolute; top: 116px; left: 10px; }
#gameHud .centerPanel #drop-progress .timeStopAnimationHolder { display: none; position: absolute; top: -36px; left: 1px; }
#gameHud .centerPanel #drop-progress .gameHUD-drop-progress-back {}
#gameHud .centerPanel #drop-progress .gameHUD-drop-progress-top {
	-webkit-transition: width 200ms linear; /* older webkit */
	-webkit-transition: width 200ms linear;
	   -moz-transition: width 200ms linear;
		 -o-transition: width 200ms linear;
			transition: width 200ms linear; /* custom */
	}
	
#gameHud .btnSettings { position: absolute; top: 18.5px; right: 13.5px; transform-origin: right top; transform: scale(.5); }
	.portrait #gameHud .btnSettings { top: 43px; right: 30px; transform: scale(.8); }

#gameHud .topPanel { position: absolute; top: 0; left: 0; width: 304px; height: 50px; background: #f0f; }
#gameHud .panel { position: absolute; top: 32px; }
	#gameHud .panelTitle { position: absolute; left: 0; top: 14px; width: 100%; letter-spacing: 1px; }
		.isMac #gameHud .panelTitle,
		.isIos #gameHud .panelTitle,
		.isAndroid #gameHud .panelTitle { top: 18px; }
	#gameHud .leftPanel { left: 129px; }
		#gameHud .scoreboard { display: none; position: absolute; top: 60px; left: 0; width: 100%; height: 418px; }
		#gameHud .centerPanel .description { display: none; position: absolute; bottom: -75px; width: 100%; height: 60px; font-size: 48px; color: #fff; }
			.portrait #gameHud .centerPanel .description { font-size: 36px; }
		.portrait #gameHud.arcade .highScore.arcade .highScoreTitle { display: inline-block; margin-right: 10px; }
		.portrait #gameHud.arcade .highScore.arcade .highScoreValue { display: inline-block; }
		.portrait #gameHud.arcade .highScore.arcade .newHighScore { position: absolute; top: -25px; transform-origin: center center; transform: scale(.4); display: block; }
			.portrait #gameHud.arcade .highScore.arcade .newHighScore.left { left: -33px; }
			.portrait #gameHud.arcade .highScore.arcade .newHighScore.right { right: -33px; }
		.portrait #gameHud.arcade .highScore.arcade .confettiAnimationHolder { position: absolute; bottom: -40px; }
		.portrait #gameHud.arcade .highScore.arcade .confettiAnimationHolder.left { left: -50px; }
		.portrait #gameHud.arcade .highScore.arcade .confettiAnimationHolder.right { right: -50px; transform-origin: center center; transform: scaleX(-1); }
		
		#gameHud.collect .scoreboard.collect { display: block; }
		#gameHud.meter .scoreboard.meter { display: block; }
		#gameHud.clear .scoreboard.clear { display: block; }
		#gameHud.arcade .scoreboard.arcade { display: block; }

		#gameHud .centerPanel .description { display: none; }
		.portrait #gameHud.clear .goal.clear { display: block; }
			.isMac.portrait #gameHud.clear .goal.clear .highScoreTitle,
			.isAndroid.portrait #gameHud.clear .goal.clear .highScoreTitle,
			.isIos.portrait #gameHud.clear .goal.clear .highScoreTitle { position: absolute; top: 15px; width: 100%; }

			.isMac.portrait #gameHud.arcade .highScore.arcade .highScoreTitle,
			.isAndroid.portrait #gameHud.arcade .highScore.arcade .highScoreTitle,
			.isIos.portrait #gameHud.arcade .highScore.arcade .highScoreTitle,
			.isMac.portrait #gameHud.arcade .highScore.arcade .highScoreValue,
			.isAndroid.portrait #gameHud.arcade .highScore.arcade .highScoreValue,
			.isIos.portrait #gameHud.arcade .highScore.arcade .highScoreValue { position: relative; top: 10px; }
		.portrait #gameHud.arcade .highScore.arcade { display: block; }

		#gameHud .centerPanel .powerups { position: absolute; width: 100%; height: 80px; bottom: 10px; pointer-events: none; }
			#gameHud .centerPanel .powerups .powerup { position: relative; float: right; width: 80px; height: 80px; margin-right: 10px; }
			#gameHud .centerPanel .powerups .powerup .powerupTimerHolder { position: absolute; width: 100%; height: 100%; }
			#gameHud .centerPanel .powerups .powerup .powerupTimerHolder svg { width: 100%; height: 100%; fill: #fff; }
			#gameHud .centerPanel .powerups .powerup .powerupTimer { position: absolute; width: 80px; height: 80px; }
			#gameHud .centerPanel .powerups .powerup .powerupTimer #ct-circle-container svg circle { stroke: #00a9bb; }
			#gameHud .centerPanel .powerups .powerup .powerupTimerCenter { position: absolute; top: calc(50% - 31px); left: calc(50% - 31px); }
			#gameHud .centerPanel .powerups .powerup .powerupIcon { position: absolute; top: calc(50% - 33.5px); left: calc(50% - 33.5px); transform: scale(.5); transform-origin: 0 0 0; }

	#gameHud .centerPanel { left: calc(50% - 142px); transform-origin: left top; transform: scale(.5); }
		.portrait #gameHud .centerPanel { left: calc(50% - 284px); transform: scale(1); }

	#gameHud .rightPanel { right: 129px; pointer-events: auto; }

		#gameHud .rightPanel .powerups { position: absolute; top: 80px; left: calc(50% - 40px); width: 80px; }
		#gameHud .rightPanel .powerups .powerup .powerupTimerHolder { position: absolute; width: 100%; height: 100%; }
		#gameHud .rightPanel .powerups .powerup .powerupTimerHolder svg { width: 100%; height: 100%; fill: #fff; }
		#gameHud .rightPanel .powerups .powerup { position: relative; float: left; width: 80px; height: 80px; margin-bottom: 10px; }
		#gameHud .rightPanel .powerups .powerup .powerupTimer { position: absolute; width: 80px; height: 80px; }
		#gameHud .rightPanel .powerups .powerup .powerupTimer #ct-circle-container svg circle { stroke: #00a9bb; }
		#gameHud .rightPanel .powerups .powerup .powerupTimerCenter { position: absolute; top: calc(50% - 31px); left: calc(50% - 31px); }
		#gameHud .rightPanel .powerups .powerup .powerupIcon { position: absolute; top: calc(50% - 33.5px); left: calc(50% - 33.5px); transform: scale(.5); transform-origin: 0 0 0; }
  
		#gameHud .rightPanel .debugButtons { display: none; position: absolute; top: 60px; left: 102%; width: 96%; }
		#gameHud .debugButtons div.collect,
		#gameHud .debugButtons div.meter,
		#gameHud .debugButtons div.clear,
		#gameHud .debugButtons div.arcade { display: none; }
		#gameHud.collect .debugButtons div.collect { display: block; }
		#gameHud.meter .debugButtons div.meter { display: block; }
		#gameHud.clear .debugButtons div.clear { display: block; }
		#gameHud.arcade .debugButtons div.arcade { display: block; }
		#gameHud .rightPanel .debugButtons div { position: relative; width: 50%; height: 20px; background: #f0a; font-size: 10px; font-family: Arial, sans-serif; border: 1px dashed #70b }

	
#gameHud .scoreboard .objective { position: absolute; top: 20px; width: 100%; }
	#gameHud .scoreboard .objective .objectiveTitle { position: absolute; left: 12%; width: 76%; }
		#gameHud .scoreboard .objective .objectiveTitle .objectiveImageHolder { position: relative; display: inline-block; width: 30px; height: 30px; }
		#gameHud .scoreboard .objective .objectiveTitle .objectiveImage { position: absolute; left: 0; top: 0; transform-origin: left top; transform: scale(.25); }
		#gameHud .scoreboard .objective .objectiveTitle .end { display: block; }
	#gameHud .scoreboard .objective .objectiveValue { position: absolute; top: 30px; left: 12%; width: 76%; }
/* Collect mode */
/*
<div class="scoreboard collect">
	<div class="objective">
		<div class="objectiveTitle" data-loc-id="levelObjective_collect"></div>
		<div class="objectiveValue"></div>
	</div>
	<div class="progress">
		
	</div>
</div>
*/
#gameHud .scoreboard.collect .progress { position: relative; top: 120px; left: 2.5%; width: 95%; height: 300px; }
#gameHud .scoreboard.collect .progress .collectible { position: relative; float: left; width: 44px; height: 50px; }
	#gameHud .scoreboard.collect .progress .collectible div { position: absolute; top: 0; left: 0; transform: scale(0.29333); transform-origin: top left; opacity: .25;
		-webkit-transition: opacity 250ms cubic-bezier(1.000, 0, 0.575, 1); /* older webkit */
		-webkit-transition: opacity 250ms cubic-bezier(1.000, -0.600, 0.575, 1); 
		-moz-transition: opacity 250ms cubic-bezier(1.000, -0.600, 0.575, 1); 
		-o-transition: opacity 250ms cubic-bezier(1.000, -0.600, 0.575, 1); 
		transition: opacity 250ms cubic-bezier(1.000, -0.600, 0.575, 1); /* custom */
	}
	#gameHud .scoreboard.collect .progress .collectible.collected div { opacity: 1; }

	/*#gameHud .scoreboard.collect .progress .collectible.collected { opacity: 1; }*/
/* Meter mode */
/*
<div class="scoreboard meter">
	<div class="objective">
		<div class="objectiveTitle" data-loc-id="levelObjective_meter"></div>
	</div>
	<div class="progress">
		<div class="meterTop">
			<div class="meterObjective"></div>
		</div>
		<div class="meterBody">
			<div class="meterContent">
				<div class="meterFillTop"></div>
				<div class="meterFillMiddle"></div>
				<div class="meterFillBottom"></div>
			</div>
			<div class="meterIndicator"></div>
		</div>
		<div class="meterBottom">
			<div class="objectToCollect"></div>
		</div>
	</div>
</div>
*/
#gameHud .scoreboard.meter .progress .meterTop { position: absolute; top: -10px; left: calc(50% - 32.5px); width: 65px; height: 65px; z-index: 10; }
	#gameHud .scoreboard.meter .progress .meterTop .meterObjective { transform: scale(0.43333); transform-origin: left top; }

#gameHud .scoreboard.meter .progress { position: absolute; top: 125px; left: calc(50% - 24px); width: 48px; }

#gameHud .scoreboard.meter .progress .meterBody { position: absolute; }
	#gameHud .scoreboard.meter .progress .meterBody .meterContent { position: absolute; top: 181px; left: 13px; height: 130px; width: 22px; transform-origin: top center; transform: rotateZ(180deg); overflow: hidden; transition: all 250ms ease-out; }
	#gameHud .scoreboard.meter .progress .meterBody .meterContent div { position: absolute; top: 0; left: 0; }

#gameHud .scoreboard.meter .progress .meterBottom { position: absolute; top: 187px; left: calc(50% - 27.5px); width: 55px; height: 55px; z-index: 10; }
	#gameHud .scoreboard.meter .progress .meterBottom .objectToCollect { transform: scale(0.36666); transform-origin: left top; }
/* Clear mode */
/*
<div class="scoreboard clear">
	<div class="objective">
		<div class="objectiveTitle" data-loc-id="levelObjective_clear"></div>
	</div>
	<div class="progress">
		<div class="stopwatch">
			<div class="timeIndicator"></div>
		</div>
		<div class="timer">
			<div class="timerValue"></div>
		</div>
	</div>
</div>
*/
#gameHud .scoreboard.clear .objective { top: 80px; }
	.hu-hu #gameHud .scoreboard.clear .objective { top: 40px; }
#gameHud .scoreboard.clear .progress { position: absolute; top: 150px; left: 2.5%; width: 95%; height: 270px; }

#gameHud .scoreboard.clear .progress .stopwatch { position: absolute; top: 0; left: calc(50% - 44px); }
	#gameHud .scoreboard.clear .progress .stopwatch #timeIndicator { position: absolute; top: 30px; left: 17px; width: 54px; height: 54px; }

#gameHud .scoreboard.clear .progress .timer { position: absolute; top: 115px; left: calc(50% - 46px); }
	#gameHud .scoreboard.clear .progress .timer .timerValue { position: absolute; width: 100%; }
/* Arcade mode */
/*
<div class="scoreboard arcade">
	<div class="objective">
		<div class="highScoreTitle" data-loc-id="levelObjective_arcade"></div>
		<div class="highScoreValue"></div>
	</div>
	<div class="progress">
		<div class="coin"></div>
		<div class="score">
			<div class="scoreValue"></div>
		</div>
	</div>
</div>
*/
#gameHud .scoreboard.arcade { color: #fff; }
#gameHud .scoreboard.arcade .objective { top: 80px; font-size: 20px; }
	.it-it #gameHud .scoreboard.arcade .objective .highScoreTitle { font-size: 18px; }
#gameHud .scoreboard.arcade .objective .newHighScore { position: absolute; top: -20px; transform-origin: center center; transform: scale(.25); display: block; }
#gameHud .scoreboard.arcade .objective .newHighScore.left { left: calc(12% - 56px); }
#gameHud .scoreboard.arcade .objective .newHighScore.right { right: calc(12% - 56px); }
#gameHud .scoreboard.arcade .progress { position: absolute; top: 150px; width: 100%; height: 160px; }
#gameHud .scoreboard.arcade .progress .coin { position: absolute; top: 0; left: calc(50% - 48px); }
#gameHud .scoreboard.arcade .progress .score { position: absolute; bottom: 0; left: calc(50% - 73.5px); }
#gameHud .scoreboard.arcade .progress .score .scoreValue { position: relative; top: 8px; left: 5%; width: 90%; font-size: 28px; }
	.isMac #gameHud .scoreboard.arcade .progress .score .scoreValue,
	.isIos #gameHud .scoreboard.arcade .progress .score .scoreValue,
	.isAndroid #gameHud .scoreboard.arcade .progress .score .scoreValue { top: 15px; }

#gameHud .leftPanel .scoreboard.arcade .objective .confettiAnimationHolder { position: absolute; top: -30px; transform-origin: center center; transform: scale(.75); }
	#gameHud .leftPanel .scoreboard.arcade .objective .confettiAnimationHolder.left { left: -80px; }
	#gameHud .leftPanel .scoreboard.arcade .objective .confettiAnimationHolder.right { right: -80px; transform: scale(-.75, .75); }

#gameHud .characters { position: absolute; top: 0; left: 0; pointer-events: none; }
	.portrait #gameHud .characters { display: none; }
#gameHud .characters div { position: absolute; }
#gameHud .characters .spike { top: 375px; left: 650px; }
#gameHud .characters .smolder { top: 45px; left: -30px; }

/* END OF GAME HUD */



/*  SECTION MISC */

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

/*  END SECTION MISC */

/* RESULT SCREEN */

#resultScreen { position: absolute; top: 0; left: 0; width: 960px; height: 540px; z-index: 500; pointer-events: auto; }
	.portrait #resultScreen { width: 608px; height: 1080px; }

#resultScreen .screenBackground { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
	.portrait #resultScreen .screenBackground.blocker { background: #00a9bb; opacity: .6; }

	#resultScreen .popup .popupTitle { position: absolute; top: 175px; left: calc(50% - 185px); }
		.portrait #resultScreen .popup .popupTitle { top: 350px; left: calc(50% - 267.5px); }
	#resultScreen .popup .popupTitle .success,
	#resultScreen .popup .popupTitle .failure,
	#resultScreen .popup .popupTitle .arcade { display: none; }
	#resultScreen .popup.success .popupTitle .success { display: block; }
	#resultScreen .popup.failure .popupTitle .failure { display: block; }
	#resultScreen .popup.arcade .popupTitle .arcade { display: block; }
	
#resultScreen .popup .popupTitle.landscape { display: block; }
#resultScreen .popup .popupTitle.portrait { display: none; }

	.portrait #resultScreen .popup .popupTitle.landscape { display: none; }
	.portrait #resultScreen .popup .popupTitle.portrait { display: block; }

#resultScreen .popup .popupTitle .subtitle { position: absolute; top: -35px; }
	.es-mx #resultScreen .popup .popupTitle .subtitle,
	.fr-ca #resultScreen .popup .popupTitle .subtitle,
	.fr-fr #resultScreen .popup .popupTitle .subtitle,
	.hu-hu #resultScreen .popup .popupTitle .subtitle,
	.nl-be #resultScreen .popup .popupTitle .subtitle,
	.nl-nl #resultScreen .popup .popupTitle .subtitle,
	.pt-br #resultScreen .popup .popupTitle .subtitle,
	.ru-ru #resultScreen .popup .popupTitle .subtitle,
	.tr-tr #resultScreen .popup .popupTitle .subtitle,
	.pl-pl #resultScreen .popup .popupTitle .subtitle,
	.ro-ro #resultScreen .popup .popupTitle .subtitle { font-size: 20px; }
	.es-es #resultScreen .popup .popupTitle .subtitle { font-size: 18px; }
	
	.es-es.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.hu-hu.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.nl-be.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.nl-nl.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.pt-br.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.ru-ru.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.tr-tr.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.ro-ro.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle { font-size: 48px; }
	.fr-ca.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.fr-fr.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.fr-be.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.pl-pl.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.es-mx.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.pt-br.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.tr-tr.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle { font-size: 36px; }
	.hu-hu.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle { font-size: 30px; }

	.es-es.portrait #resultScreen .popup .popupTitle .subtitle,
	.es-mx.portrait #resultScreen .popup .popupTitle .subtitle,
	.fr-be.portrait #resultScreen .popup .popupTitle .subtitle,
	.fr-ca.portrait #resultScreen .popup .popupTitle .subtitle,
	.fr-fr.portrait #resultScreen .popup .popupTitle .subtitle,
	.pl-pl.portrait #resultScreen .popup .popupTitle .subtitle,
	.de-de.portrait #resultScreen .popup .popupTitle .subtitle,
	.nl-be.portrait #resultScreen .popup .popupTitle .subtitle,
	.nl-nl.portrait #resultScreen .popup .popupTitle .subtitle,
	.cs-cz.portrait #resultScreen .popup .popupTitle .subtitle,
	.hu-hu.portrait #resultScreen .popup .popupTitle .subtitle,
	.pt-br.portrait #resultScreen .popup .popupTitle .subtitle,
	.ro-ro.portrait #resultScreen .popup .popupTitle .subtitle,
	.ru-ru.portrait #resultScreen .popup .popupTitle .subtitle,
	.tr-tr.portrait #resultScreen .popup .popupTitle .subtitle { font-size: 36px; }

	.hu-hu.portrait #resultScreen .popup.arcade .popupTitle .subtitle,
	.ro-ro.portrait #resultScreen .popup.arcade .popupTitle .subtitle,
	.ru-ru.portrait #resultScreen .popup.arcade .popupTitle .subtitle { width: 60%; top: -155px; left: 20%; }
		.ro-ro.portrait #resultScreen .popup.arcade .popupTitle .subtitle,
		.ru-ru.portrait #resultScreen .popup.arcade .popupTitle .subtitle { top: -175px; }

	.fr-ca.portrait #resultScreen .popup.arcade .popupTitle .subtitle,
	.fr-be.portrait #resultScreen .popup.arcade .popupTitle .subtitle,
	.fr-fr.portrait #resultScreen .popup.arcade .popupTitle .subtitle,
	.de-de.portrait #resultScreen .popup.arcade .popupTitle .subtitle,
	.pt-br.portrait #resultScreen .popup.arcade .popupTitle .subtitle,
	.tr-tr.portrait #resultScreen .popup.arcade .popupTitle .subtitle { top: -175px; }

	.cs-cz.portrait #resultScreen .popup.arcade .popupTitle .subtitle { top: -155px; }

	.es-es.portrait #resultScreen .popupTitle .text,
	.es-mx.portrait #resultScreen .popupTitle .text { font-size: 40px; }
	.fr-ca.portrait #resultScreen .popupTitle .text { top: 28px; font-size: 32px; }
	.fr-ca.portrait #resultScreen .popupTitle .success .text { font-size: 40px; }
	.pt-br.portrait #resultScreen .popupTitle .failure .text.title,
	.tr-tr.portrait #resultScreen .popupTitle .failure .text.title { top: 32px; font-size: 28px; }
	.de-de.portrait #resultScreen .popupTitle .failure .title,
	.nl-be.portrait #resultScreen .popupTitle .failure .title,
	.nl-nl.portrait #resultScreen .popupTitle .failure .title { top: 30px; font-size: 32px; }

	.fr-ca.portrait #resultScreen .popupTitle .text.points,
	.de-de.portrait #resultScreen .popupTitle .text.points { top: 18px; font-size: 48px; }

	.portrait #resultScreen .popup .popupTitle .subtitle { top: -65px; }
	/*.isMac #resultScreen .popup .popupTitle .subtitle,
	.isIos #resultScreen .popup .popupTitle .subtitle,
	.isAndroid #resultScreen .popup .popupTitle .subtitle { top: -55px; }*/
#resultScreen .popup.arcade .popupTitle .subtitle { left: 25%; top: -85px; width: 50%; }
	.ru-ru #resultScreen .popup.arcade .popupTitle .subtitle,
	.ro-ro #resultScreen .popup.arcade .popupTitle .subtitle,
	.fr-fr #resultScreen .popup.arcade .popupTitle .subtitle,
	.nl-be #resultScreen .popup.arcade .popupTitle .subtitle,
	.nl-nl #resultScreen .popup.arcade .popupTitle .subtitle,
	.fr-be #resultScreen .popup.arcade .popupTitle .subtitle,
	.it-it #resultScreen .popup.arcade .popupTitle .subtitle { top: -95px; }
	.pt-br #resultScreen .popup.arcade .popupTitle .subtitle,
	.tr-tr #resultScreen .popup.arcade .popupTitle .subtitle,
	.pl-pl #resultScreen .popup.arcade .popupTitle .subtitle { top: -90px; }

	.pt-br #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.tr-tr #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.ro-ro #resultScreen .popup.arcade.highscore .popupTitle .subtitle { top: -75px; }
	.es-es #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.ru-ru #resultScreen .popup.arcade.highscore .popupTitle .subtitle { top: -65px; }
	.it-it #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.nl-be #resultScreen .popup.arcade.highscore .popupTitle .subtitle,
	.nl-nl #resultScreen .popup.arcade.highscore .popupTitle .subtitle { top: -80px; }

	.portrait #resultScreen .popup.arcade .popupTitle .subtitle { top: -195px; }
		
	.portrait #resultScreen .popup.arcade.highscore .popupTitle .subtitle { top: -170px; }
	/*.isMac #resultScreen .popup.arcade .popupTitle .subtitle,
	.isIos #resultScreen .popup.arcade .popupTitle .subtitle,
	.isAndroid #resultScreen .popup.arcade .popupTitle .subtitle { top: -65px; }
	.it-it.isMac #resultScreen .popup.arcade .popupTitle .subtitle,
	.it-it.isIos #resultScreen .popup.arcade .popupTitle .subtitle,
	.it-it.isAndroid #resultScreen .popup.arcade .popupTitle .subtitle { top: -175px; }*/
#resultScreen .popup.arcade .popupTitle .token { position: absolute; left: 10%; top: 9px; transform-origin: left top; transform: scale(.4); }
	.portrait #resultScreen .popup.arcade .popupTitle .token { top: 12px; transform: scale(.8); }

#resultScreen .popup .decorations { display: none; }
	#resultScreen .popup.arcade .decorations { display: block; }
	#resultScreen .popup .decorations div { position: absolute; top: 0; z-index: 10; transform-origin: center center; transform: scale(.6); }
		#resultScreen .popup .decorations div.confettiAnimationHolder { top: 80px; z-index: 1; }
		.portrait #resultScreen .popup .decorations div { transform: scale(1); }
		.portrait #resultScreen .popup .decorations div.confettiAnimationHolder { top: 150px; }
		#resultScreen .popup .decorations .left { left: -75px; }
		#resultScreen .popup .decorations .confettiAnimationHolder.left { left: -25px; }
			.portrait #resultScreen .popup .decorations .left { left: -50px; }
			.portrait #resultScreen .popup .decorations .confettiAnimationHolder.left { left: 0; }
		#resultScreen .popup .decorations .right { right: -75px; transform-origin: center center; transform: scale(-.6, .6); }
		#resultScreen .popup .decorations .confettiAnimationHolder.right { right: -25px; }
			.portrait #resultScreen .popup .decorations .right { right: -50px; transform: scale(-1, 1); }
			.portrait #resultScreen .popup .decorations .confettiAnimationHolder.right { right: 0; }

#resultScreen .popup.arcade .stars { display: none; }
	
#resultScreen .popup .stars { position: absolute; top: 70px; left: calc(50% - 146.5px); width: 293px; height: 100px; }
	.portrait #resultScreen .popup .stars { top: 150px; left: 0; width: 100%; height: 200px; }

#resultScreen .popup .stars .star-holder { position: absolute; top: 25px; transform-origin: left top; transform: scale(.5); }
	.portrait #resultScreen .popup .stars .star-holder { top: 50px; transform: scale(1); }
	#resultScreen .popup .stars .star-holder .star { opacity: 0; transform: scale(0) rotateZ(0deg); transform-origin: center center;
		-webkit-transition: transform 500ms cubic-bezier(0.905, 0.355, 0.270, 1); /* older webkit */
		-webkit-transition: transform 500ms cubic-bezier(0.905, 0.355, 0.270, 1.395); 
		   -moz-transition: transform 500ms cubic-bezier(0.905, 0.355, 0.270, 1.395); 
			 -o-transition: transform 500ms cubic-bezier(0.905, 0.355, 0.270, 1.395); 
				transition: transform 500ms cubic-bezier(0.905, 0.355, 0.270, 1.395); /* custom */
	}
	#resultScreen .popup .stars .star-holder .star.active { opacity: 1; transform: scale(1) rotateZ(360deg); }
		#resultScreen .popup .stars .star-holder .starRevealHolder { position: absolute; top: calc(50% - 214px); left: calc(50% - 211px); transform-origin: center center; }
			#resultScreen .popup .stars .star-holder.left .starRevealHolder,
			#resultScreen .popup .stars .star-holder.right .starRevealHolder { transform: scale(.75); }

	#resultScreen .popup.failure .stars .star-holder { top: 25px; transform: scale(.375); }
		.portrait #resultScreen .popup.failure .stars .star-holder { top: 50px; transform: scale(.75); }

	#resultScreen .popup .stars .star-holder.left { left: calc(28% - 28px); }
		.portrait #resultScreen .popup .stars .star-holder.left { left: calc(28% - 56px); }
		#resultScreen .popup.failure .stars .star-holder.left { left: calc(34% - 28px); }
			.portrait #resultScreen .popup.failure .stars .star-holder.left { left: calc(34% - 42px); }

	#resultScreen .popup .stars .star-holder.center { left: calc(50% - 37.5px); top: 0; }
		.portrait #resultScreen .popup .stars .star-holder.center { left: calc(50% - 74.5px); }
		#resultScreen .popup.failure .stars .star-holder.center { top: 0; left: calc(50% - 27.9375px); }
			.portrait #resultScreen .popup.failure .stars .star-holder.center { top: 0; left: calc(50% - 55.875px); }

	#resultScreen .popup .stars .star-holder.right { right: calc(28% - 28px); transform-origin: right top; }
		.portrait #resultScreen .popup .stars .star-holder.right { right: calc(28% - 56px); }
		#resultScreen .popup.failure .stars .star-holder.right { right: calc(34% - 28px); }
			.portrait #resultScreen .popup.failure .stars .star-holder.right { right: calc(34% - 42px); }

#resultScreen .actions { position: absolute; top: 250px; left: 0; width: 100%; height: 100px; }
	.portrait #resultScreen .actions { top: 500px; height: 200px; }
	#resultScreen .actions .success,
	#resultScreen .actions .failure,
	#resultScreen .actions .arcade { display: none; }
	#resultScreen .popup.success .actions .success { display: block; }
	#resultScreen .popup.failure .actions .failure { display: block; }
	#resultScreen .popup.arcade .actions .arcade { display: block; }
	
	#resultScreen .actions div.menu { position: absolute; top: calc(50% - 28.5px); left: calc(21% - 28px); transform-origin: left top; transform: scale(.5); }
		.portrait #resultScreen .actions div.menu { top: calc(50% - 55.5px); left: calc(21% - 54.5px); transform: scale(1); }
	#resultScreen .actions div.restart { position: absolute; top: calc(50% - 28.5px); right: calc(21% - 28px); transform-origin: right top; transform: scale(.5); }
		.portrait #resultScreen .actions div.restart { top: calc(50% - 55.5px); right: calc(21% - 54.5px); transform: scale(1); }

	#resultScreen .actions .success div.continue,
	#resultScreen .actions .failure div.restart,
	#resultScreen .actions .arcade div.restart { position: absolute; top: calc(50% - 47px); left: calc(50% - 46.5px); transform-origin: left top; transform: scale(.5); }
		.portrait #resultScreen .actions .success div.continue,
		.portrait #resultScreen .actions .failure div.restart,
		.portrait #resultScreen .actions .arcade div.restart { top: calc(50% - 94px); left: calc(50% - 93px); transform: scale(1); }

#resultScreen .characters { position: absolute; top: 0; left: 0; pointer-events: none; }
#resultScreen .characters .success,
#resultScreen .characters .failure,
#resultScreen .characters .arcade { display: none; }
#resultScreen .characters.success .success { display: block; }
#resultScreen .characters.failure .failure { display: block; }
#resultScreen .characters.arcade .arcade { display: block; }

	#resultScreen .characters div { position: absolute; }
	#resultScreen .characters .failure .spike { left: 428px; top: 373px; transform-origin: left top; transform: scale(0.45022); z-index: 10; }
		.portrait #resultScreen .characters .failure .spike { top: 710px; left: 205px; transform: scale(1); }
		#resultScreen .characters .failure .starAnimation { position: absolute; top: 330px; left: 400px; width: 120px; height: 45px; animation: starGroupWobble 2250ms linear infinite alternate; z-index: 15; }
			.portrait #resultScreen .characters .failure .starAnimation { top: 655px; left: 190px; width: 240px; height: 90px; }
		#resultScreen .characters .failure .star1 { animation: stunnedStar 2s linear infinite forwards; }
		#resultScreen .characters .failure .star2 { animation: stunnedStar 2s linear -400ms infinite forwards; }
		#resultScreen .characters .failure .star3 { animation: stunnedStar 2s linear -800ms infinite forwards; }
		#resultScreen .characters .failure .star4 { animation: stunnedStar 2s linear -1200ms infinite forwards; }
		#resultScreen .characters .failure .star5 { animation: stunnedStar 2s linear -1600ms infinite forwards; }
			.portrait #resultScreen .characters .failure .star1 { animation: stunnedStarPortrait 2s linear infinite forwards; }
			.portrait #resultScreen .characters .failure .star2 { animation: stunnedStarPortrait 2s linear -400ms infinite forwards; }
			.portrait #resultScreen .characters .failure .star3 { animation: stunnedStarPortrait 2s linear -800ms infinite forwards; }
			.portrait #resultScreen .characters .failure .star4 { animation: stunnedStarPortrait 2s linear -1200ms infinite forwards; }
			.portrait #resultScreen .characters .failure .star5 { animation: stunnedStarPortrait 2s linear -1600ms infinite forwards; }
	#resultScreen .characters .arcade .pinkie, #resultScreen .characters .success .pinkie { left: 400px; top: 300px; transform: scale(-0.48246, 0.48246); transform-origin: right top; }
		.portrait #resultScreen .characters .arcade .pinkie,
		.portrait #resultScreen .characters .success .pinkie { left: -100px; top: 717px; transform-origin: top right; transform: scale(-1, 1); }
	#resultScreen .characters .arcade .rainbowdash, #resultScreen .characters .success .rainbowdash { left: 61.5px; top: 106px; }
		.portrait #resultScreen .characters .arcade .rainbowdash,
		.portrait #resultScreen .characters .success .rainbowdash { display: none; }

@keyframes starGroupWobble {
	0% { transform: rotateZ(-8deg); }
	100% { transform: rotateZ(11deg); }
}
	
@keyframes stunnedStar {
	0% { top: 8px; left: 0; transform: rotate3d(1, 1, 1, 0deg) scale(.375); z-index: 10; }
	20% { top: 16px; left: 45px; transform: rotate3d(.2, -.2, .5, 45deg) scale(.5); z-index: 20; }
	40% { top: 8px; left: 90px; transform: rotate3d(-.2, .2, -.5, 45deg) scale(.375); z-index: 10; }
	60% { top: 0; left: 62.5px; transform: rotate3d(.2, -.2, .5, 45deg) scale(.2); z-index: 5; }
	80% { top: 0; left: 27.5px; transform: rotate3d(-.2, -.2, -.5, 45deg) scale(.2); z-index: 5; }
	100% { top: 8px; left: 0; transform: rotate3d(1, 1, 1, 0deg) scale(.375); z-index: 10; }
}

@keyframes stunnedStarPortrait {
	0% { top: 16px; left: 0; transform: rotate3d(1, 1, 1, 0deg) scale(.75); z-index: 10; }
	20% { top: 32px; left: 90px; transform: rotate3d(.2, -.2, .5, 45deg) scale(1); z-index: 20; }
	40% { top: 8px; left: 180px; transform: rotate3d(-.2, .2, -.5, 45deg) scale(.75); z-index: 10; }
	60% { top: 0; left: 125px; transform: rotate3d(.2, -.2, .5, 45deg) scale(.4); z-index: 5; }
	80% { top: 0; left: 55px; transform: rotate3d(-.2, -.2, -.5, 45deg) scale(.4); z-index: 5; }
	100% { top: 16px; left: 0; transform: rotate3d(1, 1, 1, 0deg) scale(.75); z-index: 10; }
}

/* END OF RESULT SCREEN */