@keyframes rt-draw {
  from {
    stroke-dashoffset: 100
  }

  to {
    stroke-dashoffset: 0
  }
}

@keyframes rt-fade-ticks {
  from {
    opacity: 0
  }

  to {
    opacity: .35
  }
}

@keyframes rt-fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes rt-cross {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes rt-lock {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes rt-sweep {
  0% {
    opacity: 0;
    transform: rotate(-12deg)
  }

  20% {
    opacity: .55
  }

  70% {
    opacity: .55;
    transform: rotate(150deg)
  }

  100% {
    opacity: 0;
    transform: rotate(168deg)
  }
}

@keyframes text-in {
  from {
    opacity: 0;
    transform: translateY(4px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes flow-stage {
  0% {
    opacity: 0
  }

  3% {
    opacity: 1
  }

  23% {
    opacity: 1
  }

  26%,
  100% {
    opacity: 0
  }
}

@keyframes flow-arrow {
  0% {
    opacity: 0;
    transform: translateX(0)
  }

  2% {
    opacity: 1
  }

  8% {
    opacity: 1;
    transform: translateX(24px)
  }

  9%,
  100% {
    opacity: 0;
    transform: translateX(24px)
  }
}

@keyframes dispatch-out {
  0% {
    opacity: 0;
    transform: translateX(0)
  }

  4% {
    opacity: 1
  }

  40% {
    opacity: 1;
    transform: translateX(51px)
  }

  44%,
  100% {
    opacity: 0;
    transform: translateX(51px)
  }
}

@keyframes dispatch-back {

  0%,
  50% {
    opacity: 0;
    transform: translateX(51px)
  }

  54% {
    opacity: 1
  }

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

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

@keyframes dispatch-out-v {
  0% {
    opacity: 0;
    transform: translateY(0)
  }

  4% {
    opacity: 1
  }

  40% {
    opacity: 1;
    transform: translateY(23px)
  }

  44%,
  100% {
    opacity: 0;
    transform: translateY(23px)
  }
}

@keyframes dispatch-back-v {

  0%,
  50% {
    opacity: 0;
    transform: translateY(23px)
  }

  54% {
    opacity: 1
  }

  90% {
    opacity: 1;
    transform: translateY(0)
  }

  94%,
  100% {
    opacity: 0;
    transform: translateY(0)
  }
}

@keyframes evo-draw {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

@keyframes draw-y {
  from {
    transform: scaleY(0)
  }

  to {
    transform: scaleY(1)
  }
}

@keyframes flow-arrow-down {
  0% {
    opacity: 0;
    transform: translate(-50%, 0)
  }

  2% {
    opacity: 1
  }

  8% {
    opacity: 1;
    transform: translate(-50%, 22px)
  }

  9%,
  100% {
    opacity: 0;
    transform: translate(-50%, 22px)
  }
}