.cloud_view {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.cloud {
  position: absolute;
  animation-name: fuwafuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
.cloud img {
  width: 100%;
}
@keyframes fuwafuwa {
    0% {
        transform: translate(0,0px);
    }
    100% {
        transform: translate(0,-15px)
    }
}
.cloud-s-1 {
  top: 15%;
  left: 13%;
  animation-delay: 0s;
  width: 20%;
  /* background: red; */
}
.cloud-m-1 {
  top: 10%;
  right: 2%;
  animation-delay: 0.3s;
  width: 25%;
  /* background: orange; */
}
.cloud-m-2 {
  top: 2px;
  right: 5%;
  animation-delay: 0.6s;
  width: 25%;
  /* background: yellow; */
  display: none;
}
.cloud-l-1 {
  top: 40%;
  left: 5%;
  animation-delay: 1.2s;
  width: 30%;
  /* background: blue; */
}
.cloud-l-2 {
  top: 50%;
  right: -5%;
  animation-delay: 0.9s;
  width: 30%;
  /* background: green; */
}
@media screen and (min-width: 520px){
  .cloud-s-1 {
    top: 12%;
    left: 15%;
    animation-delay: 0s;
    width: 12%;
    /* background: red; */
  }
  .cloud-m-1 {
    top: 12%;
    right: 3%;
    animation-delay: 0.3s;
    width: 17%;
    /* background: orange; */
  }
  .cloud-m-2 {
    top: 2px;
    right: 5%;
    animation-delay: 0.6s;
    width: 17%;
    /* background: yellow; */
    display: none;
  }
  .cloud-l-1 {
    top: 40%;
    left: 10%;
    animation-delay: 1.2s;
    width: 22%;
    /* background: blue; */
  }
  .cloud-l-2 {
    top: 55%;
    right: 5%;
    animation-delay: 0.9s;
    width: 22%;
    /* background: green; */
  }
}
@media screen and (min-width: 958px){
  .cloud-s-1 {
    top: 5%;
    left: 30%;
    animation-delay: 0s;
    width: 7%;
    max-width: 150px;
    /* background: red; */
  }
  .cloud-m-1 {
    top: 12%;
    right: 5%;
    animation-delay: 0.3s;
    width: 10%;
    max-width: 170px;
    /* background: orange; */
  }
  .cloud-m-2 {
    top: 30%;
    right: 30%;
    animation-delay: 0.6s;
    width: 10%;
    max-width: 170px;
    /* background: yellow; */
    display: none;
  }
  .cloud-l-1 {
    top: 40%;
    left: 15%;
    animation-delay: 1.2s;
    width: 13%;
    max-width: 250px;
    /* background: blue; */
  }
  .cloud-l-2 {
    top: 50%;
    right: 15%;
    animation-delay: 0.9s;
    width: 13%;
    max-width: 250px;
    /* background: green; */
  }
}