.menuReveal {
    animation-name: menuReveal;
}
@keyframes menuReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
/* ==========================================================
Fade Out Navigation
========================================================== */
.fadeOutNav {
    animation-name: fadeOutNav;
}
@keyframes fadeOutNav {
    from {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateY(-16px);
        filter: blur(6px);
    }
}
/* ==========================================================
Scroll Effects
========================================================== */
[data-effect-name] {
opacity: 0;
will-change: opacity, transform;
}
.animated {
animation-fill-mode: both;
animation-timing-function: cubic-bezier(.22,1,.36,1);
}
/* ==========================================================
Animated Text
========================================================== */
.animated-text span {
display: inline-block;
opacity: 0;
transform: translateY(20px);
animation: fadeUp .5s forwards;
}
@keyframes fadeUp {
from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
}
to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
}
/* ==========================================================
Fade
========================================================== */
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
/* ==========================================================
Fade Up
========================================================== */
.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
from {
    opacity: 0;
    transform: translateY(40px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/* ==========================================================
Fade Down
========================================================== */
.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
from {
    opacity: 0;
    transform: translateY(-40px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/* ==========================================================
Slide Left
========================================================== */
.slideInLeft {
animation-name: slideInLeft;
}
@keyframes slideInLeft {
from {
    opacity: 0;
    transform: translateX(-40px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
/* ==========================================================
Slide Right
========================================================== */
.slideInRight {
animation-name: slideInRight;
}
@keyframes slideInRight {
from {
    opacity: 0;
    transform: translateX(40px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
/* ==========================================================
Zoom In
========================================================== */
.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
from {
    opacity: 0;
    transform: scale(.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
/*
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}