/* ---------------------------------------
    Appear animation
--------------------------------------- */

@media (min-width: 992px) {

	[data-scroll-my] {
		transition: opacity 0.5s ease-in-out, transform 1s cubic-bezier(.16, .88, 0.45, 1);
	}

	.fade-in, .ease-right, .ease-left, .ease-btm, .ease-top {
		opacity: 0;
	}

	.fade-in[data-scroll-my="in"],
	.ease-right[data-scroll-my="in"],
	.ease-left[data-scroll-my="in"],
	.ease-btm[data-scroll-my="in"],
	.ease-top[data-scroll-my="in"] {
		opacity: 1;
	}

	.fade-in {
		transition-duration: 1s;
	}

	.ease-right[data-scroll-my="in"],
	.ease-left[data-scroll-my="in"],
	.ease-btm[data-scroll-my="in"],
	.ease-top[data-scroll-my="in"] {
		transform: none;
	}

	.ease-right {
		transform: translateX(100px);
	}

	.ease-left {
		transform: translateX(-100px);
	}

	.ease-top {
		transform: translateY(-100px);
	}

	.ease-btm {
		transform: translateY(100px);
	}

	.flip-top[data-scroll-my="in"],
	.flip-btm[data-scroll-my="in"],
	.flip-left[data-scroll-my="in"],
	.flip-right[data-scroll-my="in"] {
		transform: perspective(400px);
		backface-visibility: visible !important;
	}

	.flip-top {
		transform: perspective(400px) rotateX(-90deg);
		transform-origin: center top;
	}

	.flip-btm {
		transform: perspective(400px) rotateX(90deg);
		transform-origin: center bottom;
	}

	.flip-left {
		transform: perspective(400px) rotateY(90deg);
		transform-origin: left center;
	}

	.flip-right {
		transform: perspective(400px) rotateY(-90deg);
		transform-origin: right center;
	}

	.ease-delay-100 { transition-delay: 300ms; }
	.ease-delay-200 { transition-delay: 600ms; }
	.ease-delay-300 { transition-delay: 900ms; }
	.ease-delay-400 { transition-delay: 1200ms; }
	.ease-delay-500 { transition-delay: 1500ms; }

}