.ray{
	position: absolute;
	width: 10px;
	background: transparent;
	margin-left: -5px;
	-webkit-transform-origin:center bottom;
	-ms-transform-origin:center bottom;
	transform-origin:center bottom;
}
.ray.animated{
	-webkit-animation-name: spin;
	-webkit-animation-duration: 12000ms; /* 40 seconds */
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: linear;
	-ms-animation-name: spin;
	-ms-animation-duration: 12000ms; /* 40 seconds */
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: linear;
	animation-name: spin; 
	animation-duration: 12000ms; /* 40 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}

.ray.you_ray--2.animated, .ray.household_ray--2.animated, .country_ray_cloud--2.animated, .society_ray_cloud--2.animated, .congratulations_ray_cloud--2.animated{
	-webkit-animation-name: spin;
	-webkit-animation-duration: 10000ms; /* 40 seconds */
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: linear;
	-ms-animation-name: spin;
	-ms-animation-duration: 10000ms; /* 40 seconds */
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: linear;
	animation-name: spin; 
	animation-duration: 10000ms; /* 40 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}

	/* set ray height according to planet size */
	.home_ray{
		height: 290px;
		left: 284px;
		bottom: 312px;
	}
		/* init ray position according to future animation type */
		.home_ray--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		/* init ray position according to future animation type */
		.home_ray--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 */
		.home_ray--2.animated{
			-webkit-animation-name: spintwo;
			-ms-animation-name: spintwo;
			animation-name: spintwo;
		}

	.home_ray_mini{
		height: 60px;
		left: 170px;
		bottom: 742px;
	}
		.home_ray--3{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		.home_ray--4{
			-webkit-transform:rotate3D(0,0,1,-50deg);
			-ms-transform:rotate3D(0,0,1,-50deg);
			transform:rotate3D(0,0,1,-50deg);
		}
		.home_ray--4.animated{
			-webkit-animation-name: spintwo;
			-ms-animation-name: spintwo;
			animation-name: spintwo;
		}

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

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

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

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

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


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

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

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

	/* set ray height according to planet size */
	.conclusion_ray{
		height: 284px;
		right: 184px;
		left: auto;
		bottom: -142px;
	}
		/* init ray position according to future animation type */
		.conclusion_ray--1{
			-webkit-transform:rotate3D(0,0,1,0deg);
			-ms-transform:rotate3D(0,0,1,0deg);
			transform:rotate3D(0,0,1,0deg);
		}
		/* init ray position according to future animation type */
		.conclusion_ray--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_ray--2.animated{
			-webkit-animation-name: spintwo;
			-ms-animation-name: spintwo;
			animation-name: spintwo;
		}

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


.cloud{
	background: url("../img/cloud.svg") no-repeat 0 0;
	background-size: 84px 47px;
	width: 84px;
	height: 47px;
	position: absolute;
	bottom: 100%;
	left: 0px;
	margin-left: -42px;
}
	.cloud[data-size="2"]{
		background: url("../img/cloud.svg") no-repeat 0 0;
		background-size: 56px 31px;
		width: 56px;
		height: 31px;
		margin-left: -28px;
	}
	.cloud[data-size="3"]{
		background: url("../img/cloud--pink.svg") no-repeat 0 0;
		background-size: 42px 23px;
		width: 42px;
		height: 23px;
		margin-left: -21px;
	}
	.cloud[data-size="4"]{
		background: url("../img/cloud--pink.svg") no-repeat 0 0;
		background-size: 28px 15px;
		width: 28px;
		height: 15px;
		margin-left: -14px;
	}
	.cloud[data-color="yellow"]{
		background: url("../img/cloud--yellow.svg") no-repeat 0 0;
		background-size: 84px 47px;
	}
	.cloud[data-color="pink"]{
		background: url("../img/cloud--pink.svg") no-repeat 0 0;
		background-size: 84px 47px;
	}
	.cloud[data-color="blue"]{
		background: url("../img/cloud--blue.svg") no-repeat 0 0;
		background-size: 84px 47px;
	}
	.cloud[data-size="2"][data-color="grey"]{
		background: url("../img/cloud.svg") no-repeat 0 0;
		background-size: 56px 31px;
	}
	.cloud[data-size="2"][data-color="yellow"]{
		background: url("../img/cloud--yellow.svg") no-repeat 0 0;
		background-size: 56px 31px;
	}
	.cloud[data-size="2"][data-color="pink"]{
		background: url("../img/cloud--pink.svg") no-repeat 0 0;
		background-size: 56px 31px;
	}
	.cloud[data-size="3"][data-color="grey"]{
		background: url("../img/cloud.svg") no-repeat 0 0;
		background-size: 42px 23px;
	}
	.cloud[data-size="3"][data-color="pink"]{
		background: url("../img/cloud--pink.svg") no-repeat 0 0;
		background-size: 42px 23px;
	}
	.cloud[data-size="3"][data-color="yellow"]{
		background: url("../img/cloud--yellow.svg") no-repeat 0 0;
		background-size: 42px 23px;
	}
	.cloud[data-size="3"][data-color="blue"]{
		background: url("../img/cloud--blue.svg") no-repeat 0 0;
		background-size: 42px 23px;
	}
	.cloud[data-size="3"][data-color="pink"]{
		background: url("../img/cloud--pink.svg") no-repeat 0 0;
		background-size: 42px 23px;
	}
	.cloud[data-size="4"][data-color="grey"]{
		background: url("../img/cloud.svg") no-repeat 0 0;
		background-size: 28px 15px;
	}
	.cloud[data-size="4"][data-color="yellow"]{
		background: url("../img/cloud--yellow.svg") no-repeat 0 0;
		background-size: 28px 15px;
	}
	.cloud[data-size="4"][data-color="pink"]{
		background: url("../img/cloud--pink.svg") no-repeat 0 0;
		background-size: 28px 15px;
	}
	.cloud[data-size="4"][data-color="bluegray"]{
		background: url("../img/cloud--bluegray.svg") no-repeat 0 0;
		background-size: 28px 15px;
	}
	.cloud[data-size="4"][data-color="blue"]{
		background: url("../img/cloud--blue.svg") no-repeat 0 0;
		background-size: 28px 15px;
	}