.small-butterfly {
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  z-index: 2;
}

.small-butterfly svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.small-butterfly .wing-left {
  transform-box: view-box;
  transform-origin: 44.444% 50%;
}

.small-butterfly .wing-right {
  transform-box: view-box;
  transform-origin: 55.556% 50%;
}

.moth-1 {
  right: 10%;
  top: -30px;
  transform: rotate(18deg);
}

.moth-2 {
  left: 48%;
  top: 35px;
  transform: rotate(-15deg);
}

.moth-3 {
  right: 15px;
  top: 42px;
  transform: rotate(15deg);
}

@media (max-width:700px) {
  .moth-1 {
    right: 2px;
    top: -20px;
    width: 26px;
  }

  .moth-2 {
    left: 45%;
    top: 12px;
    width: 22px;
  }

  .moth-3 {
    top: 30px;
  }

}

.moth-4 {
  left: 18%;
  bottom: 14px;
  transform: rotate(-16deg);
}

.moth-5 {
  right: 3%;
  top: 14px;
  transform: rotate(24deg);
}

.moth-6 {
  left: 29%;
  bottom: 10px;
  transform: rotate(-22deg);
}

.moth-7 {
  left: 45%;
  top: 35px;
  transform: rotate(12deg);
}

.moth-8 {
  right: 23%;
  bottom: 13px;
  transform: rotate(-14deg);
}

@media (max-width:700px) {
  .moth-4 {
    left: 22%;
    bottom: 10px;
    width: 25px;
    height: 25px;
  }

  .moth-5 {
    right: 6%;
    top: 8px;
    width: 23px;
    height: 23px;
  }

  .moth-6 {
    left: 64%;
    bottom: 8px;
    width: 25px;
    height: 25px;
  }

  .moth-7 {
    left: 60%;
    top: 36px;
    width: 22px;
    height: 22px;
  }

  .moth-8 {
    right: 30%;
    bottom: 6px;
    width: 26px;
    height: 26px;
  }

}

.small-butterfly {
  transition: none;
}

.small-butterfly.is-fluttering .wing-left,.small-butterfly.is-fluttering .wing-right {
  animation: natural-flight-flap var(--wing-duration,320ms) ease-in-out var(--wing-beats,5);
}

.small-butterfly.is-fleeing .wing-left,.small-butterfly.is-fleeing .wing-right,
.small-butterfly.is-wandering .wing-left,.small-butterfly.is-wandering .wing-right {
  animation: natural-flight-flap 320ms ease-in-out infinite;
}

@keyframes natural-flight-flap {
  0%,100% {
    transform: scaleX(1);
  }

  42% {
    transform: scaleX(.5);
  }

  72% {
    transform: scaleX(.88);
  }

}

.moth-1 {
  width: 38px;
  height: 38px;
}

.moth-2 {
  width: 26px;
  height: 26px;
}

.moth-3 {
  width: 34px;
  height: 34px;
}

.moth-4 {
  width: 23px;
  height: 23px;
}

.moth-5 {
  width: 19px;
  height: 19px;
}

.moth-6 {
  width: 36px;
  height: 36px;
}

.moth-7 {
  width: 20px;
  height: 20px;
}

.moth-8 {
  width: 31px;
  height: 31px;
}

@media (max-width:700px) {
  .moth-1 {
    width: 32px;
    height: 32px;
  }

  .moth-3 {
    width: 29px;
    height: 29px;
  }

  .moth-6 {
    width: 30px;
    height: 30px;
  }

  .moth-8 {
    width: 27px;
    height: 27px;
  }

}

/* Keep the wordmark's layout and link stable while only its butterfly moves. */
.wordmark .logo-butterfly {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}