#clouds{
	padding: 0;
	position: absolute;
	z-index: 1;
}

/*Time to finalise the cloud shape*/
.cloud-white {
	width: 946px;
    height: 394px;
	background: url(/img/cloud-small-white.png);
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: contain;
	position: relative; 
}
.cloud-yellow {
	width: 946px;
    height: 394px;
	background: url(/img/cloud-small-yellow.png);
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: contain;
	position: relative; 
}

/*Time to animate*/
.x1 {
	-webkit-animation: moveclouds 35s linear infinite;
	-moz-animation: moveclouds 35s linear infinite;
	-o-animation: moveclouds 35s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	left: 200px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moverightclouds 30s linear infinite;
	-moz-animation: moverightclouds 30s linear infinite;
	-o-animation: moverightclouds 30s linear infinite;
}

.x3 {
	left: -250px; top: -300px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.7; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
	-o-animation: moveclouds 25s linear infinite;
}

.x4 {
	left: 470px; top: -350px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	
	-webkit-animation: moverightclouds 23s linear infinite;
	-moz-animation: moverightclouds 23s linear infinite;
	-o-animation: moverightclouds 23s linear infinite;
}

.x5 {
	left: -150px; top: -250px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 24s linear infinite;
	-moz-animation: moveclouds 24s linear infinite;
	-o-animation: moveclouds 24s 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;}
}
@-webkit-keyframes moverightclouds {
	0% {margin-left: -1000px;}
	100% {margin-left: 1000px;}
}
@-moz-keyframes moverightclouds {
	0% {margin-right: -1000px;}
	100% {margin-right: 1000px;}
}
@-o-keyframes moverightclouds {
	0% {margin-right: -1000px;}
	100% {margin-right: 1000px;}
}