/* 
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 {
  -webkit-animation: fadeInLeft 1.5s both;
  -moz-animation: fadeInLeft 1.5s both;
  -o-animation: fadeInLeft 1.5s both;
  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 {
  -webkit-animation: fadeInRight 1.5s both;
  -moz-animation: fadeInRight 1.5s both;
  -o-animation: fadeInRight 1.5s both;
  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 {
  -webkit-animation: fadeInTop 1.5s both;
  -moz-animation: fadeInTop 1.5s both;
  -o-animation: fadeInTop 1.5s both;
  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 {
  -webkit-animation: fadeInBottom 1.5s both;
  -moz-animation: fadeInBottom 1.5s both;
  -o-animation: fadeInBottom 1.5s both;
  animation: fadeInBottom 1.5s both;
}
@-webkit-keyframes fadeInBottom  {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
  }
  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 {
  -webkit-animation: fadeIn 1s both;
  -moz-animation: fadeIn 1s both;
  -o-animation: fadeIn 1s both;
  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. 
These are set up in various ACF blocks, they also need a second general class called .animation-element. 
When an element is in the viewport javascript adds the .in-view class to the .animation-element class. 
This triggers classes below. 
*/

.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 {
    -webkit-animation: fadeInLeft 1.5s both;
    -moz-animation: fadeInLeft 1.5s both;
    -o-animation: fadeInLeft 1.5s both;
    animation: fadeInLeft 1.5s both;
  } 
.fade-in-right.in-view {
    -webkit-animation: fadeInRight 1.5s both;
    -moz-animation: fadeInRight 1.5s both;
    -o-animation: fadeInRight 1.5s both;
    animation: fadeInRight 1.5s both;
  }
.fade-in-top.in-view {
    -webkit-animation: fadeInTop 1.5s both;
    -moz-animation: fadeInTop 1.5s both;
    -o-animation: fadeInTop 1.5s both;
    animation: fadeInTop 1.5s both;
  } 
.fade-in-bottom.in-view {
    -webkit-animation: fadeInBottom 1.5s both;
    -moz-animation: fadeInBottom 1.5s both;
    -o-animation: fadeInBottom 1.5s both;
    animation: fadeInBottom 1.5s both;
  } 
 .fade-in.in-view  {
/*    -webkit-animation: fadeIn 1.5s both;
    -moz-animation: fadeIn 1.5s both;
    -o-animation: fadeIn 1.5s both;*/
    /*animation: fadeIn 1.5s both;*/
    animation-name: fadeIn;
    animation-fill-mode: both;
  } 


/* Custom animations below */

/* For Hero*/

.home .info-inner,
.int .info.has-bg h1 {
    -webkit-animation: fadeInLeft 1.5s both;
    -moz-animation: fadeInLeft 1.5s both;
    -o-animation: fadeInLeft 1.5s both;
    animation: fadeInLeft 1.5s both;
  }
.int .info.has-bg h1  { animation-delay: .4s; } 
/*.hero-wrap.int #feat-img::after  { animation-delay: 1.4s; } */ 
.home .splide__slide__container img,
.int #feat-img img,
.hero-wrap.int #feat-img::after {
    -webkit-animation: fadeIn 1s both;
    -moz-animation: fadeIn 1s both;
    -o-animation: fadeIn 1s both;
    animation: fadeIn 1s both;
  }

.ill_responsive_video {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-delay: 2s;
}

.wp-block-gallery .wp-block-image img {
  -webkit-animation: fadeIn 1s both;
  -moz-animation: fadeIn 1s both;
  -o-animation: fadeIn 1s both;
  animation: fadeIn 1s both;
}

.wp-block-gallery .wp-block-image:nth-child(2) > img {
  animation-delay: .2s;
}
.wp-block-gallery .wp-block-image:nth-child(3) > img {
  animation-delay: .4s;
}
.wp-block-gallery .wp-block-image:nth-child(4) > img {
  animation-delay: .6s;
}
.wp-block-gallery .wp-block-image:nth-child(5) > img {
  animation-delay: .8s;
}
.wp-block-gallery .wp-block-image:nth-child(6) > img {
  animation-delay: 1s;
}
.wp-block-gallery .wp-block-image:nth-child(7) > img {
  animation-delay: 1.2s;
}
.wp-block-gallery .wp-block-image:nth-child(8) > img {
  animation-delay: 1.4s;
}
.wp-block-gallery .wp-block-image:nth-child(9) > img {
  animation-delay: 1.6s;
}
.wp-block-gallery .wp-block-image:nth-child(10) > img {
  animation-delay: 1.8s;
}
.wp-block-gallery .wp-block-image:nth-child(11) > img {
  animation-delay: 2s;
}
.wp-block-gallery .wp-block-image:nth-child(12) > img {
  animation-delay: 2.2s;
}
.wp-block-gallery .wp-block-image:nth-child(13) > img {
  animation-delay: 2.4s;
}
.wp-block-gallery .wp-block-image:nth-child(14) > img {
  animation-delay: 2.6s;
}
.wp-block-gallery .wp-block-image:nth-child(15) > img {
  animation-delay: 2.8s;
}
.wp-block-gallery .wp-block-image:nth-child(16) > img {
  animation-delay: 3s;
}