/* NONE */
.au-animate.animate-none.au-enter-active {
  -webkit-animation: none;
  animation: none;
}
.au-animate.animate-none.au-leave-active {
  -webkit-animation: none;
  animation: none;
}
.au-animate.animate-none.aurelia-hide-add {
  -webkit-animation: none;
  animation: none;
}
.au-animate.animate-none.aurelia-hide-remove {
  -webkit-animation: none;
  animation: none;
}
/* FADE */
.au-animate.animate-fade.au-enter-active {
  -webkit-animation: fadeIn 0.4s;
  animation: fadeIn 0.4s;
}
.au-animate.animate-fade.au-leave-active {
  -webkit-animation: fadeOut 0.4s;
  animation: fadeOut 0.4s;
}
.au-animate.animate-fade.aurelia-hide-add {
  -webkit-animation: fadeOut 0.5s ease-out;
  animation: fadeOut 0.5s ease-out;
}
.au-animate.animate-fade.aurelia-hide-remove {
  -webkit-animation: fadeIn 0.5s ease-out;
  animation: fadeIn 0.5s ease-out;
}
/* TOP */
.au-animate.animate-top.au-enter-active {
  -webkit-animation: fadeInTop 0.4s;
  animation: fadeInTop 0.4s;
}
.au-animate.animate-top.au-leave-active {
  -webkit-animation: fadeOutBottom 0.4s;
  animation: fadeOutBottom 0.4s;
}
.au-animate.animate-top.aurelia-hide-add {
  -webkit-animation: fadeOutTop 0.5s ease-out;
  animation: fadeOutTop 0.5s ease-out;
}
.au-animate.animate-top.aurelia-hide-remove {
  -webkit-animation: fadeInTop 0.5s ease-out;
  animation: fadeInTop 0.5s ease-out;
}
/* RIGHT */
.au-animate.animate-right.au-enter-active {
  -webkit-animation: fadeInRight 0.4s;
  animation: fadeInRight 0.4s;
}
.au-animate.animate-right.au-leave-active {
  -webkit-animation: fadeOutLeft 0.4s;
  animation: fadeOutLeft 0.4s;
}
.au-animate.animate-right.aurelia-hide-add {
  -webkit-animation: fadeOutRight 0.5s ease-out;
  animation: fadeOutRight 0.5s ease-out;
}
.au-animate.animate-right.aurelia-hide-remove {
  -webkit-animation: fadeInRight 0.5s ease-out;
  animation: fadeInRight 0.5s ease-out;
}
/* BOTTOM */
.au-animate.animate-bottom.au-enter-active {
  -webkit-animation: fadeInBottom 0.4s;
  animation: fadeInBottom 0.4s;
}
.au-animate.animate-bottom.au-leave-active {
  -webkit-animation: fadeOutTop 0.4s;
  animation: fadeOutTop 0.4s;
}
.au-animate.animate-bottom.aurelia-hide-add {
  -webkit-animation: fadeOutBottom 0.5s ease-out;
  animation: fadeOutBottom 0.5s ease-out;
}
.au-animate.animate-bottom.aurelia-hide-remove {
  -webkit-animation: fadeInBottom 0.5s ease-out;
  animation: fadeInBottom 0.5s ease-out;
}
/* LEFT */
.au-animate.animate-left.au-enter-active {
  -webkit-animation: fadeInLeft 0.4s;
  animation: fadeInLeft 0.4s;
}
.au-animate.animate-left.au-leave-active {
  -webkit-animation: fadeOutRight 0.4s;
  animation: fadeOutRight 0.4s;
}
.au-animate.animate-left.aurelia-hide-add {
  -webkit-animation: fadeOutLeft 0.5s ease-out;
  animation: fadeOutLeft 0.5s ease-out;
}
.au-animate.animate-left.aurelia-hide-remove {
  -webkit-animation: fadeInLeft 0.5s ease-out;
  animation: fadeInLeft 0.5s ease-out;
}
/* ZOOM */
.au-animate.animate-zoom.au-enter-active {
  -webkit-animation: zoomIn 250ms;
  animation: zoomIn 250ms;
}
.au-animate.animate-zoom.au-leave-active {
  -webkit-animation: zoomOut 250ms;
  animation: zoomOut 250ms;
}
.au-animate.animate-zoom.aurelia-hide-add {
  -webkit-animation: zoomOut 250ms;
  animation: zoomOut 250ms;
}
.au-animate.animate-zoom.aurelia-hide-remove {
  -webkit-animation: zoomIn 250ms;
  animation: zoomIn 250ms;
}


/* animation definitions */
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}