@charset "utf-8";


/* INDEX PAGE SECTION */

html { width: 100%; height: 100%;}
body { color: #000; font-weight: 400; font-size: 1.4rem; margin: 0; padding: 0; background: #000; overflow: hidden; width: 100%; height: 100%;}

html, body
{
    width:  100%;
    height: 100%;
    margin: auto;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1000;
    background: #b2a9f3;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -ms-touch-action: none;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
	color: #ffffff;
    line-height: 16px;
    -webkit-text-stroke: 1px #fff;
	font-family: 'Life Savers', cursive; font-weight: normal;
}

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

*
{
	-webkit-tap-highlight-color:transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;
}
#notsupported-img
{
	display: none;
	margin: 0 auto 0 auto;
	width: 90%;
}

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

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

#gameCanvas {
	display:none;
	z-index: -999;
}
#gameAreaWrapper{
	position: absolute;
	top: 0; 
	left: 0;
	z-index: 100 !important;
	width: 960px;
	height: 540px;
}

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

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



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


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

#htmlViewSystem
{
	z-index: 1000;
}

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

#viewLoader #loaderAnim
{
	margin: 156px 89px 0 0;
}

/* END OF INDEX PAGE SECTION */


/* MISC CSS */

.fakeButton, .fakeButton * { cursor: none }

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

.hide 
{ 
	display:none;
}

.show
{
	display: block;
}

/* END OF MISC CSS */


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

#gameHud #mlpFPB_options {
    position: absolute;
    top: 14px;
    left: 20px;
}
#gameHud #mlpFPB_resetPhotoBooth {
	position: absolute;
    top: 191px;
    left: 25px;
	display:none;
}
#gameHud .canvas-container {
    z-index: -1;
}
#gameHud #mlpFPB_videos {
    position: absolute;
    top: 90px;
    left: 19px;
}
#gameHud #mlpFPB_photoBooth {
    position: absolute;
    top: 364px;
    left: 11px;
}
#gameHud #mlpFPB_randomize {
    position: absolute;
    top: 280px;
    left: 15px;
}

#gameHud #mlpFPB_challengeOverlay {
    position: absolute;
    top: 3px;
    left: 127px;
    width: 309px;
    height: 72px;
    display: none;
	z-index: 100;
}
#gameHud #mlpFPB_challengeOverlay .title{
	position: absolute;
    top: 20px;
    left: 67px;
    width: 223px;
    text-align: center;
    text-transform: uppercase;
}
#gameHud #mlpFPB_challengeOverlay .outfit1 {   
    top: -38px;
    left: 20px;
    position: absolute;
    transform: scale(0.33);
}
#gameHud #mlpFPB_challengeOverlay .outfit2 {   
    top: -38px;
    left: 78px;
    position: absolute;
    transform: scale(0.33);
}
#gameHud #mlpFPB_challengeOverlay .outfit3 {   
    top: -38px;
    left: 136px;
    position: absolute;
    transform: scale(0.33);
}
#gameHud #mlpFPB_challengeOverlay .outfit4 {   
	top: -38px;
    left: 194px;
    position: absolute;
    transform: scale(0.33);
}

#gameHud #mlpFPB_challengeOverlay .panel-glamour{
    position: absolute;
    top: 0px;
    left: 0px;
	z-index: -1;
}

/* Category OWL carousel */
#gameHud #categories {
    top: 10px;
    right: 56px;
    width: 359px;
    height: 106px;
    position: absolute;
    z-index: 100;
	pointer-events: none !important;
}
#gameHud #categories-content-template {
   display:none;
}

#gameHud #categories .carouselContainer {

}
#gameHud #categories #categories-carousel  {
    height: 90px;
    width: 359px;
    padding: 14px 0 0 0;
}
#gameHud #categories .owl-item .item { text-align: center; }
#gameHud #categories .owl-item .item .disabled { 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	opacity: 0.2;
}

#gameHud #categories .carousel_nav {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
}
#gameHud #categories .carouselNavButton { top: calc(50% - 65px); z-index: 10; position: absolute;}
	#gameHud #categories #mlpFPB_categoryLeftNav { left: 12px; position: absolute; }
	#gameHud #categories #mlpFPB_categoryRightNav { right: 12px; position: absolute; }
#gameHud #categories .carouselNavButton { top: 10px; z-index: 10; position: absolute; }
#gameHud #categories .btnCarouselPreviousWrapper {
    right: 411px;
    position: absolute;
    z-index: 100;
    top: 10px;
}
#gameHud #categories .disabled div#mlpFPB_categoryLeftNav { display: none; }
#gameHud #categories .btnCarouselNextWrapper {
    right: -51px;
    position: absolute;
    z-index: 100;
    top: 10px;
}
#gameHud #categories div#mlpFPB_categoryLeftNav { float: left; z-index: 100; }
#gameHud #categories .disabled div#mlpFPB_categoryRightNav { display: none; }
/* Category OWL carousel [end] */


/* Hair color OWL carousel */
#gameHud #colorContainerHair {
	width: 470px;
    height: 60px;
    position: absolute;
    top: 108px;
    right: 0;
    z-index: 30;
    padding: 5px 0 0 0;
}

#gameHud #colorContainerHair #hair-carousel  {
    height: 60px;
    width: 465px;
    padding: 5px 0 0 0;
}
#gameHud #inventories #colorContainerHair .owl-item .item { 
	text-align: center; 
	height: 60px;
}
#gameHud #colorContainerHair .owl-item .item .disabled { 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	opacity: 0.2;
}

#gameHud #colorContainerHair .carousel_nav {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
}
#gameHud #colorContainerHair .carouselNavButton { top: calc(50% - 65px); z-index: 10; position: absolute;}
	#gameHud #colorContainerHair #mlpFPB_hairColorLeftNav { left: 12px; position: absolute; }
	#gameHud #colorContainerHair #mlpFPB_hairColorRightNav { right: 12px; position: absolute; }
#gameHud #colorContainerHair .carouselNavButton { top: 10px; z-index: 10; position: absolute; }
#gameHud #colorContainerHair .btnCarouselPreviousWrapper {
    right: 451px;
    position: absolute;
    z-index: 100;
    top: 6px;
    transform: scale(0.7);
}
#gameHud #colorContainerHair .disabled div#mlpFPB_hairColorLeftNav { display: none; }
#gameHud #colorContainerHair .btnCarouselNextWrapper {
    right: 17px;
    position: absolute;
    z-index: 100;
    top: 6px;
    transform: scale(0.7);
}
#gameHud #colorContainerHair div#mlpFPB_hairColorLeftNav { float: left; z-index: 100; }
#gameHud #colorContainerHair .disabled div#mlpFPB_hairColorRightNav { display: none; }
/* Hair color OWL carousel [end] */

/* Eyes color OWL carousel */
#gameHud #colorContainerEyes {
	width: 470px;
    height: 60px;
    position: absolute;
    top: 108px;
    right: 0;
    z-index: 30;
    padding: 5px 0 0 0;
}

#gameHud #colorContainerEyes #hair-carousel  {
    height: 60px;
    width: 465px;
    padding: 5px 0 0 0;
}
#gameHud #inventories #colorContainerEyes .owl-item .item { 
	text-align: center; 
	height: 60px;
}
#gameHud #colorContainerEyes .owl-item .item .disabled { 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	opacity: 0.2;
}

#gameHud #colorContainerEyes .carousel_nav {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
}
#gameHud #colorContainerEyes .carouselNavButton { top: calc(50% - 65px); z-index: 10; position: absolute;}
	#gameHud #colorContainerEyes #mlpFPB_eyesColorLeftNav { left: 12px; position: absolute; }
	#gameHud #colorContainerEyes #mlpFPB_eyesColorRightNav { right: 12px; position: absolute; }
#gameHud #colorContainerEyes .carouselNavButton { top: 10px; z-index: 10; position: absolute; }
#gameHud #colorContainerEyes .btnCarouselPreviousWrapper {
    right: 451px;
    position: absolute;
    z-index: 100;
    top: 2px;
    transform: scale(0.7);
}
#gameHud #colorContainerEyes .disabled div#mlpFPB_eyesColorLeftNav { display: none; }
#gameHud #colorContainerEyes .btnCarouselNextWrapper {
    right: 17px;
    position: absolute;
    z-index: 100;
    top: 2px;
    transform: scale(0.7);
}
#gameHud #colorContainerEyes div#mlpFPB_eyesColorLeftNav { float: left; z-index: 100; }
#gameHud #colorContainerEyes .disabled div#mlpFPB_eyesColorRightNav { display: none; }
/* Eyes color OWL carousel [end] */



#inventories {
	background: url("../assets/html/img/inventory_back.jpg");
	width: 467px;
	height: 540px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	pointer-events: none !important;
}

#inventories #colorContainerShoes,
#inventories #colorContainerEyes,
#inventories #colorContainerTop,
#inventories #colorContainerBottom,
#inventories #colorContainerHat,
#inventories #colorContainerGlasses,
#inventories #colorContainerAcc,
#inventories #colorContainerSkin {
    width: 465px;
    height: 60px;
    position: absolute;
    top: 113px;
    right: 0;
    z-index: 30;
    padding: 5px 0 0 0;
}
#inventories #colorContainerSkin {
    width: 423px;
}
#inventories #colorContainerShoes .colorCenter,
#inventories #colorContainerEyes .colorCenter,
#inventories #colorContainerTop .colorCenter,
#inventories #colorContainerBottom .colorCenter,
#inventories #colorContainerHat .colorCenter,
#inventories #colorContainerHair .colorCenter,
#inventories #colorContainerGlasses .colorCenter,
#inventories #colorContainerAcc .colorCenter,
#inventories #colorContainerEyes .colorCenter {
    width: 324px;
    margin: 0 auto;
}
#inventories #colorContainerSkin .colorCenter {
    width: 427px;
    margin: 0 auto;
}
#inventories #colorContainerSkin .colorCenter div {
    margin: 0 0 10px 0;
}

#inventories #colorContainerSkin,
#inventories #colorContainerHair,
#inventories #colorContainerTop,
#inventories #colorContainerShoes,
#inventories #colorContainerHat,
#inventories #colorContainerGlasses,
#inventories #colorContainerAcc,
#inventories #colorContainerBottom,
#inventories #colorContainerEyes {
	display: none;
}


/* Inventory OWL carousel */
#gameHud #inventories-items {
   
}
#gameHud #inventories .carouselContainer {

}
#gameHud #inventories .cercle {
    position: absolute;
    top: 155px;
    left: 185px;
    z-index: 200;
}
#gameHud #inventories .faceContainer .cercle div {
    position: absolute;
    top: 27px;
    left: 1px;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
    font-size: 20px;
    text-transform: uppercase;
    width: 65px;
    text-align: center;
}
#gameHud #inventories .faceContainer {
	display: none;
}
#gameHud #inventories .faceContainer #mlpFPB_selectEG{
    position: absolute;
    top: 87px;
    left: 11px;
}
#gameHud #inventories .faceContainer #mlpFPB_selectEG .icon-check{
	position: absolute;
    top: 165px;
    left: 143px;
	display: none
}
#gameHud #inventories .faceContainer #mlpFPB_selectEG[data-bt-selected=true] .icon-check{
	display: block
}
#gameHud #inventories .faceContainer #mlpFPB_selectFaceUpload .icon-check{
	position: absolute;
    top: 165px;
    left: 143px;
	display: none
}
#gameHud #inventories .faceContainer #mlpFPB_selectFaceUpload[data-bt-selected=true] .icon-check{
	display: block
}
#gameHud #inventories .faceContainer #mlpFPB_selectFaceUpload{
    position: absolute;
    top: 87px;
    left: 228px;
}

#gameHud #inventories #inventories-carousel  {
    height: 280px;
    width: 436px;
}
#gameHud #inventories #inventories-items .owl-item .item { text-align: center; height: 280px; background: #b2aaff; }
#gameHud #inventories #inventories-items .carousel_nav {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
}
#gameHud #inventories #inventories-items .carouselNavButton { top: calc(50% - 65px); z-index: 10; position: absolute;}
	#gameHud #inventories #mlpFPB_inventoryLeftNav { left: 93px; position: absolute; }
	#gameHud #inventories #mlpFPB_inventoryRightNav { right: 266px; position: absolute; }
#gameHud #inventories #inventories-items .carouselNavButton { top: 280px; z-index: 10; position: absolute; }
#gameHud #inventories #inventories-items .btnCarouselPreviousWrapper {
    right: 402px;
    position: absolute;
    z-index: 100;
    top: 6px;
}
#gameHud #inventories #inventories-items .page_info {
    right: calc(50% - 33px);
    position: absolute;
    z-index: 100;
    top: 280px;
}
#gameHud #inventories .carousel_nav .page_info .text{
    font-family: 'Life Savers', cursive;
    font-weight: 800;
    color: #2a185a;
    text-align: center;
    font-size: 23px;
    -webkit-text-stroke: 1px #2a185a;
    width: 100%;
    line-height: 66px;
    display: block;
}
#gameHud #inventories #inventories-items .disabled div#mlpFPB_inventoryLeftNav { display: none; }
#gameHud #inventories #inventories-items .btnCarouselNextWrapper {
	right: -135px;
    position: absolute;
    z-index: 100;
    top: 6px;
}
#gameHud #inventories div#mlpFPB_inventoryLeftNav { float: left; z-index: 100; }
#gameHud #inventories .disabled div#mlpFPB_inventoryRightNav { display: none; }

#gameHud #inventories #inventories-items .inv-item {
    position: absolute;
    width: 142px;
    height: 127px;
	z-index: 200;
}
#gameHud #inventories .cell1 {
    top: 0px;
    left: 4px;
}
#gameHud #inventories .cell2 {
    top: 0px;
    left: 147px;
}
#gameHud #inventories .cell3 {
    top: 0px;
    left: 290px;
}
#gameHud #inventories .cell4 {
	top: 140px;
	left: 4px;
}
#gameHud #inventories .cell5 {
	top: 140px;
	left: 147px;
}
#gameHud #inventories .cell6 {
	top: 140px;
	left: 290px;
}
#gameHud #inventories .img-item {
    position: absolute;
    top: 18px;
    left: 15px;
    z-index: 100;
    width: 107px;
    height: 109px;
    pointer-events: none;
}
#gameHud #inventories .cell1 .img-item, 
#gameHud #inventories .cell4 .img-item {
    left: 25px;
}
#gameHud #inventories .cell2 .img-item, 
#gameHud #inventories .cell5 .img-item {
    left: 17px;
}
#gameHud #inventories .cell3 .img-item, 
#gameHud #inventories .cell6 .img-item {
    left: 13px;
}
#gameHud #inventories .backBox {
    position: absolute;
    top: 10px;
    left: 9px;
	pointer-events: none;
}
#gameHud #inventories .selected .backBox,
#gameHud #inventories .glass-left-on,  
#gameHud #inventories .glass-center-on,  
#gameHud #inventories .glass-right-on  {
    position: absolute;
    top: 0;
    left: 0;
}
#gameHud #inventories div[data-item-locked=true] .state {
	position: absolute;
    top: 80px;
    left: 96px;
    z-index: 110;
	pointer-events: none;
}
#gameHud #inventories .cover-glass {
	display: none;
	pointer-events: none;
}


#gameHud #inventories div[data-item-locked=true] .cover-glass {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 105;
    display: block;
	pointer-events: none;
}
#gameHud #inventories div[data-item-selected=true] .state {
    position: absolute;
    top: 97px;
    left: 108px;
    z-index: 110;
	pointer-events: none;
}

/* VFX Unlock */
#gameHud #inventories .vfx-unlocked-wrapper {
    position: absolute;
    top: 42px;
    left: 51px;
    z-index: 999;
    pointer-events: none;
}
#gameHud #inventories .vfx-unlocked {
	background: url(../assets/html/img/vfx/unlock.png) no-repeat;
	position: absolute;
}
/* VFX Glass break */
#gameHud #inventories .vfx-glass-wrapper {
    position: absolute;
    top: -65px;
    left: -58px;
    z-index: 105;
    display: block;
    pointer-events: none;
}
#gameHud #inventories .vfx-glass {
	background: url(../assets/html/img/vfx/glass.png) no-repeat;
	position: absolute;
}
/* VFX Sparkles Hair */
#gameHud #sparklesHair-wrapper {
    position: absolute;
    top: 19px;
    left: 141px;
    z-index: 110;
    pointer-events: none;
}
#gameHud #sparklesHair {
	background: url(../assets/html/img/vfx/sparkles-hair.png) no-repeat;
	position: absolute;
}
/* VFX Sparkles Top */
#gameHud #sparklesTop-wrapper {
    position: absolute;
    top: 145px;
    left: 170px;
    z-index: 110;
    pointer-events: none;
}
#gameHud #sparklesTop {
	background: url(../assets/html/img/vfx/sparkles-top.png) no-repeat;
	position: absolute;
}
/* VFX Sparkles Bottom */
#gameHud #sparklesBottom-wrapper {
    position: absolute;
    top: 212px;
    left: 147px;
    z-index: 110;
    pointer-events: none;
}
#gameHud #sparklesBottom {
	background: url(../assets/html/img/vfx/sparkles-bottom.png) no-repeat;
	position: absolute;
}
/* VFX Sparkles Shoes */
#gameHud #sparklesShoes-wrapper {
    position: absolute;
    top: 415px;
    left: 173px;
    z-index: 110;
    pointer-events: none;
}
#gameHud #sparklesShoes {
	background: url(../assets/html/img/vfx/sparkles-shoes.png) no-repeat;
	position: absolute;
}
/* VFX Hand */
#gameHud #vfx-hand-wrapper {
	position: absolute;
    top: 369px;
    left: 44px;
    z-index: 110;
    pointer-events: none;
}
#gameHud #vfx-hand{
	background: url(../assets/html/img/vfx/hand.png) no-repeat;
	position: absolute;
}

/* VFX polaroid */
#titleScreen #vfx-polaroid1-wrapper {
    position: absolute;
	top: 361px;
    left: 246px;
    z-index: 310;
    pointer-events: none;
}
#titleScreen #vfx-polaroid1 {
	background: url(../assets/html/img/vfx/polaroid1.png) no-repeat;
	position: absolute;
}
#titleScreen #vfx-polaroid2-wrapper {
    position: absolute;
    top: 300px;
    left: 308px;
    z-index: 310;
    pointer-events: none;
}
#titleScreen #vfx-polaroid2 {
	background: url(../assets/html/img/vfx/polaroid2.png) no-repeat;
	position: absolute;
}
#titleScreen #vfx-polaroid3-wrapper {
    position: absolute;
    top: 214px;
    left: 448px;
    z-index: 310;
    pointer-events: none;
}
#titleScreen #vfx-polaroid3 {
	background: url(../assets/html/img/vfx/polaroid3.png) no-repeat;
	position: absolute;
}
#titleScreen #vfx-polaroid4-wrapper {
    position: absolute;
    top: 284px;
    left: 423px;
    z-index: 310;
    pointer-events: none;
}
#titleScreen #vfx-polaroid4 {
	background: url(../assets/html/img/vfx/polaroid4.png) no-repeat;
	position: absolute;
}
#titleScreen #vfx-polaroid5-wrapper {
    position: absolute;
    top: 300px;
    left: 523px;
    z-index: 310;
    pointer-events: none;
}
#titleScreen #vfx-polaroid5 {
	background: url(../assets/html/img/vfx/polaroid5.png) no-repeat;
	position: absolute;
}
/* VFX challenge */
#gameHud #challenge-vfx-wrapper {
    position: absolute;
    top: -33px;
    left: -36px;
    z-index: 10;
    pointer-events: none;
}
#gameHud #challenge-vfx {
	background: url(../assets/html/img/vfx/challenge.png) no-repeat;
	position: absolute;
}
/* VFX confettis */
#gameHud #confettis-vfx-wrapper {
    position: absolute;
    top: -33px;
    left: -36px;
    z-index: 100;
    pointer-events: none;
}
#gameHud #confettis-vfx-wrapper.position-outfit1{
    top: -30px;
    left: 12px;
}
#gameHud #confettis-vfx-wrapper.position-outfit2{
    top: -30px;
    left: 73px;
}
#gameHud #confettis-vfx-wrapper.position-outfit3{
    top: -30px;
    left: 127px;
}
#gameHud #confettis-vfx-wrapper.position-outfit4{
    top: -30px;
    left: 186px;
}
#gameHud #confettis-vfx {
	background: url(../assets/html/img/vfx/confettis.png) no-repeat;
	position: absolute;
}
/* Category OWL carousel [end] */



#inventories #inventories-items{
    width: 436px;
    height: 280px;
    position: absolute;
    top: 174px;
    right: 20px;
    z-index: 10;
}
#inventory_list{
    padding: 0px;
    width: 95%;
    height: 398px;
    /* background: rgba(255, 255, 255, 0.77); */
    position: absolute;
    top: 118px;
    left: 5px;
    overflow-y: scroll;
}
#mlpFPB_deleteItem {
    position: absolute;
    top: 252px;
    left: 444px;
    z-index: 100;
}
#trash2 {
    position: absolute;
    top: 10px;
    right: 102px;
    z-index: 100;
}
.trash-icon {
    background: url(../assets/html/img/trash.png) no-repeat;
    width: 28px;
    height: 35px;
    display: block;
    background-size: contain;
	z-index: 100;
}

#mlpFPB_selectFaceUpload {
    position: absolute;
    top: 186px;
    left: 444px;
    z-index: 100;
}
.upload-face-icon {
    background: url(../assets/html/img/upload-face-icon.png) no-repeat;
    width: 28px;
    height: 35px;
    display: block;
    background-size: contain;
	z-index: 100;
}
#save-scene {
    position: absolute;
    top: 470px;
    right: 5px;
    z-index: 100;
    width: 302px;
}
#open-postcard {
    position: absolute;
    top: 10px;
    right: 392px;
    z-index: 100;
}
.upload-save-icon{
    background: url(../assets/html/img/save.png) no-repeat;
    width: 28px;
    height: 35px;
    display: block;
    background-size: contain;
	z-index: 100;
    display: inline-block;
}
.postcard-icon{
    background: url(../assets/html/img/postcard-icon.png) no-repeat;
    width: 28px;
    height: 35px;
    display: block;
    background-size: contain;
	z-index: 100;
}
#overlay {
    display: none;
    position: absolute;
    top: 31px;
    left: 46px;
    width: 87%;
    height: 437px;
    background: rgba(255, 255, 255, 0.91);
    border: 5px solid #a054b8;
    z-index: 120;
    padding: 14px;
}
#overlayFull {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 920px;
    height: 501px;
    background: rgba(255, 255, 255, 0.91);
    border: 5px solid #a054b8;
    z-index: 120;
    padding: 14px;
}
#overlayFull.postcard-overlay .canvas-container{
    position: absolute !important;
    top: 178px !important;
    left: 13px;
    border: 3px solid #a055b7;
}

#close-upload-face {
	position: absolute;
    top: -16px;
    left: 829px;
    background-color: none !important;
}



.btn .label {
    display: inline-block;
    position: relative;
    top: -11px;
    text-align: center;
    width: 83%;
    font-size: 20px;
}
#overlay h1 {
    margin: 10px 0 10px 0;
}
.postcard-overlay h1 {
    margin: 10px 0 10px 0;
}
#uploadFaceScreen #file {
	margin: 6px 0 20px;
}



/* FONT STYLES */

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

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

/* FONT STYLES */

/* Patching for mobile devices */

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

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

/* END OF Patching for mobile devices */



/* MENU SCREEN */

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


/* END OF MENU SCREEN */



/* CONFIRM LEAVING GAME SCREEN */

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

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

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

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

/* END OF CONFIRM LEAVING GAME SCREEN */

/* SOUND SETTINGS SCREEN */

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

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

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

/* END OF SOUND SETTINGS SCREEN */

/* HOW TO PLAY */

#optionScreen { position: absolute; width: 960px; height: 540px; background-color: #7f4492; z-index: 310; -webkit-transform: translateZ(0); }
#optionScreen .shape-popup{     
	position: absolute;
    top: 38px;
    left: 39px;
	pointer-events: none;
}
#optionScreen #howToPlayContainer { top: 65px; left: 64.5px; position: absolute; z-index:200; }
#optionScreen #mlpFPB_closeOptions {   
	top: 18px;
    right: 22px;
    z-index: 10;
    position: absolute;
}
#optionScreen #mlpFPB_htp {   
    top: 15px;
    left: 105px;
    z-index: 10;
    position: absolute;
}
#optionScreen #mlpFPB_settings {   
    top: 15px;
    left: 492px;
    z-index: 10;
    position: absolute;
}
#optionScreen #mlpFPB_settings div, #optionScreen #mlpFPB_htp div{
    color: #ffffff;
    font-size: 24px;
    line-height: 16px;
    position: absolute;
    top: 31px;
    text-transform: uppercase;
    width: 362px;
    text-align: center;
	-webkit-text-stroke: 2px #fff;
}
#optionScreen #mlpFPB_settings:hover div,
#optionScreen #mlpFPB_htp:hover div,
#optionScreen #mlpFPB_settings[data-bt-selected=true] div,
#optionScreen #mlpFPB_htp[data-bt-selected=true] div
{
    color: #804694;
	-webkit-text-stroke: 2px #804694;
}
#optionScreen #titleHowToPlayScreenContainer { top: -34px; left: calc(50% - 344.5px); position: absolute; }
	#optionScreen #titleHowToPlayScreenContainer .popupTitle { top: 19px; left: 6%; width: 88%; text-align: center;  position: absolute;}
#optionScreen #carouselContainer { top: 50px; left: 65px; width: 705px; height: 350px; position: absolute;}
	#optionScreen #carouselContainer .htpText { width: 100%; margin-top: 38px; -webkit-text-stroke: 0px #fff }
	#optionScreen #carouselContainer.desktop .carousel-image .mobile { display: none; }
	#optionScreen #carouselContainer.mobile .carousel-image .desktop { display: none; }
	#optionScreen #carouselContainer.desktop .htpText.mobile { display: none; }
	#optionScreen #carouselContainer.mobile .htpText.desktop { display: none; }
#optionScreen #howToPlayCarousel { height: 350px; width: 705px; }
#howToPlayCarousel .owl-item .item { height: 350px; text-align: center; }

#howToPlayCarousel .owl-dots { 
    bottom: -25px;
    left: 264px;
    position: absolute;
    width: 170px;
    height: 37px;
    z-index: 200;
}
#howToPlayCarousel .owl-dots * { position: relative; top: 2px; }
#howToPlayCarousel .owl-dots .owl-dot { display: inline-block; }
#howToPlayCarousel .owl-theme .owl-dots { margin-top: 5px; }

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


/* How to play OWL carousel */
#optionScreen .carousel_nav { width: 100%; height: 100%; }
#optionScreen .carouselNavButton { top: calc(50% - 65px); z-index: 10; position: absolute;}
	#optionScreen #btnPreviousSlide { left: 12px; position: absolute; }
	#optionScreen #btnNextSlide { right: 12px; position: absolute; }
#optionScreen .carouselNavButton { top: 160px; z-index: 10; position: absolute; }
#optionScreen .btnCarouselPreviousWrapper { left: -56px; position: absolute; }
#optionScreen .disabled div#btnPreviousSlide { display: none; }

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

#howToPlayCarousel div.item .carousel-image div { 
	position: absolute;
    top: 19px;
    left: calc(50% - 334px); 
}
#howToPlayCarousel div.item.howtoplay_slide1 .carousel-image div { 
	position: absolute;
    top: 19px;
    left: calc(50% - 334px); 
}
#howToPlayCarousel div.item.howtoplay_slide2 .carousel-image div { 
	position: absolute;
    top: 19px;
    left: calc(50% - 264px);
}
#howToPlayCarousel div.item.howtoplay_slide3 .carousel-image div { 
    position: absolute;
    top: -4px;
    left: calc(50% - 264px);
}
#howToPlayCarousel div.item.howtoplay_slide4 .carousel-image div { 
	position: absolute;
    top: 19px;
    left: calc(50% - 324px);
}

#howToPlayCarousel div.item.howtoplay_slide5 .carousel-image div { 
    position: absolute;
    top: -3px;
    left: calc(50% - 352px);
}
#howToPlayCarousel div.item.howtoplay_slide6 .carousel-image div { 
	position: absolute;
    top: 9px;
    left: calc(50% - 334px); 
}

#howToPlayCarousel .howtoplay_slide6 .title1 {
    top: 43px;
    left: 20px;
    position: absolute;
    width: 309px;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 1px #3a1861;
    z-index: 100;
}
#howToPlayCarousel .howtoplay_slide6 .desc1 {
	top: 131px;
    left: 21px;
    position: absolute;
    width: 309px;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 1px #3a1861;
    z-index: 100;
}
#howToPlayCarousel .howtoplay_slide6 .start {
    top: 248px;
    left: 71px;
    position: absolute;
    width: 209px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 1px #fff;
    z-index: 100;
}

#howToPlayCarousel .howtoplay_slide6 .title2 {
    top: 39px;
    left: 368px;
    position: absolute;
    width: 309px;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 1px #3a1861;
    z-index: 100;
    line-height: 25px;
}
#howToPlayCarousel .howtoplay_slide6 .desc2 {
    top: 97px;
    left: 360px;
    position: absolute;
    width: 309px;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 1px #fff;
    z-index: 100;
}
#howToPlayCarousel .howtoplay_slide6 .claim {
    top: 248px;
    left: 410px;
    position: absolute;
    width: 209px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 1px #fff;
    z-index: 100;
}





#optionScreen #soundContainer {
    top: 119px;
    left: 65px;
    width: 829px;
    height: 350px;
    position: absolute;
    z-index: 200;	
}
#optionScreen #soundContainer #music_wrapper{
    top: 113px;
    left: 232px;
    height: 150px;
    position: absolute;
    padding: 0 0 0 24px;
}
#optionScreen #soundContainer #sound_wrapper{
    top: 113px;
    left: 430px;
    height: 150px;
    position: absolute;
    padding: 0 0 0 24px;
}
#optionScreen #soundContainer #music_wrapper .music_title,
#optionScreen #soundContainer #sound_wrapper .sound_title{
    top: 140px;
    left: 5px;
    width: 158px;
    height: 50px;
    position: absolute;
    font-size: 23px;
    text-transform: uppercase;
    text-align: center;
    -webkit-text-stroke: 1px #fff;
    color: #fff;
    line-height: 30px;
}

/* END OF HOW TO PLAY */


/* TYPE SCREEN */

#typeScreen{ position: absolute; width: 960px; height: 540px; background-color: #7f4492; z-index: 210; -webkit-transform: translateZ(0); overflow:hidden;}
#typeScreen #type-title {   
    top: 35px;
    left: 133px;
    width: 693px;
    height: 50px;
    text-align: center;
    position: absolute;
    text-transform: uppercase;
    font-size: 22px;
    color: white;
    line-height: 30px;
}
#typeScreen #choice-1-title {   
    top: 150px;
    left: 23px;
    width: 386px;
    height: 50px;
    text-align: center;
    position: absolute;
    text-transform: uppercase;
    font-size: 17px;
    color: white;
    line-height: 30px;
    z-index: 10;
    transform: rotate(-4deg);
}
#typeScreen #choice-2-title {   
    top: 150px;
    left: 592px;
    width: 292px;
    height: 50px;
    text-align: center;
    position: absolute;
    text-transform: uppercase;
    font-size: 17px;
    color: white;
    line-height: 30px;
    z-index: 10;
    transform: rotate(4deg);
}
#typeScreen #type-back {   
    top: 116px;
    left: 0px;
    position: absolute;
    z-index: 1;
}

#typeScreen #mlpFPB_selectEG{   
	top: 184px;
    left: 71px;
    position: absolute;
    z-index: 10;
}
#typeScreen #mlpFPB_selectFaceUpload{   
	top: 184px;
    left: 585px;
    position: absolute;
    z-index: 10;
}
#typeScreen #mlpFPB_selectFaceUploadArrow{   
	top: 457px;
    left: 681px;
    position: absolute;
    z-index: 10;
}
#typeScreen #mlpFPB_selectEGArrow{   
    top: 457px;
    left: 194px;
    position: absolute;
    z-index: 10;
}

#typeScreen #mlpFPB_options {
    position: absolute;
    top: 14px;
    right: 14px;
}
#typeScreen .cercle-or {
    position: absolute;
    top: 250px;
    left: calc(50% - 54px);
    z-index: 200;
}
#typeScreen .cercle-or div {
    position: absolute;
    top: 47px;
    left: 1px;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
    font-size: 20px;
    text-transform: uppercase;
    width: 107px;
    text-align: center;
}

/* END TYPE SCREEN */


/* UPLOAD FACE */

#uploadFaceScreen{ position: absolute; width: 960px; height: 540px; background-color: #7f4492; z-index: 2000; -webkit-transform: translateZ(0); overflow:hidden;}
#uploadFaceScreen #mlpFPB_closeFaceUpload {   
	top: 14px;
    right: 14px;
    z-index: 10;
    position: absolute;
}

#uploadFaceScreen #mlpFPB_enterPB {
    position: absolute;
    top: 329px;
    left: 494px;
	display: none;
}
#uploadFaceScreen #mlpFPB_uploadButton,
#uploadFaceScreen #mlpFPB_uploadButton2 {
    position: absolute;
    top: 440px;
    left: 113px;
	z-index: 250;
}
#uploadFaceScreen #mlpFPB_uploadButton2 {
	display: none;
}
#uploadFaceScreen #mlpFPB_uploadButton .actionButton,
#uploadFaceScreen #mlpFPB_uploadButton2 .actionButton {
    font-size: 14px;
    line-height: 66px;
    width: 100%;
}

#uploadFaceScreen #mlpFPB_enterPB .actionButton {
    font-size: 18px;
    width: 80%;
	pointer-events: none;
}
#uploadFaceScreen #mlpFPB_enterPB .arrow-right {
    position: absolute;
    top: 13px;
    left: 269px;
	pointer-events: none;
}
#uploadFaceScreen #faceFabricJSCanvas {
    position: absolute;
    top: 46px;
    left: 0;
}
#uploadFaceScreen .contentWrapper {
    z-index: 200;
    position: absolute;
    top: 4px;
    left: 4px;
}
#uploadFaceScreen #upload_title {
    position: absolute;
    top: 191px;
    left: 469px;
    width: 388px;
    font-size: 35px;
    text-align: center;
    text-transform: uppercase;
    line-height: 43px;
    color: white;
    -webkit-text-stroke: 2px #fff;
}
#uploadFaceScreen #upload_title.up {
    top: 106px;
}
#uploadFaceScreen #upload_title.down {
    top: 191px;
}
#uploadFaceScreen #mlpFPB_uploadButton_file {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    position: absolute;
    top: 440px;
    left: 113px;
    z-index: 255;
    height: 60px;
    width: 216px;
	background: white;
	cursor: pointer;
}
#uploadFaceScreen #upload_desc {
    position: absolute;
    top: 289px;
    left: 469px;
    width: 388px;
    font-size: 20px;
    text-align: center;
    line-height: 27px;
    color: white;
    -webkit-text-stroke: 0px #fff;
}
#uploadFaceScreen #upload_desc.up {
    top: 205px;
}
#uploadFaceScreen #upload_desc.down {
    top: 289px;
}
#uploadFaceScreen .bkg-uploadyourface{     
    position: absolute;
    top: 0;
    left: 456px;
    z-index: 100;
	pointer-events: none;
}

/* END UPLOAD FACE */



/* PHOTO EDITOR */

#photoEditorScreen{ position: absolute; width: 960px; height: 540px; background-color: #7f4492; z-index: 210; -webkit-transform: translateZ(0); overflow:hidden;}
#photoEditorScreen #mlpFPB_closePhotoEditor {   
	top: 14px;
    right: 14px;
    z-index: 200;
    position: absolute;
	-webkit-transform: translate3d(0,0,0);
}
#photoEditorScreen #mlpFPB_resetPhotoEditor {   
    top: 13px;
    left: 16px;
    z-index: 200;
    position: absolute;
    -webkit-transform: translate3d(0,0,0);
}
#photoEditorScreen #mlpFPB_download {   
    top: 457px;
    right: 20px;
    z-index: 20;
    position: absolute;
	-webkit-transform: translate3d(0,0,0);
}
#photoEditorScreen .contentWrapper {
    z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
}
#photoEditorScreen #footer-menu {
    z-index: 10;
    position: absolute;
    top: 439px;
    left: 0px;
    background: #b2a9f9;
    height: 102px;
    width: 960px;
	-webkit-transform: translate3d(0,0,0);
}
#photoEditorScreen #footer-menu #backgrounds-ui{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 749px;
    height: 100px;
}
#photoEditorScreen #footer-menu #backgrounds-ui #background-logo{
    position: absolute;
    top: 21px;
    left: 37px;
}
#photoEditorScreen #footer-menu #filters-ui #filter-logo{
    position: absolute;
    top: 22px;
    left: 38px;
}
#photoEditorScreen #footer-menu #filters-ui #filter-bar{
    position: absolute;
    top: -47px;
    left: calc(50%);
}
#photoEditorScreen #footer-menu #filters-ui #filter-bar .text{
    text-transform: uppercase;
    font-size: 17px;
    position: absolute;
    width: 284px;
    text-align: center;
    top: 14px;
    -webkit-text-stroke: 0px #fff;
    color: white;
}
#photoEditorScreen #footer-menu #stickers-ui #sticker-logo{
    position: absolute;
    top: 19px;
    left: 36px;
}
#photoEditorScreen #footer-menu #characters-ui #character-logo{
    position: absolute;
    top: 27px;
    left: 40px;
}
#photoEditorScreen #footer-menu #backgrounds-ui .carouselContainer,
#photoEditorScreen #footer-menu #filters-ui .carouselContainer,
#photoEditorScreen #footer-menu #characters-ui .carouselContainer,
#photoEditorScreen #footer-menu #stickers-ui .carouselContainer{
    position: absolute;
    top: 10px;
    left: 100px;
}
#photoEditorScreen #footer-menu #characters-ui {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 749px;
    height: 100px;
	display: none
}
#photoEditorScreen #footer-menu #filters-ui{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 749px;
    height: 100px;
	display: none
}
#photoEditorScreen #footer-menu #stickers-ui{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 749px;
    height: 100px;
	display: none;
}
#photoEditorScreen #fjCanvasPhotoEditor {
	background: #fff;
	z-index:-1;
}

#photoEditorScreen .list-item .img img {
    max-width: 100%;
    background-size: contain;
    width: 100%;
    height: 100%;
    border: none;
}
#photoEditorScreen .list-item {
	overflow: hidden;
}

/* PhotoEditor OWL carousel */
#photoEditorScreen #footer-menu .owl-item .item { text-align: center; }
#photoEditorScreen #footer-menu .carousel_nav {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
}
#photoEditorScreen #footer-menu .carouselNavButton { top: calc(50% - 65px); z-index: 10; position: absolute;}
	#photoEditorScreen #footer-menu #mlpFPB_carouselLeftNav {     
		left: 160px;
		position: absolute;
		top: 19px; 
	}
	#photoEditorScreen #footer-menu #mlpFPB_carouselRightNav { right: 23px; position: absolute; }
#photoEditorScreen #footer-menu .carouselNavButton { top: 10px; z-index: 10; position: absolute; }
#photoEditorScreen #footer-menu.btnCarouselPreviousWrapper {
    right: 419px;
    position: absolute;
    z-index: 100;
    top: 10px;
}
#photoEditorScreen #footer-menu .disabled div#mlpFPB_carouselLeftNav { display: none; }
#photoEditorScreen #footer-menu .btnCarouselNextWrapper {
    right: -51px;
    position: absolute;
    z-index: 100;
    top: 10px;
}
#photoEditorScreen #footer-menu div#mlpFPB_carouselLeftNav { float: left; z-index: 100; }
#photoEditorScreen #footer-menu .disabled div#mlpFPB_carouselRightNav { display: none; }
/* End PhotoEditor OWL carousel */


/* OWL carousel */
#photoEditorScreen #footer-menu #backgrounds-carousel,
#photoEditorScreen #footer-menu #filters-carousel,
#photoEditorScreen #footer-menu #stickers-carousel,
#photoEditorScreen #footer-menu #character-carousel {
    height: 86px;
    width: 530px;
    padding: 13px 0 0 0;
    position: absolute;
    top: -5px;
    left: 203px;
    display: block;
}
/* carousel [end] */


/*  Menu Overlay */
#photoEditorScreen #menu-overlay {
    position: absolute;
    top: 398px;
    left: 2px;
    width: 137px;
    height: 346px;
    z-index: 5;
    -webkit-transform: translate3d(0,0,0);
}
#photoEditorScreen #menu-overlay.close {
    top: 398px;
    left: 2px;
}
#photoEditorScreen #menu-overlay.close #mlpFPB_openMenu {
	display: block;
}
#photoEditorScreen #menu-overlay.close #mlpFPB_closeMenu {
	display: none;
}
#photoEditorScreen #menu-overlay.open #mlpFPB_openMenu {
	display: none;
}
#photoEditorScreen #menu-overlay.open #mlpFPB_closeMenu {
	display: block;
}
#photoEditorScreen #menu-overlay.open {
    top: 107px;
    left: 2px;
}
#photoEditorScreen #menu-overlay #mlpFPB_openMenu{
    position: absolute;
    top: 0px;
    left: 49px;
}
#photoEditorScreen #menu-overlay #mlpFPB_closeMenu{
    position: absolute;
    top: 0px;
    left: 49px;
	display: none;
}
#photoEditorScreen #menu-overlay #mlpFPB_selectCharacters{
    position: absolute;
    top: 56px;
    left: 32px;
}
#photoEditorScreen #menu-overlay #mlpFPB_selectStickers{
    position: absolute;
    top: 125px;
    left: 32px;
}
#photoEditorScreen #menu-overlay #mlpFPB_selectBackgrounds{
	position: absolute;
    top: 193px;
    left: 32px;
}
#photoEditorScreen #menu-overlay #mlpFPB_selectFilters{
	position: absolute;
    top: 260px;
    left: 32px;
}

/* END PHOTO EDITOR */

/* CHALLENGE */
#challengeScreen{ position: absolute; width: 960px; height: 540px; z-index: 210; -webkit-transform: translateZ(0); overflow:hidden;}
#challengeScreen #mlpFPB_closeChallenge {   
    top: 18px;
    right: 163px;
    z-index: 200;
    position: absolute;
    -webkit-transform: translate3d(0,0,0);
}
#challengeScreen .challenge-shape-popup {   
    top: 41px;
    left: 181px;
    position: absolute;
    z-index: -1;
	pointer-events: none;
}

/* Unlock */
#challengeScreen #challenge-unlock {   
   display: none;
   position: absolute;
   top: 0;
}
#challengeScreen #challenge-unlock .title {   
    top: 99px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 27px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
}
#challengeScreen #challenge-unlock .desc {   
    top: 287px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
    line-height: 31px;
	z-index: 200;
}
#challengeScreen #challenge-unlock .unlock-outfit {   
	top: 106px;
    left: 373px;
    position: absolute;
    z-index: 100;
    transform: scale(0.5);
    transform-origin: 0 0;
}
#challengeScreen #challenge-unlock .outfit1 {   
    top: 310px;
    left: 221px;
    position: absolute;
    transform: scale(0.8);
}
#challengeScreen #challenge-unlock .outfit2 {   
    top: 310px;
    left: 342px;
    position: absolute;
    transform: scale(0.8);
}
#challengeScreen #challenge-unlock .outfit3 {   
    top: 310px;
    left: 463px;
    position: absolute;
    transform: scale(0.8);
}
#challengeScreen #challenge-unlock .outfit4 {   
    top: 310px;
    left: 583px;
    position: absolute;
    transform: scale(0.8);
}
#challengeScreen #challenge-unlock #mlpFPB_startChallenge {   
    top: 464px;
    left: 279px;
    position: absolute;
	z-index: 200;
}

/* Progression  */
#challengeScreen #challenge-progress {   
   display: none;
   position: absolute;
   top: 0;
}
#challengeScreen #challenge-progress .title {   
    top: 80px;
    left: 261px;
    position: absolute;
    width: 430px;
    text-align: center;
    font-size: 27px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
    line-height: 37px;
}
#challengeScreen #challenge-progress .desc {   
    top: 160px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0px #fff;
    line-height: 31px;
}
#challengeScreen #challenge-progress .outfit1 {   
	top: 217px;
    left: 199px;
    position: absolute;
    transform: scale(0.9);
}
#challengeScreen #challenge-progress .outfit2 {   
    top: 217px;
    left: 336px;
    position: absolute;
    transform: scale(0.9);
}
#challengeScreen #challenge-progress .outfit3 {   
    top: 217px;
    left: 473px;
    position: absolute;
    transform: scale(0.9);
}
#challengeScreen #challenge-progress .outfit4 {   
    top: 217px;
    left: 610px;
    position: absolute;
    transform: scale(0.9);
}

#challengeScreen #challenge-progress .item-left {   
    top: 404px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0px #fff;
    line-height: 31px;
}

/* Already Started  */
#challengeScreen #challenge-alreadystarted {   
   display: none;
   position: absolute;
   top: 0;
}
#challengeScreen #challenge-alreadystarted .title {   
    top: 78px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
    line-height: 36px;
}
#challengeScreen #challenge-alreadystarted .desc {   
    top: 153px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    color: #ffffff;
    -webkit-text-stroke: 0px #fff;
    line-height: 31px;
}
#challengeScreen #challenge-alreadystarted .challenge-icon {   
	top: 186px;
    left: 391px;
    position: absolute;
    z-index: 100;
}
#challengeScreen #challenge-alreadystarted .cancel {   
    top: 352px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
    line-height: 31px;
}
#challengeScreen #challenge-alreadystarted .progression {   
	top: 384px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0px #fff;
    line-height: 31px;
}
#challengeScreen #challenge-alreadystarted #light-ray1
{
    position: absolute;
    top: 117px;
    left: 311px;
    z-index: 90;
}

#challengeScreen #challenge-alreadystarted #mlpFPB_cancelChallengeYes {   
    top: 421px;
    left: 329px;
    position: absolute;
	z-index: 200;
}
#challengeScreen #challenge-alreadystarted #mlpFPB_cancelChallengeNo {   
    top: 421px;
    left: 481px;
    position: absolute;
	z-index: 200;
}



/* Completed */
#challengeScreen #challenge-completed {   
   display: none;
   position: absolute;
   top: 0;
}
#challengeScreen #challenge-completed .title {   
    top: 78px;
    left: 279px;
    position: absolute;
    width: 414px;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
    line-height: 36px;
}
#challengeScreen #challenge-completed .desc {   
    top: 153px;
    left: 228px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    color: #ffffff;
    -webkit-text-stroke: 1px #fff;
    line-height: 31px;
}
#challengeScreen #challenge-completed #light-ray1
{
    position: absolute;
    top: 166px;
    left: 311px;
    z-index: 90;
}
#challengeScreen #challenge-completed .unlock-outfit {   
    top: 115px;
    left: 279px;
    position: absolute;
    z-index: 100;
    transform: scale(0.7);
}
#challengeScreen #challenge-completed #mlpFPB_claimItem {   
	top: 464px;
    left: 346px;
    position: absolute;
    z-index: 200;
}

/* Reset */
#challengeScreen #reset-state {   
   display: none;
   position: absolute;
   top: 0;
}
#challengeScreen .shape-popup{     
	position: absolute;
    top: 38px;
    left: 39px;
	z-index: -1;
	pointer-events: none;
}
#challengeScreen #fjCanvasPreChallengeCanvas {
    position: absolute;
    top: 38px !important;
    left: 39px !important;
}
#challengeScreen #reset-state .title {   
    top: 78px;
    left: 65px;
    position: absolute;
    width: 831px;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
    color: #3a1861;
    -webkit-text-stroke: 2px #3a1861;
    line-height: 36px;
}
#challengeScreen #reset-state #mlpFPB_resetOutfit {   
    top: 464px;
    left: 154px;
    position: absolute;
    z-index: 400;
}
#challengeScreen #reset-state #mlpFPB_keepOutfit {   
    top: 464px;
    left: 541px;
    position: absolute;
    z-index: 400;
}


/* misc  */
#challengeScreen .backdrop {   
    top: 0px;
    left: 0px;
    position: absolute;
	background: #38165f;
	opacity: 0.9;
	width: 960px;
	height: 540px;
	z-index: -2;
	pointer-event: none;
}
#challengeScreen .actionButton {   
    font-size: 20px;
    line-height: 69px;
    width: 100%;
    font-weight: 800;
}
#challengeScreen #light-ray1
{
    position: absolute;
    top: 39px;
    left: 311px;
    z-index: 90;
	-webkit-animation-name: spin2;
    -webkit-animation-duration: 20000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin2;
    -moz-animation-duration: 20000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin2;
    -ms-animation-duration: 20000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin2;
    animation-duration: 20000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin2 {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin2 {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin2 {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

   

/* END CHALLENGE */


/* DOWNLOAD */
#downloadScreen{ position: absolute; width: 960px; height: 540px; z-index: 410; -webkit-transform: translateZ(0); overflow:hidden;}
#downloadScreen #mlpFPB_closeChallenge {   
    top: 92px;
    right: 163px;
    z-index: 200;
    position: absolute;
    -webkit-transform: translate3d(0,0,0);
}
#downloadScreen .popup-download {   
    top: 119px;
    left: 181px;
    position: absolute;
    z-index: -1;
}
#downloadScreen #waiting {   
    top: 0;
    left: 0px;
    position: absolute;
    text-align: center;
    display: block;
}
#downloadScreen #waiting .loader{   
    top: 198px;
    left: 310px;
    position: absolute;
    z-index: 10;
}
#downloadScreen #waiting .title {   
    top: 164px;
    left: 233px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 27px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 2px #fff;
	z-index: 20;
	line-height: 34px;
}
#downloadScreen #ready {   
    top: 0;
    left: 0px;
    position: absolute;
    text-align: center;
	display: none;
}
#downloadScreen #ready .title {   
    top: 174px;
    left: 233px;
    position: absolute;
    width: 491px;
    text-align: center;
    font-size: 27px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 2px #fff;
}
#downloadScreen #ready #mlpFPB_download,   
#downloadScreen #ready #mlpFPB_download_direct {   
	top: 283px;
    left: 308px;
    position: absolute;
}
#downloadScreen #ready #mlpFPB_download .actionButton,   
#downloadScreen #ready #mlpFPB_download_direct .actionButton {   
    font-size: 23px;
    line-height: 89px;
    width: 80%;
    font-weight: 800;
}
#downloadScreen .backdrop {   
    top: 0px;
    left: 0px;
    position: absolute;
	background: #38165f;
	opacity: 0.9;
	width: 960px;
	height: 540px;
	z-index: -2;
	pointer-event: none;
}