@font-face{
    font-family: 'AppetiteNew';
    src: url('fonts/APPETITE_NEW.OTF') format("opentype");
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-family: AppetiteNew;
    color: rgb(235, 208, 178);
    line-height: 20px;
    font-size: 20px;

    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.body {
    position:absolute;
	top:50px;
	bottom:74px;
	left:0px;
	right:0px;
    overflow-x: hidden;
	overflow-y:auto;

    background-image: url(../img/BoardBack.jpg);
    background-size: 100% auto;
}

.app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0%;
    left: 0%;
}

#preload {
    width: 1px;
    height: 1px;
    position: absolute;
    bottom: 0;
    z-index: -1;

    background-image: url(../img/BackBtn.png),
    url('../img/PackageLockedBack.png'),
    url('../img/PackageOpenBack.png'),
    url(../img/StarBack.png),
    url(../img/Star.png),
    url('../img/LevelLockedBack.png'),
    url('../img/LevelOpenBack.png'),
    url(../img/PriceBack.png),
    url(../img/BoardTitleBack.png),
    url(../img/MuteBtn.png),
    url(../img/UnMuteBtn.png),
    url(../img/PauseBtn.png),
    url(../img/UnPauseBtn.png),
    url('../img/BoardTopBackLeftSide.jpg'),
    url('../img/BoardTopBackRightSide.jpg'),
    url(../img/BoardTopBack.jpg),
    url('../img/FooterBackLeftSide.jpg'),
    url('../img/BoardBottomBackRightSide.jpg'),
    url('../img/BoardBottomBackLeftSide.jpg'),
    url('../img/FooterBackRightSide.jpg'),
    url(../img/HintBtn.png),
    url(../img/PlayGoldenBtn.png),
    url(../img/ResetBtn.png),
    url(../img/StopBtn.png),
    url(../img/LevelsBtn.png),
    url(../img/NextGoldenBtn.png),
    url(../img/ReplayGoldenBtn.png),
    url(../img/LevelFinishPanel.png),
    url(../img/LevelFailedIcon.png),
    url('../img/BallRed.png'),
    url('../img/BallBlue.png'),
    url('../img/BallGreen.png'),
    url('../img/BallOrange.png'),
    url('../img/GoalRed.png'),
    url('../img/GoalBlue.png'),
    url('../img/GoalGreen.png'),
    url('../img/GoalOrange.png'),
    url('../img/ColorRed.png'),
    url('../img/ColorBlue.png'),
    url('../img/ColorGreen.png'),
    url('../img/ColorOrange.png'),
    url('../img/GoalAchievedRed.png'),
    url('../img/GoalAchievedBlue.png'),
    url('../img/GoalAchievedGreen.png'),
    url('../img/GoalAchievedOrange.png'),
    url('../img/Ceil.png'),
    url('../img/Fixed.png'),
    url('../img/Divide.png'),
    url('../img/ChangeDir90.png'),
    url('../img/ChangeDir180.png'),
    url('../img/StartCeil.png'),
    url(../img/Arrow.png),
    url(../img/Hand.png),
    url(../img/ShopPanel.png)
    ;
}

.screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}

.header {
    position:absolute;
	top:0px;
	left:0px;
	height:74px;
	right:0px;
	overflow:hidden;
	text-align: center;

    background-image: url('../img/HeaderBack.jpg');
    background-size: 1px 100%;
    background-repeat: repeat-x;
}

.header .back,
.header .content {
    width: 100%;
    height: 100%;
    position: absolute;
}

.header .back .side {
    width: 40.9%;
    height: 100%;
    float: left;
    background-image: url('../img/HeaderBackLeftSide.jpg');
    background-size: 100% 100%;
}

.header .back .side.right {
    float: right;
    background-image: url('../img/HeaderBackRightSide.jpg');
}

.header .content .side {
    width: 20%;
    height: 100%;
    float: left;
}

.header .content .middle {
    width: 60%;
    height: 100%;
    float: left;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.header .middle {
    width: 60%;
    float: left;
    height: 20px;
    top: 50%;
    margin-top: -10px;
    position: relative;

    color: #F6E3D5;
    text-shadow: 0 1px 0 #A57159;
}

.footer {
	position:absolute;
	bottom:0px;
	height:74px;
	left:0px;
	right:0px;
	overflow:hidden;

    background-image: url('../img/FooterBack.jpg');
    background-size: 3px 100%;
    background-repeat: repeat-x;
}

.footer .side {
    width: 144px;
    height: 100%;
    background-image: url('../img/FooterBackLeftSide.jpg');
    background-size: 100% 100%;
    float: left;
}

.footer .side.right {
    background-image: url('../img/FooterBackRightSide.jpg');
    float: right;
}

.boardTable {
	position: absolute;
	overflow: hidden;
	top: 0%;

    -webkit-transition: 0.25s;
    transition: 0.25s;
    transition-timing-function: ease-in-out;
}

#boardScreen.finished .boardTable,
#boardScreen.failed .boardTable {
    transform: translate3d(0, 200%, 0);
}

#boardScreen.finished #successOver,
#boardScreen.failed #failOver {
    transform: translate3d(0, 0, 0);
}

.hidden {
    display: none;
}

.forAndroid {
    display: none;
}

body.android .forAndroid {
    display: inherit;
}

/*Screens*/
#screens {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    position: absolute;

    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#screens.home {
    top: 0%;
    left: 0%;
}

#screens.preferences {
    /*top: -100%;
    left: -100%;*/

    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
}

#screens.levelCreator {
    /*top: -200%;
    left: -100%;*/

    -webkit-transform: translate3d(-100%, -200%, 0);
    transform: translate3d(-100%, -200%, 0);
}

#screens.packages {
    /*top: 0%;
    left: -100%;*/

    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

#screens.levels {
    /*top: 0%;
    left: -200%;*/

    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
}

#screens.board {
    /*top: 0%;
    left: -300%;*/

    -webkit-transform: translate3d(-300%, 0, 0);
    transform: translate3d(-300%, 0, 0);
}

#homeScreen {
    /*top: 0%;
    left: 0%;*/

    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#screens.preferences #homeScreen {
    /*top: 100%;*/

    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

#screens.levelCreator #homeScreen {
    /*top: 200%;*/

    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
}

#preferencesScreen {
    /*top: 100%;
    left: 100%;*/

    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
}

#levelCreatorScreen {
    /*top: 200%;
    left: 100%;*/

    -webkit-transform: translate3d(100%, 200%, 0);
    transform: translate3d(100%, 200%, 0);
}

#packagesScreen {
    /*top: 0%;
    left: 100%;*/

    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

#levelsScreen {
    /*top: 0%;
    left: 200%;*/

    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
}

#boardScreen {
    /*top: 0%;
    left: 300%;*/

    -webkit-transform: translate3d(300%, 0, 0);
    transform: translate3d(300%, 0, 0);
}

#screens.board #shopPanel {
    /*left: 300%;*/

    -webkit-transform: translate3d(300%, 0, 0);
    transform: translate3d(300%, 0, 0);
}

/*--------*/
/* Common */
/*--------*/

.w100 {
	width: 100%;
}

.mt10 {
    margin-top: 10px;
}

.mt60 {
    margin-top: 60px;
}

.centerText {
	text-align: center;
}

.animated {
    -webkit-transition: 0.25s;
    transition: 0.25s;
    transition-timing-function: ease-in-out;
}

.margin0auto {
    margin:0 auto;
    width: fit-content;
}

.btnCell {
     float: left;
     text-align: center;
}

/*---------------------*/
/*---------Home--------*/
/*---------------------*/
#homeScreen .body {
    top:0%;
}

.button.settings {
    text-align: center;
}

.button.levelCreator {
    margin-top: 10px;
    text-align: center;
}

.adfree {
    width: 45px;
    height: 45px;
    background-image: url(../img/AdFreeBtn.png);
    background-size: 100% 100%;
    cursor: pointer;
    position: relative;
    left: 15px;
    top: 15px;
    display: none;
}

#body.noads .adfree {
    display: none;
}

#exitBtn {
    width: 40px;
    height: 40px;
    background-image: url(../img/CloseBtn.png);
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
}

.logo {
    width: 35%;
    max-width: 300px;
    background-size: 100% 100%;
    margin: 0 auto;
    top: 10%;
    position: relative;
}

.logo img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

#homePlayBtn {
    width: 108px;
    height: 54px;
    background-image: url(../img/PlayBtn.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0 auto;
    text-align: left;
}

#homePlayBtn span {
    display: inline-block;
    width: 87%;
    color: white;
    line-height: 52px;
    font-size: 24px;
    text-align: center;
    text-shadow: 1px 4px 1px #73381E;
}

#homeScreen .gameProgressBack {
    display: none;
}

#homeEmailBtn {
    background-image: url(../img/MailBtn.png);
    left: 50%;
    margin-left: -22px;
}

#homeRateBtn {
    background-image: url(../img/RateBtn.png);
    left: 50%;
    display: none;
}

#homeShopBtn {
    background-image: url(../img/ShopBtn.png);
    right: 25%;
    display: none;
}

#homeLevelCreatorBtn {
    background-image: url(../img/LevelCreatorBtn.png);
    right: 20%;
    display: none;
}

/*---------------------*/
/*--------Board--------*/
/*---------------------*/

/* Induction */
#inductionSubScreen {
    transform: translate3d(-100%, 0, 0);
}

#gameSubScreen {
    transform: translate3d(0, 0, 0);
}

#inductionSubScreen, #gameSubScreen {
    -webkit-transition: 0.25s;
    transition: 0.25s;
    transition-timing-function: ease-in-out;
}

#boardScreen.induction #inductionSubScreen {
   transform: translate3d(0, 0, 0);
}

#boardScreen.induction #gameSubScreen {
   transform: translate3d(100%, 0, 0);
}

/* Gameplay */

#boardHintBtnHints {
    margin-right: 10px;
    text-align: right;
    font-size: 35px;
    line-height: 47px;
}

#boardHintBtnHints.tripple {
    font-size: 24px;
    line-height: 45px;
}

.paused #board {
    pointer-events: none;
    opacity: 0.5;
}

.paused #boardFooter .button {
    pointer-events: none;
}

/* Top */
#boardScreen .header {
    width: 100%;
    height: 78px;
}

#boardScreen .header .side {
    height: 100%;
    width: 110px;
    float: left;
    background-image: url('../img/BoardTopBackLeftSide.jpg');
    background-size: 100% 100%;
    font-size: 10px;
    line-height: 9px;
}

#boardScreen .header .side.right {
    background-image: url('../img/BoardTopBackRightSide.jpg');
    float: right;
}

#boardScreen .header .middle {
    height: 100%;
    width: 140px;
    position: initial;
    margin: 0 auto;
    margin-top: 0px;
    float: none;
}

#boardScreen .body {
    top: 78px;
}

#boardPauseBtn {
    display: none;
}
#boardScreen.started #boardPauseBtn,
#boardScreen.fast #boardPauseBtn {
    display: inherit;
}

/*header*/
#boardTop {
    background-image: url(../img/BoardTopBack.jpg);
    background-size: 4px 100%;
    background-repeat: repeat-x;

    display: block;
}

/* moves */
.levelMoves {
    width: 80%;
    height: 100%;
}

.actualMoves {
    height: 40%;
    text-align: center;
    margin-top: 5%;
    overflow: hidden;
}

#actualMoveLabel {
    margin-top: 1%;
}

#actualMove {
    margin-top: 6%;
}

.otherMoves {
    height: 57%;
}

.targetMoves {
    margin-top: 5%;
}

.bestMoves {
    margin-top: 5%;
}

.bigNumber {
    font-size: 180%;
    line-height: 80%;
}

/* pack name */
.packName {
    width: 69%;
    max-width: 200px;
    height: 27%;
    text-align: center;
    background-image: url(../img/BoardTitleBack.png);
    background-size: 100% 80%;
    margin: 0 auto;
    color: rgb(249,231,221);
    background-position-y: bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    font-size: 13px;
    line-height: 27px;
}

/* stars */
.levelStars {
	width: 100%;
    height: 73%;
}

.levelStars .stars {
    margin: 5% auto;
    width: fit-content;
    height: 91px;
}

.clearAfter::after {
	content: '';
	display: block;
	clear: both;
}

.boardStar {
	background-image: url(../img/StarBack.png);
    width: 44px;
    height: 41px;
    float: left;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.boardStar .earnedStar {
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}

.stars.earned1 .boardStar.first .earnedStar,
.stars.earned2 .boardStar.first .earnedStar,
.stars.earned3 .boardStar.first .earnedStar,
.stars.earned2 .boardStar.second .earnedStar,
.stars.earned3 .boardStar.second .earnedStar,
.stars.earned3 .boardStar.third .earnedStar {
	background-image: url(../img/Star.png);
}

.boardStar.small {
    height: 30px;
    width: 31px;
    margin-top: 14px;
}

.boardStar.small.left {

}

.boardStar.small.right {
    margin-left: -3%;
}

.boardStar.big {
    margin-left: -3%;
}

/* over screen stars */
#successOverStars.stars {
    width: 90%;
    height: 95%;
}

#successOverStars .boardStar{
    width: 49%;
    height: 85%;
}

#successOverStars .boardStar.small {
    height: 61%;
    width: 36%;
    margin-top: 19%;
}

#successOverStars .boardStar.small.left {
    margin-left: -8%;
}

#successOverStars .boardStar.small.right {
    margin-right: -8%;
}

#successOverStars .boardStar .earnedStar {
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* top buttons */
.levelButtons {
    height: 55%;
}

.levelButtons .button {
    background-size: 100% 100%;
    float: right;
    margin-right: 6%;
    width: 33px;
    height: 33px;
    margin-top: 5%;
}

#boardMuteBtn,
#inductionMuteBtn {
    background-image: url(../img/MuteBtn.png);
}

.muted #boardMuteBtn,
.muted #inductionMuteBtn {
    background-image: url(../img/UnMuteBtn.png);
}

#boardPauseBtn {
    background-image: url(../img/PauseBtn.png);
}

.paused #boardPauseBtn {
    background-image: url(../img/UnPauseBtn.png);
}

/* current level */
.levelNumber {
    height: 45%;
    text-align: right;
}

.levelNumber .label {
    line-height: 280%;
}

.currentLevel {
    margin-top: 3%;
}

/*board*/
#board {

}

/* footer and buttons*/
#boardFooter {
    background-image: url(../img/BoardBottomBack.jpg);
    background-size: 5px 100%;
    background-repeat: repeat-x;
}

#boardScreen .footer .side {
    height: 100%;
    width: 144px;
    background-image: url('../img/BoardBottomBackLeftSide.jpg');
    background-size: 100% 100%;
}

#boardScreen .footer .side.right {
    background-image: url('../img/BoardBottomBackRightSide.jpg');
}

#boardScreen .footer .middle {
    height: 100%;
    width: 20%;
    float: none;
    margin: 0 auto;
}

.footer .button {
    cursor: pointer;
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute;
    top: 0;

    width: 45px;
    height: 45px;

    margin-left: -50px;
    margin-right: -50px;

    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);

    transition: 0.2s;
    transition-timing-function: ease-in-out;
}

#boardScreen.induction .footer .button.induction,
#boardScreen.ready .footer .button.ready,
#boardScreen.started .footer .button.started,
#boardScreen.fast .footer .button.fast,
#boardScreen.finished .footer .button.finished,
#boardScreen.failed .footer .button.failed,
#boardScreen.noBoard .footer .button.noBoard,
#boardScreen.paused .footer .button.paused,
.footer .button.always {
    -webkit-transform: translate3d(0, 37%, 0);
    transform: translate3d(0, 37%, 0);
}

#boardScreen .footer .middle .button {
    position: absolute;
    left: 50%;
    margin-left: -23px;
    overflow: visible;
}

#boardScreen .footer .startGameBtn {
    background-image: url(../img/PlayGoldenBtn.png);
    background-size: 100% 100%;
}

#boardScreen .footer #startGame.button .startGameBtn {
    transition: margin-left 0.2s;
    transition-timing-function: ease-in-out;
    width: 100%;
    height: 100%;
}

#boardScreen .footer #startGame.button .startGameBtn.first {
    margin-top: 0px;
}

#boardScreen .footer #startGame.button .startGameBtn.second {
    margin-top: -100%;
}

#boardScreen.started .startGameBtn.first,
#boardScreen.fast .startGameBtn.first {
    margin-left: 10px;
}

#boardScreen.started .startGameBtn.second,
#boardScreen.fast .startGameBtn.second {
    margin-left: -10px;
}

#boardScreen.fast #startGame {
    pointer-events: none;
}

#packagesBackBtn,
#levelsBackBtn,
#boardBackBtn{
    background-image: url(../img/BackBtn.png);
    left: 60px;
}

#boardBackBtn{
    left: 60px;
}

#levelsBtn {
    background-image: url(../img/LevelsBtn.png);
    left: 120px;
}

#boardUndoBtn {
    background-image: url(../img/ReplayBtn.png);
    left: 120px;
}

#boardSkipBtn {
    background-image: url(../img/ReplayBtn.png);
    right: 120px;
}

#boardResetBtn, #boardResetBtn2 {
    background-image: url(../img/ResetBtn.png);
    left: 120px;
}

#boardResetBtn2 {
    left: unset;
    right: 120px;
}

#boardStopBtn {
    background-image: url(../img/StopBtn.png);
    left: 120px;
}

#boardScreen .successNextBtn {
    background-image: url(../img/NextGoldenBtn.png);
    width: 130%;
    height: 110%;
    background-size: 100% 100%;
    margin-left: -20%;
    margin-top: -5%;
}

#boardScreen .failReplayBtn {
    background-image: url(../img/ReplayGoldenBtn.png);
    width: 130%;
    height: 110%;
    background-size: 100% 100%;
    margin-left: -20%;
    margin-top: -5%;
}

#boardScreen .footer #boardHintBtn.button {
    width: 83px;
    background-image: url(../img/HintBtn.png);
    left: unset;
    right: 84px;
}

#boardScreen.ready.undo #boardBackBtn {
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
}

#boardScreen.ready.undo #boardResetBtn {
    left: 60px;
}

/* board advice */
#boardAdvice {
    width: 100%;
    height: 40px;

    background-image: url(../img/InfoBack.png);
    background-size: 85% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;

    bottom: -30%;

    transition: all 0.2s;
    transition-timing-function: ease-in-out;
}

#boardAdviceText {
    margin: 5% auto;
    font-size: 130%;
    line-height: 130%;
    text-align: center;
}


/* Game over */
.gameOver {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0%;
    bottom: 74px;
    position: absolute;
}

.blackHover {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0%;
    bottom: 74px;
    background-color: #000;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

#boardScreen.failed .blackHover,
#boardScreen.finished  .blackHover {
    pointer-events: all;
    opacity: 0.5;
}

/* Success over */
#successOver.gameOver {
    transform: translate3d(100%, 0, 0);
}

#failOver.gameOver {
    transform: translate3d(-100%, 0, 0);
}

.panel .levelStars {
    height: 36%;
    width: 72%;
    margin: 1% auto;
}

#levelEarnings {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#levelEarnings .icon {
    display: inline-block;
    background-repeat: no-repeat;
    padding: 0 65px;
    height: 50px;
    background-size: auto 100%;
    margin-top: 15px;
}

#levelEarnings .amount {
    font-size: 50px;
    line-height: 50px;
}

#levelEarnings .earnedStars .icon {
    background-image: url(../img/Star.png);
    padding-top: 0px;
}

#levelEarnings .earnedHints .icon {
    background-image: url(../img/HintIcon.png);
    padding-top: 0px;
    padding-left: 10%;
    background-size: auto 90%;
    background-position: left;
}

#levelEarnings .starsAndHints,
#levelEarnings .awardsInfo {
    height: 100%;
    transition: margin-top .5s;
    margin-bottom: 10px;
}

#levelEarnings .awardsInfo {
    font-size: 20px;
}

#awardsEarnedMessage {
    padding-top: 18px;
    display: inline-block;
}

#levelEarnings .awardsInfo .moves {
    color: #D6D6D4;
    text-shadow: 0 2px 1px #6C6C6C;
    font-size: 183%;
    line-height: 100%;
}

#levelEarnings .earnedStars,
#levelEarnings .earnedHints {
    height: 100%;
    width: 100%;
    transition: left .5s;
    left: 0;
    position: absolute;
}

#levelEarnings .earnedHints {
    left: 100%;
}

#levelEarnings .earnedHints .hints {
    width: inherit;
}

#starsAndHints.hints .earnedStars{
    left: -100%;
}

#starsAndHints.hints .earnedHints{
    left: 0;
}

#levelEarnings.stars .awardsInfo {
    margin-top: -100px;
}

#levelEarnings.progress .awardsInfo {
    margin-top: -200px;
}

#levelEarnings .awardIcon {
    background-image: url(../img/Award.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: inline-block;
}

#levelEarnings .awardDoubleIcon {
    background-image: url(../img/AwardDouble.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: inline-block;
}

#levelEarnings .awardIcon::before {
    content: ' ';
    display: inline-block;
    width: 1.4em;
}

#levelEarnings .awardDoubleIcon::before {
    content: ' ';
    display: inline-block;
    width: 1.6em;
}

#hintsEarnedReason {
    font-size: 80%;
}

/* Fail over */
.mainText {
    text-align: center;
    margin-top: 82px;
    font-weight: bold;
    text-shadow: 0 2px 0px #885C41, 0 0 5px #000000;
    font-size: 25px;
    height: 40px;
}

span.bigo  { font-size: 60px; }
span.avgo  { font-size: 45px; }
span.smalo { font-size: 30px; }

.secondaryText {
    text-align: center;
    margin-top: 7px;
    font-size: 20px;
    text-shadow: 0 2px 0px #885C41, 0 0 5px #000000;
}

.failureIcon {
    width: 130px;
    height: 130px;
    margin: 28px auto 46px auto;
    background-image: url(../img/LevelFailedIcon.png);
    background-size: 100% 100%;
}

.panelInfo {
    height: 100px;
    text-align: center;
    padding: 0 70px;
    overflow: hidden;
    line-height: 30px;
    position: absolute;
}

span.redPercent {
    color: #E11419;
    font-size: 28px;
    line-height: 28px;
}

/**********/
/** Ball **/
/**********/
div.ball {
    top: 0;
    left: 0;
	width: 40px;
    height: 40px;
    position: absolute;

    background-size: 100% 100%;

    transition: 0.11s;
    transition-timing-function: linear;
}

#boardScreen.fast div.ball {
    transition: 0.04s;
}

div.ball.teleport {
    z-index: -1;
}

div.ball.achieved {
    display: none;
}

div.ball.orange {
    background-image: url('../img/BallOrange.png');
}

div.ball.blue {
    background-image: url('../img/BallBlue.png');
}

div.ball.green {
    background-image: url('../img/BallGreen.png');
}

div.ball.red {
    background-image: url('../img/BallRed.png');
}

/* DIrection change */

div.cell {
    background-image: url('../img/Ceil.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.moveInProgress div.cell {
    pointer-events: none;
}

div.cell.moveDenied {
    filter: saturate(1);
    animation-name: invert-back;
    animation-duration: 1s;

}

#boardScreen.ready #cell-1-1.cell {
    background-image: url('../img/StartCeil.png');
}

.animatedCell {
    -webkit-transition: 0.2s;
    transition: 0.2s;
    transition-timing-function: ease-in-out;
}

div.cell.fixed .content .subContent .fixed {
    background-image: url('../img/Fixed.png');
}

div.cell .content,
div.cell .content .subContent,
div.cell .content .subContent .fixed {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
    background-repeat: no-repeat;
}

div.cell.direction.right .content {
    background-image: url('../img/ChangeDir180.png');
}

div.cell.direction.left .content {
    background-image: url('../img/ChangeDir180.png');
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
div.cell.direction.left .content .subContent {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

div.cell.direction.up .content {
    background-image: url('../img/ChangeDir180.png');
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}
div.cell.direction.up .content .subContent {
    -webkit-transform: rotate(-270deg);
	transform: rotate(-270deg);
}

div.cell.direction.down .content {
    background-image: url('../img/ChangeDir180.png');
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
div.cell.direction.down .content .subContent {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

div.cell.direction.down.left .content {
    background-image: url('../img/ChangeDir90.png');
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
div.cell.direction.down.left .content .subContent {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

div.cell.direction.up.left .content {
    background-image: url('../img/ChangeDir90.png');
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
div.cell.direction.up.left .content .subContent {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

div.cell.direction.up.right .content {
    background-image: url('../img/ChangeDir90.png');
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
div.cell.direction.up.right .content .subContent {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

div.cell.direction.down.right .content {
    background-image: url('../img/ChangeDir90.png');
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}
div.cell.direction.down.right .content .subContent {
	-webkit-transform: rotate(-270deg);
	transform: rotate(-270deg);
}

/* teleports */
div.cell.teleport.blue .content {
    background-image: url('../img/TeleportBlue.png');
}

div.cell.teleport.red .content {
    background-image: url('../img/TeleportRed.png');
}

div.cell.teleport.green .content {
    background-image: url('../img/TeleportGreen.png');
}

div.cell.teleport.orange .content {
    background-image: url('../img/TeleportOrange.png');
}

/* goals */

/**-red-**/
div.cell.goal.red .content {
    background-image: url('../img/GoalRed.png');
}

div.cell.goal.achieved.red .content {
    background-image: url('../img/GoalAchievedRed.png');
}

/**-green-**/
div.cell.goal.green .content {
	background-image: url('../img/GoalGreen.png');
}

div.cell.goal.achieved.green .content {
    background-image: url('../img/GoalAchievedGreen.png');
}

/**-blue-**/
div.cell.goal.blue .content {
	background-image: url('../img/GoalBlue.png');
}

div.cell.goal.achieved.blue .content {
    background-image: url('../img/GoalAchievedBlue.png');
}

/**-orange-**/
div.cell.goal.orange .content {
    background-image: url('../img/GoalOrange.png');
}

div.cell.goal.achieved.orange .content {
    background-image: url('../img/GoalAchievedOrange.png');
}

/* Type changes */
div.cell.type.orange .content {
    background-image: url('../img/ColorOrange.png');
}

div.cell.type.blue .content {
    background-image: url('../img/ColorBlue.png');
}

div.cell.type.green .content {
    background-image: url('../img/ColorGreen.png');
}

div.cell.type.red .content {
    background-image: url('../img/ColorRed.png');
}

/* Divider */
div.cell.divide .content {
    background-image: url('../img/Divide.png');
}

/* Star */
div.cell.star .content .subContent {
    background-image: url('../img/Star.png');
    background-size: 56% 50%;
    background-position: center;
}

/* Failure highlite involved */
.failed .cell {
    opacity: 0.5
}

.failed .cell.involved {
    opacity: 1
}

/* Success highlite achieved */
.finished .cell {
    opacity: 0.5
}

.finished .cell.goal.achieved {
    opacity: 1
}

/* Options */
.options .option {
    width: 50px;
    height: 50px;
    float: left;
    margin: 5px 0 0 5px;
    position: inherit;
}

.option.selected {
    opacity: 0.5;
}

.clear {
    clear: both;
}

/* some options are hidden by default */
.option.divide,
.option.green,
.option.blue,
.option.red,
.option.orange {
    display: none;
}

.option.goal.red,

.options.lcolor2 .option.red,
.options.lcolor2 .option.green,

.options.lcolor3 .option.blue,
.options.lcolor3 .option.red,
.options.lcolor3 .option.green,

.options.lcolor4 .option.orange,
.options.lcolor4 .option.blue,
.options.lcolor4 .option.red,
.options.lcolor4 .option.green,

.options.ldiv .option.divide
{
    display: inherit;
}

/*---------------------*/
/*-------Packages------*/
/*---------------------*/

/* header */
#packagesScreen .header .middle,
#levelsScreen .header .middle,
#levelCreatorScreen .header .middle {
    height: 50px;
    margin-top: -25px;
}

#packagesScreen .body,
#levelsScreen .body,
#levelCreatorScreen .body {
    top: 74px;
}

#packagesScreen.waiting .package.waiting,
#levelsScreen.waiting .level.waiting {
    display: none
}

.headerStars {
    width: fit-content;
    top: 25%;
    position: relative;
    float: right;
    margin-right: 18%;
}

.headerStars .label {
    font-size: 56%;
    line-height: 90%;
    font-weight: normal;
    text-align: right;
}

.headerStars .amount {
    font-size: 130%;
    line-height: 100%;

    background-image: url('../img/Star.png');
    background-size: 17px 16px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 18px;
}

/* body */
.package {
    margin: 40px auto;
    width: 80%;
    max-width: 470px;
    height: 114px;
    background-image: url('../img/PackageLockedBack.png');
    background-size: 100% 100%;
}

.package.open {
    background-image: url('../img/PackageOpenBack.png');
}

.packageName {
    margin: 0 auto;
    text-align: center;
    color: #E0DEDF;
    overflow: hidden;

    height: 38%;
    line-height: 240%;
    font-size: 85%;
}

.packageName > .name {
    display: none;
}

.packageName > .index {
    line-height: 38px;
    font-size: 30px;
}

.packageDetails {
    margin-top: 3%;
}

.packageDetails .stats {
    display: none;
    margin: 0 auto;
    height: 24px;
    line-height: 100%;
    text-align: center;
}

.packageDetails .stats .details {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

.packageDetails .stats .details .stars,
.packageDetails .stats .details .awards {
    background-size: auto 100%;
    background-position: left;
    background-repeat: no-repeat;
}

.packageDetails .stats .details .stars::before,
.packageDetails .stats .details .awards::before {
    content: ' ';
    display: inline-block;
    width: 16%;
}

.packageDetails .stats .details .stars {
    background-image: url(../img/Star.png);
}

.packageDetails .stats .details .stars::after {
    content: "\a";
    white-space: pre;
}

.packageDetails .stats .details .awards {
    background-image: url(../img/Award.png);
    margin-left: 5%;
}

.packageDetails .locked {
    margin: 0 auto;
    text-align: center;

    line-height: 200%;
    font-size: 90%;
    color: white;
    text-shadow: 0px 2px 0px grey;
}

.package.open .packageDetails .stats {
    display: inherit;
}

.package.open .packageDetails .locked {
    display: none;
}

#packageLockedPanel {
    width: 75%;
    height: 10%;
    position: absolute;
    bottom: 0;
    right: 0;
}

#unlockText {
    color: #D6D6D4;
    text-shadow: 0 2px 1px #6C6C6C;
    font-size: 93%;
    line-height: 150%;
    margin-bottom: 3px;
    height: 32%;
}

#unlockText .previousLevelName {
    color: #F4D7C5;
    text-shadow: 0 2px 1px #794724;
}

#unlockText .previousLevelNumber {
    font-size: 140%;
}

#unlockText .previousLevelNumber.crossed {
    text-decoration: line-through;
}

#unlockText .starIcon,
#unlockText .awardIcon {
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: inline-block;
    height: 75%;
    line-height: 125%;
}

#unlockText .starIcon::before,
#unlockText .awardIcon::before {
    content: ' ';
    display: inline-block;
    width: 1.4em;
}

#unlockText .starIcon {
    background-image: url(../img/Star.png);
}

#unlockText .awardIcon {
    background-image: url(../img/Award.png);
}

#unlockPackageBtn {
    height: 50%;
}

#unlockPackageBtn .text {
    float: left;
    width: 65%;
    line-height: 160%;
    font-size: 140%;
}

#unlockPackageBtn .price {
    background-image: url(../img/PriceBack.png);
    background-size: 100% 100%;

    float: left;
    width: 30%;
    line-height: 140%;
    font-size: 140%;
    text-align: center;
    height: 93%;
}

/*---------------------*/
/*-------Levels--------*/
/*---------------------*/
.level {
    float: left;
    background-image: url('../img/LevelLockedBack.png');
    background-size: 100% 100%;

    margin-top: 7px;
    margin-bottom: 7px;
    margin-left: 14px;
    width: 85px;
    height: 85px;
}

.level.open {
    background-image: url('../img/LevelOpenBack.png');
}

.levelName {
    width: 100%;
    color: #D6D6D4;
    text-shadow: 0 2px 1px #6C6C6C;
    text-align: center;

    margin: 30% auto 0 auto;
    font-size: 35px;
    line-height: 35px;
}

.level.open .levelName {
    color: #F4D7C5;
    text-shadow: 0 2px 1px #794724;
    margin-top: 15%;
}

.levelDetails {
    display: none;
}

.level.open .levelDetails {
    display: inherit;
    margin-top: 11%;
}

.levelDetails .stars {
    margin: 0 auto;
    width: fit-content;
}

.levelStar {
    background-image: url(../img/StarBack.png);
    background-size: 100% 100%;
    float: left;

    width: 22px;
    height: 19px;
}

.levelStar.left {
    margin-right: -2%;
}

.levelStar.center {
    margin-top: -15%;
}

.levelStar.right {
    margin-left: -2%;
}

.levelStar.earned {
    background-image: url(../img/Star.png);
}

.level .hint {
    width: 23%;
    height: 24%;
    position: relative;
    margin-top: -64%;
    margin-left: 73%;

    background-image: url(../img/HintIcon.png);
    background-size: 100% 100%;
}

.level .award {
    width: 27px;
    height: 28px;
    position: relative;
    margin-top: -88%;
    margin-left: 77%;

    background-image: url(../img/Award.png);
    background-size: 100% 100%;
}

.level .award2 {
    width: 27px;
    height: 28px;
    position: relative;
    margin-top: -88%;
    margin-left: 82%;

    background-image: url(../img/AwardDouble.png);
    background-size: 100% 100%;
}

/* Unlock level */
.lockedOnly {
    display: none;
}

.locked .lockedOnly {
    display: inherit;
}

.fullscreen {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fullscreen .center {
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 200px;
    top: 50%;
}

/*---------------------*/
/*----Level creator----*/
/*---------------------*/
#levelCreatorScreen .body {
	bottom:206px;
}

#levelCreatorScreen .footer {
	height:206px;
	overflow: auto;
}

#levelCreatorScreen select,
#levelCreatorScreen button {
    border: solid white 1px;
}

/*---------------------*/
/*---------Hint--------*/
/*---------------------*/
#hint,
#inductionHint {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;

    -webkit-transition: 0.5s;
    transition: 0.5s;
    transition-timing-function: ease-in-out;
}

#inductionHint {
    width: 16.667%;
    height: 16.667%;
}

#hint .hand,
#inductionHint .hand {
    width: 100%;
    height: 100%;
    background-image: url(../img/Hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: top 1s, left 1s;
}

#hint.up .hand {
    animation-name: handUp;
    opacity: 1;
}

#hint.down .hand {
    animation-name: handDown;
    opacity: 1;
}

#hint.left .hand {
    animation-name: handLeft;
    opacity: 1;
}

#hint.right .hand {
    animation-name: handRight;
    opacity: 1;
}

#hint.click .hand {
    animation-name: handClick;
    opacity: 1;
    animation-direction: normal;
    top: 0;
    left: 0;
}

#hint .movement,
#inductionHint .movement {
    width: 100%;
    height: 100%;
    background-image: url(../img/Arrow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
    animation-name: move;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    display: none;
}

#hint.up .movement {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    top: -50%;
    display: inherit;
}

#hint.down .movement {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 50%;
    display: inherit;
}

#hint.left .movement {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    left: -50%;
    display: inherit;
}

#hint.right .movement {
    left: 50%;
    display: inherit;
}

#hint.click .movement {
    background-image: url(../img/Click.png);
    animation-name: click;
    animation-direction: normal;
    display: inherit;
}

@keyframes handUp {
    from {top: 50%;}
    to {top: -50%;}
}

@keyframes handDown {
    from {top: 50%;}
    to {top: 150%;}
}

@keyframes handLeft {
    from {left: 50%;}
    to {left: -50%;}
}

@keyframes handRight {
    from {left: 50%;}
    to {left: 150%;}
}

@keyframes handClick {
    0% {background-size: 100%;}
    5% {background-size: 90%;}
    10% {background-size: 100%;}
    100% {background-size: 100%;}
}

@keyframes move {
    0% {opacity: 0;}
    10% {opacity: 1;}
    100% {opacity: 1;}
}

@keyframes click {
    0% {background-size: 0%; opacity: 0; top: 0%; left: 0%}
    6% {background-size: 0%; opacity: 0; top: 0%; left: 0%}
    55% {background-size: 100%; opacity: 1; top: -50%; left: -50%}
    100% {background-size: 100%; opacity: 0; top: -50%; left: -50%}
}

@keyframes invert-back {
    0% {filter: saturate(5.5)}
    10% {filter: saturate(5)}
    20% {filter: saturate(4.5)}
    30% {filter: saturate(4)}
    40% {filter: saturate(3.5)}
    50% {filter: saturate(3)}
    60% {filter: saturate(2.5)}
    70% {filter: saturate(2)}
    80% {filter: saturate(1.5)}
    90% {filter: saturate(1)}
    100% {filter: saturate(1)}
}

/*-----------------*/
/*-----------------*/
/*-------Panel-----*/
/*-----------------*/
/*-----------------*/
.panel {
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(../img/LevelFinishPanel.png);
    background-size: 100% auto;
    background-repeat: no-repeat;

    width: 430px;
    height: 440px;
    margin-left: -215px;
    margin-top: -220px;
    line-height: 19.2px;
    font-size: 19.2px;

    transform: scale(0.5);
}

.panel .pheader{
position: relative;
text-align: center;
color: #E4E3DF;

width: 53.88%;
height: 7%;
line-height: 270%;
margin: 0 auto;
}

.panel .pcontent{
position: absolute;
width: 100%;
height: 100%;
}

/****Watch Video****/
.watchVideo {
    background-image: url('../img/WatchVideoBack.png');
    background-size: 100% 100%;
    width: 100%;
    height: 15.5%;
    position: absolute;
    bottom: 0%;
    padding-top: 3%;

    display: none;
}

.online .watchVideo {
    display: inherit;
}

.watchVideo .wideWoodBtn {
    width: 77%;
    height: 95%;
}

.watchVideo .wideWoodBtn .icon {
    width: 33%;
    margin-left: -5%;
}

.watchVideo .wideWoodBtn .text {
    width: 40%;
    font-size: 73%;
    margin-left: -10%;
    text-align: center;
    line-height: 135%;
    padding-top: 5.5%;
}

.watchVideo .wideWoodBtn .text span.plus {
    font-size: 124%;
    color: red;
}

.watchVideo .wideWoodBtn .text span {
    display: inline-block;
    margin-top: 4px;
}

.watchVideo .wideWoodBtn .price {
    width: 42%;
    float: right;
    text-align: center;
    height: 62%;
    top: 22%;
    color: white;
    line-height: 300%;
    text-shadow: 0 1px 1px #000;
}

/*-----------------*/
/*-----------------*/
/*-------Shop------*/
/*-----------------*/
/*-----------------*/

/* Wide Wood Button */
.wideWoodBtn {
    width: 200px;
    height: 40px;
    background-size: 100% 100%;
    margin: 0 auto;
}

.wideWoodBtn::after {
    content: '';
    display: block;
    clear: both;
}

.wideWoodBtn .icon {
    float: left;
    width: 0%;
    height: 100%;
}

.wideWoodBtn .text {
    float: left;
    width: 70%;
    height: 100%;
    line-height: 120%;
    font-size: 120%;
    padding-top: 13px;
}

.wideWoodBtn .price {
    position: relative;
    float: left;
    width: 30%;
    height: 50%;
    top: 24%;
    line-height: 125%;
}

/******* Shop Panel *******/
#shopPanel {
    display: none;
}

#screens.shop #shopPanel {
    display: inherit;
}

#shopPanel .blackHover {
    bottom: 0;
}

#screens.shop #shopPanel .blackHover {
    opacity: 0.7;
    pointer-events: all;
}

#shopPanel .panel {
    top: 10%;
    height: 675.2px;
    background-image: url(../img/ShopPanel.png);
}

#shopPanel .panel .mainText {
    font-size: 114%;
    text-shadow: none;
    margin-top: 13%;
    margin-bottom: 6%;
    height: 5%;
}

#shopPanel .panel .mainContent {
    height: 80%;
    position: relative;
    bottom: 0.3%;
}

#shopPanel span.hintIcon {
    background-image: url(../img/HintIcon.png);
    background-size: 100% 100%;
    width: 31px;
    height: 30px;
    display: inline-block;
    margin-bottom: -11px;
}

#shopPanel .wideWoodBtn {
    width: 90%;
    margin-top: 1.3%;
    height: 15.8%;
    background: none;
}

#shopPanel .wideWoodBtn .icon {
    width: 35%;
}

#shopPanel .wideWoodBtn .text {
    width: 29%;
    line-height: 60px;
    font-size: 119%;
    padding-top: 0px;
}

#shopPanel .wideWoodBtn .price {
    width: 30%;
    line-height: 184%;
    text-align: center;
    color: white;
    font-size: 116%;
    font-weight: normal;
}

#shopPanel .wideWoodBtn .wraper {
    line-height: 135%;
    margin-top: 8%;
}

#shopPanel .wideWoodBtn span.amount {
    font-size: 130%;
}


#shopPanel .wideWoodBtn span.plus {
    font-size: 145%;
    color: red;
    margin-left: -3px;
}

#restoreBtn {
    background-image: url(../img/RestoreBtn.png);
    background-size: 100% 100%;
    width: 28.1225%;
    height: 10%;
    margin: 0 auto;
    margin-top: 4%;
    text-align: right;
    line-height: 300%;
    padding-right: 4%;
}

#shopCloseBtn {
    background-image: url(../img/CloseBtn.png);
    background-size: 100% 100%;
    width: 12%;
    height: 7.9%;
    position: absolute;
    right: -2%;
    top: 0;
}

@media (min-height: 370px) {
    .logo {
        width: 50%;
    }
}

@media (min-height: 560px) {
    .panel {
        transform: scale(0.7);
    }

    .logo {
        width: 80%;
        top: 15%;
        max-width: 600px;
    }
}

@media (min-height: 800px) and (min-width: 440px) {
    .panel {
        transform: none;
    }
}

@media (min-width: 610px) {
    .level {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 40px;
        width: 152px;
        height: 152px;
    }

    .levelName {
        font-size: 50px;
        line-height: 50px;
    }

    .levelStar {
        width: 43px;
        height: 39px;
    }

    .level .award {
        width: 35px;
        height: 37px;
    }

    .level .award2 {
        width: 35px;
        height: 37px;
    }

    #boardScreen .header {
        height: 156px;
    }

    #boardScreen .header .side {
        height: 100%;
        width: 219px;
        font-size: inherit;
        line-height: inherit;
    }

    #boardScreen .header .middle {
        width: 292px;
    }

    .packName {
        font-size: 23px;
        line-height: 57px;
    }

    .levelButtons .button {
        width: 67px;
        height: 67px;
    }

    .boardStar {
        width: 88px;
        height: 82px;
    }

    .boardStar.small {
        height: 62px;
        width: 66px;
        margin-top: 25px;
    }

    .packageName > .index {
        display: none;
    }

    .packageName > .name {
        display: inherit;
    }

    .packageDetails .stats .details .stars::after {
        content: "";
    }

    .packageDetails .stats {
        line-height: 150%;
    }
}

@media (min-width: 610px) and (min-height: 560px) {
    #boardScreen .body {
        top: 156px;
    }
}