html, body {
  overflow-x:hidden 
} 

#clouds {
  padding: 20px 0 100px 0; width:100%;
  /*background: #66ccff;
	background: -webkit-linear-gradient(top, #6DD3E7 20%, #fff 70%);
	background: linear-gradient(top, #6DD3E7 20%, #fff 70%);
	background: -moz-linear-gradient(top, #6DD3E7 20%, #fff 70%);
  height: 100vh;*/
}

.cloud {
  width: 250px;
  height: 60px;
 background-color: none;
  /*border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;*/
  position: relative;
  
/*  -moz-box-shadow: 9px -7px 0 0 #f7e7eb inset;
  -webkit-box-shadow: 9px -7px 0 0 #f7e7eb inset;
  box-shadow: 9px -7px 0 0 #f7e7eb inset;*/
}

.cloud:before, .cloud:after {
  content: '';
  position: absolute;
  background-color: none;
  width: 120px;
  height:120px;
  top: -75px;
  
 /* border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  
  -moz-box-shadow: 10px 3px 0 0 #f7e7eb inset;;
  -webkit-box-shadow: 10px 3px 0 0 #f7e7eb inset;
  box-shadow: 10px 3px 0 0 #f7e7eb inset;*/
}

.cloud:after {
  width: 90px;
  height: 90px;
  top: -45px;
  right: 25px;

}

.cloud:before { left: 25px;}



.x1 {
	-webkit-animation: moveclouds 80s linear infinite;
	-moz-animation: moveclouds 80s linear infinite;
	-o-animation: moveclouds 80s linear infinite;}

.x2 {
  left: 800px;
  top: -200px;
	
  transform: scale(3);
  -webkit-transform: scale(3);
  -moz-transform: scale(3);
  -o-transform: scale(3);  
  -webkit-animation: moveclouds 80s linear infinite;
  -moz-animation: moveclouds 80s linear infinite;
  -o-animation: moveclouds 80s linear infinite;}

.x3 {
  left: -250px;
  top: -180px;
  transform: scale(1.8);
  -webkit-transform: scale(1.8);
  -moz-transform: scale(1.8);
  -o-transform: scale(1.8);
  opacity: .9;
  -webkit-animation: moveclouds 100s linear infinite;
 -moz-animation: moveclouds 100s linear infinite;
 -o-animation: moveclouds 100s linear infinite;}

.x4 {
  left: 300px;
	top: -260px;
   transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  opacity: 0.5;
  -webkit-animation: moveclouds 80s linear infinite;
	-moz-animation: moveclouds 80s linear infinite;
	-o-animation: moveclouds 80s linear infinite;
}

.x5 {
  left: -200px;
	top: -320px;
	 
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  opacity: 0.7;
	
  -webkit-animation: moveclouds 130s linear infinite;
	-moz-animation: moveclouds 130s linear infinite;
	-o-animation: moveclouds 130s linear infinite;

}

.x6 {
  left: -600px;
  top: -320px;
   transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  opacity: 0.5;
  
   -webkit-animation: moveclouds 120s linear infinite;
	-moz-animation: moveclouds 120s linear infinite;
	-o-animation: moveclouds 120s linear infinite;
}

.x7 {
  left: 1000px;
  top: -400px;
   transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  opacity: .8;
  
   -webkit-animation: moveclouds 100s linear infinite;
	-moz-animation: moveclouds 100s linear infinite;
	-o-animation: moveclouds 100s linear infinite;
}

@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}