body {
}


/* bottom → top */
/*.slide-bottom {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

    .slide-bottom.active {
        opacity: 1;
        transform: translateY(0);
    }*/

/* left → right */
/*.slide-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

    .slide-left.active {
        opacity: 1;
        transform: translateX(0);
    }*/

/* right → left */
/*.slide-right {
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

    .slide-right.active {
        opacity: 1;
        transform: translateX(0);
    }*/

/* top → bottom */
/*.slide-top {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

    .slide-top.active {
        opacity: 1;
        transform: translateY(0);
    }*/


/* Base hidden state */
.animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s ease-out;
    will-change: transform;
}

/* Left */
.slide-left {
    transform: translateX(-70px);
}

/* Right */
.slide-right {
    transform: translateX(70px);
}
/* Slide from top */
.slide-top {
    transform: translateY(-70px);
}

/* Slide from bottom */
.slide-bottom {
    transform: translateY(70px);
}
/* When visible */
.animate.show {
    opacity: 1;
    transform: translateX(0) translateY(0);
}