@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Poiret+One');

* {
	margin: 0px;
	padding: 0px;
}
body { 
	width: 100%;
	height: 100vh;
	overflow: hidden;
	animation: sky linear 20s infinite;
}
h1 { 
	width: 1000px; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%,150%);	
	font: 92px/1 "Poiret one"; 
	color: #fff;
	text-align: center; 
	animation: day linear 20s infinite;
}
section { 
	width: 1000px; 
	height: 400px; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%,-70%); 
}
section .sky {
	position: absolute; 
	width: 100%; 
	height: 100%;
}
section .sky .sun {
	position: absolute; 
	top: -150px; 
	left: 50%; 
	margin-left: -100px; 
	transform-origin: center 500px; 
	animation: sun linear 20s infinite;
}
section .sky .cloud1 {
	position: absolute; 
	top: -30px; 
	left: 10%; 
	animation: flow linear 10s infinite;
}
section .sky .cloud2 {
	position: absolute; 
	top: 20px; 
	left: 0%; 	
	animation: flow linear 20s infinite;
}
section .town .night { 
	position: absolute; 
	bottom: 0px; 
	left: 40px;
}
section .town .day { 
	position: absolute; 
	bottom: 0px; 
	left: 40px;
	animation: day linear 20s infinite;
}
section .town .circle {
	position: absolute; 
	bottom: 104px; 
	left: 50%; 
	margin-left: -165px; 
	opacity: 0.7;
	animation: rotation linear 20s infinite; 	
}
section .people {	
	width: 100%; 
	height: 100%; 
	position: absolute; 
	top: 0px;
	left: 0px;
	animation: day linear 20s infinite;	
}
section .people .man {
	position: absolute;
	left: 0%;
	bottom: 0px;
	animation: flow linear 7s infinite;
}
section .people .family {
	position: absolute;
	left: 0%;
	bottom: 0px;
	animation: flow linear 20s infinite;
}

@keyframes rotation {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes sky {
	0% {background-color: #b08fcc;}
	25% {background-color: #b1e1e2;}
	50% {background-color: #fcd2e2;}
	75% {background-color: #636888;}
	100% {background-color: #b08fcc;}
}
@keyframes sun {
	0% {opacity:0; transform: rotate(-90deg);}
	25% {opacity:1; transform: rotate(-30deg);}
	50% {opacity:1; transform: rotate(30deg);}
	75% {opacity:0; transform: rotate(90deg);}
	100% {opacity:0; transform: rotate(-90deg);}
}
@keyframes day {
	0% {opacity: 0;}
	25% {opacity: 1;}
	50% {opacity: 1;}
	75% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes flow {
	0% { left: 0%; opacity: 0;}
	10% { opacity: 1; }
	80% { opacity: 1; }
	100% { left: 90%; opacity: 0;}
}