.hero-arrow {
  display: inline-block;
  width: .78em;
  height: .78em;
  margin-left: .2em;
  margin-top: -1em;
  margin-bottom: -1em;
  vertical-align: middle;
  position: relative;
  top: -.16em;
  color: #62e9e6;
  transform: scaleX(-1);
  overflow: visible
}

.hero-arrow path {
  stroke-dasharray: 100;
  stroke-dashoffset: -100
}

html.site-loaded .hero-arrow path {
  animation: hero-arrow-draw .9s cubic-bezier(.65, 0, .35, 1) .5s forwards
}

@keyframes hero-arrow-draw {
  to {
    stroke-dashoffset: 0
  }
}