/********* delays ***********/
.animate {
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		position:relative;
	}
.animate.long {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
@media all and (min-width:768px) {
	.delay100 {
		transition-delay: 0.1s !important;
	}
	.delay200 {
		transition-delay: 0.2s !important;
	}
	.delay300 {
		transition-delay: 0.3s !important;
	}
	.delay400 {
		transition-delay: 0.4s !important;
	}
	.delay500 {
		transition-delay: 0.5s !important;
	}
	.delay600 {
		transition-delay: 0.6s !important;
	}
	.delay700 {
		transition-delay: 0.7s !important;
	}
	.delay800 {
		transition-delay: 0.8s !important;
	}
	.delay900 {
		transition-delay: 0.9s !important;
	}
	.delay1000 {
		transition-delay: 1s !important;
	}
	.delay1100 {
		transition-delay: 1.1s !important;
	}
	.delay1200 {
		transition-delay: 1.2s !important;
	}
	.delay1300 {
		transition-delay: 1.3s !important;
	}
	.delay1400 {
		transition-delay: 1.4s !important;
	}
	.delay1500 {
		transition-delay: 1.5s !important;
	}
	.delay1600 {
		transition-delay: 1.6s !important;
	}
	.delay1700 {
		transition-delay: 1.7s !important;
	}
	.delay1800 {
		transition-delay: 1.8s !important;
	}
	.delay1900 {
		transition-delay: 1.9s !important;
	}
	.delay2000 {
		transition-delay: 2s !important;
	}
	
}


/********* animations ***********/

.fadeInTop {
	opacity:0;
	top:100px;
}
.fadeInTop.in-view {
	opacity:1;
	top:0px;
}
.fadeInLeft {
	opacity:0;
	left:100px;
}
.fadeInLeft.in-view {
	opacity:1;
	left:0px;
}
.fadeInRight {
	opacity:0;
	right:100px;
}
.fadeInRight.in-view {
	opacity:1;
	right:0px;
}
.fadeInBottom {
	opacity:0;
	bottom:100px;
}
.fadeInBottom.in-view {
	opacity:1;
	bottom:0px;
}
.fadeIn {
	opacity:0;
}
.fadeIn.in-view {
	opacity:1;
}

.slideInTop {
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.slideInTop.in-view {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.slideInBottom {
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.slideInBottom.in-view {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.slideInLeft {
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.slideInLeft.in-view {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.slideInRight {
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.slideInRight.in-view {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}