/* ALWAYS ANIMATE IN - USE 'REVERSE' TO ANIMATE OUT*/

@keyframes slide-left {
	0% {transform: translate3d(100%, 0, 0);	}
	100% {transform: translate3d(0, 0, 0);	}
}

@keyframes slide-right {
	0% {transform: translate3d(-100%, 0, 0);}
	100% {transform: translate3d(0%, 0, 0);}
}

@keyframes slide-up {
    0% {transform: translate3d(0, 50%, 0); opacity: 0 }
    100% {transform: translate3d(0, 0, 0); opacity: 1   }
}

@keyframes slide-down {
    0% {transform: translate3d(0, -100%, 0); }
    100% {transform: translate3d(0, 0%, 0);   }
}

@keyframes slide-down-notes {
    0% {transform: translate3d(0, -10%, 0); opacity: 0 }
    100% {transform: translate3d(0, 0, 0); opacity: 1   }
}


@keyframes scale {
    0% {transform: translate3d(0, 0, 0) scale(0.9);}
    100% {transform: translate3d(0, 0, 0) scale(1);
    }
}


/*KEEP NEW ANIMATION IN FRONT*/
[class^="-enter"]{
    z-index: 100;
}

[class^="-leave"]{
}

/* ANIMATIONS */

.over-out-enter-active{    animation: slide-up 0.3s cubic-bezier(0.56, 0, 0.39, 1);  z-index: 100; }
.over-out-leave-active{    animation: scale reverse 0.3s cubic-bezier(0.56, 0, 0.39, 1); z-index: 90; }

.down-in-enter-active{    animation: scale 0.3s cubic-bezier(0.56, 0, 0.39, 1);  z-index: 90; }
.down-in-leave-active{    animation: slide-up reverse 0.3s cubic-bezier(0.56, 0, 0.39, 1); z-index: 100; }

.footer-enter-active{          animation: slide-up 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}
.footer-leave-active{          animation: slide-up reverse 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}

.slide-left-enter-active{      animation: slide-left 0.3s cubic-bezier(0.56, 0, 0.39, 1); z-index: 100;}
.slide-left-leave-active{      animation: slide-right reverse 0.3s cubic-bezier(0.56, 0, 0.39, 1); z-index: 90;}

.slide-right-enter-active{     animation: slide-right 0.3s cubic-bezier(0.56, 0, 0.39, 1);z-index: 90;}
.slide-right-leave-active{     animation: slide-left reverse 0.3s cubic-bezier(0.56, 0, 0.39, 1);z-index: 100;}

.slide-up-enter-active{         animation: slide-up 0.3s cubic-bezier(0.56, 0, 0.39, 1); z-index: 100;}
.slide-up-leave-active{         animation: scale reverse 0.3s cubic-bezier(0.56, 0, 0.39, 1); z-index: 90;}

.slide-over-enter-active{         animation: slide-up 0.3s cubic-bezier(0.56, 0, 0.39, 1)}
.slide-over-leave-active{         animation: slide-up reverse 0.3s cubic-bezier(0.56, 0, 0.39, 1)}


.slide-down-enter-active{       animation: scale 0.3s cubic-bezier(0.56, 0, 0.39, 1);z-index: 90;}
.slide-down-leave-active{       animation: slide-up reverse 0.3s cubic-bezier(0.56, 0, 0.39, 1); z-index: 100;}

.push-left-enter-active{        animation: slide-left 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}
.push-left-leave-active{        animation: slide-right reverse 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}

.push-right-enter-active{       animation: slide-right 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}
.push-right-leave-active{       animation: slide-left reverse 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}

.push-up-enter-active{          animation: slide-up 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}
.push-up-leave-active{          animation: slide-down reverse 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}

.push-down-enter-active{        animation: slide-down 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}
.push-down-leave-active{        animation: slide-up reverse 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);}

.scale-enter-active{          animation: scale reverse 0.3s cubic-bezier(0.56, 0, 0.39, 1)}
.scale-leave-active{          animation: scale 0.3s cubic-bezier(0.56, 0, 0.39, 1)}

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

.noteList-enter-active{       animation: slide-down-notes 0.3s ease-out;}
.noteList-down-leave-active{  animation: slide-down-notes reverse 0.3s ease-in;}