@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes rotate2 {
    from {
        transform: rotate(-360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

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

    50% {
        transform: scale3d(1.1, 1.1, 1.1);
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
}

@keyframes fadeState {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeArr {
    0 {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade {
    0% {
        opacity: 0;
        top: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    98% {
        top: 0;
    }

    100% {
        opacity: 0;
        top: -100px;
    }
}

@keyframes stateAnim {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes david {
    from {
        background-image: url(../img/David.png);
    }

    to {
        background-image: url(../img/0811.gif);
    }
}

@keyframes cleo {
    from {
        background-image: url(../img/Cleopatra1.png);
    }

    to {
        background-image: url(../img/0631.gif);
    }
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes lower {

    0%,
    12%,
    18.999%,
    23%,
    31.999%,
    37%,
    44.999%,
    46%,
    49.999%,
    51%,
    58.999%,
    61%,
    68.999%,
    71%,
    85.999%,
    96%,
    100% {
        opacity: 0.99;
        text-shadow: 0 0 30px #FAE74C, 0 0 40px white, 0 0 6px #FAE74C;
    }

    19%,
    22.99%,
    32%,
    36.999%,
    45%,
    45.999%,
    50%,
    50.99%,
    59%,
    60.999%,
    69%,
    70.999%,
    86%,
    95.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}

@keyframes left {
    from {
        left: 0;
        bottom: 0;
    }

    to {
        left: 0.25vw;
        bottom: 0.25vw;
    }
}







@keyframes bottomright {
    0% {
        width: 0;
        height: 0;
        padding-top: 0;
        visibility: visible;
    }

    25% {
        width: 100%;
        height: 0;
        padding-top: 0;
        visibility: visible;
    }

    50% {
        height: 100%;
        width: 100%;
        visibility: visible;
    }

    75% {
        visibility: visible;
    }

    100% {
        visibility: visible;
    }
}

@keyframes revbottomright {
    0% {
        width: 100%;
        height: 100%;
        visibility: visible;
    }

    25% {
        width: 100%;
        height: 100%;
        visibility: visible;
    }

    50% {
        width: 100%;
        height: 100%;
        visibility: visible;
    }

    75% {
        width: 100%;
        height: 0;
        padding-top: 0;
        visibility: visible;
    }

    100% {
        width: 0;
        height: 0;
        padding-top: 0;
        visibility: hidden;
    }
}

@keyframes topleft {
    0% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
    }

    25% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
    }

    50% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
    }

    75% {
        width: 100%;
        height: 0;
        padding-bottom: 0;
        visibility: visible;
    }

    100% {
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
    }
}

@keyframes revtopleft {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
    }

    25% {
        width: 100%;
        height: 0;
        padding-bottom: 0;
        visibility: visible;
    }

    50% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
    }

    75% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
    }

    100% {
        width: 0;
        height: 0;
        padding-bottom: 0;
        visibility: hidden;
    }
}

@keyframes topleft2 {
    0% {
        width: 0;
        height: 0;
        padding-top: 0;
        visibility: visible;
    }

    25% {
        width: 100%;
        height: 0;
        padding-top: 0;
        visibility: visible;
    }

    50% {
        height: 100%;
        width: 100%;
        visibility: visible;
    }

    75% {
        visibility: visible;
    }

    100% {
        visibility: visible;
    }
}

@keyframes bang {
    from {
        transform: translate3d(0, 1vw, 0);
        opacity: 1;
    }
}

@-moz-keyframes topLineCross {
    0% {
        -webkit-transform: translateY(-22px);
        -moz-transform: translateY(-22px);
        -o-transform: translateY(-22px);
        -ms-transform: translateY(-22px);
        transform: translateY(-22px);
    }

    50% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
    }
}

@-webkit-keyframes topLineCross {
    0% {
        -webkit-transform: translateY(-22px);
        -moz-transform: translateY(-22px);
        -o-transform: translateY(-22px);
        -ms-transform: translateY(-22px);
        transform: translateY(-22px);
    }

    50% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
    }
}

@-o-keyframes topLineCross {
    0% {
        -webkit-transform: translateY(-22px);
        -moz-transform: translateY(-22px);
        -o-transform: translateY(-22px);
        -ms-transform: translateY(-22px);
        transform: translateY(-22px);
    }

    50% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
    }
}

@keyframes topLineCross {
    0% {
        -webkit-transform: translateY(-22px);
        -moz-transform: translateY(-22px);
        -o-transform: translateY(-22px);
        -ms-transform: translateY(-22px);
        transform: translateY(-22px);
    }

    50% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
    }
}

@-moz-keyframes bottomLineCross {
    0% {
        -webkit-transform: translateY(22px);
        -moz-transform: translateY(22px);
        -o-transform: translateY(22px);
        -ms-transform: translateY(22px);
        transform: translateY(22px);
    }

    50% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }
}

@-webkit-keyframes bottomLineCross {
    0% {
        -webkit-transform: translateY(22px);
        -moz-transform: translateY(22px);
        -o-transform: translateY(22px);
        -ms-transform: translateY(22px);
        transform: translateY(22px);
    }

    50% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }
}

@-o-keyframes bottomLineCross {
    0% {
        -webkit-transform: translateY(22px);
        -moz-transform: translateY(22px);
        -o-transform: translateY(22px);
        -ms-transform: translateY(22px);
        transform: translateY(22px);
    }

    50% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }
}

@keyframes bottomLineCross {
    0% {
        -webkit-transform: translateY(22px);
        -moz-transform: translateY(22px);
        -o-transform: translateY(22px);
        -ms-transform: translateY(22px);
        transform: translateY(22px);
    }

    50% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }
}

@-moz-keyframes topLineBurger {
    0% {
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(-22px) rotate(0deg);
        -moz-transform: translateY(-22px) rotate(0deg);
        -o-transform: translateY(-22px) rotate(0deg);
        -ms-transform: translateY(-22px) rotate(0deg);
        transform: translateY(-22px) rotate(0deg);
    }
}

@-webkit-keyframes topLineBurger {
    0% {
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(-22px) rotate(0deg);
        -moz-transform: translateY(-22px) rotate(0deg);
        -o-transform: translateY(-22px) rotate(0deg);
        -ms-transform: translateY(-22px) rotate(0deg);
        transform: translateY(-22px) rotate(0deg);
    }
}

@-o-keyframes topLineBurger {
    0% {
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(-22px) rotate(0deg);
        -moz-transform: translateY(-22px) rotate(0deg);
        -o-transform: translateY(-22px) rotate(0deg);
        -ms-transform: translateY(-22px) rotate(0deg);
        transform: translateY(-22px) rotate(0deg);
    }
}

@keyframes topLineBurger {
    0% {
        -webkit-transform: translateY(0px) rotate(45deg);
        -moz-transform: translateY(0px) rotate(45deg);
        -o-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(-22px) rotate(0deg);
        -moz-transform: translateY(-22px) rotate(0deg);
        -o-transform: translateY(-22px) rotate(0deg);
        -ms-transform: translateY(-22px) rotate(0deg);
        transform: translateY(-22px) rotate(0deg);
    }
}

@-moz-keyframes bottomLineBurger {
    0% {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(22px) rotate(0deg);
        -moz-transform: translateY(22px) rotate(0deg);
        -o-transform: translateY(22px) rotate(0deg);
        -ms-transform: translateY(22px) rotate(0deg);
        transform: translateY(22px) rotate(0deg);
    }
}

@-webkit-keyframes bottomLineBurger {
    0% {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(22px) rotate(0deg);
        -moz-transform: translateY(22px) rotate(0deg);
        -o-transform: translateY(22px) rotate(0deg);
        -ms-transform: translateY(22px) rotate(0deg);
        transform: translateY(22px) rotate(0deg);
    }
}

@-o-keyframes bottomLineBurger {
    0% {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(22px) rotate(0deg);
        -moz-transform: translateY(22px) rotate(0deg);
        -o-transform: translateY(22px) rotate(0deg);
        -ms-transform: translateY(22px) rotate(0deg);
        transform: translateY(22px) rotate(0deg);
    }
}

@keyframes bottomLineBurger {
    0% {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -moz-transform: translateY(0px) rotate(-45deg);
        -o-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(22px) rotate(0deg);
        -moz-transform: translateY(22px) rotate(0deg);
        -o-transform: translateY(22px) rotate(0deg);
        -ms-transform: translateY(22px) rotate(0deg);
        transform: translateY(22px) rotate(0deg);
    }
}

@-webkit-keyframes glitch-test {
    0% {
        clip: rect(-3px, 900px, 0px, 0px);
    }

    5.88235% {
        clip: rect(0px, 900px, 0px, 0px);
    }

    11.76471% {
        clip: rect(-3px, 900px, 0px, 0px);
    }

    17.64706% {
        clip: rect(-3px, 900px, 0px, 0px);
    }

    23.52941% {
        clip: rect(100px, 900px, 100px, 0px);
    }

    29.41176% {
        clip: rect(0px, 900px, 600px, 0px);
    }

    35.29412% {
        clip: rect(100px, 900px, 0px, 0px);
    }

    41.17647% {
        clip: rect(0px, 900px, 600px, 0px);
    }

    47.05882% {
        clip: rect(100px, 900px, 0px, 0px);
    }

    52.94118% {
        clip: rect(-3px, 900px, 0px, 0px);
    }

    58.82353% {
        clip: rect(100px, 450px, 100px, 0px);
    }

    64.70588% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    70.58824% {
        clip: rect(100px, 450px, 100px, 0px);
    }

    76.47059% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    82.35294% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    88.23529% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    94.11765% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    100% {
        clip: rect(0px, 450px, 0px, 0px);
    }
}

@keyframes glitch-test {
    0% {
        clip: rect(-3px, 900px, 0px, 0px);
    }

    5.88235% {
        clip: rect(0px, 900px, 0px, 0px);
    }

    11.76471% {
        clip: rect(-3px, 900px, 0px, 0px);
    }

    17.64706% {
        clip: rect(-3px, 900px, 0px, 0px);
    }

    23.52941% {
        clip: rect(100px, 900px, 100px, 0px);
    }

    29.41176% {
        clip: rect(0px, 900px, 600px, 0px);
    }

    35.29412% {
        clip: rect(100px, 900px, 0px, 0px);
    }

    41.17647% {
        clip: rect(0px, 900px, 600px, 0px);
    }

    47.05882% {
        clip: rect(100px, 900px, 0px, 0px);
    }

    52.94118% {
        clip: rect(-3px, 900px, 0px, 0px);
    }

    58.82353% {
        clip: rect(100px, 450px, 100px, 0px);
    }

    64.70588% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    70.58824% {
        clip: rect(100px, 450px, 100px, 0px);
    }

    76.47059% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    82.35294% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    88.23529% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    94.11765% {
        clip: rect(0px, 450px, 0px, 0px);
    }

    100% {
        clip: rect(0px, 450px, 0px, 0px);
    }
}

@keyframes fadeInLeft {
    from {
        transform: translate3d(300px, 0, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeInRight {
    from {
        transform: translate3d(-300px, 0, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        transform: scale(.6);
        opacity: 0;
    }

    to {
        transform: translateZ(0) scale(1);
        opacity: 1;
    }
}