
/* Animation */
.delay-05
{
	animation-delay 	: 200ms;
}

.delay-1 
{
	animation-delay 	: 400ms;
}

.delay-2 
{
	animation-delay 	: 800ms;
}

.delay-3 
{
	animation-delay 	: 1200ms;
}

.delay-4 
{
	animation-delay 	: 1600ms;
}

.delay-5 
{
	animation-delay 	: 1600ms;
}

.delay-6 
{
	animation-delay 	: 1800ms;
}

.fade-in,
.fade-in-up,
.fade-in-right,
.fade-in-down,
.fade-in-left 
{
	animation-duration			: 200ms;
	animation-timing-function 	: ease-in;
	animation-fill-mode 		: both;
}

.fade-in 
{
	animation-name 				: fade-in;
}

.fade-in-up 
{
	animation-name 				: fade-in-up;
}

.fade-in-right
{
	animation-name 				: fade-in-right;
}

.fade-in-down
{
	animation-name 				: fade-in-down;
}

.fade-in-left 
{
	animation-name 				: fade-in-left;
}


@keyframes fade-in
{
	0% 
	{
		opacity 				: 0;
	}

	100% 
	{
		opacity 				: 1;
	}
}


@keyframes fade-in-down
{
	0% 
	{
		opacity 				: 0;
		transform 				: translateY(-5rem);
	}

	65% 
	{
		opacity 				: 0.2;
	}

	100% 
	{
		opacity 				: 1.0;
		transform 				: translateY(0);
	}
}


@keyframes fade-in-left
{
	0% 
	{
		opacity					: 0;
		transform 				: translateX(-5rem);
	}

	65%
	{
		opacity 				: 0.2;
	}

	100%
	{
		opacity 				: 1;
		transform 				: translateX(0);
	}
}


@keyframes fade-in-right
{
	0%
	{
		opacity 				: 0;
		transform 				: translateX(5rem);
	}

	65%
	{
		opacity 				: 0.2;
	}

	100%
	{
		opacity 				: 1;
		transform 				: translateX(0);
	}
}


@keyframes fade-in-up
{
	0%
	{
		opacity					: 0;
		transform 				: translateY(5rem);
	}

	65%
	{
		opacity 				: 0.2;
	}

	100%
	{
		opacity 				: 1;
		transform 				: translateY(0);
	}
}
