.slide-In-Left.is-visible {
    opacity: 1;
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.slide-In-Right.is-visible {
    opacity: 1;
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.slide-In-Down.is-visible {
    opacity: 1;
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slideInDown {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.slide-In-Up.is-visible {
    opacity: 1;
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slideInUp {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.fade-in.is-visible {
    animation: fadeIn ease 5s;
    -webkit-animation: fadeIn ease 5s;
    -moz-animation: fadeIn ease 5s;
    -o-animation: fadeIn ease 5s;
    -ms-animation: fadeIn ease 5s;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.pulseAnimation {
    animation: pulse 2s linear infinite;
}

@-webkit-keyframes

"pulse" {
    0%

{
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
}

50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

100% {
    -webkit-transform: scale(1);
    transform: scale(1);
}

}

.pulseBorder {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}
/** ----//
*  @group standaard animaties
*  @author @david
*/

/* Trigger  */
/*.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  }*/

/* Optional Delays, change values here  */
/*.one { animation-delay: 0.2s; }
.two { animation-delay: .6s; }
.three { animation-delay: 1s; }
.four { animation-delay: 1.4s; }*/

/* Animations start here  */

/* FADE IN  */

/*@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; } }
.fadeIn.is-visible {
    animation-name: fadeIn;
}*/


/* FADE IN DOWN */

/*@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDown.is-visible {
    animation-name: fadeInDown;
}*/

/* FADE IN UP */

/*@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }*/

/* FADE IN UP BIG */

/*@keyframes fadeInUpBig {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUpBig { animation-name: fadeInUpBig; }*/

/* FADE IN LEFT */

/*@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-30px, 0, 0)rotateZ(30deg); }
  to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }*/

/* FADE IN LEFT BIG */

/*@keyframes fadeInLeftBig {
  from { opacity: 0; transform: translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInLeftBig { animation-name: fadeInLeftBig; }*/

/* FADE IN RIGHT */

/*@keyframes fadeInRightBig {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInRightBig { animation-name: fadeInRightBig; }*/

/* @end standaard animaties  */


/*.callout {
  max-width: 500px;
  margin:0 auto;
  padding-bottom:100px
}

.test.in-view {
  animation: fadeInUp 2s;
  }

slide-In-LeftBig.in-view {  
   animation: fadeInLeftBig;
    animation-duration: 1s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}

.slide-In-RightBig.in-view {  
   animation: fadeInRightBig;
    animation-duration: 1s;
   animation-delay: 0s;
  animation-fill-mode: both;
   backface-visibility: hidden;
}*/

/* if it was SASS you could use: 
.test2.in-view {
     @extend .fadeInUpBig;
}
*/




.smooth-Appear.is-visible {  
   animation: smoothAppear 1s ease forwards;

    -webkit-animation-name: smoothAppear;
    animation-name: smoothAppear;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;


}
@keyframes smoothAppear {
  from {
    bottom: -60px
  }
  to {
    bottom: 20px)
  }
}


/* Flip In */
.animate {
  animation-duration: 0.75s;
  animation-duration: 1s; //running slower to show effect
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26,.53,.74,1.48);
  animation-fill-mode: backwards;
}
.animate.flip.is-visible {
animation-name: animate-flip;
transform-style: preserve-3d;
perspective: 1000px;
}
@keyframes animate-flip {
0% {
opacity: 0;
transform: rotateX(-120deg) scale(0.9,0.9);
}
100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1,1);
}
}

/* Grow In */
.animate.grow.is-visible {
  animation-name: animate-grow;
}
@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
/* Animation Delays */
.delay-1 {
animation-delay: 0.6s;
}
.delay-2 {
animation-delay: 0.7s;
}
.delay-3 {
animation-delay: 0.8s;
}
.delay-4 {
animation-delay: 0.9s;
}
.delay-5 {
animation-delay: 1s;
}
.delay-6 {
animation-delay: 1.1s;
}

/* Pop In */
.animate.pop.is-visible {
  animation-name: animate-pop;
}
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}


.fadeUp {
  opacity: 0;
  transform: translateY(50px);
}
.fadeUp.is-visible {
  animation-name: fadeUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fadeIn {
  opacity: 0;
}
.fadeIn.is-visible {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.fadeDown {
  opacity: 0;
  transform: translateY(-50%);
}
.fadeDown.is-visible {
  animation-name: fadeDown;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fadeRight {
  opacity: 0;
  transform: translateX(-50%);
}
.fadeRight.is-visible {
  animation-name: fadeRight;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.fadeLeft {
  opacity: 0;
  transform: translateX(50%);
}
.fadeLeft.is-visible {
  animation-name: fadeLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}