@charset "utf-8";

/* -------------------------------
	General
   ------------------------------- */
   
@import url('https://fonts.googleapis.com/css?family=Aldrich');
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');


 
html { width: 100%; height: 100%;}
body { color: #000; font-weight: 400; font-size: 1.4rem; font-family: 'Luckiest Guy', cursive; text-shadow: 2px 2px #00000054; margin: 0; padding: 0; background: blue; overflow: hidden; width: 100%; height: 100%; }
	body.hu-hu,
	body.ro-ro,
	body.ru-ru,
	body.tr-tr,
	body.cs-cz,
	body.pl-pl { font-family: "Open Sans", sans-serif; font-weight: bold; }

.htmlView {	color: #000; position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-family: 'Luckiest Guy', cursive; font-weight: normal; }
	body.hu-hu .htmlView,
	body.ro-ro .htmlView,
	body.ru-ru .htmlView,
	body.tr-tr .htmlView,
	body.cs-cz .htmlView,
	body.pl-pl .htmlView { font-family: "Open Sans", sans-serif; font-weight: bold; }

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

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

.loadingImage_class { display:none; }


/* -------------------------------
	PreloadScreen 
   ------------------------------- */
#preloadScreen .screenContainer { position: absolute; width: 960px; height: 540px; z-index: 300; }
	.portrait #preloadScreen .screenContainer { width: 608px; height: 1080px; }
#preloadScreen div { pointer-events: auto; }
#preloadScreen * { position: absolute; }


#preloadScreen .loadingProgress { position: absolute; bottom: 91px; left: calc(50% - 132.5px); z-index: 300; width: 263px; }
	.portrait #preloadScreen .loadingProgress { bottom: 165px; left: calc(50% - 266px); width: 532px; }

#preloadScreen .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #00a9bb }

#preloadScreen .castle-transparent { position: absolute; bottom: 0px; left: calc(50% - 549px); transform: scale(.5); transform-origin: center bottom; }
	.portrait #preloadScreen .castle-transparent { left: calc(50% - 500px); transform: scale(1); }

.loadingProgress .txt_loading { top: -33px; left: 0; text-align: center; width: 100%; font-size: 26px; color: white; text-transform: uppercase; display: none; }
	.portrait .loadingProgress .txt_loading { top: -45px; }

.loadingProgress .loading-bar { top: 16px; left: 17px; z-index: 20; width: 0%; }

.loadingProgress .loading-bkg-border { top: 1px; z-index: 100; left: 1px; }
.loadingProgress .loading-bkg-bar { top: 0px; left: 0px; transform-origin: left top; transform: scale(0.49812); }
	.portrait .loadingProgress .loading-bkg-bar { top: -16px; left: 32px; transform: scale(.88); }

#preloadScreen:not(.mobile) #btn_tapToLoad { display: none; }
#preloadScreen #btn_tapToLoad { position: absolute; bottom: 20px; left: 250px; text-align: center; animation: tapToLoad 2s linear infinite alternate; z-index: 305; color: #fff; transform-origin: center bottom; transform: scale(.58); }
	.portrait #preloadScreen #btn_tapToLoad { bottom: 60px; left: calc(50% - 230px); transform: scale(1); }

#btn_tapToLoad .text { position: absolute; bottom: 48px; width: 100%; color: #fff; font-size: 18px; text-align: center; }
	.en-au #btn_tapToLoad .text,
	.en-ca #btn_tapToLoad .text,
	.en-da #btn_tapToLoad .text,
	.en-fi #btn_tapToLoad .text,
	.en-gb #btn_tapToLoad .text,
	.en-no #btn_tapToLoad .text,
	.en-se #btn_tapToLoad .text,
	.en-us #btn_tapToLoad .text { bottom: 41px; font-size: 30px; }
	.fr-be #btn_tapToLoad .text,
	.fr-ca #btn_tapToLoad .text,
	.fr-fr #btn_tapToLoad .text,
	.ro-ro #btn_tapToLoad .text { font-size: 16px; }
	/*.isIos #btn_tapToLoad .text,
	.isMac #btn_tapToLoad .text,
	.isAndroid #btn_tapToLoad .text { top: 50px; }*/

@keyframes tapToLoad {
    from { opacity: 0.4; }
    to { opacity: 1 }
}
/* END OF PRELOAD SCREEN */



/* TITLE SCREEN */

#titleScreen { position: absolute; width: 960px; height: 540px; z-index: 305; }
.portrait #titleScreen { width: 608px; height: 1080px; }
#titleScreen div { pointer-events: auto; }
#titleScreen .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #00a9bb url("../assets/html/img/background_school_of_friendship.jpg"); }
.portrait #titleScreen .background { background: #00a9bb url("../assets/html/img/background_school_of_friendship_mobile.jpg"); background-size: 100% 100%; }

#titleScreen .logo, #preloadScreen .logo { position: absolute; left: calc(50.5% - 223px); top: 50px; transform: scale(.5); transform-origin: center top; }
.portrait #titleScreen .logo, .portrait #preloadScreen .logo { left: calc(52% - 223px); transform: scale(1); }

#titleScreen .gameTitle,
#preloadScreen .gameTitle { position: absolute; top: 110px; left: calc(50% - 125px); width: 500px; height: 170px; transform-origin: left top; transform: scale(.5); }
	#titleScreen .gameTitle div,
	#preloadScreen .gameTitle div { display: none; }
	.cs-cz #titleScreen .gameTitle div.title_cs-cz,
	.cs-cz #preloadScreen .gameTitle div.title_cs-cz { display: block; }
	.de-de #titleScreen .gameTitle div.title_de-de,
	.de-de #preloadScreen .gameTitle div.title_de-de { display: block; }
	.en-au #titleScreen .gameTitle div.title_en,
	.en-au #preloadScreen .gameTitle div.title_en,
	.en-ca #titleScreen .gameTitle div.title_en,
	.en-ca #preloadScreen .gameTitle div.title_en,
	.en-da #titleScreen .gameTitle div.title_en,
	.en-da #preloadScreen .gameTitle div.title_en,
	.en-fi #titleScreen .gameTitle div.title_en,
	.en-fi #preloadScreen .gameTitle div.title_en,
	.en-gb #titleScreen .gameTitle div.title_en,
	.en-gb #preloadScreen .gameTitle div.title_en,
	.en-no #titleScreen .gameTitle div.title_en,
	.en-no #preloadScreen .gameTitle div.title_en,
	.en-se #titleScreen .gameTitle div.title_en,
	.en-se #preloadScreen .gameTitle div.title_en,
	.en-us #titleScreen .gameTitle div.title_en,
	.en-us #preloadScreen .gameTitle div.title_en,
	.it-it #titleScreen .gameTitle div.title_en,
	.it-it #preloadScreen .gameTitle div.title_en,
	.nl-be #titleScreen .gameTitle div.title_en,
	.nl-be #preloadScreen .gameTitle div.title_en,
	.nl-nl #titleScreen .gameTitle div.title_en,
	.nl-nl #preloadScreen .gameTitle div.title_en,
	.pl-pl #titleScreen .gameTitle div.title_en,
	.pl-pl #preloadScreen .gameTitle div.title_en,
	.pt-br #titleScreen .gameTitle div.title_en,
	.pt-br #preloadScreen .gameTitle div.title_en,
	.ro-ro #titleScreen .gameTitle div.title_en,
	.ro-ro #preloadScreen .gameTitle div.title_en { display: block; }
	.es-es #titleScreen .gameTitle div.title_es-es,
	.es-es #preloadScreen .gameTitle div.title_es-es { display: block; }
	.es-mx #titleScreen .gameTitle div.title_es-mx,
	.es-mx #preloadScreen .gameTitle div.title_es-mx { display: block; }
	.fr-be #titleScreen .gameTitle div.title_fr,
	.fr-be #preloadScreen .gameTitle div.title_fr,
	.fr-ca #titleScreen .gameTitle div.title_fr,
	.fr-ca #preloadScreen .gameTitle div.title_fr,
	.fr-fr #titleScreen .gameTitle div.title_fr,
	.fr-fr #preloadScreen .gameTitle div.title_fr { display: block; }
	.hu-hu #titleScreen .gameTitle div.title_hu-hu,
	.hu-hu #preloadScreen .gameTitle div.title_hu-hu { display: block; }
	.ru-ru #titleScreen .gameTitle div.title_ru-ru,
	.ru-ru #preloadScreen .gameTitle div.title_ru-ru { display: block; }
	.tr-tr #titleScreen .gameTitle div.title_tr-tr,
	.tr-tr #preloadScreen .gameTitle div.title_tr-tr { display: block; }

.portrait #titleScreen .gameTitle,
.portrait #preloadScreen .gameTitle { top: 165px; left: calc(50% - 250px); transform: scale(1); }

#titleScreen .btnStartGame { position: absolute; bottom: 20px; left: calc(50% - 132.5px); z-index: 300; transform-origin: left bottom; transform: scale(0.57609); }
	.portrait #titleScreen .btnStartGame { bottom: 60px; left: calc(50% - 230px); transform: scale(1); }
#titleScreen .btnSettings { position: absolute; top: 18.5px; right: 13.5px; transform: scale(.5); transform-origin: right top; }
	.portrait #titleScreen .btnSettings { transform: scale(1); }

#titleScreen .characters div,
#preloadScreen .characters div { position: absolute; }
	#titleScreen .characters div.twilight,
	#preloadScreen .characters div.twilight { top: 295px; left: 755px; transform: scale(-.5, .5); transform-origin: left top; }
		.portrait #titleScreen .characters div.twilight,
		.portrait #preloadScreen .characters div.twilight { top: 585px; left: 320px; transform: scaleX(-1); transform-origin: center center; }
	#titleScreen .characters div.silverstream,
	#preloadScreen .characters div.silverstream { top: 316px; left: 200px; transform: scale(.5); transform-origin: left top; }
		.portrait #titleScreen .characters div.silverstream,
		.portrait #preloadScreen .characters div.silverstream { top: 575px; left: -225px; transform: scale(1); transform-origin: center center; }
	#titleScreen .characters div.rainbowdash { top: 106px; left: 61.5px; }
		.portrait #titleScreen .characters div.rainbowdash { display: none; }
	#titleScreen .characters div.smolder { top: 90.5px; left: 692px; }
		.portrait #titleScreen .characters div.smolder { display: none; }
	#titleScreen .characters div.pinkie { top: 289px; left: 852px; }
		.portrait #titleScreen .characters div.pinkie { display: none; }
	#titleScreen .characters div.spike { top: 378.5px; left: 802px; }
		.portrait #titleScreen .characters div.spike { display: none; }
	#titleScreen .characters div.yona { top: 381px; left: 16px; }
		.portrait #titleScreen .characters div.yona { display: none; }

div.legalNote { position: absolute; bottom: 4px; width: 100%; font-size: 10px; font-family: "Open Sans",  sans-serif; color: #fff; text-shadow: none; }
	.portrait div.legalNote { bottom: 35px; height: 20px; font-size: 12px; }

/* END OF TITLE SCREEN */