@font-face {
        font-family: "AvenirNextCondensed-Regular";
    src: url('../fonts/AvenirNextCondensed-Regular.ttf') format("truetype");
}

html,
body {
    color: #ffe33e;
    background: #0d1958;
    overflow: hidden;
    margin: 0;
    padding: 0;
    image-rendering: optimizeSpeed; /* Older versions of FF */
    image-rendering: -moz-crisp-edges; /* FF 6.0+ */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */
    image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
    image-rendering: crisp-edges; /* Possible future browsers. */
    -ms-interpolation-mode: nearest-neighbor; /* IE (non standard naming) */
    image-rendering: pixelated; /* Chrome 41 */
    font-family: 'AvenirNextCondensed-Regular', Arial;
}

#content {
    position: absolute;
    z-index: 0;
}

.version {
    right: 2px;
    bottom: 2px;
    font-size: 14px;
    color: #c0c0c0;
    position: absolute;
    z-index: 2;
}


#speedBoostButton {
    background: red;
    width: 32px;
    height: 32px;
    z-index: 3;
    border-radius: 114px;
    border: #a20909 25px solid;
}

.speedBoostButtonWrapper {
    position: absolute;
    right: 32px;
    bottom: 32px;
}

.returnToGameArea {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 45px;
    pointer-events:none;
}

#score-board {
    position: absolute;
    right: 0;
    top: 10px;
    width: 300px;
    height: auto;
    z-index: 100;
    pointer-events:none;
}

#score-board .score-row {
    width: 100%;
    height: 30px;
    background-image: linear-gradient(to right, rgba(255,0,122,0), rgba(255,0,122,1));
    color: #ffffff;
    font-size: 25px;
    right: 0;
    float: right;
    margin-top: 13px;
}
#score-board .score-row .score {
    margin-left: 33px;
    float: left;
}
#score-board .score-row .name {
    float: right;
    max-width: 105px;
    margin-right: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
}

#score-board .score-row .name.first {
    max-width: 170px;
}

#score-board .score-row .name.second {
    max-width: 140px;
}
#score-board .score-row .name.third {
    max-width: 105px;
}

#score-board .player-marker {
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-left: 21px solid rgba(255,0,122,0.5);
    border-bottom: 13px solid transparent;
    display: inline-block;
    float: left;
    margin-top: 2px;
    margin-right: 5px;
    transform: rotate(180deg);
}

#score-board .score-row.character1 {
    background-image: linear-gradient(to right, rgba(255,0,122,0), rgba(255,0,122,1));
}

#score-board .score-row.character2 {
    background-image: linear-gradient(to right, rgba(46, 125, 255, 0), rgba(46, 125, 255, 1));
}

#score-board .score-row.character3 {
    background-image: linear-gradient(to right, rgba(37, 173, 167, 0), rgb(37, 173, 167));
}

#score-board .score-row.character4 {
    background-image: linear-gradient(to right, rgba(0, 222, 53, 0), rgb(0, 222, 53));
}

#score-board .score-row.character5 {
    background-image: linear-gradient(to right, rgba(19, 163, 30, 0), rgb(19, 163, 30));
}

#score-board .score-row.character6 {
    background-image: linear-gradient(to right, rgba(163, 119, 8, 0), rgb(163, 119, 8));
}

#score-board .score-row.character7 {
    background-image: linear-gradient(to right, rgba(163, 2, 0, 0), rgb(163, 2, 0));
}

#score-board .score-row.character8 {
    background-image: linear-gradient(to right, rgba(108, 109, 111, 0), rgb(108, 109, 111));
}

#score-board .score-row.character9 {
    background-image: linear-gradient(to right, rgba(143, 39, 127, 0), rgb(143, 39, 127));
}

#score-board .score-row.character10 {
    background-image: linear-gradient(to right, rgba(39, 143, 143, 0), rgb(39, 143, 143));
}

#score-board .score-row.character1 .player-marker {
    border-left-color: rgba(255,0,122,1);
}

#score-board .score-row.character2 .player-marker {
    border-left-color: rgba(46, 125, 255, 1);
}

#score-board .score-row.character3 .player-marker {
    border-left-color: rgb(37, 173, 167);
}

#score-board .score-row.character4 .player-marker {
    border-left-color: rgb(0, 222, 53);
}

#score-board .score-row.character5 .player-marker {
    border-left-color: rgb(19, 163, 30);
}

#score-board .score-row.character6 .player-marker {
    border-left-color: rgb(163, 119, 8);
}

#score-board .score-row.character7 .player-marker {
    border-left-color: rgb(163, 2, 0);
}

#score-board .score-row.character8 .player-marker {
    border-left-color: rgb(108, 109, 111);
}

#score-board .score-row.character9 .player-marker {
    border-left-color: rgb(143, 39, 127);
}

#score-board .score-row.character10 .player-marker {
    border-left-color: rgb(39, 143, 143);
}

#datGui {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 100;
}

#rewarded-video-container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 100;
}

#rewarded-video-container .rewarded_video_bg .inner-container {
    margin-top: 200px;
    position: absolute;
    width: 100%;
    height: 100%;
}

#rewarded-video-container .keep_playing {
    margin-left: 68px;
}

#rewarded-video-container #playRewardedVideo {
    margin-left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}


#rewarded-video-container #skipRewardedVideo {
    margin-left: 50%;
    margin-top: 15px;
    transform: translateX(-50%);
    cursor: pointer;
}

#rewarded-video-container .rewarded_video_light {
    width: 320px;
    height: 250px;
    position: absolute;
    background: radial-gradient(#71c442ab, #ffffff00, #ffffff00, #ffffff00);
    border-radius: 250px;
    z-index: 80000;
    margin-left: 0px;
    margin-top: 190px;
    transform: scale(1);
    animation: light-pulse 1s ease-in-out infinite alternate;
    -webkit-animation: light-pulse 1s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes light-pulse {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        transform: scale(2, 1.5);
        -webkit-transform: scale(2, 1.5);
    }
}

.active .slick-current .character-selection .snakes {
    animation: move-up 1s ease-in-out infinite alternate;
    -webkit-animation: move-up 1s ease-in-out infinite alternate;
}

@keyframes tree-pulse {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
    }
}

.active .pulsing-tree {
    animation: tree-pulse 2s ease-in-out infinite alternate;
    -webkit-animation: tree-pulse 2s ease-in-out infinite alternate;

}

/*https://jsfiddle.net/vxkcy8em/1/*/
.snakes:nth-child(odd) {
    filter: brightness(75%);
}
.snakes:nth-child(16){
    animation-delay: 0.1s !important;
    -webkit-animation-delay:0.1s !important;
}

.snakes:nth-child(15){
    animation-delay: 0.2s !important;
    -webkit-animation-delay:0.2s !important;
}

.snakes:nth-child(14){
    animation-delay: 0.3s !important;
    -webkit-animation-delay:0.3s !important;
}

.snakes:nth-child(13){
    animation-delay: 0.4s !important;
    -webkit-animation-delay:0.4s !important;
}

.snakes:nth-child(12){
    animation-delay: 0.5s !important;
    -webkit-animation-delay:0.5s !important;
}

.snakes:nth-child(11){
    animation-delay: 0.6s !important;
    -webkit-animation-delay:0.6s !important;
}

.snakes:nth-child(10){
    animation-delay: 0.7s !important;
    -webkit-animation-delay:0.7s !important;
}

.snakes:nth-child(9){
    animation-delay: 0.8s !important;
    -webkit-animation-delay:0.8s !important;
}

.snakes:nth-child(8){
    animation-delay: 0.9s !important;
    -webkit-animation-delay:0.9s !important;
}

.snakes:nth-child(7){
    animation-delay: 1s !important;
    -webkit-animation-delay:1s !important;
}

.snakes:nth-child(6){
    animation-delay: 1.1s !important;
    -webkit-animation-delay:1.1s !important;
}

.snakes:nth-child(5){
    animation-delay: 1.2s !important;
    -webkit-animation-delay:1.2s !important;
}

.snakes:nth-child(4){
    animation-delay: 1.3s !important;
    -webkit-animation-delay:1.3s !important;
}

.snakes:nth-child(3){
    animation-delay: 1.4s !important;
    -webkit-animation-delay:1.4s !important;
}

.snakes:nth-child(2){
    animation-delay: 1.5s !important;
    -webkit-animation-delay:1.5s !important;;
}

.snakes:nth-child(1){
    animation-delay: 1.6s !important;
    -webkit-animation-delay:1.6s !important;;
}

@keyframes move-up {
    0% {
        transform: translateY(0px) rotate(270deg);
        -webkit-transform: translateY(0px) rotate(270deg);
    }
    100% {
        transform: translateY(-30px) rotate(270deg);
        -webkit-transform: translateY(-30px) rotate(270deg);
    }
}

.tap-to-play {
    top: 50%;
    transform: translate(0, -50%);
    font-size: 35px;
    position: absolute;
    z-index: 99;
    pointer-events: none;
    width: 100%;
    text-align: center;
    pointer-events:none;
}

.ui-background-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 95;
    background: #0a103b;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.75)";
    filter: alpha(opacity=0.57);
    -moz-opacity: 0.75;
    -khtml-opacity: 75;
    opacity: 0.75;
}

.no-pointer-events {
    pointer-events:none;
}

#lobby-screen-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0d1958;
}

#lobby-screen-wrapper .center {
    max-height: 580px;
    height: 100%;
    max-width: 450px;
    width: 100%;
    /*width: 320px; !* width of menu *!*/
    text-align: center;
    position: absolute;
    color: white;
    left: 50%;
    top: 50%;
    background-color: #0d1958;
    background-image: url(../images/backgroundTile.png);
    background-repeat: repeat;
    overflow: hidden;

    /* center from top */
    /*margin-top: 50%;*/
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    /* only center from left */
    /*-webkit-transform: translateX(-50%);*/
    /*-moz-transform: translateX(-50%);*/
    /*-ms-transform: translateX(-50%);*/
    /*-o-transform: translateX(-50%);*/
    /*transform: translateX(-50%);*/
}


#lobby-screen-wrapper .logo {
    margin-top: 10px;
}

#lobby-screen-wrapper .best-score-wrapper {
    margin-top: 25px;
}
.best-score-wrapper .header {
    font-size: 25px;
    text-align: center;
}

.best-score-wrapper .stripe {
    width: 320px;
}

.best-score-wrapper .stripe .bug {
    display: inline-block;
    transform: translateY(-4px);
}

.best-score-wrapper .stripe .bug.left {
    -ms-transform: rotate(180deg) translateY(4px);
    -webkit-transform: rotate(180deg) translateY(4px);
    transform: rotate(180deg) translateY(4px);
}

.best-score-wrapper .stripe .score {
    display: inline-block;
    font-size: 32px;
    line-height: 1;
    margin: 0 10px 0px 10px;
}

#lobby-screen-wrapper .character-selection-wrapper {
    width: 100%;
    height: 180px;
    background: rgba(15, 35, 122, 0.49);
    margin-top: 34px;
    margin-bottom: 17px;
}

#lobby-screen-wrapper #play {
    cursor: pointer;
}

#lobby-screen-wrapper .top-left-tree {
    margin-left: -225px;
    margin-top: -193px;
    position: absolute;
    z-index: -1;
}

#lobby-screen-wrapper .top-right-tree {
    transform: rotate(99deg);
    right: 0px;
    margin-right: -202px;
    margin-top: -151px;
    position: absolute;
    z-index: -1;
}

#lobby-screen-wrapper .bottom-left-tree {
    transform: rotate(99deg);
    bottom: 0px;
    margin-left: -255px;
    margin-bottom: -173px;
    position: absolute;
    z-index: -1;
}

#lobby-screen-wrapper .bottom-right-rock {
    transform: scale(0.6) rotate(317deg);
    bottom: 0px;
    right: 0px;
    margin-right: -196px;
    margin-bottom: -173px;
    position: absolute;
    z-index: -1;
}

#lobby-screen-wrapper .character-selection-wrapper .character-selection {
    margin-left: 25px;
}

.character-selection {
    margin-top: 57px;
    text-align: center;
}

.character-selection .snakes {
    transform: rotate(270deg);
    margin-left: -47px;
}

.speed-progress-wrapper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 556px;
    height: 15px;
    transform: translateX(-50%);
    pointer-events: none;
}

.speed-progress-wrapper .arrow {
    width: 12px;
    height: 20px;
    background: url(../ui/speed_up.png);
    right: 0;
    position: absolute;
    margin: -17px;
}

.speed-progress-wrapper .arrow.down {
    width: 12px;
    height: 20px;
    background: url(../ui/speed_down.png);
    right: 0;
    position: absolute;
    margin: -17px;
    transform: rotate(180deg);
}

.speed-progress {
    width: 100%;
    height: 100%;
    background-image: url(../ui/speed_bar_frame.png);
}

.speed-progress .speed-progress-body {
    width: 50%;
    height: 100%;
    background-image: url(../ui/speed_bar.png);
}

.inactive {
    pointer-events: none;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%) brightness(75%);;
}

.lock-wrapper {
    z-index: 500;
    font-size: 21px;
    transform: translateX(-5%);
}

.lock-wrapper .lock_icon {
    display: inline-block;
}

.lock-wrapper .lock_icon.left {
    margin-right: 10px;
}

.lock-wrapper .lock_icon.right {
    margin-left: 10px;
}

.achievement-wrapper {
    /*https://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28248\%2C80\%2C50\%2C0\%29\%200\%25\%2C\%20rgba\%28248\%2C80\%2C50\%2C0\.04\%29\%201\%25\%2C\%20rgba\%2810\%2C3\%2C167\%2C1\%29\%2026\%25\%2C\%20rgba\%280\%2C0\%2C172\%2C1\%29\%2027\%25\%2C\%20rgba\%280\%2C0\%2C172\%2C1\%29\%2071\%25\%2C\%20rgba\%28231\%2C56\%2C39\%2C0\%29\%20100\%25\%29\%3B'*/

    background: rgba(248,80,50,0);
    background: -moz-linear-gradient(left, rgba(248,80,50,0) 0%, rgba(248,80,50,0.04) 1%, rgba(11,102,205,1) 26%, rgba(2,103,211,1) 27%, rgba(2,103,211,1) 71%, rgba(231,56,39,0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,0)), color-stop(1%, rgba(248,80,50,0.04)), color-stop(26%, rgba(11,102,205,1)), color-stop(27%, rgba(2,103,211,1)), color-stop(71%, rgba(2,103,211,1)), color-stop(100%, rgba(231,56,39,0)));
    background: -webkit-linear-gradient(left, rgba(248,80,50,0) 0%, rgba(248,80,50,0.04) 1%, rgba(11,102,205,1) 26%, rgba(2,103,211,1) 27%, rgba(2,103,211,1) 71%, rgba(231,56,39,0) 100%);
    background: -o-linear-gradient(left, rgba(248,80,50,0) 0%, rgba(248,80,50,0.04) 1%, rgba(11,102,205,1) 26%, rgba(2,103,211,1) 27%, rgba(2,103,211,1) 71%, rgba(231,56,39,0) 100%);
    background: -ms-linear-gradient(left, rgba(248,80,50,0) 0%, rgba(248,80,50,0.04) 1%, rgba(11,102,205,1) 26%, rgba(2,103,211,1) 27%, rgba(2,103,211,1) 71%, rgba(231,56,39,0) 100%);
    background: linear-gradient(to right, rgba(248,80,50,0) 0%, rgba(248,80,50,0.04) 1%, rgba(11,102,205,1) 26%, rgba(2,103,211,1) 27%, rgba(2,103,211,1) 71%, rgba(231,56,39,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );

    text-align: center;
    width: 100%;
    height: 80px;
}

.achievement-wrapper .label {
    display: inline-block;
    width: 80%;
    font-size: 30px;
}


.hide {
    display: none!important;
}

#lobby-screen-wrapper #play_rewarded_video {
    cursor: pointer;
    background-image: url(../ui/play_rewarded_video_button.png);
    width: 181px;
    height: 108px;
    display:inline-block;
}

#lobby-screen-wrapper #purchase_character {
    cursor: pointer;
    background-image: url(../ui/shop_btn_n.png);
    width: 120px;
    height: 120px;
    display:inline-block;
}

.coin-icon {
    background: url(../ui/coin.svg) no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    transform: translate(5px, 3px);
}

#achievementContainer {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 317px;
    height: 123px;
    background: url(../ui/achievementBg.png);
    color: #919095;
    font-size: 23px;
    z-index: 105;
    line-height: 20px;
    padding-top: 81px;
}
#achievementContainer .character {
    width: 24%; float: left;
    margin-left: 27px;
}

#achievementContainer .center-text {
    width: 62%; float: left;
}
#achievementContainer .center-text .first-row{
    color: #a7a3a1;
    font-size: 23px;
}
#achievementContainer .center-text #achievementTitle {
    color: #bfffac;
    font-size: 15px;
}
#achievementContainer .center-text .third-row {
    color: #04d221;
    font-size: 20px;
    margin-top: 5px;
}
#achievementContainer .cross-wrapper {
    width: 5%;
    float: right;
}
#achievementContainer .cross {
    background: url('../ui/cross.png') no-repeat left;
    width: 33px;
    height: 31px;
    transform: scale(0.75) translate(-69%, -41%);
}

@media only screen and (max-width:700px) {
    #score-board {
        transform: scale(.75) translate(17%, -25%);
    }

    .speed-progress-wrapper {
        -webkit-transform: scale(0.75) translateX(-67%);
        -moz-transform: scale(0.75) translateX(-67%);
        -ms-transform: scale(0.75) translateX(-67%);
        -o-transform: scale(0.75) translateX(-67%);
        transform: scale(0.75) translateX(-67%);
    }
}

@media only screen and (max-width:452px) {
    .speed-progress-wrapper {
        -webkit-transform: scale(0.50) translateX(-100%);
        -moz-transform: scale(0.50) translateX(-100%);
        -ms-transform: scale(0.50) translateX(-100%);
        -o-transform: scale(0.50) translateX(-100%);
        transform: scale(0.50) translateX(-100%);
    }
}

@media only screen and (max-width:320px) {
    #score-board {
        transform: scale(.5) translate(47%, -50%);
    }
    .speed-progress-wrapper {
        -webkit-transform: scale(0.4) translateX(-123%);
        -moz-transform: scale(0.4) translateX(-123%);
        -ms-transform: scale(0.4) translateX(-123%);
        -o-transform: scale(0.4) translateX(-123%);
        transform: scale(0.4) translateX(-123%);
    }
}

@media only screen and (max-width:370px) {
    .character-selection {
        transform: scale(.75);
    }

    .slick-dots li {
        /*transform: scale(0.75) !important;*/
        width: 13px !important;
        height: 13px !important;
    }

    .achievement-wrapper .label {
        font-size: 25px;
    }
}

@media only screen and (max-width:330px) {
    .character-selection {
        transform: scale(.65) translateX(-10%);
    }
}

@media only screen and (max-height:557px) {
    .best-score-wrapper {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    .character-selection-wrapper {
        margin-top: 15px !important;
        margin-bottom: 6px !important;
    }
    .achievement-wrapper {
        margin-top: 10px;
    }
}

@media only screen and (max-height:505px) {
    .logo {
        transform: scale(0.75);
        margin-top: -10px !important;
    }
    .best-score-wrapper {
        margin-top: -25px !important;
    }
}