/**
 * ==============================================
 * CONTENEDORES
 * ==============================================
 */
.snippet{
    position: relative;
    background: transparent;
    border-radius: .25rem;
    width: 100%;
    height: auto;
    top: 40vh;
}

.stage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  margin: 0 -6%;
  overflow: hidden;
 }


/**
 * ==============================================
 * BOLAS
 * ==============================================
 */
.dot-falling {
	position: relative;
    left: -9999px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #3fc8eb;
    color: #3fc8eb;
    box-shadow: 9999px 0 0 0 #3fc8eb;
    animation: dotFalling 1s infinite linear;
    animation-delay: .1s;
}

.dot-falling::before, .dot-falling::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-falling::before {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3fc8eb;
  color: #3fc8eb;
  animation: dotFallingBefore 1s infinite linear;
  animation-delay: 0s;
  left: -30px;
}

.dot-falling::after {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3fc8eb;
  color: #3fc8eb;
  animation: dotFallingAfter 1s infinite linear;
  animation-delay: .2s;
  left: 30px;
}

/**
 * ==============================================
 * ANIMACIONES
 * ==============================================
 */

@keyframes dotFalling {
  0% {
    box-shadow: 9999px 15px 0 0 rgba(63, 200, 235, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 9999px 0 0 0 #3fc8eb;
  }
  100% {
    box-shadow: 9999px -15px 0 0 rgba(63, 200, 235, 0);
  }
}

@keyframes dotFallingBefore {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(63, 200, 235, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 9984px 0 0 0 #3fc8eb;
  }
  100% {
    box-shadow: 9984px 15px 0 0 rgba(63, 200, 235, 0);
  }
}

@keyframes dotFallingAfter {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(63, 200, 235, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 10014px 0 0 0 #3fc8eb;
  }
  100% {
    box-shadow: 10014px 15px 0 0 rgba(63, 200, 235, 0);
  }
}