/* ==========================================
   ANIMATION
========================================== */

@keyframes fadeLogo{

    from{

        opacity:0;

        transform:
        translateY(-25px)
        scale(.92);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}

@keyframes floating{

    0%,100%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-18px);

    }

}

@keyframes shadowFloat{

    0%,100%{

        transform:scale(1);

        opacity:.18;

    }

    50%{

        transform:scale(.8);

        opacity:.08;

    }

}

@keyframes ripple{

    from{

        transform:scale(0);

        opacity:1;

    }

    to{

        transform:scale(4);

        opacity:0;

    }

}

@keyframes pageIn{

    from{

        opacity:0;

        transform:
        translateY(20px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

/* Page Transition */

body{

    opacity:1;

    transition:

    opacity .35s ease,

    transform .35s ease;

}

body.page-in{

    animation:pageIn .35s ease;

}

body.page-out{

    opacity:0;

    transform:translateY(-20px);

}