/*---------------------------------CLEAR---------------------------------*/
#clearimage1, #clearimage2, #clearimage3, #clearimage4, #clearimage5, #clearimage6 {
	position: fixed;
	animation-name: movingClearClouds;
  	animation-iteration-count: infinite;
  	animation-duration: 20s;
}

#clearimage7 {
	position: fixed;
	animation-name: movingPlane;
  	animation-iteration-count: infinite;
  	animation-duration: 20s;
}

/*CLEAR 1 - 6 IS CLOUDS*/
#clearimage1 {
	margin-top: 150px;
	margin-left: -100px;
	width: 150px;
}

#clearimage2 {
	margin-top: 100px;
	margin-left: -400px;
	width: 100px;
}

#clearimage3 {
	margin-top: 280px;
	margin-left: -2600px;
	width: 200px;
}

#clearimage4 {
	margin-top: 20px;
	margin-left: -1300px;
	width: 250px;
}

#clearimage5 {
	margin-top: 140px;
	margin-left: -3900px;
	width: 200px;
}

#clearimage6 {
	margin-top: 200px;
	margin-left: -200px;
	width: 100px;
}

/*CLEAR 7 IS THE AIRPLANE*/
#clearimage7 {
	margin-top: 50px;
	width: 50px;
	margin-left: 2000px;
}

@keyframes movingClearClouds {
	0% {
	}

	100% {
		margin-left: 2000px;
	}
}

@keyframes movingPlane {
	0% {
	}
		
	100% {
		margin-left: -500px;
	}
}

/*---------------------------------OVERCAST---------------------------------*/

#overcastimage1 {
	position: fixed;
	animation-name: movingOvercastClouds;
  	animation-iteration-count: infinite;
  	animation-duration: 20s;
  	width: 500%;
  	margin-left: -1000px;

}

@keyframes movingOvercastClouds {
	0% {
	}

	100% {
		margin-left: 0px;
	}
}

/*---------------------------------MOSTLY CLOUDY---------------------------------*/

#mostlycloudyimage1, #mostlycloudyimage2, #mostlycloudyimage3, #mostlycloudyimage4, #mostlycloudyimage5 {
	position: fixed;
	animation-name: movingMostlyClouds;
  	animation-iteration-count: infinite;
}

#mostlycloudyimage1 {
	margin-top: 150px;
	margin-left: -600px;
	width: 300px;
	animation-duration: 30s;
}

#mostlycloudyimage2 {
	margin-top: 100px;
	margin-left: -1000px;
	width: 250px;
	animation-duration: 34s;

}

#mostlycloudyimage3 {
	margin-top: 220px;
	margin-left: -3700px;
	width: 350px;
	animation-duration: 26s;

}

#mostlycloudyimage4 {
	margin-top: 20px;
	margin-left: -2400px;
	width: 400px;
	animation-duration: 40s;

}

#mostlycloudyimage5 {
	margin-top: 140px;
	margin-left: -6000px;
	width: 350px;
	animation-duration: 60s;

}

@keyframes movingMostlyClouds {
	0% {
	}

	100% {
		margin-left: 2000px;
	}
}