/*-----Hero Animations--------*/
@media screen and (min-width: 40em) {
    /*FLIP IN*/
    .hero-text .flip-in {
        transform-style: preserve-3d;
        visibility: hidden;
        transform: rotateX(90deg);
        animation: 1.29s ease-out 0.5s forwards flipIn;
    }

    @keyframes flipIn {
        0% {
            visibility: hidden;
            opacity: 0.05;
            transform: rotateX(90deg);
        }
        100% {
            visibility: visible;
            opacity: 1;
            transform: rotateX(0);
        }
    }
    /*FADE UP*/
    .hero-text .fade-up {
        transform-style: preserve-3d;
        visibility: hidden;
        opacity: 0.05;
        transform: translateY(220%);
        animation: 0.89s ease-out 0.5s forwards fadeUp;
    }

    @keyframes fadeUp {
        0% {
            visibility: hidden;
            opacity: 0.05;
            transform: translateY(220%);
        }
        90% {
            transform: translateY(-3%);
        }
        100% {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }
    }
    /*FLIP IN Horizontal*/
    .hero-text .h-flip-in {
        transform-style: preserve-3d;
        visibility: hidden;
        transform: rotateY(90deg);
        animation: 1.29s ease-out 0.5s forwards hflipIn;
    }

    @keyframes hflipIn {
        0% {
            visibility: hidden;
            opacity: 0.05;
            transform: rotateY(90deg);
        }
        100% {
            visibility: visible;
            opacity: 1;
            transform: rotateY(0);
        }
    }
    /*SLIDE IN*/
    .hero-text .slide-in {
        transform-style: preserve-3d;
        animation: 0.9s ease-in-out 0.5s forwards slideIn;
        visibility: hidden;
        transform: rotateX(90deg);
    }

    @keyframes slideIn {
        0% {
            transform: translateX(-150%);
            opacity: 0;
        }
        85% {
            visibility: visible;
            transform: translateX(1%);
            opacity: 1;
        }
        100% {
            visibility: visible;
            transform: translateX(0%);
            opacity: 1;
        }
    }
    /*FALL IN*/
    .hero-text .fall-in {
        transform-style: preserve-3d;
        animation: 0.9s ease-out 0.5s forwards fallIn;
        visibility: hidden;
        transform: translateY(-150%) rotateX(90deg);
    }

    @keyframes fallIn {
        0% {
            visibility: hidden;
            opacity: 0.05;
            transform: translateY(-150%) rotateX(90deg);
        }
        30% {
            visibility: hidden;
            opacity: 0.05;
            transform: translateY(-100%) rotateX(90deg);
        }
        100% {
            visibility: visible;
            opacity: 1;
            transform: translateY(0%) rotateX(0);
        }
    }
}