.emoji-popup {
    width: 64px;
    height: 64px;
    background-image: url('../img/watch/popup_smiles_sprite.png?v=9');
    background-repeat: no-repeat;
    transition: 0.2s;
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity: 0;
}
.emoji-popup.climb1 {
    animation: climb-1 3s 0s ease-in-out;
}
.emoji-popup.climb2 {
    animation: climb-2 3s 0s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.emoji-popup.climb3 {
    animation: climb-3 3s 0s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.emoji-popup.climb4 {
    animation: climb-4 3s 0s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.emoji-popup.num_111.black {
    background-position: 0 0;
}
.emoji-popup.num_222.black {
    background-position: -64px 0;
}
.emoji-popup.num_333.black {
    background-position: -128px 0;
}
.emoji-popup.num_444.black {
    background-position: -192px 0;
}
.emoji-popup.num_555.black {
    background-position: -256px 0;
}
.emoji-popup.num_666.black {
    background-position: -320px 0;
}
.emoji-popup.num_777.black {
    background-position: 0 -64px;
}
.emoji-popup.num_888.black {
    background-position: -64px -64px;
}
.emoji-popup.num_999.black {
    background-position: -128px -64px;
}
.emoji-popup.num_000.black {
    background-position: -192px -64px;
}
.emoji-popup.num_777_ex.black {
    background-position: -256px -64px;
}
.emoji-popup.num_100.black {
    background-position: -320px -64px;
}
.emoji-popup.num_10.black {
    background-position: 0 -128px;
}
.emoji-popup.num_100_per.black {
    background-position: -64px -128px;
}
.emoji-popup.num_111.red {
    background-position: -128px -128px;
}
.emoji-popup.num_222.red {
    background-position: -192px -128px;
}
.emoji-popup.num_333.red {
    background-position: -256px -128px;
}
.emoji-popup.num_444.red {
    background-position: -320px -128px;
}
.emoji-popup.num_555.red {
    background-position: 0px -192px;
}
.emoji-popup.num_666.red {
    background-position: -64px -192px;
}
.emoji-popup.num_777.red {
    background-position: -128px -192px;
}
.emoji-popup.num_888.red {
    background-position: -192px -192px;
}
.emoji-popup.num_999.red {
    background-position: -256px -192px;
}
.emoji-popup.num_000.red {
    background-position: -320px -192px;
}
.emoji-popup.num_777_ex.red {
    background-position: 0px -256px;
}
.emoji-popup.num_100.red {
    background-position: -64px -256px;
}
.emoji-popup.num_10.red {
    background-position: -128px -256px;
}
.emoji-popup.num_100_per.red {
    background-position: -192px -256px;
}
.emoji-popup.plus_3.blue {
    background-position: -256px -256px;
}
.emoji-popup.plus_3.green {
    background-position: -320px -256px;
}
.emoji-popup.plus_3.red {
    background-position: 0px -320px;
}
.emoji-popup.plus.blue {
    background-position: -64px -320px;
}
.emoji-popup.plus.red {
    background-position: -128px -320px;
}
.emoji-popup.plus.green {
    background-position: -192px -320px;
}
.emoji-popup.sad {
    background-position: -256px -320px;
}
.emoji-popup.happy {
    background-position: -320px -320px;
}
.emoji-popup.red-heart {
    background-position: 0px -384px;
}
.emoji-popup.thumbs-up {
    background-position: -64px -384px;
}
.emoji-popup.party-popper {
    background-position: -128px -384px;
}
.emoji-popup.orange-heart {
    background-position: -192px -384px;
}
.emoji-popup.hundred-underline {
    background-position: -256px -384px;
}
.emoji-popup.fire {
    background-position: -320px -384px;
}
.emoji-popup.smiling-face-with-heart-eyes {
    background-position: 0 -448px;
}
.emoji-popup.black-heart {
    background-position: -64px -448px;
}
/*@keyframes climb-1 { 
    from {
        transform: translate(50%, 0);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}*/

@keyframes climb-1 {
    0% {
        bottom: 0;
        opacity: 1;
        transform: translateX(30px);
    }
    25% {
        transform: translateX(-30px);
    }
    50% {
        transform: translateX(30px);
    }
    75% {
        transform: translateX(-30px);
    }
    100% {
        transform: translateX(30px);
        bottom: 100%;
        opacity: 0;
    }
}
@keyframes climb-2 {
    0% {
        bottom: 0;
        opacity: 1;
        transform: translateX(-30px);
    }
    25% {
        transform: translateX(30px);
    }
    50% {
        transform: translateX(-30px);
    }
    75% {
        transform: translateX(30px);
    }
    100% {
        transform: translateX(-30px);
        bottom: 100%;
        opacity: 0;
    }
}
@keyframes climb-3 {
    0% {
        bottom: 0;
        opacity: 1;
        transform: translateX(-15px);
    }
    25% {
        transform: translateX(15px);
    }
    50% {
        transform: translateX(-15px);
    }
    75% {
        transform: translateX(15px);
    }
    100% {
        transform: translateX(-15px);
        bottom: 100%;
        opacity: 0;
    }
}
@keyframes climb-4 {
    0% {
        bottom: 0;
        opacity: 1;
        transform: translateX(15px);
    }
    25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(15px);
    }
    75% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(15px);
        bottom: 100%;
        opacity: 0;
    }
}