[data-cue=bounceInDown], [data-cue=bounceInLeft], [data-cue=bounceInRight], [data-cue=bounceInUp], [data-cue=bounceIn], [data-cue=fadeIn], [data-cue=rotateIn], [data-cue=slideInDown], [data-cue=slideInLeft], [data-cue=slideInRight], [data-cue=slideInUp], [data-cue=zoomIn], [data-cue=zoomOut], [data-cues=bounceInDown] > *, [data-cues=bounceInLeft] > *, [data-cues=bounceInRight] > *, [data-cues=bounceInUp] > *, [data-cues=bounceIn] > *, [data-cues=fadeIn] > *, [data-cues=rotateIn] > *, [data-cues=slideInDown] > *, [data-cues=slideInLeft] > *, [data-cues=slideInRight] > *, [data-cues=slideInUp] > *, [data-cues=zoomIn] > *, [data-cues=zoomOut] > * {
    opacity: 0
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px)
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

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

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px)
    }

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

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

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

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

@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2)
    }

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

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotateZ(-15deg)
    }

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

@keyframes bounceIn {
    0% {
        transform: scale3d(.3,.3,.3)
    }

    20% {
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        transform: scale3d(.97,.97,.97)
    }

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

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

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

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

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

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

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

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

    from {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

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

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

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

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

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

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

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

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

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

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

    from {
        opacity: 0;
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,-20px,0)
    }

    75% {
        transform: translate3d(0,10px,0)
    }

    90% {
        transform: translate3d(0,-5px,0)
    }

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

[data-cue=flipInX], [data-cue=flipInY], [data-cues=flipInX] > *, [data-cues=flipInY] > * {
    opacity: 0;
    backface-visibility: visible
}

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(1,0,0,10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(1,0,0,-5deg)
    }

    to {
        opacity: 1;
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(0,1,0,-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(0,1,0,10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(0,1,0,-5deg)
    }

    to {
        opacity: 1;
        transform: perspective(400px)
    }
}