/* line 6, ../sass/animations.scss */
.animateFade,
.slideLeft,
.slideRight,
.paddingAnimation,
.widthAnimation {
  -webkit-transition: opacity 0.4s, left 0.5s, right 0.5s, padding 0.3s, width 0.3s;
  -moz-transition: opacity 0.4s, left 0.5s, right 0.5s, padding 0.3s, width 0.3s;
  -o-transition: opacity 0.4s, left 0.5s, right 0.5s, padding 0.3s, width 0.3s;
  transition: opacity 0.4s, left 0.5s, right 0.5s, padding 0.3s, width 0.3s;
}

/* line 10, ../sass/animations.scss */
.animateFade {
  opacity: 0;
}
/* line 12, ../sass/animations.scss */
.animateFade.animationComplete {
  opacity: 1;
}

/* line 16, ../sass/animations.scss */
.slideLeft {
  position: relative;
  left: -30%;
  right: auto;
  opacity: 0;
}
/* line 21, ../sass/animations.scss */
.slideLeft.animationComplete {
  left: 0;
  opacity: 1;
}

/* line 26, ../sass/animations.scss */
.slideRight {
  position: relative;
  right: -30%;
  left: auto;
  opacity: 0;
}
/* line 31, ../sass/animations.scss */
.slideRight.animationComplete {
  right: 0;
  opacity: 1;
}

/* line 37, ../sass/animations.scss */
.paddingAnimation,
.page-title .h-line.paddingAnimation {
  opacity: 0;
  padding: 0;
}
/* line 40, ../sass/animations.scss */
.paddingAnimation.animationComplete,
.page-title .h-line.paddingAnimation.animationComplete {
  opacity: 1;
  padding: 0 176px;
}

/* line 47, ../sass/animations.scss */
#services .devices .imac.slideLeft,
#services .devices .macbook.slideLeft {
  left: 30%;
}
/* line 51, ../sass/animations.scss */
#services .devices .ipad.slideLeft,
#services .devices .iphone.slideLeft {
  left: -30%;
}
/* line 54, ../sass/animations.scss */
#services .devices .imac.slideLeft.animationComplete {
  left: 238px;
}
/* line 57, ../sass/animations.scss */
#services .devices .macbook.slideLeft.animationComplete {
  left: 428px;
}
/* line 60, ../sass/animations.scss */
#services .devices .ipad.slideLeft.animationComplete {
  left: 22px;
}
/* line 63, ../sass/animations.scss */
#services .devices .iphone.slideLeft.animationComplete {
  left: 217px;
}


/* Tr-flash */

@-webkit-keyframes tr-flash {
  0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}


@-moz-keyframes tr-flash {
  0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}


@-o-keyframes tr-flash {
  0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

@-ms-keyframes tr-flash {
  0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

@keyframes tr-flash {
 0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}


/*Tr-Fade*/

.tr-fade {
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-name: tr-fade;
  -webkit-animation-name: tr-fade;
  animation-name: tr-fade;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
    
@-moz-keyframes tr-fade {
from {
	-moz-transform: scale(1.1) rotate(5deg);
	-webkit-transform: scale(1.1) rotate(5deg);
	-o-transform: scale(1.1) rotate(5deg);
	-ms-transform: scale(1.1) rotate(5deg);
	transform: scale(1.1) rotate(5deg);
	opacity:0.5;
  }
      
  to {
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	opacity:1;
  }
}

@-webkit-keyframes tr-fade {
 from {
	-moz-transform: scale(1.1) rotate(5deg);
	-webkit-transform: scale(1.1) rotate(5deg);
	-o-transform: scale(1.1) rotate(5deg);
	-ms-transform: scale(1.1) rotate(5deg);
	transform: scale(1.1) rotate(5deg);
	opacity:0.5;
  }
      
  to {
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	opacity:1;
  }
}

@-o-keyframes tr-fade {
 from {
	-moz-transform: scale(1.1) rotate(5deg);
	-webkit-transform: scale(1.1) rotate(5deg);
	-o-transform: scale(1.1) rotate(5deg);
	-ms-transform: scale(1.1) rotate(5deg);
	transform: scale(1.1) rotate(5deg);
	opacity:0.5;
  }
      
  to {
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	opacity:1;
  }
}

@-ms-keyframes tr-fade {
 from {
	-moz-transform: scale(1.1) rotate(5deg);
	-webkit-transform: scale(1.1) rotate(5deg);
	-o-transform: scale(1.1) rotate(5deg);
	-ms-transform: scale(1.1) rotate(5deg);
	transform: scale(1.1) rotate(5deg);
	opacity:0.5;
  }
      
  to {
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	opacity:1;
  }
}

@keyframes tr-fade {
 from {
	-moz-transform: scale(1.1) rotate(5deg);
	-webkit-transform: scale(1.1) rotate(5deg);
	-o-transform: scale(1.1) rotate(5deg);
	-ms-transform: scale(1.1) rotate(5deg);
	transform: scale(1.1) rotate(5deg);
	opacity:0.5;
  }
      
  to {
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	opacity:1;
  }
}



/*Tr-bladder*/

.tr-bladder {
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-name: tr-fade;
  -webkit-animation-name: tr-fade;
  animation-name: tr-fade;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
   

   
@-moz-keyframes tr-bladder {
0% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
      
  50% {
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
  }
  100% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
}

@-webkit-keyframes tr-bladder {
0% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
      
  50% {
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
  }
  100% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
}

@-o-keyframes tr-bladder {
0% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
      
  50% {
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
  }
  100% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
}

@-ms-keyframes tr-bladder {
0% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
      
  50% {
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
  }
  100% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
}

@keyframes tr-bladder {
0% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
      
  50% {
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
  }
  100% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
  }
}




/*Tr-run*/

.tr-run {
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-name: tr-run;
  -webkit-animation-name: tr-run;
  animation-name: tr-run;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
   

   
@-moz-keyframes tr-run {
0% {
	-moz-transform: translateX(50px);
	-webkit-transform: translateX(50px);
	-o-transform: translateX(50px);
	-ms-transform: translateX(50px);
	transform: translateX(50px);
	
  }
   
  100% {
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	
  }
}

@-webkit-keyframes tr-run {
0% {
	-moz-transform: translateX(50px);
	-webkit-transform: translateX(50px);
	-o-transform: translateX(50px);
	-ms-transform: translateX(50px);
	transform: translateX(50px);
	
  }
   
  100% {
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	
  }
}

@-o-keyframes tr-run {
0% {
	-moz-transform: translateX(50px);
	-webkit-transform: translateX(50px);
	-o-transform: translateX(50px);
	-ms-transform: translateX(50px);
	transform: translateX(50px);
	
  }
   
  100% {
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	
  }
}

@-ms-keyframes tr-run {
0% {
	-moz-transform: translateX(50px);
	-webkit-transform: translateX(50px);
	-o-transform: translateX(50px);
	-ms-transform: translateX(50px);
	transform: translateX(50px);
	
  }
   
  100% {
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	
  }
}

@keyframes tr-run {
0% {
	-moz-transform: translateX(50px);
	-webkit-transform: translateX(50px);
	-o-transform: translateX(50px);
	-ms-transform: translateX(50px);
	transform: translateX(50px);
	
  }
   
  100% {
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	
  }
}