@charset "utf-8";
// @include animated;
@mixin animated($time:0.5s) {
  animation-duration: $time;
}
/* -- fade -- */
@-webkit-keyframes fade-enter {
  from {
    opacity: 0;
  }
}
@keyframes fade-enter {
  from {
    opacity: 0;
  }
}
.fade-enter-active {
  -webkit-animation: fade-enter both ease-in;
  animation: fade-enter both ease-in;
  @include animated;
}
@-webkit-keyframes fade-leave {
  to {
    opacity: 0
  }
}
@keyframes fade-leave {
  to {
    opacity: 0
  }
}
.fade-leave-active {
  -webkit-animation: fade-leave both ease-out;
  animation: fade-leave both ease-out;
  @include animated;
}
/* -- zoom -- */
@-webkit-keyframes zoom-enter {
  from {
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    opacity: 0;
  }
}
@keyframes zoom-enter {
  from {
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    opacity: 0;
  }
}
.zoom-enter-active {
  -webkit-animation: zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@-webkit-keyframes zoom-leave {
  to {
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    opacity: 0;
  }
}
@keyframes zoom-leave {
  to {
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    opacity: 0;
  }
}
.zoom-leave-active {
  -webkit-animation: zoom-leave both;
  animation: zoom-leave both;
  @include animated;
}
/* -- slideUp -- */
@-webkit-keyframes slideUp-enter {
  from {
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
    opacity: 0;
  }
}
@keyframes slideUp-enter {
  from {
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
    opacity: 0;
  }
}
.slideUp-enter-active {
  -webkit-animation: slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@-webkit-keyframes slideUp-leave {
  to {
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
    opacity: 0;
  }
}
@keyframes slideUp-leave {
  to {
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
    opacity: 0;
  }
}
.slideUp-leave-active {
  -webkit-animation: slideUp-leave both;
  animation: slideUp-leave both;
  @include animated;
}
/* -- slideDown -- */
@-webkit-keyframes slideDown-enter {
  from {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    opacity: 0;
  }
}
@keyframes slideDown-enter {
  from {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    opacity: 0;
  }
}
.slideDown-enter-active {
  -webkit-animation: slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@-webkit-keyframes slideDown-leave {
  to {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    opacity: 0;
  }
}
@keyframes slideDown-leave {
  to {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    opacity: 0;
  }
}
.slideDown-leave-active {
  -webkit-animation: slideDown-leave both;
  animation: slideDown-leave both;
  @include animated;
}
/* -- slideLeft -- */
@-webkit-keyframes slideLeft-enter {
  from {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }
}
@keyframes slideLeft-enter {
  from {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }
}
.slideLeft-enter-active {
  -webkit-animation: slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@-webkit-keyframes slideLeft-leave {
  to {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }
}
@keyframes slideLeft-leave {
  to {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }
}
.slideLeft-leave-active {
  -webkit-animation: slideLeft-leave both;
  animation: slideLeft-leave both;
  @include animated;
}
/* -- slideRight -- */
@-webkit-keyframes slideRight-enter {
  from {
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
}

@keyframes slideRight-enter {
  from {
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
}
.slideRight-enter-active {
  -webkit-animation: slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
  @include animated;
}
@-webkit-keyframes slideRight-leave {
  to {
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
}
@keyframes slideRight-leave {
  to {
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
}
.slideRight-leave-active {
  -webkit-animation: slideRight-leave both;
  animation: slideRight-leave both;
  @include animated;
}