.cloud {
  -webkit-animation: clouds 60s infinite linear;
  -moz-animation: clouds 60s infinite linear;
  -ms-animation: clouds 60s infinite linear;
  -o-animation: clouds 60s infinite linear;
  animation: clouds 60s infinite linear;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  position:absolute;
  margin: 180px 0 0 0;
  width: 54px;
  height: 10px;
  background: #ebf4f9; /* baf5ff*/
  z-index:100;
}
.cloud.tiny {
  -moz-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}
.cloud.small {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.cloud.normal {
  -moz-transform: scale(2, 2);
  -ms-transform: scale(2, 2);
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}
.cloud.large {
  -moz-transform: scale(3, 3);
  -ms-transform: scale(3, 3);
  -webkit-transform: scale(3, 3);
  transform: scale(3, 3);
}
.cloud div {
  -moz-box-shadow: inset -2px -3px 0 0 #ebf4f9;
  -webkit-box-shadow: inset -2px -3px 0 0 #ebf4f9;
  box-shadow: inset -2px -3px 0 0 #ebf4f9;
  position: absolute;
  border-radius: 50%;
  width: 13px;
  height: 10px;
  left: -3px;
  bottom: 0;
  background: #fff; /*fafbf0  */
  z-index: 10;
}
.cloud div:first-child + div {
  -moz-transform: scale(1.6, 1.6);
  -ms-transform: scale(1.6, 1.6);
  -webkit-transform: scale(1.6, 1.6);
  transform: scale(1.6, 1.6);
  margin: 0 0 4px 13px;
  z-index: 9;
}
.cloud div:first-child + div + div {
  -moz-transform: scale(2.4, 2.4);
  -ms-transform: scale(2.4, 2.4);
  -webkit-transform: scale(2.4, 2.4);
  transform: scale(2.4, 2.4);
  margin: 0 0 9px 32px;
  z-index: 8;
}
.cloud div:first-child + div + div + div {
  -moz-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  -webkit-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
  margin: 0 0 2px 50px;
  z-index: 7;
}

@-webkit-keyframes clouds {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
@-moz-keyframes clouds {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
@-ms-keyframes clouds {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
@keyframes clouds {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
.cloud-1 {
  -webkit-animation-duration: 223s;
  -moz-animation-duration: 223s;
  -ms-animation-duration: 22s;
  -o-animation-duration: 223s;
  animation-duration: 223s;
  margin-left: 20%;
}

.cloud-2 {
  -webkit-animation-duration: 99s;
  -moz-animation-duration: 99s;
  -ms-animation-duration: 99s;
  -o-animation-duration: 99s;
  animation-duration: 99s;
  margin-left: 90%;
}

.cloud-3 {
  -webkit-animation-duration: 122s;
  -moz-animation-duration: 122s;
  -ms-animation-duration: 122s;
  -o-animation-duration: 122s;
  animation-duration: 122s;
  margin-left: 50%;
}

.cloud-4 {
  -webkit-animation-duration: 132s;
  -moz-animation-duration: 132s;
  -ms-animation-duration: 132s;
  -o-animation-duration: 132s;
  animation-duration: 132s;
  margin-left: 43%;
}

.cloud-5 {
  -webkit-animation-duration: 190s;
  -moz-animation-duration: 190s;
  -ms-animation-duration: 190s;
  -o-animation-duration: 190s;
  animation-duration: 190s;
  margin-left: 83%;
}

.cloud-6 {
  -webkit-animation-duration: 119s;
  -moz-animation-duration: 119s;
  -ms-animation-duration: 119s;
  -o-animation-duration: 119s;
  animation-duration: 119s;
  margin-left: 73%;
}

.cloud-7 {
  -webkit-animation-duration: 109s;
  -moz-animation-duration: 109s;
  -ms-animation-duration: 109s;
  -o-animation-duration: 109s;
  animation-duration: 109s;
  margin-left: 69%;
}

.cloud-8 {
  -webkit-animation-duration: 111s;
  -moz-animation-duration: 111s;
  -ms-animation-duration: 111s;
  -o-animation-duration: 111s;
  animation-duration: 111s;
  margin-left: 100%;
}

.cloud-9 {
  -webkit-animation-duration: 101s;
  -moz-animation-duration: 101s;
  -ms-animation-duration: 101s;
  -o-animation-duration: 101s;
  animation-duration: 101s;
  margin-left: 10%;
}

.cloud-10 {
  -webkit-animation-duration: 106s;
  -moz-animation-duration: 106s;
  -ms-animation-duration: 106s;
  -o-animation-duration: 106s;
  animation-duration: 106s;
  margin-left: 14%;
}

.cloud-11 {
  -webkit-animation-duration: 96s;
  -moz-animation-duration: 96s;
  -ms-animation-duration: 96s;
  -o-animation-duration: 96s;
  animation-duration: 96s;
  margin-left: 73%;
}

.cloud-12 {
  -webkit-animation-duration: 83s;
  -moz-animation-duration: 83s;
  -ms-animation-duration: 83s;
  -o-animation-duration: 83s;
  animation-duration: 83s;
  margin-left: 51%;
}

@media screen and (max-width:767px)
{
  
.cloud{margin-top:110px;}  
   
.cloud.small  
{
    -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
 
.cloud.normal, .cloud.large {
 -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);  
}
 
 
 

}

@media screen and (max-width:650px)
{
   
.cloud.small  
{
  -moz-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}
 
.cloud.normal, .cloud.large {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
 

}