html, body {margin:			0;}
article {	font-size:		2em;
			font-family:	futura, sans-serif;
			overflow-x:		hidden;
}
@media (max-width: 460px) {
	article {	font-size: 1.5em;	}
}
section {
	position: relative;
	padding: 10vh 10vw;
	min-height: 100vh;
	color: #333;
}
section:nth-child(odd) {background: #4dc6e6; color: #fff; }
section:nth-child(3) {	background: #0aba58; color: #fff; }
section:nth-child(4) {	background: #f8c82d; color: #333; }

pre {
	font-size:		.75em;
	background:		#222;
	color:			#fff;
	padding:		20px;
}
.delighter pre {
	display:	block; transition: all 2s ease-out; opacity: 0;
	padding:	20px 0;
	width:		1px; overflow: hidden;
}
.delighter.started pre {
	max-width:	99999px;
	width:		100%;
	opacity:	1;
}

a {	color: inherit;	}

.delighter.splash {			transition: all 2s ease-out;}
.delighter.splash.ended {	background: #fff;			}

.delighter ul.itemUP li						{ opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started ul.itemUP li				{ opacity: 1; transform: none; }
.delighter.started ul.itemUP li:nth-child(1)	{ transition: all .7s ease-out .1s; }
.delighter.started ul.itemUP li:nth-child(2)	{ transition: all .7s ease-out .3s; }
.delighter.started ul.itemUP li:nth-child(3)	{ transition: all .7s ease-out .5s; }
.delighter.started ul.itemUP li:nth-child(4)	{ transition: all .7s ease-out .7s; }
.delighter.started ul.itemUP li:nth-child(5)	{ transition: all .7s ease-out .9s; }
.delighter.started ul.itemUP li:nth-child(6)	{ transition: all .7s ease-out 1.1s; }
.delighter.started ul.itemUP li:nth-child(7)	{ transition: all .7s ease-out 1.3s; }
.delighter.started ul.itemUP li:nth-child(8)	{ transition: all .7s ease-out 1.4s; }
.delighter.started ul.itemUP li:nth-child(9)	{ transition: all .7s ease-out 1.5s; }
.delighter.started ul.itemUP li:nth-child(10)	{ transition: all .7s ease-out 1.6s; }
.delighter.started ul.itemUP li:nth-child(11)	{ transition: all .7s ease-out 1.7s; }
.delighter.started ul.itemUP li:nth-child(12)	{ transition: all .7s ease-out 1.8s; }
.delighter.started ul.itemUP li:nth-child(13)	{ transition: all .7s ease-out 1.9s; }
.delighter.started ul.itemUP li:nth-child(14)	{ transition: all .7s ease-out 2.0s; }
.delighter.started ul.itemUP li:nth-child(15)	{ transition: all .7s ease-out 2.1s; }
.delighter.started ul.itemUP li:nth-child(16)	{ transition: all .7s ease-out 2.3s; }
.delighter.started ul.itemUP li:nth-child(17)	{ transition: all .7s ease-out 2.4s; }
.delighter.started ul.itemUP li:nth-child(18)	{ transition: all .7s ease-out 2.5s; }
.delighter.started ul.itemUP li:nth-child(19)	{ transition: all .7s ease-out 2.6s; }
.delighter.started ul.itemUP li:nth-child(20)	{ transition: all .7s ease-out 2.7s; }
.delighter.started ul.itemUP li:nth-child(21)	{ transition: all .7s ease-out 2.8s; }
.delighter.started ul.itemUP li:nth-child(22)	{ transition: all .7s ease-out 2.9s; }
.delighter.started ul.itemUP li:nth-child(23)	{ transition: all .7s ease-out 3.0s; }
.delighter.started ul.itemUP li:nth-child(24)	{ transition: all .7s ease-out 3.1s; }

.box {
	position:		relative;
	padding:		20px 2%;
	margin-bottom:	30px;
	height:			auto;
	min-height:		180px;
	box-shadow:		0 0 5px 0 rgba(0,0,0,.3);
	background:		rgb(255, 255, 255) !important;
	background:		rgba(255, 255, 255, 0.75) !important;
	color:			#000;
}
.delighter .box						{ opacity: 0; transform: translatey(0,0); transition: all .7s ease-out;; }
.delighter.started .box				{ opacity: 1; transform: none;  }
.delighter.started .box:nth-child(odd){ transform: translate(-30px, 0); }
.delighter.started .box:nth-child(even){ transform: translate(30px, 0); }

.delighter.moveUP				{ transform:translateY(200px); opacity:0; transition: all .75s ease-out; }
.delighter.moveUP.started		{ transform:none; opacity:1; }

.delighter.moveDOWN				{ transform:translateY(-300px); opacity:0; transition: all .75s ease-out; }
.delighter.moveDOWN.started		{ transform:none; opacity:1; }

.delighter.fadeIN				{ opacity:0; transition: all .75s ease-out; }
.delighter.fadeIN.started		{ opacity:1; }

.delighter.zoomIN 				{ opacity:0;transition: all .75s ease-out;	}
.delighter.zoomIN.started		{ opacity:0;transform: scale(.1);	}
.delighter.zoomIN.started.ended	{ opacity:1;transform: scale(1);	}



.delighter.rotateR 				{ opacity:0;transform: scale(.1) rotate(0deg);	filter:alpha(opacity=0);	transition: all .75s ease-out;}
.delighter.rotateR.started		{ opacity:0;transform: scale(1) rotate(0deg);	filter:alpha(opacity=0);	}
.delighter.rotateR.started.ended{ opacity:1;transform: scale(1) rotate(360deg);	filter:alpha(opacity=100);	}

.delighter.rotateL 				{ opacity:0;transform: scale(.1) rotate(0deg);	filter:alpha(opacity=0);	transition: all .75s ease-out;}
.delighter.rotateL.started		{ opacity:0;transform: scale(1) rotate(0deg);	filter:alpha(opacity=0);	}
.delighter.rotateL.started.ended{ opacity:1;transform: scale(1) rotate(-360deg);filter:alpha(opacity=100);	}

.delighter.rotateX 				{ opacity:0;transform: scale(.1) rotateX(0deg);	filter:alpha(opacity=0);	transition: all .75s ease-out;}
.delighter.rotateX.started		{ opacity:0;transform: scale(1) rotateX(0deg);	filter:alpha(opacity=0);	}
.delighter.rotateX.started.ended{ opacity:1;transform: scale(1) rotateX(360deg);filter:alpha(opacity=100);	}

.delighter.rotateY 				{ opacity:0;transform: scale(.1) rotateY(0deg);	filter:alpha(opacity=0);	transition: all .75s ease-out;}
.delighter.rotateY.started		{ opacity:0;transform: scale(1) rotateY(0deg);	filter:alpha(opacity=0);	}
.delighter.rotateY.started.ended{ opacity:1;transform: scale(1) rotateY(360deg);filter:alpha(opacity=100);	}


@media (min-width: 992px) {

.delighter.zoomOUT 				{ opacity:0;transition: all .75s ease-out;	}
.delighter.zoomOUT.started		{ opacity:0;transform: scale(3);	}
.delighter.zoomOUT.started.ended{ opacity:1;transform: scale(1);	}

.delighter.moveright		{ transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
.delighter.moveright.started{ transform:none; opacity:1; }

.delighter.moveleft			{ transform:translate(100%); opacity:0; transition: all .75s ease-out; }
.delighter.moveleft.started	{ transform:none; opacity:1; }

}
@media (max-width: 991px) {

.delighter.zoomOUT 				{ opacity:0;transition: all .75s ease-out;	}
.delighter.zoomOUT.started		{ opacity:0.25;	}
.delighter.zoomOUT.started.ended{ opacity:1;	}

.delighter.moveright		{ opacity:0; transition: all .75s ease-out; }
.delighter.moveright.started{ opacity:1; }

.delighter.moveleft			{ opacity:0; transition: all .75s ease-out; }
.delighter.moveleft.started	{ opacity:1; }

}