.js-scroll {
    opacity: 0;
    transition: opacity .75s ease-in-out;
}

.js-scroll.scrolled {
    opacity: 1;
    transition: opacity .75s ease-in-out;
}

.js-type {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.js-type.typed {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}
.scrolled.fade-in {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.fade-in,
.fade-in-bottom {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.fade-in-bottom {
    transform: translateY(50px);
    transition: transform 1s ease-in-out;
}

.scrolled.fade-in-bottom {
    transform: translateY(0);
}

.slide-left {
    opacity: 0;
    transform: translateX(-150px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.scrolled.slide-left {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1s ease-in-out, transform .75s ease-in-out;
}

.slide-right {
    opacity: 0;
    transform: translateX(150px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.scrolled.slide-right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1s ease-in-out, transform .75s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slide-down {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(10%);
        opacity: .9;
    }
}

@keyframes slide-up {
    from {
        transform: translateY(10%);
        opacity: .9;
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeOutShrink {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: .8;
        transform: scale(.9);
    }
}

@keyframes fadeInExpand {
    from {
        opacity: .8;
        transform: scale(.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}