/*animation element sliding up and fading in*/
.animate {
  opacity: 0;
  -moz-transition: all 600ms linear;
  -webkit-transition: all 600ms linear;
  -webkit-transition: opacity 600ms linear;
  -o-transition: all 600ms linear;
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.animate.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 sliding up and fading in*/
.fadeIn {
  opacity: 0;
  transition: opacity 800ms linear;
  -moz-transition: opacity 800ms linear;
  /*-webkit-transition: all 800ms linear;*/
  -webkit-transition: opacity 800ms linear;
  -o-transition: opacity 800ms linear;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.fadeIn.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);
}

.fadeInTitle {
  animation-duration: 600ms;
  animation-iteration-count: 1;
  animation-name: fadeInTitle;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

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


/*animation element sliding up and fading in*/
.animateFadeUp {
  opacity: 0;
  -moz-transition: all 600ms linear;
  -webkit-transition: all 600ms linear;
  /*-webkit-transition: opacity 600ms linear;*/
  -o-transition: all 600ms linear;
  -webkit-transform: translate3d(0px, 200px, 0px);
  transition-timing-function: cubic-bezier(0,0,.58,1);
}

.animateFadeUp.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 sliding right and fading in*/
.animate-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -webkit-transition: opacity 500ms linear;
  -o-transition: all 500ms linear;
  -webkit-transform: translate3d(-50px, 0px, 0px);
}

.animate-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);
}