/* Open Sans Font */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&subset=latin,latin-ext,greek,cyrillic);

.htmlView {	position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #777; }
.htmlView * { color: #FFF; font-family: "Open Sans", Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif; }
.htmlView p, span { font-size: 1rem; }

.preloadInterfacesImage { position: fixed; left: 10000px; }

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

.textButton .button-text { text-align: center; }
.textButton p.button-text.centered { text-align: center; position: relative; top: 50%; left: 50%; margin: 0; padding: 0;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.htmlView .eqlogo { position: absolute; top: 5px; left: 20px; }
.htmlView .htp-frame-logo { width: 246px; height: 73px; background: url(../assets/html/img/logo/en-us/htp-frame-logo.png) no-repeat center; }

.htmlView .floatingPoints { position: absolute; font-size: 1.8rem; line-height: 22px; font-weight: 700; text-align: center; width: 200px; text-shadow: 0px 0px 6px #000,0px 0px 6px #000; color: white; 
	-webkit-transform: translate3d(-105px,0px,0px);
	-ms-transform: translate3d(-105px,0px,0px);
	transform: translate3d(-105px,0px,0px);
}

.htmlView .addedFinalPoints { position: absolute; right: 95px; font-size: 1.4rem; line-height: 22px; font-weight: 700; text-align: left; text-shadow: 0px 0px 6px #000; color: rgb(255,255,255); 
	-webkit-transform: translate3d(-100%,0px,0px);
	-ms-transform: translate3d(-100%,0px,0px);
	transform: translate3d(-100%,0px,0px);
}

.htmlView .floatingTime { position: absolute; font-size: 1.4rem; line-height: 22px; font-weight: 700; text-align: center; text-shadow: 0px 0px 6px #000; color: rgb(255,255,255); 
	-webkit-transform: translate3d(-50%,0px,0px);
	-ms-transform: translate3d(-50%,0px,0px);
	transform: translate3d(-50%,0px,0px);
}

.outOfScreen { top: 1000px !important; }

/* Preload screen style */
#preloadScreen { width: 853px; height: 480px; }
#preloadScreen .gamelogo { width: 242px; height: 168px; position: absolute; top: 112px; left: 305px; }
#loadPercentage { color: #FFF; font-weight: 800; position: absolute; bottom: 19px; width: 100%; text-align: center; }
#preloadScreen #btn_tapToLoad { position: absolute; top: 342px; left: 50%; 
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}
#preloadScreen #btn_tapToLoad .button-text-container { width: 90%; height: 60px; margin: 0 auto; }
#preloadScreen #btn_tapToLoad .button-text { font-weight: 800; font-size: 1.7rem; }
#loadingBarContainer { display: block; position: relative; top: 374px; margin: 0 auto; }
#loadingBar { display: block; position: absolute; top: 7px; left: 7px; background-clip: content-box; width: 0px; height: 50px; border-radius: 7px; overflow: hidden; }
#preloadScreen .logo-hasbro { position: absolute; top: 15px; left: 26px; }
#preloadScreen .logo-goh-1 { position: absolute; top: 83px; left: 269px; }
#preloadScreen .subtitle { position: absolute; left: 0; top: 25px; width: 100%; text-align: center; font-weight: 700; font-size: 1.5rem; color: #0d2646;
    -webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

/* Title screen style */
#titleScreen { width: 853px; height: 480px; overflow: hidden; background-color: white; }
#titleScreen #play-story-mode { position: absolute; top: 27px; left: 25px; }
#titleScreen #play-endless-mode { position: absolute; top: 27px; left: 306px; }
#titleScreen #view-badges { position: absolute; top: 27px; left: 571px; }
#titleScreen #btn_ts_settings { position: absolute; top: 10px; right: 10px; }
#titleScreen #btn_ts_play-story { position: absolute; bottom: 29px; left: 100px; }
#titleScreen #btn_ts_play-endless { position: absolute; bottom: 29px; left: 376px; }
#titleScreen #btn_ts_view-badges { position: absolute; bottom: 29px; left: 649px; }
#titleScreen #txt-story-mode { position: absolute; left: 156px; max-width: 240px; }
#titleScreen #txt-endless-mode { position: absolute; left: 430px; max-width: 240px; }
#titleScreen #txt-badges { position: absolute; left: 705px; max-width: 160px; }
#titleScreen .centered-text { text-align: center;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}
#titleScreen .mode-panel-text { font-size: 1.6rem; font-weight: 700; line-height: 26px; top: 33px; }
#titleScreen .cadenasAnimContainer { pointer-events: none; position: absolute; left: 376px; top: 300px; }
#titleScreen #cadenasAnim { background: url(../assets/html/anims/cadenas.png) no-repeat; position: absolute; display: block; width: 0; height: 0; }

#titleScreen .icon-new-badges { position: absolute; top: 178px; left: 674px; }

.tutorialText { font-size: 1.2rem; font-weight: 700; line-height: 22px; margin: 0; padding: 0; }

/* Game Hud Style */
#gameHud { width: 853px; }
#gameHud #btn_pause { position: absolute; right: 15px; top: 15px; }

#gameHud #scoreText { position: absolute; top: 52px; left: 206px; font-size: 1.2rem; text-align: center; font-weight: 700; color: #200070; 
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

#gameHud #endlessScoreText { position: absolute; top: 20px; left: 95px; width:100%; font-size: 1.2rem; text-align: center; font-weight: 700; color: #200070; 
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

#gh_progression_bar_container, #gh_score_container { position: absolute; top: 20px; left: 50%; pointer-events: none;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
#gh_progression_bar_container .progression_bar { width: 351px; height: 21px; position: absolute; top: 13px; left: 18px; overflow: hidden; border-radius: 6px; }
#gh_progression_bar_container .progression_bar .bar_filler { position: absolute; top: 0; left: 0; height: 100%; background: #4a9ed4; width: 0%; }
#gh_progression_bar_container .progress_icon { width: 30px; height: 30px; position: relative; top: 0px; left: 100%;
	-webkit-transform: translate(-15px, -10px);
	-ms-transform: translate(-15px, -10px);
	transform: translate(-15px, -10px);
}

.spikeBtnGlow
{
	position: absolute;
	top:347px;
	left:741px;
    background-color:#00d2ff;
    width:110px;
    height:110px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50%;
	z-index: -1;
}

#gameHud .comboAnimContainer { pointer-events: none; position: absolute; left: 186px; top: 16px; }
#gameHud #comboAnim { background: url(../assets/html/anims/combo.png) no-repeat; position: absolute; display: block; width: 0; height: 0; }
#gameHud #spike_image, #gameHud #spike_image * { position: absolute; }
#gameHud #spike_text_bubble { top: 0px; left: 122px; }
#gameHud #spike_text_bubble .bubble-text { top: 40px; left: 232px; font-weight: 800; font-size: 3.1rem; color: #8b548d; width: 490px; text-align: center; line-height: 50px; }
#gameHud #big_dragon_spike { top: 7px; left: 9px; }

#gh_spike_button { width: 75px; height: 75px; position: absolute; left: calc( (100% / 2) + 332px ); top: 365px; -webkit-backface-visibility: hidden; }
#gh_spike_button.shadow { box-shadow: 0px 0px 10px 10px #00d2ff; border-radius: 50%; }
#gh_spike_button * { cursor: pointer; -webkit-backface-visibility: hidden; }
#gh_spike_button .bkg { width: calc( 100% + 5px ); height: calc( 100% + 5px ); border: 3px solid #00B0CC; border-radius: 50%; background: white; position: absolute; left: -5px; top: -5px; }
#gh_spike_button .half1, #gh_spike_button .half3, #gh_spike_button .half5 { width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0px }
#gh_spike_button .half2, #gh_spike_button .half4, #gh_spike_button .half6 { width: 50%; height: 100%; overflow: hidden; position: absolute; left: 50%; }
#gh_spike_button .half-circle-container { width: 100%; height: 100%; position: absolute; overflow: hidden; outline: 1px solid transparent; }
#gh_spike_button .half-circle { width: 200%; height: 100%; border-radius: 50%; background: #00B0CC; position: absolute; outline: 1px solid transparent; }
#gh_spike_button .half-circle-dark { width: 200%; height: 100%; border-radius: 50%; background: #00D0F2; position: absolute; outline: 1px solid transparent; }
#gh_spike_button .half-circle-darker { width: 200%; height: 100%; border-radius: 50%; background: #49E5FF; position: absolute; outline: 1px solid transparent; }
#gh_spike_button .half1 .half-circle-container, #gh_spike_button .half3 .half-circle-container, #gh_spike_button .half5 .half-circle-container {
	-webkit-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}
#gh_spike_button .half2 .half-circle-container, #gh_spike_button .half4 .half-circle-container, #gh_spike_button .half6 .half-circle-container {
	-webkit-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	transform-origin: 0 50%;
}
#gh_spike_button .half2 .half-circle, #gh_spike_button .half4 .half-circle-dark, #gh_spike_button .half6 .half-circle-darker { left: -100%; }

/*#gh_spike_button #spike_button_container { position: absolute; left: 12px; top: 12px; }*/
#gh_spike_button .center_button { width: calc( 100% - 24px ); height: calc( 100% - 24px ); border: 2px solid pink; border-radius: 50%; background: white; position: absolute; left: 10px; top: 11px; }
#gh_spike_button #spike-img { position: absolute; left: 12px; top: 4px; /*z-index:1;*/ }
#gh_spike_button .nb-gems { position: absolute; left: 0; bottom: -36px; width: 100%; text-align: center; font-size: 1.5rem; font-weight: 700; color: #FFF; background: rgba(50,50,50,0.5); }

#gameHud #ftue_blockScreen { position: absolute; top: 0; left: 0; width: 853px; height:480px; background-color: rgba(0, 0, 0, 0.01); z-index:5; }
#gameHud #ftue_screen { position: absolute; top: 0; left: 0; width: 853px; height:480px; background-color: rgba(0, 0, 0, 0.5); z-index:5; }
#gameHud #ftue_tap { position: absolute; top: 215px; left: 160px; z-index:5; }
#gameHud #ftue_tap_rightArrow { position: absolute; top: 188px; left: 580px; z-index:5; }
#gameHud #ftue_tap_downArrow { position: absolute; top: 188px; left: 351px; z-index:5; }
#gameHud #ftue_tap_space { position: absolute; top: 200px; left: 132px; z-index:5; }
#gameHud #ftue_dash_arrow { position: absolute; top: 386px; left: 362px; z-index:5; }
#gameHud #ftue_jump_arrow { position: absolute; top: 180px; left: 270px; z-index:5; }

#gameHud #ftue_click_container { position: absolute; width:105px; height:93px; z-index:10; }
#gameHud #ftue_click_container #clickAnim { background: url(../assets/html/anims/click.png) no-repeat; position: absolute; display: block; width: 0; height: 0; }


/* Pause Style */
#pauseScreen { width: 853px; height: 480px; background-color: rgba(17, 134, 177, 0.5); z-index:100}
#pauseScreen .button-text { font-weight: 700; font-size: 1.5rem; max-width: 90%; line-height: 25px; }
#pauseScreen .textButton.long2-over .button-text, #pauseScreen .textButton.long2-down .button-text { color: rgb(0, 176, 204); }
#pauseScreen .viewButton h1, #pauseScreen .viewButton p { margin: 0; }
#pauseScreen #pause_sounds_title { position: absolute; top: 130px; left: 50%; font-size: 2rem; font-weight: 700; 
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#pauseScreen #btn_ps_close { position: absolute; top: 7px; right: 10px; }
#pauseScreen #btn_ps_settings { position: absolute; top: 7px; left: 68px; }
#pauseScreen #btn_ps_howtoplay { position: absolute; top: 7px; right: 68px; }
#pauseScreen #btn_ps_resume { position: absolute; bottom: 20px; left: 250px; }
#pauseScreen #btn_ps_quit { position: absolute; bottom: 20px; left: 140px; }
#pauseScreen #btn_ps_restart { position: absolute; bottom: 20px; left: 610px; }
#pauseScreen #btn_ps_previous { position: absolute; top: 205px; left: 10px; }
#pauseScreen #btn_ps_next { position: absolute; top: 205px; right: 10px; }
#pauseScreen #btn_ps_music { position: absolute; top: 220px; right: 433px; }
#pauseScreen #btn_ps_music_off { position: absolute; top: 220px; right: 433px; }
#pauseScreen #btn_ps_sfx { position: absolute; top: 220px; left: 433px; }
#pauseScreen #btn_ps_sfx_off { position: absolute; top: 220px; left: 433px; }
#pauseScreen #dots_container { position: absolute; top: 430px; width: 100%; text-align: center; }
#pauseScreen #dots_container span { display: inline-block; margin: 1px; }
#pauseScreen .settings-panel { position: absolute; left: 22px; top: 20px; }
#pauseScreen #bkg_htp_game_panel_inside { display: block; position: relative; left: 16px; top: 14px; width: 777px; height: 409px; border-radius: 7px; overflow: hidden; }
#pauseScreen #bkg_htp_game_panel_inside_character { position: absolute; bottom: 50px; left: 200px; 
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
#pauseScreen #htp_overlay_panel { position: absolute; top: 60px; left: 440px; }
#pauseScreen #characters { position: absolute; top: 102px; left: 0px; }

#pauseScreen #htp_pages_container { position: absolute; top:0; left:0; width:853px; height:480px; }
#pauseScreen #htp_page1_leftSide_image { position: absolute; top:122px; left:40px; }
#pauseScreen #htp_page2_leftSide_image { position: absolute; top:220px; left:40px; }
#pauseScreen #htp_page3_leftSide_image { position: absolute; top:130px; left:55px; }
#pauseScreen #htp_page4_leftSide_image { position: absolute; top:74px; left:14px; }
#pauseScreen #htp_page5_leftSide_image { position: absolute; top:157px; left:66px; }
#pauseScreen #htp_page6_leftSide_image { position: absolute; top:91px; left:97px; }
#pauseScreen #htp_page7_leftSide_image { position: absolute; top:101px; left:61px; }
#pauseScreen #htp_page1_rightSide_image_mobile { position: absolute; top:245px; left:500px; }
#pauseScreen #htp_page2_rightSide_image_mobile { position: absolute; top:245px; left:505px; }
#pauseScreen #htp_page1_rightSide_image_desktop { position: absolute; top:260px; left:485px; }
#pauseScreen #htp_page2_rightSide_image_desktop { position: absolute; top:260px; left:515px; }
#pauseScreen #htp_page4_rightSide_image { position: absolute; top:240px; left:462px; }

#pauseScreen .page_loc_container { position: absolute; top: 85px; left: 456px; width: 309px; text-align: center }
#pauseScreen .page_loc_left_container { position: absolute; top: 135px; left: 160px; width: 177px; text-align: center; 
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#pauseScreen #endless_mode_text { font-weight: 800; font-size: 1.3rem; line-height: 24px; }
#pauseScreen .page_loc_title { position: absolute; top: 32px; font-weight: 800; font-size: 1.7rem; line-height: 32px; width: 100%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#pauseScreen .page_loc_text { position: absolute; top: 65px; font-weight: 600; line-height: 22px; margin: 0px 20px 0px 20px; }
#pauseScreen #page1_loc_mobile, #pauseScreen #page1_loc_desktop { font-size: 1.1rem; }
#pauseScreen #page2_loc_mobile, #pauseScreen #page2_loc_desktop { font-size: 0.9rem; line-height: 20px; }
#pauseScreen #page3_loc, #pauseScreen #page4_loc, #pauseScreen #page5_loc, #pauseScreen #page6_loc, #pauseScreen #page7_loc { font-size: 1.1rem; }


/* Score Style */
#scoreScreen { width: 853px; height: 480px; }
#scoreScreen .frame { position: absolute; top: 32px; left: 135px; }
#scoreScreen .gamelogo { width: 246px; height: 73px; position: absolute; top: 22px; left: 304px; }
#scoreScreen .characters { width: 853px; height: 480px; position: absolute; top: 0px; left: 0px; }
#scoreScreen .blueFrame { width: 207px; height: 71px; position: absolute; top: 196px; left: 323px; }
#scoreScreen .purpleFrame { width: 207px; height: 71px; position: absolute; top: 266px; left: 323px; }

#scoreScreen .star1-back { width: 38px; height: 36px; position: absolute; top: 177px; left: 360px; }
#scoreScreen .star2-back  { width: 44px; height: 42px; position: absolute; top: 169px; left: 405px; }
#scoreScreen .star3-back  { width: 38px; height: 36px; position: absolute; top: 177px; left: 456px; }

#scoreScreen #ss_star1 { width: 38px; height: 38px; position: absolute; top: 177px; left: 360px; }
#scoreScreen #ss_star2 { width: 44px; height: 44px; position: absolute; top: 169px; left: 405px; }
#scoreScreen #ss_star3 { width: 38px; height: 38px; position: absolute; top: 177px; left: 456px; }

#scoreScreen p { margin: 0; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); }

#scoreScreen #ss_partyNumber { position: absolute; left: 0px; top: 99px; width: 853px; height: 20px; line-height: 38px; font-size: 1rem; text-align: center; font-weight: 800; }
#scoreScreen .awesomeParty { position: absolute; left: 0px; top: 122px; width: 853px; height: 20px; line-height: 38px; font-size: 1.4rem; text-align: center; font-weight: 800; }

#scoreScreen #ss_score { position: absolute; left: 0px; top: 209px; width: 853px; height: 20px; line-height: 38px; font-size: 1.7rem; text-align: center; font-weight: 800; }
#scoreScreen .scoreLabel { position: absolute; left: 0px; top: 231px; width: 853px; height: 20px; line-height: 38px; font-size: 0.9rem; text-align: center; font-weight: 800; }

#scoreScreen #ss_totalScore { position: absolute; left: 0px; top: 289px; width: 853px; height: 20px; line-height: 38px; font-size: 2.4rem; text-align: center; font-weight: 800; }
#scoreScreen .totalScoreLabel { position: absolute; left: 0px; top: 263px; width: 853px; height: 20px; line-height: 38px; font-size: 0.9rem; text-align: center; font-weight: 800; }

#scoreScreen #ss_highestScore { position: absolute; left: 0px; top: 341px; width: 853px; height: 20px; line-height: 38px; font-size: 1.2rem; text-align: center; font-weight: 800; }
#scoreScreen .highestScoreLabel { position: absolute; left: 0px; top: 325px; width: 853px; height: 20px; line-height: 38px; font-size: 0.8rem; text-align: center; font-weight: 800; }

#scoreScreen .scoreStarsContainer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#scoreScreen .totalScoreContainer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

#scoreScreen #btn_ss_backToHome { position: absolute; top: 58px; left: 165px; }
#scoreScreen #btn_ss_toggleSound_on { position: absolute; top: 45px; right: 172px; }
#scoreScreen #btn_ss_toggleSound_off { position: absolute; top: 45px; right: 172px; }
#scoreScreen #btn_ss_stats { position: absolute; bottom: 45px; left: 288px; }
#scoreScreen #btn_ss_nextParty { position: absolute; bottom: 45px; left: 374px; }
#scoreScreen #btn_ss_restart { position: absolute; bottom: 45px; left: 490px; }

#ss_newHighscore { position: absolute; left: 562px; top: 197px; line-height: 22px; font-size: 1.4rem; text-align: center; font-weight: 800; 
	-webkit-transform: translate(-50%,-50%) rotate(-27deg);
	-ms-transform: translate(-50%,-50%) rotate(-27deg);
	transform: translate(-50%,-50%) rotate(-27deg);
}

/* Game Over Style */
#gameOverScreen { width: 853px; height: 480px; }
#gameOverScreen #btn_go_restart { position: absolute; top: 345px; left: 580px; }
#gameOverScreen #btn_go_back { position: absolute; top: 345px; left: 452px; }
#gameOverScreen .score-panel { position: absolute; top: 54px; left: 416px; }
#gameOverScreen .score-panel .score-title { position: absolute; top: 34px; left: 0px; font-size: 1.3rem; font-weight: 700; color: #fff; width: 100%; text-align: center; }
#gameOverScreen .score-panel .score-value { position: absolute; top: 61px; left: 0px; font-size: 4rem; font-weight: 700; color: #2B055A; width: 100%; text-align: center; }
#gameOverScreen .friendship-points-container { position: absolute; top: 191px; left: 37px; }
#gameOverScreen .friendship-points-container .friendship-points-title { position: absolute; top: 10px; left: 0px; font-size: 1.1rem; font-weight: 600; color: #8F83BF; text-align: right; width: 227px; }
#gameOverScreen .friendship-points-container .friendship-points-value { position: absolute; top: 28px; left: 0px; font-size: 2.3rem; font-weight: 600; color: #fff; text-align: right; width: 230px; }
#gameOverScreen .lose-overlay { position: absolute; top: 97px; left: 0px; }
#gameOverScreen .lose-bubble { position: absolute; top: 50px; left: 27px; }
#gameOverScreen .lose-bubble .bubble-text { position: absolute; top: 75px; left: 148px; font-size: 1.5rem; font-weight: 700; color: #004e82; text-align: center; width: 260px; line-height: 28px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* Stats Style */
#statsScreen { width: 853px; height: 480px; }

#statsScreen p { margin: 0; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); }
#statsScreen .title { position: absolute; top: 96px; left: 0; width: 100%; text-align: center; font-size: 1.7rem; font-weight: 700; }

#statsScreen #panelsContainer { position: absolute; left: 204px; top: 137px; width: 468px; text-align: center; }
#statsScreen .levelScorePanel { display: inline-block; width: 150px; height: 112px; position: relative; }

#statsScreen .panelBkg { position: absolute; top: 50px; left: 0px; }

#statsScreen .levelScorePanel .star1-back { width: 30px; height: 29px; position: absolute; top: 34px; left: 12px; }
#statsScreen .levelScorePanel .star2-back { width: 35px; height: 34px; position: absolute; top: 29px; left: 46px; }
#statsScreen .levelScorePanel .star3-back { width: 30px; height: 29px; position: absolute; top: 34px; left: 85px; }

#statsScreen .levelScorePanel .star1 { width: 30px; height: 31px; position: absolute; top: 34px; left: 12px; }
#statsScreen .levelScorePanel .star2 { width: 35px; height: 35px; position: absolute; top: 29px; left: 46px; }
#statsScreen .levelScorePanel .star3 { width: 30px; height: 31px; position: absolute; top: 34px; left: 85px; }

#statsScreen .levelScorePanel .levelNumber { position: absolute; left: 0px; top: 5px; width: 127px; height: 20px; line-height: 25px; font-size: 1.1rem; text-align: center; font-weight: 800; }
#statsScreen .levelScorePanel .score { position: absolute; left: 0px; top: 58px; width: 127px; height: 20px; line-height: 38px; font-size: 1.4rem; text-align: center; font-weight: 800; }
#statsScreen .levelScorePanel .scoreLabel { position: absolute; left: 0px; top: 78px; width: 127px; height: 20px; line-height: 38px; font-size: 0.9rem; text-align: center; font-weight: 800; }

#statsScreen #btn_stats_backToHome { position: absolute; top: 58px; left: 165px; }
#statsScreen #btn_stats_saveToImage { position: absolute; top: 46px; right: 232px; }
#statsScreen #btn_stats_toggleSound_on { position: absolute; top: 45px; right: 172px; }
#statsScreen #btn_stats_toggleSound_off { position: absolute; top: 45px; right: 172px; }
#statsScreen #btn_stats_left { position: absolute; top: 225px; left: 130px; }
#statsScreen #btn_stats_right { position: absolute; top: 210px; right: 130px; }
#statsScreen .dotsNavigation { position: absolute; bottom: 75px; left: 0px; width: 100%; text-align: center; 
	-webkit-transform: rotate(-1.8deg);
	-ms-transform: rotate(-1.8deg);
	transform: rotate(-1.8deg); 
}
#statsScreen .dotsNavigation .dot { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; }
#statsScreen .dotsNavigation .dotContainer { position: relative; display: inline-block; width: 16px; height: 16px; margin-right: 5px; }
#statsScreen .dotsNavigation .circle { position: absolute; top: 0px; left: 0px; width: 16px; height: 16px; }

/* Next level style */
#nextLevelScreen { width: 853px; height: 480px; }
#nextLevelScreen #btn_nl_gotoNext { position: absolute; top: 345px; left: 580px; }
#nextLevelScreen #btn_nl_back { position: absolute; top: 345px; left: 452px; }
#nextLevelScreen .score-panel { position: absolute; top: 54px; left: 416px; }
#nextLevelScreen .score-panel .score-title { position: absolute; top: 34px; left: 0px; font-size: 1.3rem; font-weight: 700; color: #fff; width: 100%; text-align: center; }
#nextLevelScreen .score-panel .score-value { position: absolute; top: 61px; left: 0px; font-size: 4rem; font-weight: 700; color: #2B055A; width: 100%; text-align: center; }
#nextLevelScreen .friendship-points-container { position: absolute; top: 191px; left: 37px; }
#nextLevelScreen .friendship-points-container .friendship-points-title { position: absolute; top: 10px; left: 0px; font-size: 1.1rem; font-weight: 600; color: #8F83BF; text-align: right; width: 227px; }
#nextLevelScreen .friendship-points-container .friendship-points-value { position: absolute; top: 28px; left: 0px; font-size: 2.3rem; font-weight: 500; color: #fff; text-align: right; width: 230px; }
#nextLevelScreen .win-overlay { position: absolute; top: 186px; left: 0px; }
#nextLevelScreen .win-bubble { position: absolute; top: 32px; left: 39px; }
#nextLevelScreen .win-bubble .bubble-text { position: absolute; top: 75px; left: 166px; font-size: 1.5rem; font-weight: 700; color: #004e82; text-align: center; width: 260px; line-height: 22px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* Stats Style */
#statsImageMain { width: 1200px; height: 675px; position: fixed; left: 0px; top: 0px; }
#statsImageMain .background { position: absolute; top: 90px; left: 61px; }
#statsImageMain .gamelogo { position: absolute; top: 22px; left: 403px; }
#statsImageMain .logo { position: absolute; top: 31px; left: 39px; }

#statsImageMain p { margin: 0; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); }

#statsImageMain #statsImagePanelsContainer { position: absolute; left: 140px; top: 162px; width: 1020px; text-align: left; }
#statsImageMain .levelScorePanel { display: inline-block; width: 202px; height: 93px; position: relative; }

#statsImageMain .panel { position: absolute; top: 50px; left: 0px; }
#statsImageMain .panelNumberBkg { position: absolute; top: 64px; left: -23px; }

#statsImageMain .levelScorePanel .star1-back { width: 30px; height: 29px; position: absolute; top: 34px; left: 12px; }
#statsImageMain .levelScorePanel .star2-back { width: 35px; height: 34px; position: absolute; top: 29px; left: 46px; }
#statsImageMain .levelScorePanel .star3-back { width: 30px; height: 29px; position: absolute; top: 34px; left: 85px; }

#statsImageMain .levelScorePanel .star1 { width: 30px; height: 31px; position: absolute; top: 34px; left: 12px; }
#statsImageMain .levelScorePanel .star2 { width: 35px; height: 35px; position: absolute; top: 29px; left: 46px; }
#statsImageMain .levelScorePanel .star3 { width: 30px; height: 31px; position: absolute; top: 34px; left: 85px; }

#statsImageMain .levelScorePanel .levelNumber { position: absolute; left: -27px; top: 69px; width: 45px; height: 20px; line-height: 25px; font-size: 1.4rem; text-align: center; font-weight: 800; }
#statsImageMain .levelScorePanel .score { position: absolute; left: 0px; top: 62px; width: 127px; height: 20px; line-height: 38px; font-size: 1.4rem; text-align: center; font-weight: 800; }
#statsImageMain .levelScorePanel .scoreLabel { position: absolute; left: 0px; top: 79px; width: 127px; height: 20px; line-height: 38px; font-size: 0.9rem; text-align: center; font-weight: 800; }

#statsHighscoreDisplay { position: absolute; top: 145px; width: 100%; text-align: center; }
#statsHighscoreDisplay p { display: inline-block; font-weight: 800; font-size: 1.6rem; }

#btn_statsWindow_backToHome { position: absolute; right: 10px; top: 10px; }

#levelSelectionScreen { width: 853px; height: 480px; }
#levelSelectionScreen #btn_ls_settings { position: absolute; top: 10px; right: 20px; }
#levelSelectionScreen #btn_ls_home { position: absolute; top: 10px; left: 15px; }
#levelSelectionScreen .path-image { position: absolute; }
#levelSelectionScreen .level-button { position: absolute;
	-webkit-transform: translate(-50%, -100%);
	-ms-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
}
#levelSelectionScreen .level-button * { position: absolute; display: block; }
#levelSelectionScreen .level-button-container { position: absolute; width: 100%; height: 100px; font-size: 0; text-align: center; left: 0; top: 0; }
#levelSelectionScreen .level-button .littleLockAnim { background: url(../assets/html/anims/little-lock.png) no-repeat; }
#levelSelectionScreen .level-button.locked { cursor: not-allowed; }
#levelSelectionScreen .level-button.locked * { cursor: not-allowed; }
#levelSelectionScreen .level-button .littleLockAnimContainer { display: none; }
#levelSelectionScreen .level-button.locked .littleLockAnimContainer { display: block !important;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#levelSelectionScreen .level-button p { text-align: center; color: rgb(0, 176, 204); width: 90%; position: absolute; top: 80%; left: 50%; font-size: 0.8rem; font-weight: 700; margin: 0; padding: 0;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#levelSelectionScreen #btn_ls_environment1 { top: 191px; left: 348px; }
#levelSelectionScreen #btn_ls_environment2 { top: 464px; left: 240px; }
#levelSelectionScreen #btn_ls_environment3 { top: 331px; left: 394px; }
#levelSelectionScreen #btn_ls_environment4 { top: 347px; left: 563px; }
#levelSelectionScreen #btn_ls_environment2.locked .littleLockAnimContainer  { left: 51px; top: 5px; }
#levelSelectionScreen #btn_ls_environment3.locked .littleLockAnimContainer  { left: 52px; top: 4px; }
#levelSelectionScreen #btn_ls_environment4.locked .littleLockAnimContainer  { left: 52px; top: 12px; }
#levelSelectionScreen .path1 { top: 105px; left: 134px; }
#levelSelectionScreen .path2 { top: 296px; left: 282px; }
#levelSelectionScreen .path3 { top: 153px; left: 404px; }

#characterSelectionScreen { width: 853px; height: 480px; font-size: 0; background-color: rgba(17, 134, 177, 0.5); }
#characterSelectionScreen .characterButton { position: relative; display: inline-block; background: #FFF; width: 200px; height: 200px; margin: 0 25px 30px 25px; }
#characterSelectionScreen .characterButton .button-text { color: black; }
#characterSelectionScreen .characterButton.locked { background: #888; cursor: not-allowed; }
#characterSelectionScreen .characterButton.locked * { cursor: not-allowed; }
#characterSelectionScreen #btn_cs_close { position: absolute; top: 7px; right: 10px; }
#characterSelectionScreen #btn_cs_play { position: absolute; bottom: 10px; left: 560px; }
#characterSelectionScreen #btn_cs_previous { position: absolute; bottom: 10px; left: 105px; }
#characterSelectionScreen #btn_cs_next { position: absolute; bottom: 10px; left: 260px; }
#characterSelectionScreen #dots_container { position: absolute; top: 430px; width: 100%; text-align: center; }
#characterSelectionScreen #dots_container span { display: inline-block; margin: 1px; }
#characterSelectionScreen .settings-panel { position: absolute; left: 22px; top: 20px; }
#characterSelectionScreen .character-images-container { position: absolute; top: 0; left: 0; width: 60%; height: 100%; overflow: hidden; }
#characterSelectionScreen #bkg_cs_game_panel_inside { display: block; position: relative; left: 16px; top: 14px; width: 777px; height: 409px; border-radius: 7px; overflow: hidden; }
#characterSelectionScreen #bkg_cs_game_panel_inside_character_1,
#characterSelectionScreen #bkg_cs_game_panel_inside_character_2 { position: absolute; bottom: 70px; left: 210px; overflow: visible !important;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
#characterSelectionScreen .cadenas-anim-container { position: absolute; left: 55px; top: 0px; }
#characterSelectionScreen .cadenas-anim-container .cadenas-anim { background: url(../assets/html/anims/cadenas.png) no-repeat; position: absolute; display: block; width: 0; height: 0; }

#characterSelectionScreen #cs_overlay_panel { position: absolute; top: 60px; left: 440px; }
#characterSelectionScreen #character_name { position: absolute; top: 85px; left: 615px; font-size: 1.45rem; font-weight: 700; text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#characterSelectionScreen .statPointContainer { position: absolute; left: 540px; font-size: 0; line-height: 0; }
#characterSelectionScreen .statPointContainer .statPoint { display: inline-block; margin: 0; padding: 0; }
#characterSelectionScreen #heartsPointsContainer { top: 159px; }
#characterSelectionScreen #gemsPointsContainer { top: 242px; }
#characterSelectionScreen #starsPointsContainer { top: 321px; }

#achievementsScreen { width: 853px; height: 480px; }
#achievementsScreen .screen-title { position: absolute; top: 35px; left: 50%; font-size: 2.7rem; font-weight: 700;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#achievementsScreen .screen-subtitle { position: absolute; top: 83px; left: 426px; text-align: center; width: 560px; line-height: 22px; font-weight: 600;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%); 
}
#achievementsScreen #btn_ach_return { position: absolute; top: 10px; left: 15px; }
#achievementsScreen #badges_container { position: absolute; top: 160px; left: 474px; width: 360px; font-size: 0px; line-height: 0px; }
#achievementsScreen .badge-container { position: relative; display: inline-block; width: 120px; height: 90px; }
#achievementsScreen .badge-container span, #big_badge_container span { position: absolute; top: 0; left: 0;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#achievementsScreen #badges_container .badge-container span.heart-6 { top: -40px; left: 20px; cursor: pointer; 
    -webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}
#achievementsScreen #badges_container .badge-container span.heart-6 span { top: 46%; left: 50%; font-size: 1rem; font-weight: 700; cursor: pointer; }
#achievementsScreen #big_badge_container { position: absolute; top: 185px; left: 250px; }
#achievementsScreen #badge_name, #achievementsScreen #badge_description { position: absolute; text-align: center;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}
#achievementsScreen #badge_name { top: 280px; left: 250px; font-size: 1.7rem; font-weight: 700; }
#achievementsScreen #badge_description { top: 320px; left: 250px; max-width: 280px; font-size: 1rem; font-weight: 700; line-height: 21px; }