/* ANIMATION START */
@keyframes fadeInUp {
    from {
        transform: translate3d(0,50px,0)
    }
  
    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
  }
  
  @-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,50px,0)
    }
  
    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
  }
  
  .animated {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-fill-mode: both
  }
  
  .animatedFadeInUp {
    opacity: 0
  }
  
  .fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
  }
  
  
  
  /* TASK ANIMATION */
  
  @keyframes inLeft {
      0% {
          transform: translateX(-100vmin);
      opacity: 0;
      }
      50% {
      opacity: 0;
      }
      
      100% {
          transform: translateX(0);
      opacity: 1;
      }
  }
  
  .left {
    /* font-weight: 700;
    font-size: 0.9em; */
    grid-column: 1;
    animation: inLeft;
    animation-duration: 0.8s;
  }
  
  /* IMG FADEIN */
  .fade-in {
    animation: fadeIn ease 0.8s;
    -webkit-animation: fadeIn ease 0.8s;
    -moz-animation: fadeIn ease 0.8s;
    -o-animation: fadeIn ease 0.8s;
    -ms-animation: fadeIn ease 0.8s;
  }
  @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;}
  }
  
  
  /* ANIMATION START fadeInUp_scroll_down  */
  @keyframes fadeInUp_scroll_down {
    0% {
        transform: translate3d(0,300px,0);
        opacity: 0;
    }
        30% {
      opacity: 0;
      }
        40% {
      opacity: 1;
      }
  
    100% {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
  }
  
  @-webkit-keyframes fadeInUp_scroll_down {
    0% {
        transform: translate3d(0,300px,0);
        opacity: 0;
    }
        30% {
      opacity: 0;
      }
        40% {
      opacity: 1;
      }
  
    100% {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .animated_scroll_down {
      animation-duration: 1.2s;
      animation-fill-mode: both;
      -webkit-animation-duration: 1.2s;
      -webkit-animation-fill-mode: both
    }
    
    .animatedFadeInUp_scroll_down {
      opacity: 0
    }
    
    .fadeInUp_scroll_down {
      opacity: 0;
      animation-name: fadeInUp_scroll_down;
      -webkit-animation-name: fadeInUp_scroll_down;
      animation-play-state: paused;
      animation-delay: calc(var(--scroll) * -1s);
    }
  }
  
  /* ANIMATION START fadeInleft_scroll_down  */
  @keyframes inUpLeft {
      0% {
          transform: translateX(-50vmin);
      opacity: 0;
      }
      30% {
      opacity: 1;
      transform: translateX(0);
      }
  
      100% {
      opacity: 1;
      }
  }
  
  .Upleft {
    /* font-weight: 700;
    font-size: 0.9em; */
    grid-column: 1;
    animation: inUpLeft;
    animation-duration: 0.8s;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
  }
  
  /* ANIMATION START fadeInUpright_scroll_down  */
  @keyframes inUpRight {
      0% {
          transform: translateX(50vmin);
      opacity: 0;
      }
      30% {
      transform: translateX(0);
      opacity: 1;
      }
  
      100% {
      opacity: 1;
      }
  }
  
  .UpRight {
    /* font-weight: 700;
    font-size: 0.9em; */
    grid-column: 1;
    animation: inUpRight;
    animation-duration: 0.8s;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
  }
  
  /* ANIMATION END */