/* ==========================================================================
   #Animation styles - start
   ========================================================================== */

@include keyframes(element-from-left) {
	0% {
		opacity: 0;
		transform: translate(-20%, 0);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}


@include keyframes(element-from-right) {
	0% {
		opacity: 0;
		transform: translate(20%, 0);

	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@include keyframes(element-from-top) {
	0% {
		opacity: 0;
		transform: translate(0, -30%);

	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@include keyframes(element-from-bottom) {
	0% {
		opacity: 0;
		transform: translate(0, 30%);

	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}


.eltd-element-from-left,
.eltd-element-from-right,
.eltd-element-from-top,
.eltd-element-from-bottom,
.eltd-element-from-fade {
	@include eltdRelativeHolderLayout();
	
	> div {
		@include eltdRelativeHolderLayout();
		opacity: 0;
	}
}

.eltd-element-from-fade {

	&.eltd-element-from-fade-on {

		> div {
			opacity: 1;
			@include eltdTransition(opacity .8s ease 0s);
		}
	}
}

.eltd-element-from-left {

	&.eltd-element-from-left-on {

		> div {

			@include eltdAnimation(element-from-left 0.55s 1 ease);
			opacity: 1;
		}
	}
}

.eltd-element-from-right {

	&.eltd-element-from-right-on {

		> div {
			@include eltdAnimation(element-from-right 0.55s 1 ease);
			opacity: 1;
		}
	}
}

.eltd-element-from-top {

	&.eltd-element-from-top-on {

		> div {
			@include eltdAnimation(element-from-top 0.55s 1 ease);
			opacity: 1;
		}
	}
}

.eltd-element-from-bottom {

	&.eltd-element-from-bottom-on {

		> div {
			@include eltdAnimation(element-from-bottom 0.55s 1 ease);
			opacity: 1;
		}
	}
}

.eltd-flip-in {
	opacity: 0;
	@include eltdTransform(perspective(1000px) rotateY(25deg));
	@include eltdTransition(all 1.1s ease-in-out);

	&.eltd-flip-in-on {
		opacity: 1;
		@include eltdTransform(rotateY(0deg));
	}
}

.eltd-grow-in {
	opacity: 0;
	@include eltdTransform(scale(0.8));
	@include eltdTransition(all 1s cubic-bezier(0,1,.5,1));

	&.eltd-grow-in-on {
		opacity: 1;
		@include eltdTransform(scale(1));
	}
}

.eltd-z-rotate {
	opacity: 0;
	@include eltdTransform(rotateZ(7deg));
	@include eltdTransition(all 300ms cubic-bezier(0.165, 0.84, 0.44, 1));
	@include eltdTransformOrigin(top right);

	&.eltd-z-rotate-on {
		opacity: 1;
		@include eltdTransform(rotateZ(0deg));
	}
}

.eltd-x-rotate {
	opacity: 0;
	@include eltdTransform(perspective(900px) rotateX(-45deg));
	@include eltdTransition(all .6s cubic-bezier(.785,.135,.15,.86));

	&.eltd-x-rotate-on {
		opacity: 1;
		@include eltdTransform(rotateX(0deg));
	}
}

.eltd-y-translate {
	opacity: 0;
	@include eltdTransform(translate(0,30px));
	@include eltdTransition(all 700ms cubic-bezier(0.680, -0.650, 0.265, 1.650));

	&.eltd-y-translate-on {
		opacity: 1;
		@include eltdTransform(translate(0,0));
	}
}

.eltd-fade-in-down {
	opacity: 0;
	@include eltdTransform(translate(0,-25px));
	@include eltdTransition(all .9s cubic-bezier(0,1,.5,1));

	&.eltd-fade-in-down-on {
		opacity: 1;
		@include eltdTransform(translate(0,0));
	}
}

.eltd-fade-in-left-x-rotate {
	opacity: 0;
	@include eltdTransform(rotateZ(-5deg) translate(-30px,0));
	@include eltdTransition(all .4s ease);

	&.eltd-fade-in-left-x-rotate-on {
		opacity: 1;
		@include eltdTransform(rotateZ(0deg) translate(0,0));
	}
}

.eltd-fade-in {
	opacity: 0;
	@include eltdTransition(all 1s ease);

	&.eltd-fade-in-on {
		opacity: 1;
	}
}
/* ==========================================================================
   #Animation styles - end
   ========================================================================== */