:root {
  --YKQK-offset: 100px;
}

/**
 * Fade animations:
 * fade
 * fade-up, fade-down, fade-left, fade-right
 * fade-up-right, fade-up-left, fade-down-right, fade-down-left
 */
[data-animate-in^=fade][data-animate-in^=fade] {
  opacity: 0;
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, transform 1s ease;
  transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease;
}
[data-animate-in^=fade][data-animate-in^=fade].in-view {
  opacity: 1 !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}

[data-animate-in=fade-up] {
  -webkit-transform: translate3d(0, var(--YKQK-offset), 0);
          transform: translate3d(0, var(--YKQK-offset), 0);
}

[data-animate-in=fade-down] {
  -webkit-transform: translate3d(0, calc(var(--YKQK-offset) * -1), 0);
          transform: translate3d(0, calc(var(--YKQK-offset) * -1), 0);
}

[data-animate-in=fade-right] {
  -webkit-transform: translate3d(calc(var(--YKQK-offset) * -1), 0, 0);
          transform: translate3d(calc(var(--YKQK-offset) * -1), 0, 0);
}

[data-animate-in=fade-left] {
  -webkit-transform: translate3d(var(--YKQK-offset), 0, 0);
          transform: translate3d(var(--YKQK-offset), 0, 0);
}

[data-animate-in=fade-up-right] {
  -webkit-transform: translate3d(calc(var(--YKQK-offset) * -1), var(--YKQK-offset), 0);
          transform: translate3d(calc(var(--YKQK-offset) * -1), var(--YKQK-offset), 0);
}

[data-animate-in=fade-up-left] {
  -webkit-transform: translate3d(var(--YKQK-offset), var(--YKQK-offset), 0);
          transform: translate3d(var(--YKQK-offset), var(--YKQK-offset), 0);
}

[data-animate-in=fade-down-right] {
  -webkit-transform: translate3d(calc(var(--YKQK-offset) * -1), calc(var(--YKQK-offset) * -1), 0);
          transform: translate3d(calc(var(--YKQK-offset) * -1), calc(var(--YKQK-offset) * -1), 0);
}

[data-animate-in=fade-down-left] {
  -webkit-transform: translate3d(var(--YKQK-offset), calc(var(--YKQK-offset) * -1), 0);
          transform: translate3d(var(--YKQK-offset), calc(var(--YKQK-offset) * -1), 0);
}

/**
 * Zoom animations:
 * zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right
 * zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
 */
[data-animate-in^=zoom][data-animate-in^=zoom] {
  opacity: 0;
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, transform 1s ease;
  transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease;
}
[data-animate-in^=zoom][data-animate-in^=zoom].in-view {
  opacity: 1 !important;
  -webkit-transform: translate3d(0, 0, 0) scale(1) !important;
          transform: translate3d(0, 0, 0) scale(1) !important;
}

[data-animate-in=zoom-in] {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
}

[data-animate-in=zoom-in-up] {
  -webkit-transform: translate3d(0, var(--YKQK-offset), 0) scale(0.6);
          transform: translate3d(0, var(--YKQK-offset), 0) scale(0.6);
}

[data-animate-in=zoom-in-down] {
  -webkit-transform: translate3d(0, calc(var(--YKQK-offset) * -1), 0) scale(0.6);
          transform: translate3d(0, calc(var(--YKQK-offset) * -1), 0) scale(0.6);
}

[data-animate-in=zoom-in-right] {
  -webkit-transform: translate3d(calc(var(--YKQK-offset) * -1), 0, 0) scale(0.6);
          transform: translate3d(calc(var(--YKQK-offset) * -1), 0, 0) scale(0.6);
}

[data-animate-in=zoom-in-left] {
  -webkit-transform: translate3d(var(--YKQK-offset), 0, 0) scale(0.6);
          transform: translate3d(var(--YKQK-offset), 0, 0) scale(0.6);
}

[data-animate-in=zoom-out] {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}

[data-animate-in=zoom-out-up] {
  -webkit-transform: translate3d(0, var(--YKQK-offset), 0) scale(1.2);
          transform: translate3d(0, var(--YKQK-offset), 0) scale(1.2);
}

[data-animate-in=zoom-out-down] {
  -webkit-transform: translate3d(0, calc(var(--YKQK-offset) * -1), 0) scale(1.2);
          transform: translate3d(0, calc(var(--YKQK-offset) * -1), 0) scale(1.2);
}

[data-animate-in=zoom-out-right] {
  -webkit-transform: translate3d(calc(var(--YKQK-offset) * -1), 0, 0) scale(1.2);
          transform: translate3d(calc(var(--YKQK-offset) * -1), 0, 0) scale(1.2);
}

[data-animate-in=zoom-out-left] {
  -webkit-transform: translate3d(var(--YKQK-offset), 0, 0) scale(1.2);
          transform: translate3d(var(--YKQK-offset), 0, 0) scale(1.2);
}

/**
 * Slide animations
 */
[data-animate-in^=slide][data-animate-in^=slide] {
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
[data-animate-in^=slide][data-animate-in^=slide].in-view {
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}

[data-animate-in=slide-up] {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}

[data-animate-in=slide-down] {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}

[data-animate-in=slide-right] {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

[data-animate-in=slide-left] {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

/**
 * Flip animations:
 * flip-left, flip-right, flip-up, flip-down
 */
[data-animate-in^=flip][data-animate-in^=flip] {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

[data-animate-in=flip-left] {
  -webkit-transform: perspective(2500px) rotateY(-100deg);
          transform: perspective(2500px) rotateY(-100deg);
}
[data-animate-in=flip-left].in-view {
  -webkit-transform: perspective(2500px) rotateY(0) !important;
          transform: perspective(2500px) rotateY(0) !important;
}

[data-animate-in=flip-right] {
  -webkit-transform: perspective(2500px) rotateY(100deg);
          transform: perspective(2500px) rotateY(100deg);
}
[data-animate-in=flip-right].in-view {
  -webkit-transform: perspective(2500px) rotateY(0) !important;
          transform: perspective(2500px) rotateY(0) !important;
}

[data-animate-in=flip-up] {
  -webkit-transform: perspective(2500px) rotateX(-100deg);
          transform: perspective(2500px) rotateX(-100deg);
}
[data-animate-in=flip-up].in-view {
  -webkit-transform: perspective(2500px) rotateX(0) !important;
          transform: perspective(2500px) rotateX(0) !important;
}

[data-animate-in=flip-down] {
  -webkit-transform: perspective(2500px) rotateX(100deg);
          transform: perspective(2500px) rotateX(100deg);
}
[data-animate-in=flip-down].in-view {
  -webkit-transform: perspective(2500px) rotateX(0) !important;
          transform: perspective(2500px) rotateX(0) !important;
}