/*Use the wow script to trigger an effect immediately on page scroll: <div class="name wow fadeInRight">

To delay the animation on page scroll use keyframe animation (below): <div class="name wow fade-In one"></div>*/




/* Used for page fade with fadeinonpageload.js in js folder */
.fadediv {
	float:left;
	width:100%;
	opacity:0;
	filter:alpha(opacity=0);

}

/* make keyframes that tell the start state and the end state of our object. This is used to animate and in conjunction with WOW script. You can also input delays to delay the animation before running */

 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { 
	from { opacity:0; } 
	to { opacity:1; } 
	}
 
@-webkit-keyframes fadeInRight { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeInRight { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInRight { 
	from { opacity:0; } 
	to { opacity:1; } 
	}
	
@-webkit-keyframes fadeInLeft { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeInLeft { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInLeft { 
	from { opacity:0; } 
	to { opacity:1; } 
	}
	
@-webkit-keyframes fadeInUp { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeInUp{ from { opacity:0; } to { opacity:1; } }
@keyframes fadeInUP { 
	from { opacity:0; } 
	to { opacity:1; } 
	}

@-webkit-keyframes fadeInDown { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeInDown { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInDown { 
	from { opacity:0; } 
	to { opacity:1; } 
	}	

@-webkit-keyframes bounceIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes bounceIn { from { opacity:0; } to { opacity:1; } }
@keyframes bounceIn { 
	from { opacity:0; } 
	to { opacity:1; } 
	}
	
@-webkit-keyframes bounceInRight { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes bounceInRight { from { opacity:0; } to { opacity:1; } }
@keyframes bounceInRight { 
	from { opacity:0; } 
	to { opacity:1; } 
	}

@-webkit-keyframes bounceInLeft { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes bounceInLeft { from { opacity:0; } to { opacity:1; } }
@keyframes bounceInLeft { 
	from { opacity:0; } 
	to { opacity:1; } 
	}
	
@-webkit-keyframes bounceInUp { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes bounceInUp { from { opacity:0; } to { opacity:1; } }
@keyframes bounceInUp { 
	from { opacity:0; } 
	to { opacity:1; } 
	}	

@-webkit-keyframes bounceInDown { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes bounceInDown { from { opacity:0; } to { opacity:1; } }
@keyframes bounceInDown { 
	from { opacity:0; } 
	to { opacity:1; } 
	}
		
	
/*----the animation effect on fade----*/
	
.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn 1;
	animation:fadeIn 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in-right {
	opacity:0;  
	-webkit-animation:fadeInRight  1; 
	-moz-animation:fadeInRight  1;
	animation:fadeInRight  1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in-left {
	opacity:0;  
	-webkit-animation:fadeInLeft  1; 
	-moz-animation:fadeInLeft  1;
	animation:fadeInLeft  1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

html:not(.fl-builder-edit) .fade-in-up {
	opacity:0;  
	-webkit-animation:fadeInUp  1; 
	-moz-animation:fadeInUp  1;
	animation:fadeInUp  1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in-down {
	opacity:0;  
	-webkit-animation:fadeInDown  1; 
	-moz-animation:fadeInDown  1;
	animation:fadeInDown  1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.bounce-in {
	opacity:0;  
	-webkit-animation:bounceIn 1; 
	-moz-animation:bounceIn 1;
	animation:bounceIn 1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.bounce-in-left {
	opacity:1;  
	-webkit-animation:bounceInLeft 1; 
	-moz-animation:bounceInLeft 1;
	animation:bounceInLeft 1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.bounce-in-right {
	opacity:1;  
	-webkit-animation:bounceInRight 1; 
	-moz-animation:bounceInRight 1;
	animation:bounceInRight 1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}


.bounce-in-up {
	opacity:1;  
	-webkit-animation:bounceInUp  1; 
	-moz-animation:bounceInUp  1;
	animation:bounceInUp  1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.bounce-in-down {
	opacity:1;  
	-webkit-animation:bounceInDown  1; 
	-moz-animation:bounceInDown  1;
	animation:bounceInDown  1;
 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}
/*---Delay the animation-------------------------------*/


.zero {
-webkit-animation-delay: 0.0s;
-moz-animation-delay: 0.0s;
animation-delay: 0.0s;
}


.half {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}


.one {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}


.onehalf {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}


.two {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}