/* Clouds moving from right to left, skybox area. */

div[id*='cloud'] {
	left: 5%;
	margin: 0;
	padding: 0;
	position: absolute;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	scale: 3;
}

div[id*='cloudbig'] {
	animation-name: cloudbigkf;
	animation-duration: 300s;
}

div[id*='cloudmed'] {
	animation-name: cloudmedkf;
	animation-duration: 225s;
}

div[id*='cloudsml'] {
	animation-name: cloudsmlkf;
	animation-duration: 150s;
}

@keyframes cloudbigkf {
	0% {transform: translateX(120vw) translateY(-1.5vh) translateZ(-4500px);}
	100% {transform: translateX(-60vw) translateY(-1.5vh) translateZ(-4500px);}
}

@keyframes cloudmedkf {
	0% {transform: translateX(120vw) translateY(1.5vh) translateZ(-3900px);}
	100% {transform: translateX(-55vw) translateY(1.5vh) translateZ(-3900px);}
}

@keyframes cloudsmlkf {
	0% {transform: translateX(120vw) translateY(1.5vh) translateZ(-3400px);}
	100% {transform: translateX(-55vw) translateY(1.5vh) translateZ(-3400px);}
}

#cloudbig1 {
	left: 5%;
	margin: 0;
	padding: 0;
	height: 25.0vh;
	width: 56.8vh;
	bottom: 52.5vh;
	background-image: url(../images/cloud_big_1.svg);
	background-size: 56.8vh 25.0vh;
	animation-delay: -140s;
}

#cloudbig2 {
	height: 24.0vh;
	width: 53.3vh;
	bottom: 51.5vh;
	background-image: url(../images/cloud_big_2.svg);
	background-size: 53.3vh 24.0vh;
	animation-delay: -290s;
}

#cloudmed1 {
	height: 11.8vh;
	width: 25.8vh;
	background-image: url(../images/cloud_med_1.svg);
	background-size: 25.8vh 11.8vh;
	animation-delay: -40s;
}

#cloudmed2 {
	height: 9.6vh;
	width: 24.2vh;
	background-image: url(../images/cloud_med_2.svg);
	background-size: 24.2vh 9.6vh;
	animation-delay: -170s;
}

#cloudsml1 {
	height: 6.6vh;
	width: 10.6vh;
	background-image: url(../images/cloud_sml_1.svg);
	background-size: 10.6vh 6.6vh;
	animation-delay: -80s;
}

#cloudsml2 {
	height: 5.8vh;
	width: 12.0vh;
	background-image: url(../images/cloud_sml_2.svg);
	background-size: 12.0vh 5.8vh;
	animation-delay: -30s;
}