.parallelogram {
  -webkit-transform: skew(-40deg);
  -moz-transform: skew(-40deg);
  -o-transform: skew(-40deg);
  transform: skew(-40deg);
  position: absolute;
  z-index: -9;
}

#one {
  width: 20px;
  height: 300px;
  animation: moveBar 15s linear infinite;
  -webkit-box-shadow: 100px 509px #03A94B, 20px 300px #03A94B, -120px 150px #03A94B;
  -moz-box-shadow: 100px 509px #03A94B, 20px 300px #03A94B, -120px 150px #03A94B;
  box-shadow: 100px 509px #03A94B, 20px 300px #03A94B, -120px 150px #03A94B;
}

#two {
  width: 10px;
  height: 300px;
  animation: moveBar 30s linear infinite;
  -webkit-box-shadow: 250px 450px #09549D, -50px 200px #09549D;
  -moz-box-shadow: 250px 450px #09549D, -50px 200px #09549D;
  box-shadow: 250px 450px #09549D, -50px 200px #09549D;
}

#three {
  width: 10px;
  height: 500px;
  animation: moveBar 20s linear infinite;
  -webkit-box-shadow: 70px 500px #9BBAD6, -100px 200px #9BBAD6;
  -moz-box-shadow: 70px 500px #9BBAD6, -100px 200px #9BBAD6;
  box-shadow: 70px 500px #9BBAD6, -100px 200px #9BBAD6;
}

@keyframes moveBar {
  100% {
    transform: skew(-40deg) translateY(-1000px);
  }
}


@media (max-width: 479px) and (-webkit-min-device-pixel-ratio: 2), all and (-moz-min-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 2), all and (-o-min-device-pixel-ratio: 2/1) {

.parallelogram {
left: -100px;
opacity:.3;
}

}