body {
  overflow: hidden;
}

#clouds {
  padding: 100px 0;
  position: fixed;
  top: 20%;
  bottom: 0;
  left: 0;
  right: 0;
}

.cloud {
  width: 250px;
  height: 60px;
  background-color: white;
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  position: relative;
  will-change: transform;
  transform: translateZ(0);
  -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: white;
  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 45s linear infinite;
	-moz-animation: moveclouds 45s linear infinite;
	-o-animation: moveclouds 45s linear infinite;
}

.x2 {
  left: 200px;
  transform: scale(0.6);
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -o-transform: scale(0.6);  
  
  -webkit-animation: moveclouds 40s linear infinite;
	-moz-animation: moveclouds 40s linear infinite;
	-o-animation: moveclouds 40s linear infinite;
}

.x3 {
  left: -250px;
  top: -200px;
  transform: scale(0.3);
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  -o-transform: scale(0.3);
  opacity: .8;
  
  -webkit-animation: moveclouds 35s linear infinite;
	-moz-animation: moveclouds 35s linear infinite;
	-o-animation: moveclouds 35s linear infinite;
}

.x4 {
  left: 300px;
   transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  
  -webkit-animation: moveclouds 48s linear infinite;
	-moz-animation: moveclouds 48s linear infinite;
	-o-animation: moveclouds 48s linear infinite;
}

.x5 {
  left: -200px;
  transform: scale(0.6);
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -o-transform: scale(0.6);
  
  -webkit-animation: moveclouds 35s linear infinite;
	-moz-animation: moveclouds 35s linear infinite;
	-o-animation: moveclouds 35s linear infinite;

}

.x6 {
  left: 470px;
  top: -200px;
   transform: scale(0.2);
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -o-transform: scale(0.2);
  opacity: 0.7;
  
   -webkit-animation: moveclouds 31s linear infinite;
	-moz-animation: moveclouds 31s linear infinite;
	-o-animation: moveclouds 31s linear infinite;
}

.x7 {
  left: 20px;
  top: -400px;
   transform: scale(0.2);
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -o-transform: scale(0.2);
  opacity: .7;
  
   -webkit-animation: moveclouds 30s linear infinite;
	-moz-animation: moveclouds 30s linear infinite;
	-o-animation: moveclouds 30s 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;}
}