.waves {
	z-index: -1;
}
.wave{
	position: absolute;
	width: 10px;
	background: transparent;
	margin-left: -5px;
	opacity: 0;
	-webkit-transform-origin:center bottom;
	-ms-transform-origin:center bottom;
	transform-origin:center bottom;
}
.wave--1.animated{
	-webkit-animation-name: waving;
	-webkit-animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: ease-in-out;
	-ms-animation-name: waving;
	-ms-animation-duration: 2000ms; 
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: ease-in-out;
	animation-name: waving; 
	animation-duration: 2000ms;
	animation-iteration-count: infinite; 
	animation-timing-function: ease-in-out;
}

.wave--2.animated {
	-webkit-animation-name: waving;
	-webkit-animation-duration: 3000ms; 
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: ease-in-out;
	-ms-animation-name: waving;
	-ms-animation-duration: 3000ms; 
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: ease-in-out;
	animation-name: waving; 
	animation-duration: 3000ms; 
	animation-iteration-count: infinite; 
	animation-timing-function: ease-in-out;
}

	
		/* init wave position according to future animation type */
		.home_wave--1{
			
		}
		/* init wave position according to future animation type */
		.wave--2{
			margin-left: 50px;
			top:60px;
		}

	.you_wave{
		height: 160px;
		left: 50%;
		bottom: -60px;
	}
		.you_wave--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		.you_wave--2{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
		.you_wave--2.animated{
			-webkit-animation-name: wavingtwo;
			-ms-animation-name: wavingtwo;
			animation-name: wavingtwo;
		}

	.household_wave{
		height: 180px;
		left: 50%;
		bottom: -80px;
	}
		.household_wave--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		.household_wave--2{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
		.household_wave--2.animated{
			-webkit-animation-name: wavingtwo;
			-ms-animation-name: wavingtwo;
			animation-name: wavingtwo;
		}

	.household_poor_wave{
		height: 60px;
		left: 116px;
		bottom: 80px;
	}
		.household_poor_wave--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}

	.household_rich_wave{
		height: 160px;
		right: 108px;
		left: auto;
		bottom: 20px;
	}
		.household_rich_wave--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		.household_rich_wave--2{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
			.household_rich_wave--2.animated{
				-webkit-animation-name: wavingtwo;
				-ms-animation-name: wavingtwo;
				animation-name: wavingtwo;
			}
		.household_rich_wave--3{
			-webkit-transform:rotate3D(0,0,1, 50deg);
			-ms-transform:rotate3D(0,0,1,50deg);
			transform:rotate3D(0,0,1,50deg);
		}
			.household_rich_wave--3.animated{
				-webkit-animation-name: wavingthree;
				-ms-animation-name: wavingthree;
				animation-name: wavingthree;
			}

	.household_poorborder_wave{
		height: 28px;
		left: 34px;
		bottom: 22px;
	}
		.household_poorborder_wave--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}


	.country_wave_cloud{
		height: 140px;
		left: 50%;
		bottom: 130px;
	}
		.country_wave_cloud--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		.country_wave_cloud--2{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
		.country_wave_cloud--2.animated{
			-webkit-animation-name: wavingtwo;
			-ms-animation-name: wavingtwo;
			animation-name: wavingtwo;
		}
		.country_wave_cloud--3{
			-webkit-transform:rotate3D(0,0,1,50deg);
			-ms-transform:rotate3D(0,0,1,50deg);
			transform:rotate3D(0,0,1,50deg);
		}
		.country_wave_cloud--3.animated{
			-webkit-animation-name: wavingthree;
			-ms-animation-name: wavingthree;
			animation-name: wavingthree;
		}

	.society_wave_cloud{
		height: 160px;
		left: 50%;
		bottom: 90px;
	}
		.society_wave_cloud--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		.society_wave_cloud--2{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
		.society_wave_cloud--2.animated{
			-webkit-animation-name: wavingtwo;
			-ms-animation-name: wavingtwo;
			animation-name: wavingtwo;
		}

	.congratulations_wave_cloud{
		height: 172px;
		left: 50%;
		bottom: 173px;
	}
		.congratulations_wave_cloud--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		.congratulations_wave_cloud--2{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
		.congratulations_wave_cloud--2.animated{
			-webkit-animation-name: wavingtwo;
			-ms-animation-name: wavingtwo;
			animation-name: wavingtwo;
		}

	/* set wave height according to planet size */
	.conclusion_wave{
		height: 284px;
		right: 184px;
		left: auto;
		bottom: -142px;
	}
		/* init wave position according to future animation type */
		.conclusion_wave--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		/* init wave position according to future animation type */
		.conclusion_wave--2{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
		/* redefine animation if necessary */
		.conclusion_wave--2.animated{
			-webkit-animation-name: wavingtwo;
			-ms-animation-name: wavingtwo;
			animation-name: wavingtwo;
		}

	.conclusion_wave_mini{
		height: 58px;
		right: 91px;
		bottom: 306px;
		left: auto;
	}
		.conclusion_wave--3{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		.conclusion_wave--4{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
		.conclusion_wave--4.animated{
			-webkit-animation-name: wavingtwo;
			-ms-animation-name: wavingtwo;
			animation-name: wavingtwo;
		}


.wave{
	background: url("../img/wave.svg") no-repeat 0 0;
	background-size: 51px 10px;
	width: 51px;
	height: 10px;
	position: absolute;
	bottom: 100%;
	left: 0px;
}