@keyframes spinner-shuffle {
  0% {
    transform: translate3d(-2.5rem, 0, 0);
  }

  50% {
    transform: translate3d(2.5rem, 0, 0);
  }

  100% {
    transform: translate3d(-2.5rem, 0, 0);
  }
}

@media screen and (min-width: 767px) {
  .spinner-container {
    flex-direction: row;
    justify-content: center;

    balls {
      flex: 0 0 8rem;
      flex: 0 0 3rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
  }
}

.spinner-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem;

  .ball:first-child {
    background-color: #78e5ff;
    margin-right: -2rem;
  }

  .ball:nth-child(2) {
    margin-right: -2rem;
    background-color: #00b0e6;
    -webkit-animation-delay: .333s;
    animation-delay: .333s;
  }

  .ball:nth-child(3) {
    background-color: #0096c5;
    -webkit-animation-delay: .666s;
    animation-delay: .666s;
  }

  .ball {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    mix-blend-mode: multiply;
    -webkit-animation: spinner-shuffle 2s ease-in-out infinite backwards;
    animation: spinner-shuffle 2s ease-in-out infinite backwards;
  }
}