/* ************************************* */
/*                                       */
/* VUE Animations                        */
/*                                       */
/* ************************************* */

/* ************************************* */
/* Fade                                  */
/* ************************************* */

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

/* ************************************* */
/* SlowFade                              */
/* ************************************* */

.slowFade-enter-active, .slowFade-leave-active,{
    transition: opacity 10s;
}

.slowFade-enter, .slowFade-leave-to, {
    opacity: 0;
}

/* ************************************* */
/* Slide in from left                    */
/* ************************************* */

.slideIntoFromLeft-enter-active, 
.slideIntoFromLeft-leave-active {
    transform-origin: left top;
    transition: transform .7s, opacity .3s;
}

.slideIntoFromLeft-enter, 
.slideIntoFromLeft-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}

/* ************************************* */
/* Slide in from right                   */
/* ************************************* */

.slideIntoFromRight-enter-active, 
.slideIntoFromRight-leave-active {
    transform-origin: right top;
    transition: transform .7s, opacity .3s;
}

.slideIntoFromRight-enter, 
.slideIntoFromRight-leave-to {
    transform: translateX(100%);
    opacity: 0;
}

/* ************************************* */
/* Slide in from bottom                  */
/* ************************************* */

.slideIntoFromBottom-enter-active, 
.slideIntoFromBottom-leave-active {
    transform-origin: bottom left;
    transition: transform .5s, opacity .2s;
}

.slideIntoFromBottom-enter, 
.slideIntoFromBottom-leave-to {
    transform: translateY(100%);
    opacity: 0;
}