.game-container .monitor.mask {
    opacity: .3;
    transition: opacity ease-in 222ms;
    display: none;
}

.game-container .monitor.mask.flash {
    -webkit-animation: flashmask 222ms;
    -webkit-animation-iteration-count: 3;
    animation: flashmask 222ms;
    animation-iteration-count: 3;
}

.game-container .reader-area .text span.fail {
    -webkit-animation: wordfail 666ms;
    -webkit-animation-fill-mode: none;
    animation: wordfail 666ms;
    animation-fill-mode: none;
    animation-iteration-count: 1;
}

.game-container .power-reader-outro {
    transition: transform ease-in 666ms;
}

.game-container .power-reader-outro-score {
    transition: opacity ease-in 666ms;
}

.game-container .power-reader-outro.ng-hide {
    transform: translateY(-100vh);
    display: inherit !important;
}

.game-container .power-reader-outro-score.ng-hide {
    opacity: 0;
    display: inherit !important;
}

.game-container .outro-score.ng-hide {
    opacity: 0;
    display: inherit !important;
}

@-webkit-keyframes flashmask {
    0% {
        opacity: .3;
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: .3;
    }
}

@keyframes flashmask {
    0% {
        opacity: .3;
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: .3;
    }
}


@-webkit-keyframes wordfail {
    0% {
        opacity: .3;
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: .3;
    }
}

@keyframes wordfail {
    0% {
        opacity: .3;
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: .3;
    }
}





/*Results Screen*/

.resultsContainer {
    width: 100%;
    margin: auto;
    text-align: center;
}

.results-header {
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    font-weight: 900;
}

.animate {
    font-size: 50px;
}

.animate span {
    display: inline-block;
}


.animate span:nth-of-type(2) {
    animation-delay: .05s;
}

.animate span:nth-of-type(3) {
    animation-delay: .1s;
}

.animate span:nth-of-type(4) {
    animation-delay: .15s;
}

.animate span:nth-of-type(5) {
    animation-delay: .2s;
}

.animate span:nth-of-type(6) {
    animation-delay: .25s;
}

.animate span:nth-of-type(7) {
    animation-delay: .3s;
}

.animate span:nth-of-type(8) {
    animation-delay: .35s;
}

.animate span:nth-of-type(9) {
    animation-delay: .4s;
}

.animate span:nth-of-type(10) {
    animation-delay: .45s;
}

.animate span:nth-of-type(11) {
    animation-delay: .5s;
}

.animate span:nth-of-type(12) {
    animation-delay: .55s;
}

.animate span:nth-of-type(13) {
    animation-delay: .6s;
}

.animate span:nth-of-type(14) {
    animation-delay: .65s;
}

.animate span:nth-of-type(15) {
    animation-delay: .7s;
}

.animate span:nth-of-type(16) {
    animation-delay: .75s;
}

.animate span:nth-of-type(17) {
    animation-delay: .8s;
}

.animate span:nth-of-type(18) {
    animation-delay: .85s;
}

.animate span:nth-of-type(19) {
    animation-delay: .9s;
}

.animate span:nth-of-type(20) {
    animation-delay: .95s;
}





/* Animation Three */


.three span {
    color: #fff;
    opacity: 0;
    transform: translate(-300px, 0) scale(0);
    animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
    60% {
        transform: translate(20px, 0) scale(1);
        color: #ffff00;
    }

    80% {
        transform: translate(20px, 0) scale(1);
        color: #fffacd;
    }

    99% {
        transform: translate(0) scale(1.2);
        color: #fff8dc;
    }

    100% {
        transform: translate(0) scale(1);
        opacity: 1;
        color: #fff;
    }
}


/*Fade In*/
.fade-in {
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes _bounceInDown {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0) scaleY(3);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0) scaleY(0.9);
    }

    75% {
        transform: translate3d(0, -10px, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, 5px, 0) scaleY(0.985);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

._bounceInDown {
    animation-name: _bounceInDown;
}

@keyframes _tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    animation-name: _tada;
}

@keyframes _bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0) scaleY(0.985);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0) scaleY(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0) scaleY(3);
    }
}

._bounceOutUp {
    animation-name: _bounceOutUp;
}