@keyframes flip-in-diag-1-tr {
    0% {
        transform: rotate3d(1, 1, 0, -80deg);
        opacity: 0;
    }
    100% {
        transform: rotate3d(1, 1, 0, 0deg);
        opacity: 1;
    }
}

.flip-in-diag-1-tr {
    animation: flip-in-diag-1-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) backwards;
    animation-delay: 1s;
}

.tilt-in-fwd-bl {
    animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-fwd-bl {
    0% {
        transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 1;
    }
}
@keyframes slide-up-anim2 {
    0% {
        transform: translateY(200%);
    }
    100% {
        transform: translateY(0);
    }
}
.slide-up2 {
    animation: slide-up-anim2 0.2s linear both;
}

@keyframes slide-up-anim {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}
.slide-up {
    animation: slide-up-anim 0.2s linear both;
}

@keyframes slide-down-anim {
    0% {
        transform: translateY(-200%);
    }
    100% {
        transform: translateY(0);
    }
}

.slide-down {
    animation: slide-down-anim 0.2s linear both;
}

.swirl-in-bck {
    animation: swirl-in-bck 0.65s ease-out both;
    animation-delay: 1s;
}
@keyframes swirl-in-bck {
    0% {
        transform: rotate(540deg) scale(5);
        opacity: 0;
    }
    100% {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}


.shake-horizontal {
    animation: shake-horizontal 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-horizontal {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
        transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
        transform: translateX(10px);
    }
    80% {
        transform: translateX(8px);
    }
    90% {
        transform: translateX(-8px);
    }
}



@keyframes fade-out-anim {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fade-out {
    animation: fade-out-anim 1s linear both;
    animation-delay: 0s;
}
