/*=========================================
    REVEAL SYSTEM
=========================================*/

.reveal{

    opacity:0;

    visibility:hidden;

    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1),
        transform .9s cubic-bezier(.22,.61,.36,1),
        filter .9s cubic-bezier(.22,.61,.36,1);

    will-change:
        transform,
        opacity,
        filter;

}

.reveal.show{

    opacity:1;

    visibility:visible;

}

/*=========================================
    DIRECTIONS
=========================================*/

.reveal-up{

    transform:translateY(60px);

    filter:blur(8px);

}

.reveal-up.show{

    transform:translateY(0);

    filter:blur(0);

}

.reveal-down{

    transform:translateY(-60px);

    filter:blur(8px);

}

.reveal-down.show{

    transform:translateY(0);

    filter:blur(0);

}

.reveal-left{

    transform:translateX(-70px);

    filter:blur(8px);

}

.reveal-left.show{

    transform:translateX(0);

    filter:blur(0);

}

.reveal-right{

    transform:translateX(70px);

    filter:blur(8px);

}

.reveal-right.show{

    transform:translateX(0);

    filter:blur(0);

}

.reveal-scale{

    transform:scale(.92);

    filter:blur(8px);

}

.reveal-scale.show{

    transform:scale(1);

    filter:blur(0);

}

.reveal-fade{

    filter:blur(6px);

}

.reveal-fade.show{

    filter:blur(0);

}

/*=========================================
    DELAYS
=========================================*/

.delay-1{

    transition-delay:.1s;

}

.delay-2{

    transition-delay:.2s;

}

.delay-3{

    transition-delay:.3s;

}

.delay-4{

    transition-delay:.4s;

}

.delay-5{

    transition-delay:.5s;

}

.delay-6{

    transition-delay:.6s;

}