#clouds {
	z-index: -1;
	position: fixed;
	bottom: -25px;
	left: -25px;
	right: -25px;
	height: 425px;
}

#clouds::after {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 324px;
	content: " ";
	background: url(../images/bg-overlay.png) repeat-x bottom left;
}

#clouds > div.bigCloud, #clouds > div.smallCloud {
	background-image: url(../images/cloud.png);
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: 0;
	margin-top: 0;
}

#clouds > .bigCloud {
	height: 303px;
	background-size: 485px 303px;
}

#clouds > .smallCloud {
	height: 101px;
	background-size: 162px 101px;
}

#cloud-2 {
	top: 21px;
	left: -100px;
	background-position: 100% 0px;
}

#cloud-1 {
	top: 56px;
	background-position: 75% 0px;
}

#cloud-3 {
	top: 250px;
	background-position: 90% 0px;
}

#cloud-4 {
	top: 350px;
	background-position: 55% 0;
}

#cloud-8 {
	top: 190px;
	background-position: 65% 0;
}

#cloud-5 {
	top: 15px;
	left: -75px;
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	background-position: 100% 0;
}

#cloud-6 {
	top: 40px;
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	background-position: 80% 0;
}

#cloud-7 {
	top: 220px;
	left: -175px;
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	background-position: 100% 0;
}

#cloud-9 { 
	top: 170px;
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	background-position: 70% 0;
}

@-webkit-keyframes cloud {
	0% {
		margin-left: 0;
		margin-top: 0;
	}
	
	25% {
		margin-left: 5px;
		margin-top: -10px;
	}
	
	35% {
		margin-left: 10px;
		margin-top: 5px;
	}
	
	50% {
		margin-left: 35px;
		margin-top: 0px;
	}
	
	75% {
		margin-left: 50px;
		margin-top: -15px;
	}
	
	85% {
		margin-left: 25px;
		margin-top: -5px;
	}
	
	90% {
		margin-left: 10px;
		margin-top: 5px;
	}
}

#clouds > .cloud {
	-webkit-animation-name: cloud;
	-webkit-animation-duration: 60s;
	-webkit-animation-iteration-count: infinite;
}