:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
  }

.animated {
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    animation-iteration-count: infinite;
  }
  
  .animated.repeat-1 {
    animation-iteration-count: var(--animate-repeat);
  }
  
  .animated.repeat-2 {
    animation-iteration-count: calc(var(--animate-repeat) * 2);
  }
  
  .animated.repeat-3 {
    animation-iteration-count: calc(var(--animate-repeat) * 3);
  }
  
  .animated.delay-1s {
    animation-delay: var(--animate-delay);
  }
  
  .animated.delay-2s {
    animation-delay: calc(var(--animate-delay) * 2);
  }
  
  .animated.delay-3s {
    animation-delay: calc(var(--animate-delay) * 3);
  }
  
  .animated.delay-4s {
    animation-delay: calc(var(--animate-delay) * 4);
  }
  
  .animated.delay-5s {
    animation-delay: calc(var(--animate-delay) * 5);
  }
  
  .animated.faster {
    animation-duration: calc(var(--animate-duration) / 2);
  }
  
  .animated.fast {
    animation-duration: calc(var(--animate-duration) * 0.8);
  }
  
  .animated.slow {
    animation-duration: calc(var(--animate-duration) * 2);
  }
  
  .animated.slower {
    animation-duration: calc(var(--animate-duration) * 3);
  }
  
  @media print, (prefers-reduced-motion: reduce) {
    .animated {
      animation-duration: 1ms !important;
      transition-duration: 1ms !important;
      animation-iteration-count: 1 !important;
    }
  
    .animated[class*='Out'] {
      opacity: 0;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .animated.fadeIn {
    opacity:0;
    
  }
  .onScreen.fadeIn, .editor-styles-wrapper .fadeIn {
    animation-name: fadeIn;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .onScreen.fadeInDown, .editor-styles-wrapper .fadeInDown {
    animation-name: fadeInDown;
  }

  @keyframes fadeInDownBig {
    from {
      opacity: 0;
      transform: translate3d(0, -2000px, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .onScreen.fadeInDownBig, .editor-styles-wrapper .fadeInDownBig {
    animation-name: fadeInDownBig;
  }

  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .onScreen.fadeInLeft, .editor-styles-wrapper .fadeInLeft {
    animation-name: fadeInLeft;
  }

  @keyframes fadeInLeftBig {
    from {
      opacity: 0;
      transform: translate3d(-2000px, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .onScreen.fadeInLeftBig, .editor-styles-wrapper .fadeInLeftBig {
    animation-name: fadeInLeftBig;
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .onScreen.fadeInRight, .editor-styles-wrapper .fadeInRight {
    animation-name: fadeInRight;
  }

  @keyframes fadeInRightBig {
    from {
      opacity: 0;
      transform: translate3d(2000px, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .onScreen.fadeInRightBig, .editor-styles-wrapper .fadeInRightBig {
    animation-name: fadeInRightBig;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .onScreen.fadeInUp, .editor-styles-wrapper .fadeInUp {
    animation-name: fadeInUp;
  }

  @keyframes fadeInUpBig {
    from {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .onScreen.fadeInUpBig, .editor-styles-wrapper .fadeInUpBig {
    animation-name: fadeInUpBig;
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  .onScreen.fadeOut, .editor-styles-wrapper .fadeOut {
    animation-name: fadeOut;
  }

  @keyframes fadeOutDown {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  }
  
  .onScreen.fadeOutDown, .editor-styles-wrapper .fadeOutDown {
    animation-name: fadeOutDown;
  }

  @keyframes fadeOutDownBig {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }
  }
  
  .onScreen.fadeOutDownBig, .editor-styles-wrapper .fadeOutDownBig {
    animation-name: fadeOutDownBig;
  }

  @keyframes fadeOutLeft {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  .onScreen.fadeOutLeft, .editor-styles-wrapper .fadeOutLeft {
    animation-name: fadeOutLeft;
  }

  @keyframes fadeOutLeftBig {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(-2000px, 0, 0);
    }
  }
  
  .onScreen.fadeOutLeftBig, .editor-styles-wrapper .fadeOutLeftBig {
    animation-name: fadeOutLeftBig;
  }

  @keyframes fadeOutRight {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }
  
  .onScreen.fadeOutRight, .editor-styles-wrapper .fadeOutRight {
    animation-name: fadeOutRight;
  }

  @keyframes fadeOutRightBig {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(2000px, 0, 0);
    }
  }
  
  .onScreen.fadeOutRightBig, .editor-styles-wrapper .fadeOutRightBig {
    animation-name: fadeOutRightBig;
  }

  @keyframes fadeOutUp {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
  }
  
  .onScreen.fadeOutUp, .editor-styles-wrapper .fadeOutUp {
    animation-name: fadeOutUp;
  }

  @keyframes fadeOutUpBig {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      transform: translate3d(0, -2000px, 0);
    }
  }
  
  .onScreen.fadeOutUpBig, .editor-styles-wrapper .fadeOutUpBig {
    animation-name: fadeOutUpBig;
  }

  @keyframes BwToColor {
    from {
      filter:grayscale(1)
    }
  
    to {
      filter:grayscale(0)
    }
  }
  
  .onScreen.BwToColor, .editor-styles-wrapper .BwToColor {
    animation-name: BwToColor;
  }

  @keyframes ColorToBw {
    from {
      filter:grayscale(0)
    }
  
    to {
      filter:grayscale(1)
    }
  }
  
  .onScreen.ColorToBw, .editor-styles-wrapper .ColorToBw {
    animation-name: ColorToBw;
  }