@charset "UTF-8";
/**
 *  In Viewport Observer
 *  prüft ob Elemente im sichtbaren Bereich sind 
 *  max. animation time is 3 seconds - class .isInViewport is at least 3 seconds there (see inViewportObserver.js)
 */
.isInViewport_makeReady {
  visibility: hidden;
}

.isInViewport {
  visibility: visible;
}
.isInViewport[data-inviewportanimation=iVA_flyIn_left] {
  /* Apply animation to this element */
  animation: iVA_flyIn_left 1s ease-in-out;
}
.isInViewport[data-inviewportanimation=iVA_flyIn_right] {
  /* Apply animation to this element */
  animation: iVA_flyIn_right 1s ease-in-out;
}
.isInViewport[data-inviewportanimation=iVA_flyIn_top] {
  /* Apply animation to this element */
  animation: iVA_flyIn_top 1s ease-in-out;
}
.isInViewport[data-inviewportanimation=iVA_flyIn_bottom] {
  /* Apply animation to this element */
  animation: iVA_flyIn_bottom 1s ease-in-out;
}

/* 
 *  Move it (define the animation) 
 *  we use keyframe Animation because else the element is not in viewport for inViewportObserver.js
 */
@keyframes iVA_flyIn_left {
  0% {
    transform: translatex(-100vw);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes iVA_flyIn_right {
  0% {
    transform: translatex(100vw);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes iVA_flyIn_top {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes iVA_flyIn_bottom {
  0% {
    transform: translateY(100vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}/*# sourceMappingURL=viewportObserver.css.map */