@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: #1492cd;
    -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;
}

body {
	font-size: 0px;
}

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

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

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


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

#htmlViewSystem {
	font-size: 1em;
}

#htmlViewSystem, #viewsContainer, #viewLoader
{
	position: absolute;
	top: 0;
	left: 0;
	width: 608px;
	height: 1080px;
	z-index:0;
}
.landscape #htmlViewSystem, .landscape #viewsContainer, .landscape #viewLoader
{
	width: 1920px;
	height: 1080px;
}

#htmlViewSystem { z-index: 1000; top:-3px }


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

.popupTitle.tabs .text {top: 32px; font-size: 32px; letter-spacing: 1px; }

.panelTitle { color: #fff; font-size: 28px; }

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

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

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


/* FTUESCREEN */

#ftueScreen { position: absolute; width: 608px; height: 1080px; z-index: 210; background: #000; }
#ftueScreen div { pointer-events: auto; }
.landscape #ftueScreen { width: 1920px; height: 1080px; }

#ftueScreen .background {
	background: #000 url(../assets/html/img/bkg-all-interface.jpg) no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 0;
	pointer-events: none;
}
#ftueScreen .bumblebee {
    background: url(../assets/html/img/bumblebee2.png) no-repeat center center;
    width: 1249px;
    height: 1057px;
    position: absolute;
    top: 338px;
    left: -43px;
    z-index: 0;
    display: block;
    transform: scale(0.7);
}
.landscape #ftueScreen .bumblebee {
    top: 24px;
    left: -6px;
    transform: scale(1);
}
#ftueScreen #dialog {
    position: absolute;
    top: 74px;
    right: 545px;
    /*display: none;*/
    transform: scale(0.65);
}
.landscape #ftueScreen #dialog {
    top: 74px;
    right: 838px;
	 transform: scale(1);
}
#ftueScreen #dialog .backdrop{
    position: absolute;
    top: 0px;
    left: 0px;
	background: url(../assets/html/img/ftue-dialog.png) no-repeat center center;
	width:840px;
	height:273px;
}
.landscape #ftueScreen #dialog .backdrop{

}
#ftueScreen #dialog .text-wrapper {
    display: table;
    overflow: hidden;
    position: absolute;
	top: 58px;
    left: 0px;
    width: 840px;
    height: 186px;
	z-index: 300;
}
#ftueScreen #dialog .text {
    width: 840px;
    height: 186px;
    color: white;
    font-size: 35px;
    z-index: 100;
    line-height: 43px;
    text-transform: uppercase;
    font-weight: 600;
    display: table-cell;
    vertical-align: middle;
	padding: 0 30px 0 63px;
}
#ftueScreen #TRFBB_dialogSkip {
    position: absolute;
    top: 960px;
    left: 299px;
    width: 468px;
    height: 138px;
    transform: scale(0.6);
	z-index:500;
}
.landscape #ftueScreen #TRFBB_dialogSkip {
    top: 867px;
    left: 1327px;
	transform: scale(1);
}
.btn_skip-off {
    background: url(../assets/html/img/btn_skip_off.png) no-repeat center center;
}
.btn_skip-over,
.btn_skip-click {
    background: url(../assets/html/img/btn_skip_on.png) no-repeat center center;
}

/* MENU SCREEN */

#menuScreen { position: absolute; width: 608px; height: 1080px; z-index: 210; background: #000; }
#menuScreen div { pointer-events: auto; }
.landscape #menuScreen { width: 1920px; height: 1080px; }

#menuScreen .background {
	background: #000 url(../assets/html/img/bkg-all-interface.jpg) no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 0;
	pointer-events: none;
}

#menuScreen #TRFBB_settings {
    width: 154px;
    height: 112px;
    position: absolute;
    top: 41px;
    left: 480px;
    transform: scale(0.7);
    transform-origin: 0 0 0;
    z-index: 200;
}
.landscape #menuScreen #TRFBB_settings {
    top: 44px;
    left: 1721px;
    transform: scale(1);
}

/* Tape Selection */
#menuScreen #TRFBB_back {
    width: 154px;
    height: 112px;
    position: absolute;
    top: 41px;
    left: 20px;
    transform: scale(0.7);
    transform-origin: 0 0 0;
    z-index: 200;
}
.landscape #menuScreen #TRFBB_back {
    top: 44px;
    left: 40px;
    transform: scale(1);
}
.btn_back-off {
    background: url(../assets/html/img/btn_back_off.png) no-repeat center center;
}
.btn_back-over,
.btn_back-click {
    background: url(../assets/html/img/btn_back_on.png) no-repeat center center;
}

#menuScreen #tape-selection-challenge,
#menuScreen #tape-selection-normal {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 608px;
    height: 1080px;
}
.landscape #menuScreen #tape-selection-challenge,
.landscape  #menuScreen #tape-selection-normal {
    width: 1920px;
    height: 1080px;
}
#menuScreen #tape-selection-challenge .tapes,
#menuScreen #tape-selection-normal .tapes {
    position: absolute;
    top: 356px;
    left: 0px;
    width: 608px;
}
.landscape  #menuScreen #tape-selection-normal .tapes {
    top: 165px;
    width: 1074px;
    left: 421px;
}
.landscape #menuScreen #tape-selection-challenge .tapes {
    top: 413px;
    width: 1215px;
    left: 379px;
}

#menuScreen #titleModeNormal,
#menuScreen #titleModeChallenge {
    position: absolute;
    top: 209px;
    left: 0px;
    width: 100%;
    height: 80px;
}
.landscape #menuScreen #titleModeNormal,
.landscape #menuScreen #titleModeChallenge {
    position: absolute;
    top: 36px;
    left: 512px;
    width: 890px;
}
#menuScreen #titleModeNormal .backBanner,
#menuScreen #titleModeChallenge .backBanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 0;
    background: #333333;
    opacity: 0.9;
}
.landscape #menuScreen #titleModeNormal .backBanner,
.landscape #menuScreen #titleModeChallenge .backBanner {
    top: -36px;
    width: 894px;
    height: 128px;
    background: url(../assets/html/img/back_banner.png) no-repeat center center;
    opacity: 1;
}
#menuScreen #titleModeNormal .text,
#menuScreen #titleModeChallenge .text {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    color: #fac902;
    font-size: 39px;
    font-weight: 400;
    text-align: center;
    line-height: 78px;
    z-index: 100;
}
.landscape #menuScreen #titleModeNormal .text,
.landscape  #menuScreen #titleModeChallenge .text {
    line-height: 46px;
}

.landscape #menuScreen .tape-scaler {
	transform: scale(1.8);
}
.landscape #tape-selection-challenge .tape-scaler {
	transform: scale(1.3);
}
#menuScreen .tape-wrapper {
    float: left;
    width: 170px;
    height: 211px;
    margin: 13px 16px;
    cursor: pointer;
	transform-origin: center;
}
.landscape #menuScreen .tape-wrapper {
    float: left;
    width: 291px;
    height: 211px;
    margin: 30px 32px;
    cursor: pointer;
    transform-origin: center;
}
#menuScreen #tape-selection-challenge .tape-wrapper {
    float: left;
    width: 274px;
    height: 199px;
    margin: 13px 171px;
    cursor: pointer;
    transform-origin: 0;
}
.landscape #menuScreen #tape-selection-challenge .tape-wrapper {
    float: left;
    width: 279px;
    height: 211px;
    margin: 30px 63px;
    cursor: pointer;
    transform-origin: center;
}
#menuScreen #levelCarousel .tape-wrapper {
    float: none;
    margin: 13px 16px;
    cursor: pointer;
    position: absolute;
    top: 129px;
    left: 211px;
}
.landscape #menuScreen #levelCarousel .tape-wrapper {
    top: 129px;
    left: 169px;
}

#pauseScreen .tape-wrapper {
    float: none;
    margin: 0;
    cursor: default;
    position: absolute;
    top: 9px;
    left: 86px;
}
.landscape #pauseScreen .tape-wrapper {
    top: 18px;
    left: 82px;
    transform: scale(1.5);
}
#resultScreen .tape-wrapper {
    float: none;
    margin: 0;
    cursor: default;
    position: absolute;
    top: 9px;
    left: 69px;
}
.landscape #resultScreen .tape-wrapper {
	top: -30px;
    left: 71px;
    transform: scale(1.4);
}
.gear1,
.gear2 {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
    -webkit-animation: spinRight 4s linear infinite;
    -moz-animation: spinRight 4s linear infinite;
    animation: spinRight 4s linear infinite;
    background: url(../assets/html/img/gear.png) no-repeat center center;
	background-size: cover;
    z-index: -1;
}
.gear1 {
    top: 65px;
    left: 44px;
}
.gear2 {
    top: 65px;
    left: 108px;
}

#pauseScreen .gear1,
#resultScreen .gear1 {
    top: 118px;
    left: 92px;
    width: 40px;
    height: 40px;
}
#pauseScreen .gear2,
#resultScreen .gear2 {
    top: 118px;
    left: 232px;
    width: 40px;
    height: 40px;
}
@-moz-keyframes spinRight { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spinRight { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spinRight { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


#menuScreen #TRFBB_tape1 {
	transform: rotate(5deg);
}
#menuScreen #TRFBB_tape2 {
    transform: rotate(-2deg);
}
#menuScreen #TRFBB_tape3 {
	transform: rotate(-1deg);
}
#menuScreen #tape-selection-challenge #TRFBB_tape1 {
	transform: rotate(5deg) scale(1.5);
}
#menuScreen #tape-selection-challenge #TRFBB_tape2 {
    transform: rotate(-2deg) scale(1.5);
}
#menuScreen #tape-selection-challenge #TRFBB_tape3 {
	transform: rotate(-1deg) scale(1.5);
}
#menuScreen #TRFBB_tape4 {
	transform: rotate(-3deg);
}
#menuScreen #TRFBB_tape5 {
	transform: rotate(-2deg);
}
#menuScreen #TRFBB_tape6 {
	transform: rotate(3deg);
}
#menuScreen #TRFBB_tape7 {
	transform: rotate(4deg);
}
#menuScreen #TRFBB_tape8 {
	transform: rotate(-4deg);
}
#menuScreen #TRFBB_tape9 {
	transform: rotate(-2deg);
}
.tape {
    width: 168px;
    height: 117px;
    cursor: pointer;
}
.tape .back {
    width: 168px;
    height: 117px;
    background: url(../assets/html/img/tape-yellow.png) no-repeat center center;
    background-size: cover;
    cursor: pointer;
	z-index: 100;
}
#pauseScreen .tape,
#resultScreen .tape {
    width: 360px;
    height: 260px;
    cursor: pointer;
}
#pauseScreen .tape .back,
#resultScreen .tape .back {
    width: 360px;
    height: 260px;
    background-size: cover;
    cursor: pointer;
	z-index: 100;
}
#menuScreen .tape-wrapper.lock .tape:before{
    content: "";
    display: block;
    width: 169px;
    height: 117px;
    background: url(../assets/html/img/tape-dark-overlay.png) no-repeat center center;
    background-size: cover;
    opacity: 0.75;
    position: absolute;
    top: 22px;
    left: 0;
	z-index: 200;
}
.landscape #menuScreen #levelCarousel .tape-wrapper.lock .tape:before{
    width: 220px;
    height: 162px;
    top: 23px;
}
#menuScreen .tape-wrapper.unlock .lock-icon {
    display: none;
}
#menuScreen .tape-wrapper.lock .lock-icon {
    background: url(../assets/html/img/lock.png) no-repeat center center;
    width: 70px;
    height: 62px;
    position: relative;
    top: -18px;
    left: 48px;
    transform: scale(0.6);
    transform-origin: center;
    z-index: 400;
    display: block;
}
#menuScreen #levelCarousel .tape-wrapper.lock .lock-icon {
    position: relative;
    top: -40px;
    left: 48px;
    transform: scale(0.5);
    transform-origin: center;
}
.landscape #menuScreen #levelCarousel .tape-wrapper.lock .lock-icon {
    position: relative;
    top: 135px;
    left: 48px;
    transform: scale(0.8);
    transform-origin: center;
}


.landscape #menuScreen #levelCarousel .tape-wrapper.lock .lock-icon {
    position: relative;
    top: 4px;
    left: 76px;
    transform: scale(0.6);
    transform-origin: center;
}
.tape .text {
    width: 137px;
    height: 22px;
    position: relative;
    top: 42px;
    left: 15px;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    z-index: 200;
    text-transform: uppercase;
}
#pauseScreen .tape .text {
    width: 300px;
    height: 22px;
    position: relative;
    top: 70px;
    left: 32px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    z-index: 200;
    color: black;
	text-transform: uppercase;
}
#resultScreen .tape .text {
    width: 300px;
    height: 22px;
    position: relative;
    top: 48px;
    left: 32px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    z-index: 200;
    color: black;
    text-transform: uppercase;
}
.landscape #resultScreen .tape .text {
	line-height: 70px;
}
.tape-red .back{
    background: url(../assets/html/img/tape-red.png) no-repeat center center;
	background-size: cover;
}
.tape-yellow .back{
    background: url(../assets/html/img/tape-yellow.png) no-repeat center center;
	background-size: cover;
}
.tape-orange .back{
    background: url(../assets/html/img/tape-orange.png) no-repeat center center;
	background-size: cover;
}
.tape-blue .back{
    background: url(../assets/html/img/tape-blue.png) no-repeat center center;
	background-size: cover;
}
.tape-green .back{
    background: url(../assets/html/img/tape-green.png) no-repeat center center;
	background-size: cover;
}
.tape-purple .back{
    background: url(../assets/html/img/tape-purple.png) no-repeat center center;
	background-size: cover;
}


#menuScreen #level-selection {
	display: block;
	visibility: hidden;
}

/* Level Selection Carousel */
#menuScreen #level-selection #TRFBB_backToTapeSelection {
    width: 154px;
    height: 112px;
    position: absolute;
    top: 42px;
    left: 20px;
    transform: scale(0.7);
    transform-origin: 0 0 0;
	z-index: 100;
}
.landscape #menuScreen #level-selection #TRFBB_backToTapeSelection {
    top: 44px;
    left: 40px;
    transform: scale(1);
}

#menuScreen #carouselContainer {
    top: 50px;
    left: 0;
    width: 608px;
    height: 900px;
    position: absolute;	
}
.landscape #menuScreen #carouselContainer {
	top: -66px;
    left: 0px;
    width: 1920px;
    height: 900px;
    position: absolute;
    transform: scale(1.1);
}
#menuScreen #levelCarousel {   
	width: 608px;
    height: 900px; 
}
.landscape #menuScreen #levelCarousel {   
	width: 1920px;
    height: 900px; 
}
.landscape #menuScreen #levelCarousel .tape-scaler {
	transform: scale(1.3);
}
#levelCarousel .owl-item .item { width: 608px; height: 1080px;}
.landscape #levelCarousel .owl-item .item {
    width: 608px;
    height: 1080px;
    position: relative;
    left: 562px;	
}

#levelCarousel .level-group {
    position: absolute;
    top: 439px;
    left: 24px;
    width: 608px;
}

#levelCarousel .tape {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
    transform-origin: center;
}

.landscape #levelCarousel .tape {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.3);
    transform-origin: center;
}

#levelCarousel .level-wrapper {
    width: 128px;
    height: 104px;
    transform: scale(1);
    transform-origin: 0 0 0;
    float: left;
    margin: 17px 30px;
	position: relative;
}

#levelCarousel .level-wrapper:nth-child(2),
#levelCarousel .level-wrapper:nth-child(5),
#levelCarousel .level-wrapper:nth-child(8),
#levelCarousel .level-wrapper:nth-child(11) {
    top: -47px;
}
#levelCarousel .level-wrapper.lock .level:before{
    content: "";
    display: block;
    width: 128px;
    height: 104px;
    background: url(../assets/html/img/btn-level-dark-overlay.png) no-repeat center center;
    background-size: cover;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
}
#levelCarousel .level-wrapper.unlock .lock-icon {
    display: none;
}
#levelCarousel .level-wrapper.lock .lock-icon {
    background: url(../assets/html/img/lock.png) no-repeat center center;
    width: 70px;
    height: 62px;
    position: relative;
    top: -37px;
    left: 30px;
    transform: scale(0.7);
    transform-origin: center;
    z-index: 400;
    display: block;
}
#levelCarousel .level {
    background: url(../assets/html/img/btn-level.png) no-repeat center center;
    width: 128px;
    height: 104px;
}
#levelCarousel .level.col2 {
	top: -50px
}
#levelCarousel .level .text {
    width: 103px;
    height: 41px;
    position: relative;
    top: 28px;
    left: 12px;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}

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


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

#menuScreen .btnCarouselNextWrapper {     
    right: 71px;
    position: absolute;
    top: 92px;
}
.landscape #menuScreen .btnCarouselNextWrapper {     
	right: 680px;
    position: absolute;
    top: 6px;
    transform: scale(1.2);
}
#menuScreen .btnCarouselPreviousWrapper .level-nav {
	background: url(../assets/html/img/arrow-right.png) no-repeat center center;
    width: 37px;
    height: 52px;
    transform: scale(1);
    transform-origin: 0 0 0;	
}

#menuScreen .btnCarouselNextWrapper .level-nav {
	background: url(../assets/html/img/arrow-right.png) no-repeat center center;
    width: 37px;
    height: 52px;
    transform: scale(1);
    transform-origin: 0 0 0;	
}
#menuScreen div#btnPreviousSlide { float: left; z-index: 100; }
#menuScreen .disabled div#btnNextSlide { display: none; }
#menuScreen .carousel-image { position: relative; }
#menuScreen .item .carousel-image { left: 0; top: 5px; min-height: 255px; margin: 0 auto; }
#menuScreen .item .carousel-image div { margin: auto; }

	
/* SETTINGS MENU */

.popup .settingsContents { position: absolute; top: 150px; left: 7%; width: 86%; height: 300px; }
.popup .section { position: absolute; width: 100%; height: 100px; }
#music-wrapper { 
    position: absolute;
    top: 0px;
    left: 255px;
    transform-origin: 0;	
}
.landscape #music-wrapper { 
    position: absolute;
    top: 20px;
    left: 357px;
    transform: scale(1.2);
    transform-origin: 0;	
}
	.popup .section .iconOnOff {
	    position: absolute;
		transform-origin: center top;
		transform: scale(1);	
	}
	.popup .section .btnMusicOff { 
		right: 97px;
		top: 26px;
	}
	.popup .section.on .btnMusicOff { opacity: 1;}
	.popup .section .btnMusicOn {
	    left: 74px;
		top: 15px;
	}
		.popup .section.off .btnMusicOn { opacity: .25; }
	.popup .section .musicSlider {
	    position: absolute;
		top: 23px;
		left: calc(50% - 83px);
		width: 150px;
		height: 54px;
		background: url(../assets/html/img/toggler.png) no-repeat center center;
	}
		.popup .section .musicSlider .indicator { position: absolute; }
		.popup .section .musicSlider .indicator { top: 4.5px; }
		.popup .section.on .musicSlider .indicator { left: 67.5px; }
		.popup .section.off .musicSlider .indicator { left: 8px; }

.settingsScreen-icon-musicfx-on {
    width: 71px;
    height: 67px;
    background: url(../assets/html/img/sound-on.png) no-repeat center center;
}
	
.settingsScreen-icon-musicfx-off {
    width: 56px;
    height: 49px;
    background: url(../assets/html/img/sound-off.png) no-repeat center center;
}
	
		
.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 */
			background: url(../assets/html/img/indicator.png) no-repeat center center;
	width: 76px;
    height: 44px;
}

.popup .musicSection { top: 106px; }
.landscape .popup .musicSection { top: 69px; }
.popup .fxSection { top: 200px; }

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

/* END OF SETTINGS MENU */


/* PAUSE SCREEN */
#pauseScreen { position: absolute; width: 608px; height: 1080px; overflow: hidden; z-index: 550; }
.landscape #pauseScreen { width: 1920px; height: 1080px; }

#pauseScreen .background { pointer-events: none; }
	#pauseScreen .background.blocker { width: 100%; height: 100%; background: #00a9bb; opacity: .9; }
	
#pauseScreen .popup .popupTitle { 
    position: absolute;
    top: 47px;
    left: 50px;
    background: url(../assets/html/img/pause-toggle-setting.png) no-repeat 50% 50%;
    width: 627px;
    height: 119px;
    transform: scale(0.8);
    transform-origin: 0 0;
}
.landscape #pauseScreen .popup .popupTitle { 
    top: 47px;
    left: 96px;
    transform: scale(1);
}
#pauseScreen .popup.settings .popupTitle{ 
    background: url(../assets/html/img/pause-toggle-setting.png) no-repeat 50% 50%;
}
#pauseScreen .popup.howtoplay .popupTitle { 
    background: url(../assets/html/img/pause-toggle-tutorial.png) no-repeat 50% 50%;
}
	#pauseScreen .popup .popupTitle .btnTab { position: absolute; width: 40%; height: 100px; }
		#pauseScreen .popup .popupTitle .btnTab.settings { left: 8%; }
		#pauseScreen .popup .popupTitle .btnTab.howtoplay { right: 8%; }
	
	#pauseScreen .popup .popupTitle .text { 
		position: absolute;
		width: 100%;
		text-align: center;
		color: black;
		text-shadow: none;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 27px;
		font-style: italic;
		line-height: 51px;
	}
	#pauseScreen .popup.settings .popupTitle .text.howtoplay { 
		color: #797979;
	}
	#pauseScreen .popup.howtoplay .popupTitle .text.settings { 
		color: #797979;
	}
	

#pauseScreen .popup .popupContents { 
	position: absolute;
    top: 147px;
    left: 7%;
    width: 86%;
    height: 700px;
	overflow: hidden;
}
#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: 400px; left: 0; width: 100%; height: 100px; }
	#pauseScreen .actions div.menu { position: absolute; top: calc(50% - 28.5px); transform: scale(1); left: calc(33% - 54.5px); transform-origin: left top;  }
		
	#pauseScreen .actions div.restart { position: absolute; top: calc(50% - 28.5px); transform: scale(1); right: calc(33% - 54.5px); transform-origin: right top; }
	
#pauseScreen .popup .tab { position: absolute; top: 0; left: 0; width: 100%; height: 600px; }

#pauseScreen #TRFBB_resume {
	width: 225px;
    height: 199px;
    position: absolute;
    top: 856px;
    left: 195px;
    transform: scale(0.95);
    z-index: 100;
    display: none;
}
.landscape #pauseScreen #TRFBB_resume {
	top: 854px;
    left: 302px;
    transform: scale(1);
}
.btn_play-off {
    background: url(../assets/html/img/btn_play-off.png) no-repeat center center;
}
.btn_play-over,
.btn_play-click {
    background: url(../assets/html/img/btn_play-on.png) no-repeat center center;
}
#pauseScreen #TRFBB_home {
    width: 156px;
    height: 139px;
    position: absolute;
    top: 894px;
    left: 437px;
    transform: scale(0.8);
    z-index: 100;
    display: none;
}
.landscape #pauseScreen #TRFBB_home {
    top: 881px;
    left: 569px;
    transform: scale(1);
}
#pauseScreen .bumblebee {
	display: none;
}
.landscape #pauseScreen .bumblebee {
    background: url(../assets/html/img/bumblebee.png) no-repeat center center;
    width: 1348px;
    height: 1061px;
    position: absolute;
    top: 27px;
    left: -390px;
    z-index: 0;
    display: block;
}
.btn_home-off {
    background: url(../assets/html/img/btn_home-off.png) no-repeat center center;
}
.btn_home-over,
.btn_home-click {
    background: url(../assets/html/img/btn_home-on.png) no-repeat center center;
}
#pauseScreen #TRFBB_pauseClose {
    background: url(../assets/html/img/btn-close.png) no-repeat center center;
    width: 198px;
    height: 138px;
    position: absolute;
    top: 895px;
    left: 222px;
    transform: scale(0.8);
    z-index: 100;
    display: none;
}
.landscape #pauseScreen #TRFBB_pauseClose {
	top: 884px;
    left: 322px;
    transform: scale(1);
}

#pauseScreen .popup .howToPlayContents { 
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 700px;
}

/* How to play OWL carousel */
#pauseScreen #howToPlayCarousel {    
    height: 650px;
    width: 520px;
}


#pauseScreen #howToPlayCarousel .textHtp4Wrapper {   
    display: table;
    height: 212px;
    width: 152px;
    position: absolute;
    top: 130px;
    left: 392px;
}
.landscape #pauseScreen #howToPlayCarousel .textHtp4Wrapper {   
    display: table;
    height: 212px;
    width: 224px;
    position: absolute;
    top: 124px;
    left: 492px;
}
#pauseScreen #howToPlayCarousel .textHtp4 {    
    color: white;
    font-size: 31px;
    text-align: left;
    line-height: 34px;
    font-weight: 600;
    display: table-cell;
    vertical-align: middle;
}
.landscape #pauseScreen #howToPlayCarousel .textHtp4 {    
    font-size: 42px;
    line-height: 42px;
}
.landscape #pauseScreen #howToPlayCarousel {    
    height: 650px;
    width: 715px;
}
#pauseScreen .owl-item .item { height: 520px; text-align: center; }

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

#pauseScreen .howToPlayContents .carousel_nav {
    width: 100%;
    height: 105px;
    position: absolute;
    top: 573px;
    left: 0;	
}
.landscape #pauseScreen .howToPlayContents .carousel_nav {
    top: 573px;
    left: 0;	
}
#pauseScreen .howToPlayContents .carousel_nav .slidesNum { 
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #fbc600;
    top: -8px;
    font-weight: 600;
}
.landscape #pauseScreen .howToPlayContents .carousel_nav .slidesNum { 
    font-size: 50px;
    top: -12px;
}
#pauseScreen .howToPlayContents #btnNextSlide { 
	float: right;
	z-index:100;
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	background: url(../assets/html/img/arrow-right.png) no-repeat center center;
	width: 37px;
	height: 52px;
	transform: scale(0.8);
}
.landscape #pauseScreen .howToPlayContents #btnNextSlide { 
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform: scale(1);
}

#pauseScreen .howToPlayContents .btnCarouselPreviousWrapper {
    position: absolute;
    top: 0px;
    left: 115px;
    z-index: 400;
}
#pauseScreen .howToPlayContents .btnCarouselNextWrapper {
    position: absolute;
    top: 0px;
    right: 115px;
    z-index: 400;
}

#pauseScreen .howToPlayContents div#btnPreviousSlide {
	float: right;
	z-index:100;
	-webkit-transform:scaleX(-1) scale(0.8);
    -moz-transform:scaleX(-1) scale(0.8);
    -ms-transform:scaleX(-1) scale(0.8);
    -o-transform:scaleX(-1) scale(0.8);
	background: url(../assets/html/img/arrow-right.png) no-repeat center center;
    width: 37px;
    height: 52px;
    transform: scaleX(-1) scale(0.8);
	transform-origin: top;
}
.landscape #pauseScreen .howToPlayContents div#btnPreviousSlide {
	-webkit-transform:scaleX(-1) scale(1);
    -moz-transform:scaleX(-1) scale(1);
    -ms-transform:scaleX(-1) scale(1);
    -o-transform:scaleX(-1) scale(1);
    transform: scaleX(-1) scale(1);
}
#pauseScreen .disabled div#btnPreviousSlide { display: none; }
#pauseScreen .disabled div#btnNextSlide { display: none; }


#pauseScreen #howToPlayCarousel .title { 
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 41px;
    color: #fbc600;
    top: 20px;
    font-weight: 300;
}

#pauseScreen #howToPlayCarousel .message { 
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 19px;
    color: white;
    top: 420px;
    font-weight: 400;
    text-transform: uppercase;
    left: 0;
    padding: 0 20px;
}

.landscape #pauseScreen #howToPlayCarousel .message { 
    top: 420px;
    font-size: 26px;
    line-height: 36px;
}
#pauseScreen #howToPlayCarousel .img { 
    width: 707px;
    height: 391px;
    position: absolute;
    top: 88px;
    left: -20px;
    transform: scale(0.8);
}
.landscape #pauseScreen #howToPlayCarousel .img { 
    top: 88px;
    left: 72px;
    transform: scale(0.8);
}
#pauseScreen #howToPlayCarousel .img1 { 
	background: url(../assets/html/img/01-HowToPlay.png) no-repeat center center;
}
#pauseScreen #howToPlayCarousel .img2 { 
	background: url(../assets/html/img/02-HowToPlay.png) no-repeat center center;
}
#pauseScreen #howToPlayCarousel .img3 { 
	background: url(../assets/html/img/03-HowToPlay.png) no-repeat center center;
}
#pauseScreen #howToPlayCarousel .img4 { 
	background: url(../assets/html/img/04-HowToPlay.png) no-repeat center center;
}


/* Setting OWL carousel */
#pauseScreen #settingCarousel {    
    height: 440px;
    width: 520px;
    position: absolute;
    top: 120px;
    left: 0;
}
.landscape #pauseScreen #settingCarousel {    
    width: 713px;
}

#pauseScreen .settingsContents .carousel_nav {
    width: 100%;
    height: 10px;
    position: absolute;
    top: 260px;
    left: 0;	
}
.landscape #pauseScreen .settingsContents .carousel_nav {
    top: 311px;
    left: 0;
}
#pauseScreen .settingsContents .carousel_nav .slidesNum { 
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #fbc600;
    top: -8px;
    font-weight: 600;
}
#pauseScreen .settingsContents #btnNextSlide { 
	float: right;
	z-index:100;
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	background: url(../assets/html/img/arrow-right.png) no-repeat center center;
	width: 37px;
	height: 52px;
	transform: scale(0.8);
}
.landscape #pauseScreen .settingsContents #btnNextSlide { 
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-ms-transform:scale(1.2);
	-o-transform:scale(1.2);
	transform: scale(1.2);
}

#pauseScreen .settingsContents .btnCarouselPreviousWrapper {
    position: absolute;
    top: 0px;
    left: 4px;
    z-index: 400;
}
.landscape #pauseScreen .settingsContents .btnCarouselPreviousWrapper {
    left: 4px;
}
#pauseScreen .settingsContents .btnCarouselNextWrapper {
    position: absolute;
    top: 0px;
    right: 4px;
    z-index: 400;
}
.landscape #pauseScreen .settingsContents .btnCarouselNextWrapper {
    right: 26px;
}

#pauseScreen .settingsContents div#btnPreviousSlide {
	float: right;
	z-index:100;
	-webkit-transform:scaleX(-1) scale(0.8);
    -moz-transform:scaleX(-1) scale(0.8);
    -ms-transform:scaleX(-1) scale(0.8);
    -o-transform:scaleX(-1) scale(0.8);
	background: url(../assets/html/img/arrow-right.png) no-repeat center center;
    width: 37px;
    height: 52px;
    transform: scaleX(-1) scale(0.8);
	transform-origin: top;
}
	
.landscape #pauseScreen .settingsContents div#btnPreviousSlide {
	-webkit-transform:scaleX(-1) scale(1.2);
    -moz-transform:scaleX(-1) scale(1.2);
    -ms-transform:scaleX(-1) scale(1.2);
    -o-transform:scaleX(-1) scale(1.2);
    transform: scaleX(-1) scale(1.2);
}

#pauseScreen #settingCarousel .title { 
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 41px;
    color: white;
    top: 368px;
    font-weight: 700;
}

/* END OF PAUSE SCREEN */


/* GAME HUD */
/*#debugComplete {
    z-index: 999;
    position: absolute;
    top: 7px;
    left: 0;
    width: 153px;
    height: 80px;
    background: red;
    border: 2px solid black;
}*/

#gameHud { position: absolute; width: 608px; height: 1080px; overflow: hidden; z-index: 200; background: #000; }
.landscape #gameHud { width: 1920px; height: 1080px; }

	#gameHud .background1 { position: absolute; width: 100%; height: 100%; background: url("../assets/html/img/bkg-game-1.jpg") no-repeat center center; pointer-events: none;}
	#gameHud .background2 { position: absolute; width: 100%; height: 100%; background: url("../assets/html/img/bkg-game-2.jpg") no-repeat center center; pointer-events: none;}
	#gameHud .background3 { position: absolute; width: 100%; height: 100%; background: url("../assets/html/img/bkg-game-3.jpg") no-repeat center center; pointer-events: none;}
	#gameHud .backgroundOverlay { position: absolute; width: 100%; height: 100%; background: #00a9bb; opacity: .75; }

/* FTUE Overlay */
#gameHud #dialog-overlay {
	display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
}
#gameHud #dialog-overlay .bumblebee {
    background: url(../assets/html/img/bumblebee2.png) no-repeat center center;
    width: 1249px;
    height: 1057px;
    position: absolute;
    top: 765px;
    left: -63px;
    z-index: 0;
    display: block;
    transform: scale(0.3);
}
.landscape #gameHud #dialog-overlay .bumblebee {
    top: 341px;
    left: -71px;
    transform: scale(0.7);
}
#gameHud #dialog-overlay #dialog {
    position: absolute;
    top: 282px;
    right: 544px;
    display: none;
    transform: scale(0.65);
}
.landscape #gameHud #dialog-overlay #dialog {
    top: 273px;
    right: 713px;
    transform: scale(0.85);
}
#gameHud #dialog-overlay #dialog .text-wrapper {
    display: table;
    overflow: hidden;
    position: absolute;
    top: 58px;
    left: 0px;
    width: 840px;
    height: 186px;
	z-index: 300;
}
#gameHud #dialog-overlay #dialog .text {
    width: 840px;
    height: 186px;
    color: white;
    font-size: 32px;
    z-index: 100;
    line-height: 43px;
    text-transform: uppercase;
    font-weight: 600;
    display: table-cell;
    vertical-align: middle;
    padding: 0 30px 0 63px;
    text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
}
#gameHud #dialog-overlay #dialog .backdrop {
	position: absolute;
    top: 0px;
    left: 0px;
	background: url(../assets/html/img/ftue-dialog-light.png) no-repeat center center;
	width:840px;
	height:273px;
}
#gameHud #TRFBB_dialogSkip {
    position: absolute;
	top: 993px;
    left: 358px;
    transform: scale(0.5);
    width: 468px;
    height: 138px;
}
.landscape #gameHud #TRFBB_dialogSkip {
	top: 903px;
    left: 1409px;
    transform: scale(1);
}
#gameHud #dialog-overlay .fullBackdrop {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.6;
    z-index: -1;
}

#gameHud #ftue-hand {
    display: none;
    position: absolute;
    top: 620px;
    left: 300px;
    background: url(../assets/html/img/hand-click.png) no-repeat center center;
    width: 200px;
    height: 400px;
    transform: scale(0.6) rotate(-53deg);
    -webkit-animation: handAnim 2s alternate infinite;
    -moz-animation: handAnim 2s alternate infinite;
    animation: handAnim 2s alternate infinite;
    transform-origin: center;
    z-index: 500;
	pointer-events: none;
}
.landscape #gameHud #ftue-hand {
    top: 620px;
    left: 956px;
    transform: scale(0.6) rotate(-53deg);
}
@keyframes handAnim {
	0% { top: 620px; opacity: 0.1; }
	100% { top: 220px; opacity: 1; }
}

#gameHud .hint-ftue-hand-wrapper {
    position: absolute;
    top: 637px;
    left: -43px;
    z-index: 500;
    pointer-events: none;
}
.landscape #gameHud .hint-ftue-hand-wrapper {
    top: 632px;
    left: 597px;
}

#gameHud #hint-ftue-hand {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../assets/html/img/hand-click.png) no-repeat center center;
    width: 200px;
    height: 400px;
    -webkit-animation: hintHandAnim 1s alternate infinite;
    -moz-animation: hintHandAnim 1s alternate infinite;
    animation: hintHandAnim 1s alternate infinite;
    z-index: 500;
    pointer-events: none;
}

@keyframes hintHandAnim {
	0% {  left: 261px; transform: scale(0.5); }
	100% { left: 281px; transform: scale(0.4); }
}
@keyframes hintHandAnimLandscape {
	0% {  left: 966px; transform: scale(0.5); }
	100% { left: 946px; transform: scale(0.4); }
}
/* FTUE Overlay [end] */

	
#gameHud #TRFBB_pause {
    background: url(../assets/html/img/btn-pause.png) no-repeat center center;
    width: 113px;
    height: 83px;
    position: absolute;
    top: 21px;
    left: 507px;
    z-index: 400;
    background-size: contain;
    transform: scale(0.8);
}
.landscape #gameHud #TRFBB_pause {
    width: 153px;
    height: 109px;
    top: 40px;
    left: 1730px;
    z-index: 400;
	transform: scale(1);
}
#gameHud .game-btn-wrapper {
    width: 360px;
    height: 93px;
    position: absolute;
    top: 654px;
    left: 194px;
    z-index: 15;
    transform: scale(0.6);
}
.landscape #gameHud .game-btn-wrapper {
    top: 645px;
    left: 819px;
    transform: scale(0.8);
}
#gameHud #TRFBB_hint {
    width: 129px;
    height: 93px;
    z-index: 10;
    background-size: contain;
    float: left
}
#gameHud #TRFBB_reset {
    width: 129px;
    height: 93px;
    z-index: 10;
    background-size: contain;
    float: right;
}


.btn_hint-off {
    background: url(../assets/html/img/btn_hint-off.png) no-repeat center center;
}
.btn_hint-over,
.btn_hint-click {
    background: url(../assets/html/img/btn_hint-on.png) no-repeat center center;
}

.btn_reset-off {
    background: url(../assets/html/img/btn_reset-off.png) no-repeat center center;
}
.btn_reset-over,
.btn_reset-click {
    background: url(../assets/html/img/btn_reset-on.png) no-repeat center center;
}

#gameHud #puzzleTitle {
    position: absolute;
    top: 40px;
    left: 26px;
    text-align: left;
    width: 264px;
    height: 90px;
    color: white;
    font-size: 29px;
    line-height: 17px;
    font-weight: 400;
}

#gameHud #levelInfo {
    position: absolute;
    top: 70px;
    left: 27px;
    text-align: center;
    width: 102px;
    height: 88px;
    color: black;
    font-weight: normal;
    font-size: 30px;
    background: url(../assets/html/img/level-wrapper.png) no-repeat center center;
    line-height: 82px;
    background-size: contain;
    font-weight: 400;
	z-index: 10;
}

#gameHud #levelScreen {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 143px;
    height: 120px;
    border: 1px solid black;
    opacity: 0.6;
    z-index: 400;
}

#gameHud .countdownMessageChallenge,
#gameHud .countdownMessageXtreme {
    position: absolute;
    top: 750px;
    width: 100%;
    height: 300px;
    color: #fff;
    text-align: center;
    display: none;
    font-size: 35px;
    z-index: 400;
    padding: 0 20px;
}

#gameHud .countdown1,
#gameHud .countdown2,
#gameHud .countdown3,
#gameHud .countdown4 {
    position: absolute;
    top: 882px;
    width: 100%;
    height: 300px;
    color: #f8d810;
    text-align: center;
    display: none;
    font-size: 88px;
    z-index: 400;
}

#gameHud .btnSettings { position: absolute; top: 10x; right: 10px; transform: scale(.8); z-index: 305; transform-origin: right top; }
	
/* Game Hud meter */
#gameHud #meter {
    top: 22px;
    left: 10px;
    z-index: 100;
    position: absolute;
}
.landscape #gameHud #meter {
    top: 17px;
    left: 23px;
    transform: scale(2.5);
}
#gameHud #meter .level-progress {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    width: 212px;
    height: 173px;
    color: black;
    font-size: 53px;
    background: url(../assets/html/img/meter-level.png) no-repeat center center;
    transform: scale(0.4);
    transform-origin: 0 0;
    line-height: 167px;
    z-index: 300;
    font-weight: 600;
    padding: 0 15px 0 0;
}
#gameHud #meter .meter-bkg {
    position: absolute;
    top: 19px;
    left: 49px;
    width: 560px;
    height: 97px;
    background: url(../assets/html/img/meter_loading_back.png) no-repeat center center;
    transform: scale(0.3);
    transform-origin: 0 0;
    z-index: 200;
	overflow: hidden;
}
#gameHud #meter .meter-bar {
    position: absolute;
    top: 14px;
    left: -400px;
    width: 488px;
    height: 69px;
    background: url(../assets/html/img/meter_loading_bar.png) no-repeat center center;
    z-index: 100;
}

/* Game Hud Timer */
#gameHud #best-time {
    top: 8px;
    left: 262px;
    z-index: 300;
    width: 216px;
    position: absolute;
    font-weight: bold;
    color: white;
    display: none;
    font-size: 14px;
}
.landscape #gameHud #best-time {
	top: 10px;
    left: 748px;
    width: 428px;
    font-size: 28px;
}
#gameHud #best-time div{
    display: inline-block;
    margin: 0 4px;
}
#gameHud #timer {
	top: 31px;
    left: 280px;
    z-index: 300;
    width: 330px;
    background: url(../assets/html/img/time-back.png) no-repeat center center;
    position: absolute;
    height: 97px;
    transform: scale(0.5);
    transform-origin: 0 0;
}
.landscape #gameHud #timer {
    top: 52px;
    left: 800px;
    transform: scale(1);
}
#gameHud #timer .time-challenge-icon {
    position: absolute;
    top: 4px;
    left: 15px;
    width: 96px;
    height: 88px;
    background: url(../assets/html/img/time-challenge-icon.png) no-repeat center center;
    z-index: 100;
}
#gameHud #timer .time-xtreme-icon {
    position: absolute;
    top: 4px;
    left: 15px;
    width: 96px;
    height: 88px;
    background: url(../assets/html/img/time-xtreme-icon.png) no-repeat center center;
    z-index: 100;
}
#gameHud #timer .time-number {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 100%;
    height: 88px;
    text-align: right;
    z-index: 100;
    color: #f8cc02;
    font-size: 74px;
    line-height: 72px;
    font-weight: normal;
    padding: 0 38px 0 0;
}
#gameHud #timer .red {
   color: red;
}

/* ------------- Animations --------------- */

/* Level completed */
#gameHud .completed-anim-wrapper {
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 500;
	display: none;
}
.landscape #gameHud .completed-anim-wrapper {
    position: absolute;
    top: 74px;
    left: 662px;
}
#gameHud .completed-anim {
    background: url(../assets/html/anim/completed.png) no-repeat;
	position: absolute;
}

/* piece pick up */
#gameHud .pick-anim-wrapper {
    position: absolute;
    top: -7px;
    left: -6px;
    z-index: 500;
	/*display: none;*/
}
#gameHud .pick-anim {
    background: url(../assets/html/anim/pick.png) no-repeat;
	position: absolute;
}

/* piece drop */
#gameHud .drop-anim-wrapper {
    position: absolute;
    top: -19px;
    left: -14px;
    z-index: 500;
	/*display: none;*/
}
#gameHud .drop-anim {
    background: url(../assets/html/anim/drop.png) no-repeat;
	position: absolute;
}
/* 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: 608px; height: 1080px; z-index: 500; pointer-events: auto; }
.landscape #resultScreen { width: 1920px; height: 1080px; }
#resultScreen .background,
#pauseScreen .background {
	background: #000 url(../assets/html/img/bkg-all-interface.jpg) no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 0;
	pointer-events: none;
}
#resultScreen .popup,
#pauseScreen .popup {
    position: absolute;
    width: 608px;
    height: 971px;
    display: block;
    top: 0;
    left: 0px;
    z-index: 10;
    color: white;
}
.landscape #resultScreen .popup {
    position: absolute;
    width: 835px;
    height: 971px;
    display: block;
    top: 0;
    left: calc(50% - 413px);
    z-index: 10;
    color: white;
}
.landscape #pauseScreen .popup {
    position: absolute;
    width: 835px;
    height: 971px;
    display: block;
    top: 0;
    left: 1000px;
    z-index: 10;
    color: white;
}
#resultScreen #normal-mode.popup,  
#resultScreen #challenge-mode-timeup.popup {
    height: 750px;
}
#resultScreen .popup .popup-background,
#pauseScreen .popup .popup-background {
    background: url(../assets/html/img/support_game-Mobile.png) no-repeat bottom center;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}
.landscape #resultScreen .popup .popup-background,
.landscape #pauseScreen .popup .popup-background {
    background: url(../assets/html/img/support_game-pc.png) no-repeat bottom center;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}

#resultScreen .popup .popup-title {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    color: #f8d810;
    font-size: 60px;
    font-weight: 200;
    display: table;
    height: 187px;
    line-height: 66px;
	padding: 0 32px;
}
#resultScreen .popup .popup-title .text {
	display: table-cell;
	vertical-align: middle;
}
.landscape #resultScreen .popup .popup-title {
    top: 0px;
}
#resultScreen .popup .popup-title:after {
    content: "";
    border-top: 2px solid white;
    width: 589px;
    height: 1px;
    position: absolute;
    top: 187px;
    left: 9px;
}
.landscape #resultScreen .popup .popup-title:after {
    width: 787px;
    top: 187px;
    left: 24px;
}
#resultScreen .popup .main-message-group {
    position: absolute;
    top: 25px;
    left: 0px;
    width: 100%;
    transform: scale(1.2);
    transform-origin: top;
}
.landscape #resultScreen .popup .main-message-group {
    top: 21px;
}


/* Normal Mode result screen */
#resultScreen #normal-mode.popup .level {
    position: absolute;
    top: 256px;
    left: 227px;
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    width: 263px;
    height: 228px;
    color: black;
    font-weight: normal;
    font-size: 90px;
    background: url(../assets/html/img/level-wrapper.png) no-repeat center center;
    transform: scale(0.6);
    transform-origin: 0 0;
    line-height: 214px;
}
/* Normal Mode result screen */
.landscape #resultScreen #normal-mode.popup .level {
    top: 243px;
    left: 319px;
    transform: scale(0.73);
}
#resultScreen #normal-mode.popup .puzzle {
	position: absolute;
    top: 181px;
    width: 100%;
    text-align: center;
    font-size: 38px;
}
#resultScreen #normal-mode.popup .completed {
    position: absolute;
    top: 421px;
    width: 100%;
    text-align: center;
    font-size: 38px;
    margin: 0px 0;
}
#resultScreen #normal-mode.popup .footer-btn-group {
    position: absolute;
    top: 84px;
    left: 0px;
    width: 100%;
}
#resultScreen #normal-mode.popup #TRFBB_normalNext {
    width: 225px;
    height: 199px;
    position: absolute;
    top: 556px;
    left: 204px;
    transform: scale(0.9);
}
.landscape #resultScreen #normal-mode.popup #TRFBB_normalNext {
    top: 548px;
    left: 299px;
    transform: scale(1);
}
#resultScreen #normal-mode.popup #TRFBB_home {
    width: 156px;
    height: 139px;
    position: absolute;
    top: 582px;
    left: 427px;
    transform: scale(0.9);
}
.landscape #resultScreen #normal-mode.popup #TRFBB_home {
    top: 575px;
    left: 564px;
    transform: scale(1);
}

/* Challenge mode time is up */
#resultScreen #challenge-mode-timeup #meter {
	top: 188px;
    left: 109px;
    z-index: 100;
    position: absolute;
}
.landscape #resultScreen #challenge-mode-timeup #meter {
    top: 188px;
    left: 191px;
    z-index: 100;
    position: absolute;
    transform: scale(1.2);
}
#resultScreen #challenge-mode-timeup #meter .level-progress,
#resultScreen #challenge-mode-success #meter .level-progress {
    position: absolute;
    top: -9px;
    left: -26px;
    text-align: center;
    width: 212px;
    height: 173px;
    color: black;
    font-size: 53px;
    background: url(../assets/html/img/meter-level.png) no-repeat center center;
    transform: scale(0.7);
    transform-origin: 0 0;
    line-height: 167px;
    z-index: 300;
    font-weight: 600;
    padding: 0 15px 0 0;
}
#resultScreen #challenge-mode-timeup #meter .meter-bkg,
#resultScreen #challenge-mode-success #meter .meter-bkg {
    position: absolute;
    top: 23px;
    left: 52px;
    width: 560px;
    height: 97px;
    background: url(../assets/html/img/meter_loading_back.png) no-repeat center center;
    transform: scale(0.6);
    transform-origin: 0 0;
    z-index: 200;
    overflow: hidden;
}

#resultScreen #challenge-mode-timeup #meter .meter-bar,
#resultScreen #challenge-mode-success #meter .meter-bar {
    position: absolute;
    top: 14px;
    left: -400px;
    width: 488px;
    height: 69px;
    background: url(../assets/html/img/meter_loading_bar.png) no-repeat center center;
    z-index: 100;
}
#resultScreen #challenge-mode-timeup .puzzle {
	position: absolute;
    top: 196px;
    width: 100%;
    text-align: center;
    font-size: 38px;
}
#resultScreen #challenge-mode-timeup .incomplete {
    position: absolute;
    top: 348px;
    width: 100%;
    text-align: center;
    font-size: 32px;
    margin: 0px 0;
    font-weight: 100;
}
.landscape #resultScreen #challenge-mode-timeup .incomplete {
    top: 355px;
    font-size: 40px;
}
#resultScreen #challenge-mode-timeup .tryagain {
    position: absolute;
    top: 391px;
    width: 100%;
    text-align: center;
    font-size: 32px;
    margin: 0px 0;
    color: #f8d810;
	font-weight: 600;
}
.landscape #resultScreen #challenge-mode-timeup .tryagain {
    top: 406px;
    font-size: 43px;
}
#resultScreen #challenge-mode-timeup .footer-btn-group {
    position: absolute;
    top: 84px;
    left: 0px;
    width: 100%;
}
#resultScreen #challenge-mode-timeup #TRFBB_htp {
    width: 156px;
    height: 139px;
    position: absolute;
    top: 583px;
    left: 38px;
    transform: scale(0.9);
}
.landscape #resultScreen #challenge-mode-timeup #TRFBB_htp {
    top: 577px;
    left: 103px;
    transform: scale(1);
}
#resultScreen #challenge-mode-timeup #TRFBB_challengeReplay {
    width: 225px;
    height: 199px;
    position: absolute;
    top: 555px;
    left: 199px;
    transform: scale(0.9);
}
.landscape #resultScreen #challenge-mode-timeup #TRFBB_challengeReplay {
	top: 548px;
    left: 296px;
    transform: scale(1);
}
#resultScreen #challenge-mode-timeup #TRFBB_home {
    width: 156px;
    height: 139px;
    position: absolute;
    top: 581px;
    left: 426px;
    transform: scale(0.9);
}
.landscape #resultScreen #challenge-mode-timeup #TRFBB_home {
    top: 576px;
    left: 561px;
    transform: scale(1);
}

/* Challenge mode success */
#resultScreen #challenge-mode-success .complete {
    position: absolute;
    top: 175px;
    width: 266px;
    text-align: left;
    font-size: 32px;
    margin: 0px 0;
    left: 262px;
    line-height: 37px;
	font-weight: 600;
}
.landscape #resultScreen #challenge-mode-success .complete {
    top: 195px;
    width: 322px;
    font-size: 35px;
    left: 387px;
    line-height: 44px;
}
#resultScreen #challenge-mode-success #meter {
	position: absolute;
	top: 161px;
	left: 118px;
}
.landscape #resultScreen #challenge-mode-success #meter {
    position: absolute;
    top: 185px;
    left: 223px;
    transform: scale(1.1);
}
#resultScreen #normal-mode-unlock .green-band,
#resultScreen #xtreme-mode .green-band,
#resultScreen #challenge-mode-success .green-band {
    position: absolute;
    top: 289px;
    width: 491px;
    text-align: center;
    font-size: 32px;
    margin: 0px 0;
    color: black;
    background: #fcca03;
    height: 71px;
    left: 58px;
}
.landscape #resultScreen #xtreme-mode .green-band {
    top: 175px;
}
.landscape #resultScreen #challenge-mode-success .green-band {
    top: 347px;
}
.landscape #resultScreen #normal-mode-unlock .green-band,
.landscape  #resultScreen #challenge-mode-success .green-band,
.landscape #resultScreen #xtreme-mode .green-band {
    width: 658px;
    left: 88px;
	height: 91px;
}

#resultScreen #normal-mode-unlock .unlock,
#resultScreen #challenge-mode-success .unlock {
    width: 100%;
    text-align: center;
    font-size: 19px;
    margin: 0px 0;
    float: left;
    line-height: 71px;
}
.landscape #resultScreen #normal-mode-unlock .unlock,
.landscape  #resultScreen #challenge-mode-success .unlock {
    width: 100%;
    line-height: 89px;
	font-size: 29px;
}
#resultScreen #normal-mode-unlock .unlock-icon,
#resultScreen #challenge-mode-success .unlock-icon {
    background: url(../assets/html/img/unlock-icon.png) no-repeat center center;
    width: 76px;
    height: 73px;
    transform: scale(0.7);
    display: inline-block;
    transform-origin: 0 0;
    margin: 10px 0 0 20px;
    position: absolute;
    top: 0;
    right: 0;
}
.landscape #resultScreen #normal-mode-unlock .unlock-icon,
.landscape #resultScreen #challenge-mode-success .unlock-icon {
    transform: scale(0.8);
    margin: 17px 0 0 26px;
}
#resultScreen #normal-mode-unlock .boombox, 
#resultScreen #challenge-mode-success .boombox {
    background: url(../assets/html/img/boom-box.png) no-repeat center center;
    width: 232px;
    height: 191px;
    position: absolute;
    top: 389px;
    left: 190px;
    transform: scale(0.8);
}
#resultScreen #normal-mode-unlock .song-name,
#resultScreen #challenge-mode-success .song-name {
    position: absolute;
    top: 567px;
    width: 100%;
    text-align: center;
    font-size: 32px;
    margin: 0px 0;
    text-transform: uppercase;
}
#resultScreen #normal-mode-unlock .footer-btn-group,
#resultScreen #challenge-mode-success .footer-btn-group {
    position: absolute;
    top: 84px;
    left: 0px;
    width: 100%;
}
#resultScreen #normal-mode-unlock #TRFBB_normalNext,
#resultScreen #challenge-mode-success #TRFBB_challengeNext {
    width: 225px;
    height: 199px;
    position: absolute;
    top: 776px;
    left: 208px;
    transform: scale(0.9);
}
.landscape #resultScreen #normal-mode-unlock #TRFBB_normalNext,
.landscape #resultScreen #challenge-mode-success #TRFBB_challengeNext {
    top: 769px;
    left: 307px;
    transform: scale(1);;
}
#resultScreen #normal-mode-unlock #TRFBB_home,
#resultScreen #challenge-mode-success #TRFBB_home {
    width: 156px;
    height: 139px;
    position: absolute;
    top: 802px;
    left: 423px;
    transform: scale(0.9);
}
.landscape #resultScreen #normal-mode-unlock #TRFBB_home,
.landscape #resultScreen #challenge-mode-success #TRFBB_home {
	top: 798px;
    left: 566px;
    transform: scale(1);
}

/* normal mode unlock */
#resultScreen #normal-mode-unlock .green-band {
    position: absolute;
    top: 183px;
}

#resultScreen #normal-mode-unlock .boombox {
    position: absolute;
    top: 317px;
    left: 190px;
    transform: scale(1);
}
#resultScreen #normal-mode-unlock .song-name {
    position: absolute;
    top: 544px;
}

/* Xtreme mode */
#resultScreen #xtreme-mode .green-band {
    top: 162px;
}
#resultScreen #xtreme-mode .bestTime {
    width: 100%;
    text-align: center;
    font-size: 32px;
    margin: 0px 0;
    line-height: 71px;
    color: black;
}
.landscape #resultScreen #xtreme-mode .bestTime {
    line-height: 90px;
}
#resultScreen #xtreme-mode .completedIn {
    width: 100%;
    text-align: center;
    font-size: 26px;
    margin: 0px 0;
    line-height: 30px;
    color: black;
    display: table;
    height: 71px;
}
#resultScreen #xtreme-mode .completedIn .text{
	display: table-cell;
	vertical-align: middle;
}
.landscape #resultScreen #xtreme-mode .completedIn {
    line-height: 34px;
	height: 91px;
}
#resultScreen #xtreme-mode .time-xtreme-icon {
    position: absolute;
    top: 316px;
    left: 153px;
    width: 96px;
    height: 88px;
    background: url(../assets/html/img/time-xtreme-icon.png) no-repeat center center;
    z-index: 100;
    transform: scale(0.8);
    transform-origin: 0 0;
}
.landscape #resultScreen #xtreme-mode .time-xtreme-icon {
    top: 327px;
    left: 215px;
    transform: scale(0.8);
    transform-origin: 0 0;
}
#resultScreen #xtreme-mode .time {
    width: 260px;
    text-align: center;
    font-size: 80px;
    margin: 0px 0;
    line-height: 100px;
    color: white;
    position: absolute;
    top: 402px;
    font-weight: 100;
    left: 60px;
}
.landscape #resultScreen #xtreme-mode .time {
    font-size: 80px;
    top: 410px;
	width: 334px;
	left: 88px
}
#resultScreen #xtreme-mode #TRFBB_resultCard_direct,
#resultScreen #xtreme-mode #TRFBB_resultCard {
    position: absolute;
    top: 572px;
    left: 103px;
    width: 496px;
    height: 90px;
    z-index: 100;
    transform: scale(0.8);
    transform-origin: 0 0;
	display: none;
}
#resultScreen #xtreme-mode #TRFBB_resultCard_direct .text-wrapper,
#resultScreen #xtreme-mode #TRFBB_resultCard .text-wrapper{
	display:table;
	color: black;
    font-size: 28px;
    position: absolute;
    top: 13px;
    left: 117px;
    width: 344px;
    font-weight: 600;
    text-align: center;
    height: 63px;
    line-height: 30px;
}
.btn_download-off {
    background: url(../assets/html/img/btn_download_off.png) no-repeat center center;
}
.btn_download-over,
.btn_download-click {
    background: url(../assets/html/img/btn_download_on.png) no-repeat center center;
}
.landscape #resultScreen #xtreme-mode #TRFBB_resultCard_direct,
.landscape #resultScreen #xtreme-mode #TRFBB_resultCard {
    top: 557px;
    left: 169px;
    transform: scale(1);
}
#resultScreen #xtreme-mode #TRFBB_resultCard_direct .text,
#resultScreen #xtreme-mode #TRFBB_resultCard .text {
    display: table-cell;
    vertical-align: middle;
}
#resultScreen #xtreme-mode #TRFBB_xtremeReplay {
    width: 225px;
    height: 199px;
    position: absolute;
    top: 778px;
    left: 199px;
    transform: scale(0.9);
}
.landscape #resultScreen #xtreme-mode #TRFBB_xtremeReplay {
    top: 770px;
    left: 301px;
    transform: scale(1);
}
.btn_howtoplay-result-off{
    background: url(../assets/html/img/btn_howtoplay_off.png) no-repeat center center;
}
.btn_howtoplay-result-over,
.btn_howtoplay-result-click {
    background: url(../assets/html/img/btn_howtoplay_on.png) no-repeat center center;
}

.btn_retry-off {
    background: url(../assets/html/img/btn_retry_off.png) no-repeat center center;
}
.btn_retry-over,
.btn_retry-click {
    background: url(../assets/html/img/btn_retry_on.png) no-repeat center center;
}
#resultScreen #xtreme-mode #TRFBB_home {
	width: 156px;
    height: 139px;
    position: absolute;
    top: 803px;
    left: 425px;
    transform: scale(0.9);
}
.landscape #resultScreen #xtreme-mode #TRFBB_home {
    top: 799px;
    left: 568px;
    transform: scale(1);
}
#resultScreen #xtreme-mode.popup .footer-btn-group {
    position: absolute;
    top: 84px;
    left: 0px;
    width: 100%;
}

/* Dance animation */
#resultScreen .dance-anim-wrapper {
    position: absolute;
    top: 344px;
    left: 285px;
    z-index: 500;
	transform: scale(1);
}
.landscape #resultScreen .dance-anim-wrapper {
    position: absolute;
    top: 284px;
    left: 946px;
    z-index: 500;
	transform: scale(1.3);
}
#resultScreen .dance-anim {
    background: url(../assets/html/anim/dance.png) no-repeat;
	position: absolute;
}



/* Music Carousel  */

#resultScreen .owl-item .item { height: 520px; text-align: center; }

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


#pauseScreen #carouselItemTemplate,
#resultScreen #carouselItemTemplate {
	display: none;
}

#resultScreen #normalMusicCarousel {    
    height: 397px;
    width: 520px;
    position: absolute;
    top: 304px;
    left: 52px;
}
.landscape #resultScreen #normalMusicCarousel {    
    height: 397px;
    width: 647px;
    position: absolute;
    top: 304px;
    left: 94px;
}
#resultScreen #challengeMusicCarousel{    
    height: 397px;
    width: 520px;
    position: absolute;
    top: 355px;
    left: 52px;
}
.landscape #resultScreen #challengeMusicCarousel .tape-wrapper {
    top: 81px;
    left: 169px;
    transform: scale(0.85);
}

.landscape #resultScreen #challengeMusicCarousel{    
    height: 397px;
    width: 647px;
    position: absolute;
    top: 355px;
    left: 94px;
}
#resultScreen #normal-mode-unlock .carousel_nav {
    width: 100%;
    height: 10px;
    position: absolute;
    top: 445px;
    left: 0;
}
.landscape #resultScreen #normal-mode-unlock .carousel_nav {
    top: 441px;
}
#resultScreen #challenge-mode-success .carousel_nav {
	width: 100%;
    height: 10px;
    position: absolute;
    top: 482px;
    left: 0;
}
.landscape #resultScreen #challenge-mode-success .carousel_nav {
	top: 532px;
}
#resultScreen #normal-mode-unlock .carousel_nav .slidesNum,
#resultScreen #challenge-mode-success .carousel_nav .slidesNum { 
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: white;
    top: -8px;
    font-weight: 600;
}
#resultScreen #normal-mode-unlock #btnNextSlide,
#resultScreen #challenge-mode-success #btnNextSlide { 
	float: right;
	z-index:100;
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	background: url(../assets/html/img/arrow-right.png) no-repeat center center;
	width: 37px;
	height: 52px;
	transform: scale(0.8);
}

.landscape #resultScreen #normal-mode-unlock #btnNextSlide { 
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform: scale(1);
}
.landscape  #resultScreen #challenge-mode-success #btnNextSlide { 
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	transform: scale(0.8);
}

#resultScreen #normal-mode-unlock .btnCarouselPreviousWrapper,
#resultScreen #challenge-mode-success .btnCarouselPreviousWrapper {
	position: absolute;
    top: 0px;
    left: 76px;
    z-index: 400;
}
.landscape #resultScreen #normal-mode-unlock .btnCarouselPreviousWrapper {
    left: 113px;
}
.landscape  #resultScreen #challenge-mode-success .btnCarouselPreviousWrapper {
    left: 199px;
}
#resultScreen #normal-mode-unlock .btnCarouselNextWrapper,
#resultScreen #challenge-mode-success .btnCarouselNextWrapper {
    position: absolute;
    top: 0px;
    right: 76px;
    z-index: 400;
}
.landscape #resultScreen #normal-mode-unlock .btnCarouselNextWrapper {
    right: 118px;
}
.landscape #resultScreen #challenge-mode-success .btnCarouselNextWrapper {
    right: 199px;
}

#resultScreen #normal-mode-unlock div#btnPreviousSlide,
#resultScreen #challenge-mode-success div#btnPreviousSlide {
	float: right;
	z-index:100;
	-webkit-transform:scaleX(-1) scale(0.8);
    -moz-transform:scaleX(-1) scale(0.8);
    -ms-transform:scaleX(-1) scale(0.8);
    -o-transform:scaleX(-1) scale(0.8);
	background: url(../assets/html/img/arrow-right.png) no-repeat center center;
    width: 37px;
    height: 52px;
    transform: scaleX(-1) scale(0.8);
	transform-origin: top;
}


.landscape #resultScreen #normal-mode-unlock div#btnPreviousSlide {
	-webkit-transform:scaleX(-1) scale(1);
    -moz-transform:scaleX(-1) scale(1);
    -ms-transform:scaleX(-1) scale(1);
    -o-transform:scaleX(-1) scale(1);
    transform: scaleX(-1) scale(1);
}
.landscape #resultScreen #challenge-mode-success div#btnPreviousSlide {
	-webkit-transform:scaleX(-1) scale(0.8);
    -moz-transform:scaleX(-1) scale(0.8);
    -ms-transform:scaleX(-1) scale(0.8);
    -o-transform:scaleX(-1) scale(0.8);
    transform: scaleX(-1) scale(0.8);
}


#resultScreen #normal-mode-unlock .title,
#resultScreen #challenge-mode-success .title {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 41px;
    color: white;
    top: 333px;
    font-weight: 700;
}

#resultScreen .disabled div#btnPreviousSlide { display: none; }
#resultScreen .disabled div#btnNextSlide { display: none; }


/* Result Card Fabric JS Canvas */
#resultCardFabricJSCanvas {
	z-index: -1;
    position: absolute;
    left: -2000px;
    top: 0px;
    touch-action: none;
    user-select: none;
	display:none;
}

.canvas-container {
    transform: scale(0.5);
}

/* END OF RESULT SCREEN */