/* ---------------------------- Keyframes; ---------------------------- */

/* Rain */


@keyframes rain {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 20% 100%;
    }
}



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

    10% {
        opacity: 0;
    }

    11% {
        opacity: 1;
    }

    14% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    21% {
        opacity: 1;
    }

    24% {
        opacity: 0;
    }

    104% {
        opacity: 0;
    }
}


/* Curretn location buttons */

@keyframes textFlash {
    0% {
        opacity: 0.4;
    }


    100% {
        opacity: 0.8;
    }
}




/* Remote buttons */

@keyframes buttonFlash {
    0% {
        box-shadow: 0 0 0px 0px #e1d60bfc;
    }

    50% {
        box-shadow: 0 0 0.2vw 2vw #958e1800;
    }

    100% {
        box-shadow: 0 0 0.2vw 2vw #958e1800;
    }
}

@keyframes buttonFFlash {
    0% {
        box-shadow: 0 0 0px 0px #ac1212;
    }

    50% {
        box-shadow: 0 0 0.2vw 2vw #c61f1f22;
    }

    100% {
        box-shadow: 0 0 0.2vw 2vw #c61f1f00;
    }
}


/* Sign */

@keyframes rotateSign {
    0% {
        transform: rotate(5.8deg);
    }
/*
    30% {
        transform: rotate(-15deg);
    }

    70% {
        transform: rotate(-15deg);
    }
*/
    100% {
        transform: rotate(-11deg);
        /*transform: rotate(5.8deg);*/
    }
}


@keyframes rotateSign2 {
    0% {
        transform: rotate(-11deg);
    }

    100% {
        transform: rotate(5.8deg);
    }
}



/* Sun */

@keyframes rotateSun {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(20deg);
        /*height: 42%;*/
    }
}



/* Introdiction */

@keyframes showAyoIntro {

    0% {
        filter: blur(1px) drop-shadow(0 0 1px #0000009e)  brightness(0%);
    }



    100% {
        filter: blur(0.1px) drop-shadow(4px 4px 2px #0000009e)  brightness(100%);
    }

}


/* Tension progress bars*/

@keyframes tensionProgress {

    0% {
        width: 0%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 0.5;
    }

}


/* Film progress bars*/

@keyframes filmProgress {

    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }

}


/* Loader progress bars*/

@keyframes loadProgress {

    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }

}

/* Eyes  */

@keyframes eyeLBlink {

    from {
        height: 30px;
    }

    to {
        height: 5px;
    }
}


@keyframes eyeRBlink {

    from {
        height: 40px;
    }

    to {
        height: 15px;
    }
}


@keyframes eyeShrink{

    0% {
        height: 30px;
        width: 30px;
    }

    50% {
        height: 15px;
        width: 15px;
    }

    100% {
        height: 15px;
        width: 15px;
    }
}




@keyframes eyeEnlarge{

    0% {
        height: 40px;
        width: 40px;
    }

    50% {
        height: 55px;
        width: 50px;
    }

    100% {
        height: 55px;
        width: 50px;
    }
}



@keyframes eyeLLLook{

    0% {
        left: 35%;
        width: 30px;
    }

    25% {
        left: 25%;
        width: 15px;
    }

    100% {
        left: 25%;
        width: 15px;
    }
}



@keyframes eyeLRLook{


    0% {
        right: 35%;
        width: 40px;
    }

    25% {
        right: 55%;
        width: 30px;
    }

    100% {
        right: 55%;
        width: 30px;
    }
}




@keyframes eyeRLLook{

    0% {
        left: 35%;
        width: 30px;
    }

    25% {
        left: 55%;
        width: 20px;
    }

    100% {
        left: 55%;
        width: 20px;
    }
}



@keyframes eyeRRLook{


    0% {
        right: 35%;
        width: 40px;
    }

    25%,
    100% {
        right: 25%;
        width: 25px;
    }
}


/* Smaller devices */

@keyframes eyeLBlink2 {

    from {
        height: 20px;
    }

    to {
        height: 5px;
    }
}


@keyframes eyeRBlink2 {

    from {
        height: 30px;
    }

    to {
        height: 15px;
    }
}


@keyframes eyeShrink2 {

    0% {
        height: 20px;
        width: 20px;
    }

    50%, 100% {
        height: 12px;
        width: 12px;
    }
}




@keyframes eyeEnlarge2 {

    0% {
        height: 30px;
        width: 30px;
    }

    50%, 100% {
        height: 45px;
        width: 40px;
    }
}



@keyframes eyeLLLook2 {

    0% {
        left: 37%;
        width: 20px;
    }

    25%, 100% {
        left: 27%;
        width: 15px;
    }
}



@keyframes eyeLRLook2 {


    0% {
        right: 37%;
        width: 30px;
    }

    25%, 100% {
        right: 57%;
        width: 20px;
    }
}




@keyframes eyeRLLook2 {

    0% {
        left: 37%;
        width: 20px;
    }

    25%, 100% {
        left: 57%;
        width: 15px;
    }
}



@keyframes eyeRRLook2 {


    0% {
        right: 37%;
        width: 30px;
    }

    25%, 100% {
        right: 27%;
        width: 20px;
    }
}


/* Shift keyframes */



@keyframes shiftStart {
    0% {
        background-image: url('../img/start/start_1.png');
        padding-left: 0;

    }

    12.5% {
        background-image: url('../img/start/start_1-1.png');
        padding-left: 2px;

    }

    25% {
        background-image: url('../img/start/start_2.png');
        padding-left: 0;

    }

    37.5% {
        background-image: url('../img/start/start_2-1.png');
        padding-left: 2px;

    }

    50% {
        background-image: url('../img/start/start_3.png');
        padding-left: 0;

    }

    62.5% {
        background-image: url('../img/start/start_3-1.png');
        padding-left: 2px;

    }

    75% {
        background-image: url('../img/start/start_4.png');
        padding-left: 0;

    }

    87.5% {
        background-image: url('../img/start/start_4-1.png');
        padding-left: 2px;

    }

}

@keyframes shiftMute {
    0% {
        background-image: url('../img/mute/mute_1.png');

    }

    16.7% {
        background-image: url('../img/mute/mute_1-1.png');

    }

    33.4% {
        background-image: url('../img/mute/mute_2.png');

    }

    50% {
        background-image: url('../img/mute/mute_2-1.png');

    }

    66.7% {
        background-image: url('../img/mute/mute_3.png');

    }

    83.4% {
        background-image: url('../img/mute/mute_3-1.png');

    }

}

@keyframes shiftUnmute {
    0% {
        background-image: url('../img/unmute/unmute_1.png');

    }

    16.7% {
        background-image: url('../img/unmute/unmute_1-1.png');

    }

    33.4% {
        background-image: url('../img/unmute/unmute_2.png');

    }

    50% {
        background-image: url('../img/unmute/unmute_2-1.png');

    }

    66.7% {
        background-image: url('../img/unmute/unmute_3.png');

    }

    83.4% {
        background-image: url('../img/unmute/unmute_3-1.png');

    }

}

@keyframes shiftClose {
    0% {
        background-image: url('../img/close/close_1.png');

    }

    12.5% {
        background-image: url('../img/close/close_1-1.png');

    }

    25% {
        background-image: url('../img/close/close_2.png');

    }

    37.5% {
        background-image: url('../img/close/close_2-1.png');

    }

    50% {
        background-image: url('../img/close/close_3.png');

    }

    62.5% {
        background-image: url('../img/close/close_3-1.png');

    }

    75% {
        background-image: url('../img/close/close_4.png');

    }

    87.5% {
        background-image: url('../img/close/close_4-1.png');

    }
}



@keyframes shiftInfo {
    0% {
        background-image: url('../img/info/info_1.png');

    }

    12.5% {
        background-image: url('../img/info/info_1-1.png');

    }

    25% {
        background-image: url('../img/info/info_2.png');

    }

    37.5% {
        background-image: url('../img/info/info_2-1.png');

    }

    50% {
        background-image: url('../img/info/info_3.png');

    }

    62.5% {
        background-image: url('../img/info/info_3-1.png');

    }

    75% {
        background-image: url('../img/info/info_4.png');

    }

    87.5% {
        background-image: url('../img/info/info_4-1.png');

    }

}



@keyframes shiftBack {
    0% {
        background-image: url('../img/back/back_1.png');

    }

    12.5% {
        background-image: url('../img/back/back_1-1.png');

    }

    25% {
        background-image: url('../img/back/back_2.png');

    }

    37.5% {
        background-image: url('../img/back/back_2-1.png');

    }

    50% {
        background-image: url('../img/back/back_3.png');

    }

    62.5% {
        background-image: url('../img/back/back_3-1.png');

    }

    75% {
        background-image: url('../img/back/back_4.png');

    }

    87.5% {
        background-image: url('../img/back/back_4-1.png');

    }

}

@keyframes shiftGo {
    0% {
        background-image: url('../img/go/go_1.png');
        padding-left: 1px;

    }

    12.5% {
        background-image: url('../img/go/go_1-1.png');
        padding-left: 0;

    }

    25% {
        background-image: url('../img/go/go_2.png');
        padding-left: 1px;

    }

    37.5% {
        background-image: url('../img/go/go_2-1.png');
        padding-left: 0;

    }

    50% {
        background-image: url('../img/go/go_3.png');
        padding-left: 1px;

    }

    62.5% {
        background-image: url('../img/go/go_3-1.png');
        padding-left: 0;

    }

    75% {
        background-image: url('../img/go/go_4.png');
        padding-left: 1px;

    }

    87.5% {
        background-image: url('../img/go/go_4-1.png');
        padding-left: 0;

    }

}

@keyframes shiftHome {
    0% {
        background-image: url('../img/home/home_1.png');

    }

    12.5% {
        background-image: url('../img/home/home_1-1.png');

    }

    25% {
        background-image: url('../img/home/home_2.png');

    }

    37.5% {
        background-image: url('../img/home/home_2-1.png');

    }

    50% {
        background-image: url('../img/home/home_3.png');

    }

    62.5% {
        background-image: url('../img/home/home_3-1.png');

    }

    75% {
        background-image: url('../img/home/home_4.png');

    }

    87.5% {
        background-image: url('../img/home/home_4-1.png');

    }

}

@keyframes shiftPause {
    0% {
        background-image: url('../img/pause/pause_1.png');

    }

    12.5% {
        background-image: url('../img/pause/pause_1-1.png');

    }

    25% {
        background-image: url('../img/pause/pause_2.png');

    }

    37.5% {
        background-image: url('../img/pause/pause_2-1.png');

    }

    50% {
        background-image: url('../img/pause/pause_3.png');

    }

    62.5% {
        background-image: url('../img/pause/pause_3-1.png');

    }

    75% {
        background-image: url('../img/pause/pause_4.png');

    }

    87.5% {
        background-image: url('../img/pause/pause_4-1.png');

    }

}

@keyframes shiftPlay {
    0% {
        background-image: url('../img/play/play_1.png');

    }

    12.5% {
        background-image: url('../img/play/play_1-1.png');

    }

    25% {
        background-image: url('../img/play/play_2.png');

    }

    37.5% {
        background-image: url('../img/play/play_2-1.png');

    }

    50% {
        background-image: url('../img/play/play_3.png');

    }

    62.5% {
        background-image: url('../img/play/play_3-1.png');

    }

    75% {
        background-image: url('../img/play/play_4.png');

    }

    87.5% {
        background-image: url('../img/play/play_4-1.png');

    }

}

@keyframes shiftReplay {
    0% {
        background-image: url('../img/replay/replay_1.png');

    }

    12.5% {
        background-image: url('../img/replay/replay_1-1.png');

    }

    25% {
        background-image: url('../img/replay/replay_2.png');

    }

    37.5% {
        background-image: url('../img/replay/replay_2-1.png');

    }

    50% {
        background-image: url('../img/replay/replay_3.png');

    }

    62.5% {
        background-image: url('../img/replay/replay_3-1.png');

    }

    75% {
        background-image: url('../img/replay/replay_4.png');

    }

    87.5% {
        background-image: url('../img/replay/replay_4-1.png');

    }

}

@-webkit-keyframes gradient {
    from {
        opacity: 1;
        /*background-image: linear-gradient(to right, #aaa, #555);*/

    }

    to {
        opacity: 0.4;
        /*background-image: linear-gradient(to right, #555, #aaa);*/

    }
}

@keyframes gradient {
    from {
        opacity: 1;
        /*background-image: linear-gradient(to right, #aaa, #555);*/

    }

    to {
        opacity: 0.4;
        /*background-image: linear-gradient(to right, #555, #aaa);*/

    }
}

@-webkit-keyframes blinkLoad {

    from {

        border-bottom: 40px solid #478447;
        border-top: 40px solid #478447;

    }

    to {

        border-bottom: 10px solid #478447;
        border-top: 10px solid #478447;

    }
}

@keyframes blinkLoad {

    from {

        border-bottom: 40px solid #478447;
        border-top: 40px solid #478447;
        width: 80px;
        height: 80px;

    }

    to {

        border-bottom: 5px solid #478447;
        border-top: 5px solid #478447;
        width: 84px;
        height: 76px;

    }
}


/* Rain*/

@keyframes rain { 
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 20% 100%;
    }
}



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

    10% {
        opacity: 0;
    }

    11% {
        opacity: 1;
    }

    14% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    21% {
        opacity: 1;
    }

    24% {
        opacity: 0;
    }

    104% {
        opacity: 0;
    }
}


/*.outer-section .bg-img {
    width: 100%;
    height: auto;
    min-height: 100%;
}