/* ---------------------- FADE IN ---------------------- */

.fade-in {
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.fade-in.motion-active {
    opacity: 1;
}

/* ---------------------- FADE IN LEFT ---------------------- */

.fade-in-left {
    opacity: 0;
    -webkit-transform: translateX(-5vw);
    -ms-transform: translateX(-5vw);
    transform: translateX(-5vw);
    -webkit-transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -o-transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s;
}
.fade-in-left.motion-active {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/* ---------------------- FADE IN TOP ---------------------- */

.fade-in-top {
    opacity: 0;
    -webkit-transform: translateY(-3vw);
    -ms-transform: translateY(-3vw);
    transform: translateY(-3vw);
    -webkit-transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -o-transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s;
}
.fade-in-top.motion-active {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

/* ---------------------- FADE IN RIGHT ---------------------- */

.fade-in-right {
    opacity: 0;
    -webkit-transform: translateX(5vw);
    -ms-transform: translateX(5vw);
    transform: translateX(5vw);
    -webkit-transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -o-transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s;
}
.fade-in-right.motion-active {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/* ---------------------- FADE IN BOTTOM ---------------------- */

.fade-in-bottom {
    opacity: 0;
    -webkit-transform: translateY(3vw);
    -ms-transform: translateY(3vw);
    transform: translateY(3vw);
    -webkit-transition: opacity 0.5s, transform 0.5s;
    -moz-transition: opacity 0.5s, transform 0.5s;
    -o-transition: opacity 0.5s, transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
}
.fade-in-bottom.motion-active {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}