.animation-container {
	position: relative;
	background-color: #47a0ff;
	animation-name: sky_darken;
	animation-duration: 24s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.animation-stage {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 600px;
	height: 400px;
	overflow: hidden;
}

@keyframes sky_darken {
	0% {background-color: #47a0ff;}
	10% {background-color: #47a0ff;}
	45% {background-color: #1e436a}
	55% {background-color: #1e436a}
	90% {background-color: #47a0ff;}
	100% {background-color: #47a0ff;}
}

.animation-stage__actor-sun {
	position: absolute;
	/*width: 200px;
	height: 200px;
	left: 500px;
	top: 200px;
	border-radius: 50%;
	background-color: #fff000;*/
	background-image: url("images/sun.png");
	width: 282px;
	height: 248px;
	left: 159px;
	top: 78px;
}

.animation-stage__actor-moon {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	/*background-color: #d1d1d1;
	left: 1100px;
	top: -100px;*/
	background-image: url("images/moon.png");
	animation-name: moon_movement;
	animation-duration: 24s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}


@keyframes moon_movement {
	0% {
		left: 400px;
		top: 0px;
	}
	45% {
		left: 200px;
		top: 100px;
	}
	55% {
		left: 200px;
		top: 100px;
	}
	100% {
		left: 0px;
		top: 200px;
	}
}

.animation-stage__actor-moon-shade {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	left: 0px;
	top: 0px;
	background-color: black;
	opacity: 0;
	animation-name: moon_shading;
	animation-duration: 24s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes moon_shading {
	0% {opacity: 0;}
	10% {opacity: 0;}
	45% {opacity: 0.9;}
	55% {opacity: 0.9;}
	90% {opacity: 0;}
	100% {opacity: 0;}
}


.animation-stage__actor-printout {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	text-align: center;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: 200%;
	padding-top: 7px;
}