/* ----------------------------------------------
* Generated by Animista on 2019-8-14 11:17:23
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slit-in-horizontal
 * animation slit-out-horizontal
 * (Used for the lesson video completion popup)
 * ----------------------------------------
 */
@-webkit-keyframes slit-in-horizontal {
    0% {
        -webkit-transform: translateZ(-800px) rotateX(90deg);
        transform: translateZ(-800px) rotateX(90deg);
        opacity: 0;
    }
    54% {
        -webkit-transform: translateZ(-160px) rotateX(87deg);
        transform: translateZ(-160px) rotateX(87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
    }
}
@keyframes slit-in-horizontal {
    0% {
        -webkit-transform: translateZ(-800px) rotateX(90deg);
        transform: translateZ(-800px) rotateX(90deg);
        opacity: 0;
    }
    54% {
        -webkit-transform: translateZ(-160px) rotateX(87deg);
        transform: translateZ(-160px) rotateX(87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
    }
}


@-webkit-keyframes slit-out-horizontal {
    0% {
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
    }
    46% {
        -webkit-transform: translateZ(-160px) rotateX(87deg);
        transform: translateZ(-160px) rotateX(87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(-800px) rotateX(90deg);
        transform: translateZ(-800px) rotateX(90deg);
        opacity: 0;
    }
}
@keyframes slit-out-horizontal {
    0% {
        -webkit-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
    }
    46% {
        -webkit-transform: translateZ(-160px) rotateX(87deg);
        transform: translateZ(-160px) rotateX(87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(-800px) rotateX(90deg);
        transform: translateZ(-800px) rotateX(90deg);
        opacity: 0;
    }
}