
    .scrolled_rtl{
      animation-name: right_to_left;
      animation-duration: 3s;
    }
    
    .scrolled_ltr{
      animation-name: left_to_right;
      animation-duration: 3s;
    }
    

    .scrolled_show{
      animation-name: show;
      animation-duration: 3s;
    }

    .scrolled_with_width{
      animation-name: show_with_width;
      animation-duration: 3s;
    }
    
    @keyframes show{
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }

    
      @keyframes left_to_right{
        0%{
          opacity: 0;
          transform: translate3d(-500px, 0, 0); /* ADDED - start x position as -50px */
          cursor: pointer;
          transition: 0.25s all ease-in-out;
        }
        100%{
          opacity: 1;
      transform: translate3d(0, 0, 0);
        }
      }



      @keyframes right_to_left{
        0%{
          opacity: 1;
          transform: translate3d(500px, 0, 0); /* ADDED - start x position as -50px */
          
        }
        100%{
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }


      @keyframes show_with_width{
        0%{
          opacity: 0;
          transform: opacity 500ms;
        }
        100%{
          opacity: 1;
        }
      }