/**
  * 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:rgb(255, 255, 255);
  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 .5s infinite linear;
          animation: spin .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; }