.drop-anim {
  animation: drop 2.5s infinite;
}

@keyframes drop {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
  }

}

.smooth-zigzag-anim-1 {
  animation: smooth-zigzag-1 5s linear infinite;
  -webkit-animation: smooth-zigzag-1 5s linear infinite;
}

@keyframes smooth-zigzag-1 {

  0%,
  100% {
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
  }

  25% {
    transform: translate(10px, 10px);
    -webkit-transform: translate(10px, 10px);
    -moz-transform: translate(10px, 10px);
    -ms-transform: translate(10px, 10px);
    -o-transform: translate(10px, 10px);
  }

  50% {
    transform: translate(5px, 5px);
    -webkit-transform: translate(5px, 5px);
    -moz-transform: translate(5px, 5px);
    -ms-transform: translate(5px, 5px);
    -o-transform: translate(5px, 5px);
  }

  75% {
    transform: translate(10px, -5px);
    -webkit-transform: translate(10px, -5px);
    -moz-transform: translate(10px, -5px);
    -ms-transform: translate(10px, -5px);
    -o-transform: translate(10px, -5px);
  }

}

.smooth-zigzag-anim-2 {
  animation: smooth-zigzag-2 5s linear infinite;
  -webkit-animation: smooth-zigzag-2 5s linear infinite;
}

@keyframes smooth-zigzag-2 {

  0%,
  100% {
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
  }

  25% {
    transform: translate(-10px, -10px);
    -webkit-transform: translate(-10px, -10px);
    -moz-transform: translate(-10px, -10px);
    -ms-transform: translate(-10px, -10px);
    -o-transform: translate(-10px, -10px);
  }

  50% {
    transform: translate(-5px, -5px);
    -webkit-transform: translate(-5px, -5px);
    -moz-transform: translate(-5px, -5px);
    -ms-transform: translate(-5px, -5px);
    -o-transform: translate(-5px, -5px);
  }

  75% {
    transform: translate(-10px, 5px);
    -webkit-transform: translate(-10px, 5px);
    -moz-transform: translate(-10px, 5px);
    -ms-transform: translate(-10px, 5px);
    -o-transform: translate(-10px, 5px);
  }

}

.smooth-zigzag-anim-3 {
  animation: smooth-zigzag-3 5s linear infinite;
  -webkit-animation: smooth-zigzag-3 5s linear infinite;
}

@keyframes smooth-zigzag-3 {

  0%,
  100% {
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
  }

  25% {
    transform: translate(-7px, -7px);
    -webkit-transform: translate(-7px, -7px);
    -moz-transform: translate(-7px, -7px);
    -ms-transform: translate(-7px, -7px);
    -o-transform: translate(-7px, -7px);
  }

  50% {
    transform: translate(-14px, -14px);
    -webkit-transform: translate(-14px, -14px);
    -moz-transform: translate(-14px, -14px);
    -ms-transform: translate(-14px, -14px);
    -o-transform: translate(-14px, -14px);
  }

  75% {
    transform: translate(-7px, -7px);
    -webkit-transform: translate(-7px, -7px);
    -moz-transform: translate(-7px, -7px);
    -ms-transform: translate(-7px, -7px);
    -o-transform: translate(-7px, -7px);
  }

}

.pulse-anim {
  animation: pulse 3s linear infinite;
  -webkit-animation: pulse 3s linear infinite;
}

@keyframes pulse {

  0%,
  70% {
    box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 1);
  }

  100% {
    box-shadow: 0 0 0 15px transparent;
  }

}