/*Reveal animations*/
.reveal{ position: relative; transition: 1s all; opacity: 0; }
.reveal.active{ opacity: 1; }

@media screen and (min-width: 1024px){

    /*Reveal from Right*/
    .reveal.reveal-right{ transform: translateX(100px); }
    .reveal.reveal-right.active{ transform: translateX(0); }

    /*Reveal from Left*/
    .reveal.reveal-left{ transform: translateX(-100px); }
    .reveal.reveal-left.active{ transform: translateX(0); }

    /*Reveal from Bottom*/
    .reveal.reveal-bottom{ transform: translateY(100px); }
    .reveal.reveal-bottom.active{ transform: translateY(0); }

    /*Reveal from Top*/
    .reveal.reveal-top{ transform: translateY(-100px); }
    .reveal.reveal-top.active{ transform: translateY(0); }

    /*Animation duration framework*/
    .reveal.duration-100{ transition: .3s all; }
    .reveal.duration-200{ transition: .5s all; }
    .reveal.duration-300{ transition: .7s all; }
    .reveal.duration-400{ transition: .9s all; }
    .reveal.duration-500{ transition: 1.1s all; }
    .reveal.duration-600{ transition: 1.3s all; }
    .reveal.duration-700{ transition: 1.5s all; }
    .reveal.duration-800{ transition: 1.8s all; }
    .reveal.duration-900{ transition: 2s all; }

}

@media screen and (max-width: 1023px){

    /*Reveal from Right*/
    .reveal.mobile-reveal-right{ transform: translateX(100px); }
    .reveal.mobile-reveal-right.active{ transform: translateX(0); }

    /*Reveal from Left*/
    .reveal.mobile-reveal-left{ transform: translateX(-100px); }
    .reveal.mobile-reveal-left.active{ transform: translateX(0); }

    /*Reveal from Bottom*/
    .reveal.mobile-reveal-bottom{ transform: translateY(100px); }
    .reveal.mobile-reveal-bottom.active{ transform: translateY(0); }

    /*Reveal from Top*/
    .reveal.mobile-reveal-top{ transform: translateY(-100px); }
    .reveal.mobile-reveal-top.active{ transform: translateY(0); }

    /*Animation duration framework*/
    .reveal.mobile-duration-100{ transition: .3s all; }
    .reveal.mobile-duration-200{ transition: .5s all; }
    .reveal.mobile-duration-300{ transition: .7s all; }
    .reveal.mobile-duration-400{ transition: .9s all; }
    .reveal.mobile-duration-500{ transition: 1.1s all; }
    .reveal.mobile-duration-600{ transition: 1.3s all; }
    .reveal.mobile-duration-700{ transition: 1.5s all; }
    .reveal.mobile-duration-800{ transition: 1.8s all; }
    .reveal.mobile-duration-900{ transition: 2s all; }

}