/* INITIAL STATE — INVISIBLE & OFFSET */
.visible-from-bottom,
.visible-from-top,
.visible-slowly-right,
.visible-from-left {
    opacity: 0;
    transition: all 0.9s ease;
    will-change: opacity, transform;
}

/* DIRECTIONS */
.visible-from-bottom {
    transform: translateY(40px);
}

.visible-from-top {
    transform: translateY(-40px);
}

.visible-slowly-right {
    transform: translateX(40px);
}

.visible-from-left {
    transform: translateX(-40px);
}

/* ACTIVE STATE — FULLY VISIBLE */
.visible-from-bottom.active,
.visible-from-top.active,
.visible-slowly-right.active,
.visible-from-left.active {
    opacity: 1 !important;
    transform: translateX(0) translateY(0) !important;
}