.cloud {
  top: 400px;
  -webkit-animation: cloud 70s infinite linear;
  -moz-animation: cloud 70s infinite linear;
  animation: cloud 70s infinite linear;
}
.cloud:before {
  left: 50px;
}
.cloud:after {
  left: 25px;
  top: -10px;
}
.cloud:before, .cloud:after {
  content: "";
}
.cloud, .cloud:before, .cloud:after {
  position: absolute;
  width: 70px;
  height: 30px;
  z-index: 1;
  background-color: white;
  border-top-left-radius: 100px 50px;
  border-top-right-radius: 100px 50px;
  border-bottom-left-radius: 100px 50px;
  border-bottom-right-radius: 100px 50px;
  -webkit-border-top-left-radius: 100px 50px;
  -webkit-border-top-right-radius: 100px 50px;
  -webkit-border-bottom-left-radius: 100px 50px;
  -webkit-border-bottom-right-radius: 100px 50px;
  -moz-border-top-left-radius: 100px 50px;
  -moz-border-top-right-radius: 100px 50px;
  -moz-border-bottom-left-radius: 100px 50px;
  -moz-border-bottom-right-radius: 100px 50px;
}

@-webkit-keyframes cloud {
  0% {
    left: -125px;
  }
  100% {
    left: 1600px;
  }
}
@-moz-keyframes cloud {
  0% {
    left: -125px;
  }
  100% {
    left: 1600px;
  }
}
@keyframes cloud {
  0% {
    left: -125px;
  }
  100% {
    left: 1600px;
  }
}
@media (max-width: 782px) {
  .cloud {
    top: 300px;
  }
}