/**
  * Basic
  *
  * @author jh3y - jheytompkins.com
*/
.whirl:before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  background-color:white;
  opacity: 0.1;
}
.whirl:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  margin-top: -25px; /* Half the height */
  margin-left: -25px; /* Half the width */
  -webkit-animation: spin 0.5s infinite linear;
  animation: spin 0.5s infinite linear;
  border: 6px var(--primary) solid;
  border-left-color: var(--secondary);
  border-radius: 100%;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/**
    * Trigger
    *
    * @author jh3y
  */
@-webkit-keyframes trigger {
  0%,
  100% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  30% {
    -webkit-box-shadow: -30px 30px 0 5px #fff,
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 5px #fff, -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  40% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 5px #fff, 0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5), -15px 30px 0 5px #fff,
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  50% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5), 0 30px 0 5px #fff,
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5), 0 30px 0 5px #fff,
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  60% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5), 15px 30px 0 5px #fff,
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5), 15px 30px 0 5px #fff,
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  70% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5), 30px 30px 0 5px #fff;
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5), 30px 30px 0 5px #fff;
  }
  80% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
}
@keyframes trigger {
  0%,
  100% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  30% {
    -webkit-box-shadow: -30px 30px 0 5px #fff,
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 5px #fff, -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  40% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 5px #fff, 0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5), -15px 30px 0 5px #fff,
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  50% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5), 0 30px 0 5px #fff,
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5), 0 30px 0 5px #fff,
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  60% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5), 15px 30px 0 5px #fff,
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5), 15px 30px 0 5px #fff,
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
  70% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5), 30px 30px 0 5px #fff;
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5), 30px 30px 0 5px #fff;
  }
  80% {
    -webkit-box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
    box-shadow: -30px 30px 0 0 rgba(245, 106, 106, 0.5),
      -15px 30px 0 0 rgba(245, 106, 106, 0.5),
      0 30px 0 0 rgba(245, 106, 106, 0.5),
      15px 30px 0 0 rgba(245, 106, 106, 0.5),
      30px 30px 0 0 rgba(245, 106, 106, 0.5);
  }
}

.trigger:before {
  -webkit-animation: trigger 1s infinite ease;
  animation: trigger 1s infinite ease;
  content: "";
  height: 10px;
  left: 50%;
  margin-left: -5px;
  margin-top: -20px;
  position: absolute;
  top: 0%;
  width: 10px;
}