@charset "utf-8";

/* -------------------------------
	General
   ------------------------------- */
   
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&subset=latin,latin-ext,greek,cyrillic');
@import url('https://fonts.googleapis.com/css?family=Life+Savers:400,700&subset=latin,latin-ext');
@import url('https://fonts.googleapis.com/css?family=Satisfy');
 
.htmlView {	color: #000; position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-family: 'Life Savers', cursive; font-weight: normal; }

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

.button-clickable, .button-clickable *, .viewButton, .viewButton * { cursor: pointer; }

/* -------------------------------
	PreloadScreen 
   ------------------------------- */
#preloadScreen
{
	width: 960px; height: 540px;
}
#preloadScreen * { position: absolute; }

#preloadScreen #background, #titleScreen #background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 960px; 
	height: 540px;
	background-color: #b2a9f3;
}

#preloadScreen #logo, #titleScreen #logo
{
	position: absolute;
    top: 44px;
    left: calc(50% - 212px);
    z-index: 100;
	padding: 0;
}

#preloadScreen #logo .title_fashion, #titleScreen #logo .title_fashion
{
    position: absolute;
    top: 147px;
    left: 48px;
    font-family: 'Satisfy', cursive;
    font-weight: 800;
    width: 323px;
    font-size: 51px;
    height: 43px;
}
.isIE #preloadScreen #logo .title_fashion, .isIE #titleScreen #logo .title_fashion
{
   /* left: 119px;*/
}

#preloadScreen #logo .title_fashion .back, #titleScreen #logo .title_fashion .back
{
	width: 323px;
	text-align: center;
	-webkit-text-stroke: 5px #2a185a;
    text-shadow: 1px 3px 2px #0000005e;
	position: absolute;
	top: 0;
	left:0;
}
#preloadScreen #logo .title_fashion .front, #titleScreen #logo .title_fashion .front
{
	width: 323px;
	text-align: center;
	color: #77acc5;
	-webkit-text-stroke: 0px #fff;
	position: absolute;
	top: 0;
	left:0;
}
#preloadScreen #logo .title_photobooth, #titleScreen #logo .title_photobooth
{
    position: absolute;
    top: 194px;
    left: 52px;
    font-family: 'Life Savers', cursive;
    font-weight: 800;
    color: #2a185a;
    width: 313px;
    text-align: center;
    font-size: 29px;
    text-transform: uppercase;
    -webkit-text-stroke: 3px #2a185a;
}

.it-it #preloadScreen #logo .title_photobooth, .it-it #titleScreen #logo .title_photobooth,
.pt-pt #preloadScreen #logo .title_photobooth, .pt-pt #titleScreen #logo .title_photobooth
{
    font-size: 24px;
}

#preloadScreen #light-ray1, #titleScreen #light-ray1
{
    position: absolute;
    top: 0px;
    left: calc(50% - 210px);
    z-index: 90;
	-webkit-animation-name: spin;
    -webkit-animation-duration: 20000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 20000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 20000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 20000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#preloadScreen #light-ray2, #titleScreen #light-ray2
{
    position: absolute;
    top: 0px;
    left: calc(50% - 210px);
    z-index: 90;
	-webkit-animation-name: spin;
    -webkit-animation-duration: 10000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 10000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 10000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	
	opacity: 0.6;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


#preloadScreen .loadingProgress { 
	position: absolute;
    left: calc(50% - 166px);
    top: 436px;
	width: 313px;
}
.loadingProgress .txt_loading
{
    top: -28px;
    left: 0;
    text-align: center;
    width: 100%;
    font-size: 22px;
    color: white;
    -webkit-text-stroke: 1px #fff;
    text-transform: uppercase;
}
.loadingProgress .loading-bar
{
	top: 5px;
    left: 4px;
	z-index: 20;
	width: 0%;
}


#preloadScreen:not(.mobile) #btn_tapToLoad { display: none; }
#preloadScreen #btn_tapToLoad { 
    position: absolute;
    left: calc(50% - 166px);
    bottom: 50px;
    z-index: 100;
    text-align: center;
    animation: tapToLoad 2s linear infinite alternate;
    top: 436px;
	-webkit-text-stroke: 1px #fff;
	/*text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;*/
}
@keyframes tapToLoad {
    from { opacity: 0.4; }
    to { opacity: 1}
}
/* END OF PRELOAD SCREEN */



/* TITLE SCREEN */

#titleScreen { width: 960px; height: 540px; z-index: 200; }
#titleScreen * { position: absolute; }

#titleScreen #background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 960px; 
	height: 540px;
	background-color: #b2a9f3;
	background: url("../assets/html/img/bkg-introduction.jpg");
}

#titleScreen #mlpFPB_start { 
    position: absolute;
    left: calc(50% - 166px);
    bottom: 50px;
    z-index: 300;
    text-align: center;
    /*animation: tapToLoad 2s linear infinite alternate;*/
    top: 436px;
	-webkit-text-stroke: 1px #fff;
}

#titleScreen #mlpFPB_options { 
    position: absolute;
    right: 16px;
    top: 16px;
	z-index: 300;
}
#titleScreen #character1{
	position:absolute;right:44px;top:53px;z-index:120;
	display: none;
}
#titleScreen #character2{
    position: absolute;
    right: 15px;
    top: 70px;
    z-index: 120;
	display: none;
}
#titleScreen #character3{  
	position: absolute;
    left: 16px;
    top: 36px;
    z-index: 120;
	display: none;
}
#titleScreen #character4-1{  
    position: absolute;
    left: 49px;
    top: 73px;
    z-index: 120;
    display: none;
}
#titleScreen #character4-3{  
    position: absolute;
    left: 681px;
    top: 73px;
    z-index: 120;
    display: none;
}

/* END OF TITLE SCREEN */