/* Fade out animation */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade-out-new-user {
  animation: fade-out-new-user .75s;
}

@keyframes fade-out-new-user {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.fade-in {
  animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.slide-out-blurred-left {
  animation: slide-out-blurred-left 0.55s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

@keyframes slide-out-blurred-left {
  0% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-200px) scaleX(2) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }
}

.scale-out-hor-left {
  animation: scale-out-hor-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes scale-out-hor-left {
  0% {
    transform: scaleX(1);
    transform-origin: 0 0;
    opacity: 1;
  }

  100% {
    transform: scaleX(0);
    transform-origin: 0 0;
    opacity: 1;
  }
}

/* Fade out for idle-img */
.fade-out-img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide-out-top {
  animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes slide-out-top {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-1000px);
    opacity: 0;
  }
}

.bounce-in-top {
  animation: bounce-in-top 1.1s both;
}

@keyframes bounce-in-top {
  0% {
    transform: translateY(-500px);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }

  55% {
    transform: translateY(-65px);
    animation-timing-function: ease-in;
  }

  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  81% {
    transform: translateY(-28px);
    animation-timing-function: ease-in;
  }

  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  95% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

.scale-in-center {
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.puff-out-center {
  animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}

@keyframes puff-out-center {
  0% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    filter: blur(4px);
    opacity: 0;
  }
}


/* Animation steps */
.active-stats.zoom-in {
  left: 0;
  transform: scale(1);
  /* Zoom to normal size */
  opacity: 1;
  /* Fade in */
}

.active-main.expand-fade-in {
  width: 100%;
  /* Expand to full width */
  opacity: 1;
  /* Fade in */
}

.active-container.expand-fade-in {
  width: 350px;
  /* Expand to full width */
  opacity: 1;
  /* Fade in */
}

/* Reverse animation steps */
.active-stats.zoom-out {
  left: -100%;
  /* Move off the page to the left */
  transform: scale(0.5);
  /* Zoom out */
  opacity: 0;
  /* Fade out */
}

.active-main.collapse-fade-out {
  width: 0;
  /* Collapse to zero width */
  opacity: 0;
  /* Fade out */
}

.active-container.collapse-fade-out {
  width: 0;
  /* Collapse to zero width */
  opacity: 0;
  /* Fade out */
}

.slide-in-left {
  animation: slide-in-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.width-in-hor-left {
  animation: width-in-hor-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes width-in-hor-left {
  0% {
    flex-basis: 0;
    transform-origin: 0% 0%;
    opacity: 1;
  }

  100% {
    flex-basis: 2em;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

.scale-in-hor-left {
  animation: scale-in-hor-left .55s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes scale-in-hor-left {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 0%;
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

.flip-in-hor-bottom {
  animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes flip-in-hor-bottom {
  0% {
    transform: rotateX(80deg);
    opacity: 0;
  }

  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}


.scale-out-hor-left {
  animation: scale-out-hor-left .55s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes scale-out-hor-left {
  0% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }

  100% {
    transform: scaleX(0);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

.slide-out-left {
  animation: slide-out-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-1000px);
    opacity: 0;
  }
}

.warning-blink {
  animation: warning-blink 1s 5 both;
}

@keyframes warning-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

.heartbeatFast {
  animation-name: heartbeatFast;
  animation-iteration-count: 4
}

@keyframes heartbeatFast {

  14%,
  42% {
    transform: scale(1.5)
  }

  28%,
  70% {
    transform: scale(1)
  }
}

/* Stealth */
.slide-in-blurred-left {
  animation: slide-in-blurred-left 1.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

@keyframes slide-in-blurred-left {
  0% {
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }

  100% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}

.slide-out-blurred-left-stealth {
  animation: slide-out-blurred-left-stealth .75s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

@keyframes slide-out-blurred-left-stealth {
  0% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-1000px) scaleX(2) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }
}

/*  Animation Noti  */
.scale-in-top-noti {
  animation: scale-in-top-noti 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes scale-in-top-noti {
  0% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

.scale-out-top-noti {
	animation: scale-out-top-noti 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes scale-out-top-noti {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

.scale-in-bottom-noti {
  animation: scale-in-bottom-noti 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes scale-in-bottom-noti {
  0% {
    transform: scaleY(0);
    transform-origin: 0% 100%;
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
    opacity: 1;
  }
}

.scale-out-bottom-noti {
	animation: scale-out-bottom-noti 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes scale-out-bottom-noti {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 0% 100%;
    opacity: 1;
  }
}

.leRotateXZoomIn span {
  animation-name: leRotateXZoomIn
}

@keyframes leRotateXZoomIn {
  from {
    transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
    opacity: 0
  }

  5% {
    transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg)
  }
}

.leRotateXZoomOut span {
  animation-name: leRotateXZoomOut
}

@keyframes leRotateXZoomOut {
  95% {
    transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg)
  }

  to {
    transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
    opacity: 0
  }
}

/*  Animated Train  */
.animated-train-container {
  position: relative;
  font-size: 2rem;
  display: none;
}

.track {
  position: relative;
  overflow: hidden;
  width: 3.125em;
  /* 50px => 50/16 = 3.125em */
  height: 6.25em;
  /* 100px => 100/16 = 6.25em */
  border-left: 0.1875em solid #333;
  /* 3px => 3/16 = 0.1875em */
  transform: skew(-10deg) rotateX(45deg);
}

.track:before {
  content: "";
  position: absolute;
  height: 0.1875em;
  /* 3px => 0.1875em */
  width: 3.125em;
  /* 50px => 3.125em */
  background-color: #333;
  top: 5.625em;
  /* 90px => 90/16 = 5.625em */
  box-shadow:
    0 0 #333,
    0 -0.625em #333,
    /* -10px => -0.625em */
    0 -1.25em #333,
    /* -20px => -1.25em */
    0 -1.875em #333,
    /* -30px => -1.875em */
    0 -2.5em #333,
    /* -40px => -2.5em */
    0 -3.125em #333,
    /* -50px => -3.125em */
    0 -3.125em #333,
    /* same as before */
    0 -3.75em #333,
    /* -60px => -3.75em */
    0 -4.375em #333,
    /* -70px => -4.375em */
    0 -5em #333,
    /* -80px => -5em */
    0 -5.625em #333,
    /* -90px => -5.625em */
    0 -6.25em #333,
    /* -100px => -6.25em */
    0 -6.875em #333,
    /* -110px => -6.875em */
    0 -7.5em #333,
    /* -120px => -7.5em */
    0 -8.125em #333,
    /* -130px => -8.125em */
    0 -8.75em #333;
  /* -140px => -8.75em */
  animation: track 1s linear infinite;
}

@keyframes track {
  0% {
    transform: translateY(4.375em) rotateX(45deg);
    /* 70px => 4.375em */
  }

  100% {
    transform: translateY(0) rotateX(45deg);
  }
}

.track:after {
  content: "";
  position: absolute;
  transform: rotate(-15deg);
  width: 3.125em;
  /* 50px => 3.125em */
  height: 7.5em;
  /* 120px => 7.5em */
  background-color: #fff;
  border-left: 0.1875em solid #333;
  /* 3px => 0.1875em */
  left: 1.875em;
  /* 30px => 1.875em */
  top: -0.625em;
  /* -10px => -0.625em */
}

.train {
  position: absolute;
  width: 3.75em;
  /* 60px => 3.75em */
  height: 3.75em;
  /* 60px => 3.75em */
  background-color: #333;
  border-radius: 0.9em;
  /* 15px => 0.9375em */
  top: 0;
  left: -0.8125em;
  /* -13px => -0.8125em */
  transform-origin: bottom;
  animation: rotate 1s linear infinite;
}

.train:before {
  content: "";
  position: absolute;
  background-color: #f2f2f2;
  border-radius: .15em;
  width: 1.125em;
  /* 18px => 1.125em */
  height: 1em;
  /* 15px => 0.9375em */
  left: 0.625em;
  /* 10px => 0.625em */
  top: 0.90em;
  /* 15px => 0.9375em */
  box-shadow: 1.375em 0 #f2f2f2;
  /* 22px => 1.375em */
}

.train:after {
  content: "";
  position: absolute;
  background-color: #f2f2f2;
  border-radius: 50%;
  height: 0.5em;
  /* 10px => 0.625em */
  width: 0.5em;
  /* 10px => 0.625em */
  top: 2.75em;
  /* 40px => 2.5em */
  left: 0.6em;
  box-shadow: 2.1em 0px #f2f2f2;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0);
  }
}