/* CSS Document */

/*********
Revealer
*********/
.revealer
{
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 100000 !important;
	pointer-events: none;
}
.revealer__layer
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #ddd;
}
.revealer--top,
.revealer--bottom
{
	left: 0;
}
.revealer--top
{
	bottom: 100%;
}
.revealer--bottom
{
	top: 100%;
}
.revealer--right,
.revealer--left
{
	top: 50%;
	left: 50%;
}
.anim--effect-3 .page:nth-child(2)
{
	background-color: #000;
}
.anim--effect-3 .revealer--animate .revealer__layer
{
	animation: anim-effect-3-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
}
.anim--effect-3 .revealer--animate .revealer__layer:nth-child(2)
{
	animation-name: anim-effect-3-2;
}
.anim--effect-3 .revealer--animate .revealer__layer:nth-child(3)
{
	animation-name: anim-effect-3-3;
}
@keyframes anim-effect-3-1
{
	0%
	{
		transform: translate3d(0, 0, 0);
	}
	25%, 75%
	{
		transform: translate3d(0, -100%, 0);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	100%
	{
		transform: translate3d(0, -200%, 0);
	}
}
@keyframes anim-effect-3-2
{
	0%, 12.5%
	{
		transform: translate3d(0, 0, 0);
	}
	37.5%, 62.5%
	{
		transform: translate3d(0, -100%, 0);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	87.5%, 100%
	{
		transform: translate3d(0, -200%, 0);
	}
}
@keyframes anim-effect-3-3
{
	0%, 25%
	{
		transform: translate3d(0, 0, 0);
		animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}
	75%, 100%
	{
		transform: translate3d(0, -200%, 0);
	}
}