/** ----//
*  @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 { animation-name: fadeIn; }


/* FADE IN DOWN */

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDown { 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, 60px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUpBig { animation-name: fadeInUpBig; }

/* FADE IN LEFT */

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-100px, 0, 0); }
  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 fadeInRight {
  from { opacity: 0; transform: translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: none; }  }
.fadeInRight { animation-name: fadeInRight; }

/* @end standaard animaties  */


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

.t-1_an.in-view, .t-2_an.in-view, .t-3_an.in-view, .t-4_an.in-view {
  animation: fadeInUp 1s;
  }

.h-1_an.in-view, .h-2_an.in-view, .h-3_an.in-view, .h-4_an.in-view{
    animation: fadeInLeft 1s;
}

.contact--content.in-view{
     animation: fadeInUpBig 1s;
}

.test2.in-view {  
   animation: fadeInLeftBig;
    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;
}
*/