<div class="wrapper">
  <h2>Thunder Showers Likely</h2>
  <div class="cloud"></div>
  <div class="lightening-1"></div>
  <div id="rain">
      <div class="drops drops1"></div>
      <div class="drops drops2"></div>
      <div class="drops drops3"></div>
      <div class="drops drops4"></div>
      <div class="drops drops5"></div>
    </div>
</div>

$sky: #46C9FF;
$bolt: #EFC371;


* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;  
  
}

body {
  background-color: darken($sky, 50%);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.wrapper {
  margin: 15% auto;
  width: 500px;
  height: 500px;
/*  border: solid 20px darken($sky, 40%);
  -webkit-border-radius: 250px;
  -moz-border-radius: 250px;
  border-radius: 250px;*/
  
  h2 {
    margin: 80px 0 0;
    text-align: center;
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
  }
}



.cloud {
  margin: 40px auto;
  position: relative;
  left: -10px;
  z-index: 20;
  width: 180px;
  height: 150px;
  background-color: whiteSmoke;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  
  &:before {
    position: absolute;
    left: -40px;
    bottom: 0px;
    content: "";
    width: 270px;
    height: 90px;
    background-color: whiteSmoke;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
  }
}

.lightening-1 {
  position: relative;
  z-index: 1;
  left: 230px;
  top: -80px;
  height: 150px;
  width: 40px;
  background-color: $bolt;
  -webkit-transform: rotate(-35deg);
  -moz-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  -o-transform: rotate(-35deg);
  transform: rotate(-35deg);
  
  &:before {
    position: absolute;
    top: -40px;
    left: -60px;
    z-index: 10;
    content:"";
    height: 100px;
    width: 40px;
    border-left: 40px solid transparent;
    border-right: 0px solid transparent;
    border-top: 100px solid darken($sky, 50%); 
  }
  &:after {
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 10;
    content:"";
    height: 100px;
    width: 40px;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 100px solid darken($sky, 50%);
  }
}


// Rain Drops

#rain {
  position: relative;
  z-index: 1;
  top: -220px;
  left: 150px;
  height: 100px;
  overflow: hidden;
  width: 300px;
}

#rain .drops {
  -webkit-animation-name: drops;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  background-color: rgba(255, 255, 255, 0.7);
  top: 200px;
  border-radius: 10px;
  height: 20px;
  width: 5px;
}

@-webkit-keyframes drops {
  0% { top: 0; }

  50% {
     background-color: rgba(255, 255, 255, 0.2);
     top: 50px;
  }

  100% {
     background-color: rgba(255, 255, 255, 0);
     top: 100px;
  }
}

.drops1 {
  position: absolute;
  left: 10px;
  -webkit-animation-delay: 1000ms;
  -webkit-animation-duration: 1000ms;
}

.drops2 {
  position: absolute;
  left: 50px;
  -webkit-animation-delay: 700ms;
  -webkit-animation-duration: 1100ms;
}

.drops3 {
  position: absolute;
  left: 100px;
  -webkit-animation-delay: 1200ms;
  -webkit-animation-duration: 1300ms;
}

.drops4 {
  position: absolute;
  left: 130px;
  -webkit-animation-delay: 1100ms;
  -webkit-animation-duration: 700ms;
}

.drops5 {
  position: absolute;
  left: 170px;
  -webkit-animation-delay: 1300ms;
  -webkit-animation-duration: 1200ms;
}