#animation {
	font-size:1px;
	overflow:hidden;
	background-image:url('./animation-universe.jpg');
	background-repeat:repeat;
	background-size:100%;
	position:relative;
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	min-height: 360px
}

#animation .moon {
	width:42px;
	height:42px;
	position:absolute;
	right:10%;
	top:10%;
	zoom: 1.5;
}
#animation .moon img {
	width:100%;
	height:100%
}
#animation .rotate-group {
	zoom: 1.5;
	position:absolute;
	bottom:0;
	left:5%;
	min-width:120px;
	min-height:120px;
	-webkit-animation:spin 8s linear infinite;
	animation:spin 8s linear infinite
}
@-webkit-keyframes spin {
	100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg)
}
}
@keyframes spin {
	100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg)
}
}
#animation .earth {
	position:absolute;
	top: 25%;
	left: 25%;
	width:60px;
	height:60px
}
#animation .regiongroup {
	position:absolute;
	top:50%;
	left:50%;
	opacity:.5
}
#animation .regiongroup div {
	background-color:#006;
	width:5600px;
	height:3000px
}
#animation .regiongroup .region {
	position:absolute;
	bottom:0;
	left:30px
}
#animation .regiongroup .region.left {
	-webkit-transform-origin:left bottom;
	transform-origin:left bottom;
	-webkit-transform:rotate(20deg);
	transform:rotate(20deg)
}
#animation .regiongroup .region.right {
	-webkit-transform-origin:left bottom;
	transform-origin:left bottom;
	-webkit-transform:rotate(70deg);
	transform:rotate(70deg)
}
#animation .regiongroup.green .region {
	background-color:#F48787
}
#animation .regiongroup.red .region {
	background-color:#29B5C8
}
#animation .regiongroup.station1 {
	transform-orientation:left bottom;
	-webkit-transform:rotate(-75.368889deg);
	transform:rotate(-75.368889deg)
}
#animation .regiongroup.station2 {
	transform-orientation:left bottom;
	-webkit-transform:rotate(-20.989722deg);
	transform:rotate(-20.989722deg)
}
#animation .regiongroup.station3 {
	transform-orientation:left bottom;
	-webkit-transform:rotate(123.06deg);
	transform:rotate(123.06deg);
	visibility:hidden;
}