@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-fly-in-up {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 60%, 0);
        transform: translate3d(0, 60%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fade-fly-in-up-center {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 60%, 0);
        transform: translate3d(-50%, 60%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes fade-fly-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -60%, 0);
        transform: translate3d(0, -60%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fade-fly-in-down-center {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -60%, 0);
        transform: translate3d(-50%, -60%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes fade-fly-in-left {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(60%, 0, 0);
        transform: translate3d(60%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fade-fly-in-left-center {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(110%, 0, 0);
        transform: translate3d(110%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}
@keyframes fade-fly-in-left-top {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(110%, -50%, 0);
        transform: translate3d(60%, -50%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes fade-fly-in-right {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-60%, 0, 0);
        transform: translate3d(-60%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fade-fly-in-right-center {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-110%, 0, 0);
        transform: translate3d(-110%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}
@keyframes fade-fly-in-right-top {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-60%, -50%, 0);
        transform: translate3d(-60%, -50%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes slide-in-up {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(0, 60%, 0);
        transform: translate3d(0, 60%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slide-in-up-center {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(-50%, 60%, 0);
        transform: translate3d(-50%, 60%, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes slide-in-down {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(0, -60%, 0);
        transform: translate3d(0, -60%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slide-in-down-center {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(-50%, -60%, 0);
        transform: translate3d(-50%, -60%, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes slide-in-left {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(60%, 0, 0);
        transform: translate3d(60%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slide-in-left-center {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(110%, 0, 0);
        transform: translate3d(110%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}
@keyframes slide-in-left-top {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(60%, 0, 0);
        transform: translate3d(60%, -50%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes slide-in-right {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(-60%, 0, 0);
        transform: translate3d(-60%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slide-in-right-center {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(-110%, 0, 0);
        transform: translate3d(-110%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}
@keyframes slide-in-right-top {
    0% {
        visibility: visible;
        -webkit-transform: translate3d(-60%, 0, 0);
        transform: translate3d(-60%, -50%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, -50%, 0);
    }
}