.game-container .avatar-right-coach {
    transition: transform 0.33s ease-in-out;
    display: inherit !important;
}

.game-container .avatar-right-coach.ng-hide {
    transform: translateY(140%);
}

.game-container .avatar-right-avatar {
    transition: transform 0.33s ease-in-out;
    display: inherit !important;
}

.game-container .avatar-right-avatar.ng-hide {
    transform: translateY(140%);
}
.game-container .avatar-name-right.ng-hide {
    transform: translateY(140%);
}
.game-container .avatar-name-left.ng-hide {
    transform: translateY(140%);
}
.game-container .avatar-name-left {
    transition: transform 0.33s ease-in-out;
   
}
.game-container .avatar-name-right {
    transition: transform 0.33s ease-in-out;
  
}
.game-container .avatar-name-right-triad {
    transition: transform 0.33s ease-in-out;
}


.game-container .avatar-left-reader {
    transition: transform 0.33s ease-in-out;
    display: inherit !important;
}

.game-container .avatar-left-avatar {
    transition: transform 0.33s ease-in-out;
    display: inherit !important;
}

.game-container .avatar-left-avatar.ng-hide {
    transform: translateY(140%);
}

.game-container .avatar-left-reader.ng-hide {
    transform: translateY(140%);
}

/*MIDDLE AVATAR*/

.game-container .avatar-middle-reader {
    transition: transform 0.33s ease-in-out;
    display: inherit !important;
}

.game-container .avatar-middle-avatar {
    transition: transform 0.33s ease-in-out;
    display: inherit !important;
}

    .game-container .avatar-middle-avatar.ng-hide {
        transform: translateY(140%);
    }

.game-container .avatar-middle-reader.ng-hide {
    transform: translateY(140%);
}
.game-container .avatar-name-middle {
    transition: transform 0.33s ease-in-out;
}
/*END MIDDLE*/

.game-container .letter {
    transition: all 0.33s ease-in-out;
    transition-property: margin-left, margin-top, opacity;
}

.game-container .letter-launcher .letter {
    font-family: 'SadsamBold';
}
.game-container .letter-quest .letter {
    font-family: 'SadsamBold';
}

.game-container .word-blender .letter {
    font-family: 'SadsamBold';
}

.game-container .letter.under {
    transition: none 0.33s ease-in-out;
}

.game-container .letter.under.appear {
    animation-fill-mode: forwards;
    animation-name: appearTop23;
    animation-duration: .333s;
}

.game-container .letter.big {
    animation-name: scaleUp;
    animation-duration: .333s;
}

.game-container .letter.comeIn {
    animation-name: fadeInDownBigLetter;
    animation-duration: .666s;
}

.game-container .letter.comeOut {
    animation-name: fadeInDownBigLetter;
    animation-duration: .666s;
    animation-direction: reverse;
    animation-fill-mode: forwards;
}

@keyframes fadeInDownBigLetter {
    from {
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.game-container img.sparkly {
    transition: all 0.33s ease-in-out;
    transform-origin: center;
    animation-name: toneUp;
    animation-duration: .666s;
}

.game-container .clue-left-reader.appear {
    animation-name: scaleUpSmall;
    animation-duration: .333s;
    animation-fill-mode: both;
}

.game-container .check-left-reader.appear {
    animation-fill-mode: both;
    animation-name: scaleUpSmall;
    animation-duration: .333s;
}

.game-container .clue-left-reader.disappear {
    animation-name: scaleUpSmall;
    animation-duration: .333s;
    animation-direction: reverse;
    animation-fill-mode: both;
}

.game-container .check-left-reader.disappear {
    animation-name: scaleUpSmall;
    animation-duration: .333s;
    animation-direction: reverse;
    animation-fill-mode: both;
}

.game-container .intro-ready-reader.appear {
    animation-fill-mode: both;
    animation-name: scaleUpSmall;
    animation-duration: .333s;
}

.game-container .intro-ready-coach.appear {
    animation-fill-mode: both;
    animation-name: scaleUpSmall;
    animation-duration: .333s;
}

.game-container .right-right-coach.appear {
    animation-fill-mode: both;
    animation-name: scaleUpSmall;
    animation-duration: .333s;
}

.game-container .try-again-right-coach.ng-hide {
    display: inherit !important;
    visibility: hidden;
}

.game-container .try-again-right-coach.appear {
    animation-fill-mode: forwards;
    animation-name: scaleUpSmall;
    animation-duration: .333s;
}

.game-container .right-right-coach.disappear {
    animation-name: scaleUpSmall;
    animation-duration: .333s;
    animation-direction: reverse;
    animation-fill-mode: forwards;
}

.game-container .try-again-right-coach.disappear {
    animation-name: scaleUpSmall;
    animation-duration: .333s;
    animation-direction: reverse;
    animation-fill-mode: forwards;
}

.game-container .game-counter-score.comeIn {
    animation-name: scaleUpSmall;
    animation-duration: .333s;
    transform-origin: top;
}

.game-container .game-counter-score.pop {
    animation-name: popUp;
    animation-duration: .333s;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
}

@keyframes popUp {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        opacity: 100;
    }
    100% {
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0.3;
    }
}

@keyframes scaleUp {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -ms-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scaleUpSmall {
    0% {
        -ms-transform: scale3d(0, 0, 1);
        -webkit-transform: scale3d(0, 0, 1);
        transform: scale3d(0, 0, 1);
    }
    100% {
        -ms-transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes toneUp {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    33% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    80% {
        -ms-transform: scale(1.07);
        -webkit-transform: scale(1.07);
        transform: scale(1.07);
    }
    100% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes appearTop {
    0% {
        -ms-transform: translateY(20vh) scaleY(0) scaleX(0);
        -webkit-transform: translateY(20vh) scaleY(0) scaleX(0);
        transform: translateY(20vh) scaleY(0) scaleX(0);
    }
    100% {
        -ms-transform: translateY(20vh) scaleY(1) scaleX(1);
        -webkit-transform: translateY(20vh) scaleY(1) scaleX(1);
        transform: translateY(20vh) scaleY(1) scaleX(1);
    }
}

@keyframes appearTop23 {
    0% {
        -ms-transform: translateY(23vh) scaleY(0) scaleX(0);
        -webkit-transform: translateY(23vh) scaleY(0) scaleX(0);
        transform: translateY(23vh) scaleY(0) scaleX(0);
    }
    100% {
        -ms-transform: translateY(23vh) scaleY(1) scaleX(1);
        -webkit-transform: translateY(23vh) scaleY(1) scaleX(1);
        transform: translateY(23vh) scaleY(1) scaleX(1);
    }
}