
/* ==========================================================================
   #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, 30%);
	}
}


.edgtf-element-from-left,
.edgtf-element-from-right,
.edgtf-element-from-top,
.edgtf-element-from-bottom,
.edgtf-element-from-fade {
	display: inline-block;
	width: 100%;
}

.touch .edgtf-no-animations-on-touch .edgtf-element-from-left,
.touch .edgtf-no-animations-on-touch .edgtf-element-from-right,
.touch .edgtf-no-animations-on-touch .edgtf-element-from-top,
.touch .edgtf-no-animations-on-touch .edgtf-element-from-bottom,
.touch .edgtf-no-animations-on-touch .edgtf-element-from-fade {

	> div {
		opacity: 1;
		@include edgtfAnimation(none);
		@include edgtfTransform(scale(1));
	}
}

.edgtf-element-from-left,
.edgtf-element-from-right,
.edgtf-element-from-top,
.edgtf-element-from-bottom,
.edgtf-element-from-fade {
	
	> div {
		opacity: 0;
		display: inline-block;
		width: 100%;
		vertical-align: middle;
	}
}

.edgtf-element-from-fade {

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

		> div {
			opacity: 1;
			@include edgtfTransition(opacity .8s ease 0s);
			-webkit-backface-visibility: hidden;
		}
	}
}

.edgtf-element-from-left {

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

		> div {

			@include edgtfAnimation(element-from-left 0.7s 1 ease-in-out);
			opacity: 1;
			-webkit-backface-visibility: hidden;
		}
	}
}

.edgtf-element-from-right {

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

		> div {
			@include edgtfAnimation(element-from-right 0.7s 1 ease-in-out);
			opacity: 1;
			-webkit-backface-visibility: hidden;
		}
	}
}

.edgtf-element-from-top {

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

		> div {
			@include edgtfAnimation(element-from-top 0.7s 1 ease-in-out);
			opacity: 1;
			-webkit-backface-visibility: hidden;
		}
	}
}

.edgtf-element-from-bottom {

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

		> div {
			@include edgtfAnimation(element-from-bottom 0.7s 1 ease-in-out);
			opacity: 1;
			-webkit-backface-visibility: hidden;
		}
	}
}


//custom animations for elements holder
.touch .edgtf-no-animations-on-touch .edgtf-fade-in,
.touch .edgtf-no-animations-on-touch .edgtf-fade-in-left,
.touch .edgtf-no-animations-on-touch .edgtf-fade-in-right,
.touch .edgtf-no-animations-on-touch .edgtf-fade-in-up,
.touch .edgtf-no-animations-on-touch .edgtf-fade-in-down,
.touch .edgtf-no-animations-on-touch .edgtf-grow-in {
	@include edgtfTransition(none !important);
	@include edgtfTransform(none !important);
	opacity: 1 !important;
}

.edgtf-fade-in {
	opacity: 0;
	@include edgtfTransition(all .75s $transition-easing-1);

	&.edgtf-fade-in-on {
		opacity: 1;
	}
}

.edgtf-fade-in-left {
	opacity: 0;
	@include edgtfTransform(translate3d(35%,0,0));
	@include edgtfTransition(all .75s $transition-easing-1);
	-webkit-backface-visibility: hidden;

	&.edgtf-fade-in-left-on {
		opacity: 1;
		@include edgtfTransform(translate3d(0,0,0));
	}
}

.edgtf-fade-in-right {
	opacity: 0;
	@include edgtfTransform(translate3d(-35%,0,0));
	@include edgtfTransition(all .75s $transition-easing-1);
	-webkit-backface-visibility: hidden;

	&.edgtf-fade-in-right-on {
		opacity: 1;
		@include edgtfTransform(translate3d(0,0,0));
	}
}

.edgtf-fade-in-up {
	opacity: 0;
	@include edgtfTransform(translate3d(0,35%,0));
	@include edgtfTransition(all .75s $transition-easing-1);

	&.edgtf-fade-in-up-on {
		opacity: 1;
		@include edgtfTransform(translate3d(0,0,0));
	}
}

.edgtf-fade-in-down {
	opacity: 0;
	@include edgtfTransform(translate3d(0,-35%,0));
	@include edgtfTransition(all .75s $transition-easing-1);

	&.edgtf-fade-in-down-on {
		opacity: 1;
		@include edgtfTransform(translate3d(0,0,0));
	}
}

.edgtf-grow-in {
	opacity: 0;
	@include edgtfTransform(scale(0.8));
	@include edgtfTransition(all .75s $transition-easing-1);
	-webkit-backface-visibility: hidden;

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

/* ==========================================================================
   #Animation styles - end
   ========================================================================== */