/* CSS Document */

*********************************************
New fade in on load 
*********************************************/

/* make keyframes that tell the start state and the end state of our object */
@-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;
}
}
.fade-in-load {
	opacity: 0;  /* make things invisible upon start */
	-webkit-animation: fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 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-load.three {
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
/*animation element*/

.animation-element {
	opacity: 0;
	position: relative;
}
.animation-element.three.in-view {
	opacity: 1;
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
/*animation element sliding left*/

.animation-element.slide-left {
	opacity: 0;
	-moz-transition: all 1000ms linear;
	-webkit-transition: all 1000ms linear;
	-o-transition: all 1000ms linear;
	transition: all 1000ms linear;

}
.animation-element.slide-right {
	opacity: 0;
	-moz-transition: all 1000ms linear;
	-webkit-transition: all 1000ms linear;
	-o-transition: all 1000ms linear;
	transition: all 1000ms linear;
}
.animation-element.slide-left.in-view {
	opacity: 1;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-right.in-view {
	opacity: 1;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
	float: left;
	width: 47%;
	margin: 0% 1.5% 3% 1.5%;
	background: #F5F5F5;
	padding: 15px;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
	border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover, .animation-element.slide-left.testimonial:active {
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.editmode .animation-element.slide-left {
	opacity: 1;
	-moz-transition: all 500ms linear;
	-webkit-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
}
.editmode .animation-element.slide-right {
	opacity: 1;
	-moz-transition: all 500ms linear;
	-webkit-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
}
.editmode .animation-element {
	opacity: 1;
	position: relative;
}