/* keyframes */

@keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}

@keyframes fadeInUp{
    0%{opacity:0; transform:translate3d(0,100%,0);}
    100%{opacity:1; transform:none;}
}

@keyframes fadeInDown{
    0%{opacity:0; transform:translate3d(0,-100%,0);}
    100%{opacity:1; transform:none;}
}

@keyframes fadeInRight{
    0%{opacity:0; transform:translate3d(100%,0,0);}
    100%{opacity:1; transform:none;}
}

@keyframes fadeInLeft{
    0%{opacity:0; transform:translate3d(-100%,0,0);}
    100%{opacity:1; transform:none;}
}

/* For The Page Animation */
.m-scene .scene-element{
    animation-duration:0.8s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
}

.m-scene .scene-element--fadein{
    animation-name:fadeIn;
}

.m-scene .scene-element--fadeinup{
    animation-name:fadeInUp;
}

.m-scene .scene-element--fadeindown{
    animation-name:fadeInDown;
}

.m-scene .scene-element--fadeinright{
    animation-name:fadeInRight;
}

.m-scene .scene-element--fadeinleft{
    animation-name:fadeInLeft;
}

.m-scene.is-exiting .scene-element{
    animation-direction: alternate-reverse;
}