/*Scroll Animations*/

.reveal{
    animation-name:reveal;
    animation-duration: 2s;
    animation-direction: normal;
}

@keyframes reveal{
    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}

.scroll-fade{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}

.scroll-fade.is-inview{
    opacity: 1;
    transform: translateY(0);
}

@keyframes scrollIn{
    from{
        opacity: 0;
        transform:translate(20px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.up{
    animation-name: up;
    animation-duration: 2s;
    animation-direction: normal;
}

@keyframes up{
    from{
        transform: translateY(4vw);
        opacity: 0;
    }

    to{
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-left{
    animation-name: slide-left;
    animation-duration: 2s;
    animation-direction: nomral;
}

@keyframes slide-left{
    from{
        transform: translateX(-4vw);
        opacity: 0;
    }

    to{
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-right{
    animation-name: slide-right;
    animation-duration: 2s;
    animation-direction: nomral;
}

@keyframes slide-right{
    from{
        transform: translateX(4vw);
        opacity: 0;
    }

    to{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes spin{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}