.stage {
    position: absolute;
    bottom: -120px;
    left: 50%;
    width: 600px;
    height: 96px;
    margin-left: -300px;
    margin-top: -30px;
  }
  
  svg {
    width: 48px;
    height: 48px;
    margin: 24px 0 0 40px;
    fill: #fff;
  }
  
  /* Thunder Bolt Animation */
  .thunder-cloud .bolt {
    animation: flash 2s infinite;
  }
  
  @keyframes flash {
    0% {
      transform: translateY(-25px) translateX(25px) scaleY(0.95);
      opacity: 0;
    }
    5%, 25% {
      opacity: 1;
    }
    15%, 20% {
      opacity: 0;
    }
    50% {
      transform: translateY(8px) translateX(-10px);
      opacity: 1;
    }
    80% {
      transform: translateY(8px) translateX(-10px);
      opacity: 0;
    }
    100% {
      transform: translateY(-25px) translateX(25px) scaleY(0.95);
      opacity: 0;
    }
  }
  
  /* Raindrops Animation */
  .rain-cloud .raindrop-one,
  .rain-cloud .raindrop-two,
  .rain-cloud .raindrop-three {
    opacity: 0;
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  
  .rain-cloud .raindrop-one {
    animation: falling-drop-one 2s infinite;
  }
  
  .rain-cloud .raindrop-two {
    animation: falling-drop-two 1.90s infinite;
    animation-delay: 0.8s;
  }
  
  .rain-cloud .raindrop-three {
    animation: falling-drop-three 1.80s infinite;
    animation-delay: 0.5s;
  }
  
  @keyframes falling-drop-one {
    0% {
      transform: translateY(-35px);
      opacity: 0;
    }
    10% {
      transform: translateY(-15px);
      opacity: 1;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translateY(100px);
      opacity: 0;
    }
    100% {
      transform: translateY(-35px);
      opacity: 0;
    }
  }
  
  @keyframes falling-drop-two {
    0% {
      transform: translateY(-105px);
      opacity: 0;
    }
    10% {
      transform: translateY(-85px);
      opacity: 1;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translateY(5px);
      opacity: 0;
    }
    100% {
      transform: translateY(-105px);
      opacity: 0;
    }
  }
  
  @keyframes falling-drop-three {
    0% {
      transform: translateY(-105px);
      opacity: 0;
    }
    10% {
      transform: translateY(-85px);
      opacity: 1;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translateY(35px);
      opacity: 0;
    }
    100% {
      transform: translateY(-105px);
      opacity: 0;
    }
  }
  
  /* Snowflake Animations */
  .snow-cloud .snowflake-one,
  .snow-cloud .snowflake-two,
  .snow-cloud .snowflake-three {
    opacity: 0;
    transform-origin: center center;
    animation-timing-function: ease-in;
  }
  
  .snow-cloud .snowflake-one {
    animation: falling-snow-one 4s infinite;
  }
  
  .snow-cloud .snowflake-two {
    animation: falling-snow-two 3.8s infinite;
    animation-delay: 2.5s;
  }
  
  .snow-cloud .snowflake-three {
    animation: falling-snow-three 3.9s infinite;
    animation-delay: 1.5s;
  }
  
  @keyframes falling-snow-one {
    0% {
      transform: translateY(-65px) rotate(0);
      opacity: 0;
    }
    20% {
      transform: translateY(-10px) translateX(30px) rotate(-30deg);
      opacity: 1;
    }
    40% {
      transform: translateY(45px) translateX(-30px) rotate(30deg);
    }
    50% {
      opacity: 1;
    }
    60% {
      transform: translateY(100px) translateX(30px) rotate(-30deg);
      opacity: 0;
    }
    100% {
      transform: translateY(-65px);
      opacity: 0;
    }
  }
  
  @keyframes falling-snow-two {
    0% {
      transform: translateY(-75px) rotate(0);
      opacity: 0;
    }
    20% {
      transform: translateY(-45px) translateX(40px) rotate(-30deg);
      opacity: 1;
    }
    40% {
      transform: translateY(5px) translateX(-40px) rotate(30deg);
    }
    50% {
      opacity: 1;
    }
    60% {
      transform: translateY(30px) translateX(20px) rotate(-30deg);
      opacity: 0;
    }
    100% {
      transform: translateY(-75px);
      opacity: 0;
    }
  }
  
  @keyframes falling-snow-three {
    0% {
      transform: translateY(-85px) rotate(0);
      opacity: 0;
    }
    20% {
      transform: translateY(-10px) translateX(-30px) rotate(30deg);
      opacity: 1;
    }
    40% {
      transform: translateY(25px) translateX(30px) rotate(-30deg);
    }
    50% {
      opacity: 1;
    }
    60% {
      transform: translateY(60px) translateX(-30px) rotate(30deg);
      opacity: 0;
    }
    100% {
      transform: translateY(-85px);
      opacity: 0;
    }
  }
  
  /* Sunny Cloud Animations */
  .sun-cloud .sun-half {
    animation: sun-grow 4s infinite cubic-bezier(0.2, 0.85, 0.4, 1.5);
    transform-origin: bottom center;
  }
  
  .sun-cloud .ray-one {
    animation: ray-show-one 4s infinite linear;
    transform-origin: center right;
  }
  .sun-cloud .ray-two {
    animation: ray-show-two 4s infinite linear;
    transform-origin: bottom right;
  }
  .sun-cloud .ray-three {
    animation: ray-show-three 4s infinite linear;
    transform-origin: bottom center;
  }
  .sun-cloud .ray-four {
    animation: ray-show-four 4s infinite linear;
    transform-origin: bottom left;
  }
  .sun-cloud .ray-five {
    animation: ray-show-five 4s infinite linear;
    transform-origin: center left;
  }
  
  @keyframes sun-grow {
    0%, 90%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    15%, 80% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes ray-show-one {
    0%, 15%, 80%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    20%, 70% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes ray-show-two {
    0%, 20%, 80%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    25%, 70% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes ray-show-three {
    0%, 25%, 80%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    30%, 70% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes ray-show-four {
    0%, 30%, 80%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    35%, 70% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes ray-show-five {
    0%, 35%, 80%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    40%, 70% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes ray-show-six {
    0%, 40%, 80%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    45%, 70% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes ray-show-seven {
    0%, 45%, 80%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    50%, 70% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes ray-show-eight {
    0%, 50%, 80%, 100% {
      transform: scale(0.5);
      opacity: 0;
    }
    55%, 70% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* Sunshine Animation */
  /* If only using this animation be sure to grab the sun-grow and ray-show-x keyframes set above */
  .sunshine .sun-full {
    animation: sun-grow 4s infinite cubic-bezier(0.2, 0.85, 0.4, 1.5);
    transform-origin: center center;
  }
  
  .sunshine .sun-ray-one {
    animation: ray-show-one 4s infinite ease-in;
    transform-origin: center right;
  }
  
  .sunshine .sun-ray-two {
    animation: ray-show-two 4s infinite ease-in;
    transform-origin: bottom right;
  }
  
  .sunshine .sun-ray-three {
    animation: ray-show-three 4s infinite ease-in;
    transform-origin: bottom center;
  }
  
  .sunshine .sun-ray-four {
    animation: ray-show-four 4s infinite ease-in;
    transform-origin: bottom left;
  }
  
  .sunshine .sun-ray-five {
    animation: ray-show-five 4s infinite ease-in;
    transform-origin: center left;
  }
  
  .sunshine .sun-ray-six {
    animation: ray-show-six 4s infinite ease-in;
    transform-origin: top left;
  }
  
  .sunshine .sun-ray-seven {
    animation: ray-show-seven 4s infinite ease-in;
    transform-origin: top center;
  }
  
  .sunshine .sun-ray-eight {
    animation: ray-show-eight 4s infinite ease-in;
    transform-origin: top right;
  }
  
  /* Windy Cloud Animation */
  .windy-cloud .cloud-wrap {
    animation: bob 2s infinite cubic-bezier(0,0,.5,1.5);
  }
  .windy-cloud .cloud {
    animation: cloud-push 4s infinite;
    transform-origin: left center;
  }
  .windy-cloud .wind-one {
    animation: wind-slide-one 4s infinite;
  }
  .windy-cloud .wind-two {
    animation: wind-slide-two 4s infinite;
  }
  .windy-cloud .wind-three {
    animation: wind-slide-three 4s infinite;
  }
  
  @keyframes bob {
    0%, 100% {
      transform: translateY(10px);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  @keyframes cloud-push {
    0%, 80%, 100% {
      transform: translateX(-120px) scale(1.2);
    }
    10%, 60% {
      transform: translateX(0) scale(1);
    }
  }
  
  @keyframes wind-slide-one {
    0%, 70%, 100% {
      transform: scaleX(0);
      opacity: 0;
    }
    10%, 60% {
      transform: scaleX(1);
      opacity: 1;
    }
  }
  
  @keyframes wind-slide-two {
    0%, 70%, 100% {
      transform: scaleX(0);
      opacity: 0;
    }
    10%, 60% {
      transform: scaleX(1);
      opacity: 1;
    }
  }
  
  @keyframes wind-slide-three {
    0%, 70%, 100% {
      transform: scaleX(0);
      opacity: 0;
    }
    10%, 60% {
      transform: scaleX(1);
      opacity: 1;
    }
  }