.fade-in {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1.5s;
}

.fade-in-up {
    transform: translate(0, 30px);
}

.fade-in-down {
    transform: translate(0, -50px);
}

.fade-in-left {
    transform: translate(-30px, 0);
}

.fade-in-right {
    transform: translate(30px, 0);
}

.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

@media (max-width: 500px) {
    .fade-in,
    .fade-in-up,
    .fade-in-down,
    .fade-in-left,
    .fade-in-right {
        opacity: 1;
        transition: none;
        transform: translate(0, 0);
    }
    
}