/* (C)2019 Endis Ltd.
No permission is given to use this code, except on an Endis/ChurchInsight website. */

/* CI animations library */

/* 
Make cards fade in as user scrolls down page.
We use a generic class name here called FadingCards, which should be applied to any slice that needs the animation on.
This code is designed to run on 3 and 4 card sets, not anything bigger.
*/
@keyframes CIA_OpacityRise {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes OpacityB {
	0% {opacity:0.4;}
	100% {opacity:1;}
}

@media(min-width:992px){
  section.FadingCards.HomepageLookGood div.RightColTypeA {opacity:0;} /* set to 0 initially, also when the class "RunAnimation" is removed, they will go back to this. */
  section.FadingCards.HomepageLookGood.RunAnimation div.RightColTypeA {
    animation-name: CIA_OpacityRise;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
    animation-timing-function: linear;
    animation-fill-mode:forwards; /* keep opacity on at the end */
  }
}

@media(min-width:992px){
  /* code needed to prepare the Image Blocks for animation */
  section.FadingCards div.GetEvenMoreCard {background-color:#fff;}

  section.FadingCards div.GetEvenMoreCard {opacity:0;} /* set to 0 initially, also when the class "RunAnimation" is removed, they will go back to this. */

  /* JS will add the class "RunAnimation" to start the animation going */
  section.FadingCards.RunAnimation div.GetEvenMoreCard {
      animation-name: CIA_OpacityRise;
      animation-iteration-count: 1;
      animation-duration: 1s;
      animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
      animation-timing-function: linear;
      animation-fill-mode:forwards; /* keep opacity on at the end */
  }

  /* 2nd card: off-set delay compared to the 1st */
  section.FadingCards.RunAnimation div.GetEvenMoreCard:nth-child(2) {
      animation-delay:333ms;
  }
  /* 3rd card: off-set delay compared to the 2nd */
  section.FadingCards.RunAnimation div.GetEvenMoreCard:nth-child(3) {
      animation-delay:calc(2*333ms);
  }
}


@media(min-width:992px){
  section.HomepageHero.HomepageLookGood.FadingCardsA1 div.RightColTypeA {
    opacity:0.4;
  }
  section.HomepageHero.HomepageLookGood.FadingCardsA1.RunAnimation div.RightColTypeA {
    animation-name: OpacityB;
    animation-iteration-count: 1;
    animation-duration: 400ms;
    animation-delay:100ms; /* initial delay, will be zero if scroll-position activated. */
    animation-timing-function: linear;
    animation-fill-mode:both; /* keep 100% values on at the end */
  }
}