*{
	margin: 0;
	padding: 0;
}


/* main styles */

body{
	background: black;
}

section{
	width: 50%;
	height: 100%;
	float: left;
	animation-name: fader-mango;
		-moz-animation-name: fader-mango;
		-webkit-animation-name: fader-mango;
		-ms-animation-name: fader-mango;
		-o-animation-name: fader-mango;
	animation-fill-mode: backwards;
		-moz-animation-fill-mode: backwards;
		-webkit-animation-fill-mode: backwards;
		-ms-animation-fill-mode: backwards;
		-o-animation-fill-mode: backwards;
	animation-duration: 1s;
		-moz-animation-duration: 1s;
		-webkit-animation-duration: 1s;
		-ms-animation-duration: 1s;
		-o-animation-duration: 1s;
}


/* animations */

@keyframes fader-mango {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}

/* colors */
.one{
	
}

.two{
	
	animation-delay: 1s;
		-moz-animation-delay: 1s;
		-webkit-animation-delay: 1s;
		-ms-animation-delay: 1s;
		-o-animation-delay: 1s;
		transform: rotate(20deg)
}

.three{
	animation-delay: 2s;
		-moz-animation-delay: 2s;
		-webkit-animation-delay: 2s;
		-ms-animation-delay: 2s;
		-o-animation-delay: 2s;
		transform: rotate(-20deg)
}

.four{
	animation-delay: 3s;
		-moz-animation-delay: 3s;
		-webkit-animation-delay: 3s;
		-ms-animation-delay: 3s;
		-o-animation-delay: 3s;
}