/* 
Animation types and default classes for each. 
These classes trigger on page load .fadeInLeft, .fadeInRight, .fadeInTop, .fadeInBottom, .fadeIn. 
Animations below can also be added directly to other classes, they will also trigger on page load. 
See second section for animations triggered when in viewport.   
*/
.fadeInLeft {
  animation: fadeInLeft 1.5s both;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}

.fadeInRight {
  animation: fadeInRight 1.5s both;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@-moz-keyframes fadeInRight  {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@-o-keyframes fadeInRight  {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@keyframes fadeInRight  {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}

.fadeInTop {
  animation: fadeInTop 1.5s both;
}
@-webkit-keyframes fadeInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@-moz-keyframes fadeInTop  {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@-o-keyframes fadeInTop  {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@keyframes fadeInTop  {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}

.fadeInBottom {
  animation: fadeInBottom 1.5s both;
}
@-webkit-keyframes fadeInBottom  {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@-moz-keyframes fadeInBottom  {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@-o-keyframes fadeInBottom  {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
@keyframes fadeInBottom  {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
  }
}
.fadeIn {
  animation: fadeIn 1s both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 
Animations triggered on scroll/in viewport. 
On the San Remy theme, these are set up in various ACF blocks, a general class called .animation-element is also added. If you add classes manually you will also need to add the animation-element class.

When an element is in the viewport javascript adds the .in-view class to the .animation-element class. 
This triggers classes below. For these classes I don't use the animation shorthand, that creates too much of a black box. When it's split out, duration, delay and other properties can be added and changed separately. 

*/

.default-duration  { animation-duration:  1.5s; }
.medium-duration { animation-duration:  4s; }
.slow-duration { animation-duration:  6s; }

.medium-delay {  animation-delay: 2s; } 
.long-delay {  animation-delay: 4s; } 

.fade-in-left.in-view {
    animation-name: fadeInLeft;
    animation-fill-mode: both;
  } 
.fade-in-right.in-view {
    animation-name: fadeInRight;
    animation-fill-mode: both;
  }
.fade-in-top.in-view {
    animation-name: fadeInTop;
    animation-fill-mode: both;
  } 
.fade-in-bottom.in-view {
    animation-name: fadeInBottom;
    animation-fill-mode: both;
  } 
 .fade-in.in-view  {
    animation-name: fadeIn;
    animation-fill-mode: both;
  } 


/* Custom animations below */

.home .info-inner,
.int .info.has-bg h1 {
    animation: fadeInLeft 1.5s both;
  }
.wp-block-group.form.animation-element.in-view {
 	animation: fadeInBottom 2s both;
 }
 #hero figure#feat-img img {
 	animation: fadeInLeft 1.5s both;
 }
 #hero .info .info-inner {
 	animation: fadeInRight 1.5s both;
 }