/* =========================
   Cloud base
========================= */
.cloud {
	position: absolute !important;
	margin: 33px 0 0 0;
	width: 54px;
	height: 5px;
	background: #f7e7eb;
	border-radius: 10px;
	/*animation-name: clouds;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 40s;*/
}

	/* Cloud sizes */
	.cloud.tiny {
		transform: scale(0.5);
	}

	.cloud.small {
		transform: scale(1);
	}

	.cloud.normal {
		transform: scale(2);
	}

	.cloud.large {
		transform: scale(4);
	}

	/* =========================
   Cloud bubbles
========================= */
	.cloud div {
		position: absolute;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		left: -3px;
		bottom: 0;
		background: #fafbf0;
		z-index: 10;
		box-shadow: inset -2px -3px 0 0 #f7e7eb;
	}

		/* 2nd bubble */
		.cloud div:first-child + div {
			transform: scale(1.6);
			margin: 0 0 4px 13px;
			z-index: 9;
		}

			/* 3rd bubble */
			.cloud div:first-child + div + div {
				transform: scale(2.4);
				margin: 0 0 9px 32px;
				z-index: 8;
			}

				/* 4th bubble */
				.cloud div:first-child + div + div + div {
					transform: scale(1.3);
					margin: 0 0 2px 50px;
					z-index: 7;
				}

/* =========================
   Animation
========================= */
@keyframes clouds {
	0% {
		left: -20%;
	}

	100% {
		left: 100%;
	}
}

/* =========================
   Individual cloud speeds
========================= */
.cloud-1 {
	animation-duration: 263s;
	margin-left: -1%;
	top: 100px;
	-webkit-animation: clouds 75s linear infinite;
	-moz-animation: clouds 75s linear infinite;
	-o-animation: clouds 75s linear infinite;
}

.cloud-2 {
	animation-duration: 99s;
	margin-left: -1%;
	top: 200px;
	-webkit-animation: clouds 40s linear infinite;
	-moz-animation: clouds 40s linear infinite;
	-o-animation: clouds 40s linear infinite;
}

.cloud-3 {
	animation-duration: 142s;
	margin-left: -1%;
	top: 200px;
	-webkit-animation: clouds 55s linear infinite;
	-moz-animation: clouds 55s linear infinite;
	-o-animation: clouds 55s linear infinite;
}

.cloud-4 {
	animation-duration: 152s;
	margin-left: -75%;
	top: 300px;
	-webkit-animation: clouds 28s linear infinite;
	-moz-animation: clouds 28s linear infinite;
	-o-animation: clouds 28s linear infinite;
}

.cloud-5 {
	animation-duration: 215s;
	margin-left: -1%;
	top: 280px;
	-webkit-animation: clouds 35s linear infinite;
	-moz-animation: clouds 35s linear infinite;
	-o-animation: clouds 35s linear infinite;
}

.cloud-6 {
	animation-duration: 139s;
	margin-left: -1%;
	top: 190px;
	-webkit-animation: clouds 30s linear infinite;
	-moz-animation: clouds 30s linear infinite;
	-o-animation: clouds 30s linear infinite;
}

.cloud-7 {
	animation-duration: 109s;
	margin-left: 1%;
	top: 400px;
	-webkit-animation: clouds 45s linear infinite;
	-moz-animation: clouds 45s linear infinite;
	-o-animation: clouds 45s linear infinite;
}

.cloud-8 {
	animation-duration: 121s;
	margin-left: -10%;
	top: 200px;
	-webkit-animation: clouds 80s linear infinite;
	-moz-animation: clouds 80s linear infinite;
	-o-animation: clouds 80s linear infinite;
}

.cloud-9 {
	animation-duration: 101s;
	margin-left: -50%;
	top: 300px;
	-webkit-animation: clouds 65s linear infinite;
	-moz-animation: clouds 65s linear infinite;
	-o-animation: clouds 65s linear infinite;
}

.cloud-10 {
	animation-duration: 126s;
	margin-left: -1%;
	top: 150px;
	-webkit-animation: clouds 22s linear infinite;
	-moz-animation: clouds 22s linear infinite;
	-o-animation: clouds 22s linear infinite;
}

.cloud-11 {
	animation-duration: 96s;
	margin-left: -20%;
	top: 250px;
	-webkit-animation: clouds 55s linear infinite;
	-moz-animation: clouds 55s linear infinite;
	-o-animation: clouds 55s linear infinite;
}

.cloud-12 {
	animation-duration: 83s;
	margin-left: 10%;
	top: 350px;
	-webkit-animation: clouds 120s linear infinite;
	-moz-animation: clouds 120s linear infinite;
	-o-animation: clouds 120s linear infinite;
}