.container1
     {
      display: flex;
      justify-content:center;
      align-content: center;
      flex-direction: column;
      /* height: 300px; */
      width:100%;
      background: #33333300;
    }
    
    .container1 h1 {
      text-align:left;
      padding-left:50px;
    }
    
    .animation {
      text-align: center;
      text-transform: uppercase;
      font-family: Helvetica, Arial, sans-serif;
      font-size:75px;
      letter-spacing: 1px;
      color: #fff;
      display: inline-block;
      animation: fadeIn 3s forwards;
      opacity: 0;
      transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }
    
    .first {
      display: inline-block;
      animation: firstSpan 3s forwards cubic-bezier(0.785, 0.135, 0.15, 0.86) ;
      background: #fffefe00;
      z-index: 1;
      position: relative;
      font-weight: 600;
    }
    
    .oh {
      display: inline-flex;
      overflow: hidden;
    }
    
    .second {
      animation: secondSpan 3s forwards cubic-bezier(0.785, 0.135, 0.15, 0.86) ;
      font-weight: 100;
      z-index: -1;
      display: inline-block;
    }
    
    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: scale(1);
      } 
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    @keyframes firstSpan {
      0% {
        transform: translateX(50%);
      }
      60% {
        transform: translateX(50%);
      }
      100% {
        transform: translateX(0%);
      }
    }
    
    @keyframes secondSpan {
      0% {
        transform: translateX(-100%);
      }
      60% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(-0%);
      }
    }
    @media screen and (max-width:1700px) and (min-width:1400px){
      .container1 {
        height: 100px;
        
      }
      .container1 h1 {
        text-align:left;

      }
      .animation {
        font-size:65px;
        text-align: left;
        padding:0px 10px 0px 10px;
      }
    }
    @media screen and (max-width:1400px) and (min-width:1200px){
      .container1 {
        height: 80px;
      }
      .container1 h1 {
        text-align:center;
        padding-left:0px;
      }
      .animation {
        font-size:58px;
        padding:0px 10px 0px 20px;
      }
    }
    @media screen and (max-width:1200px) and (min-width:992px){
      .container1 {
        height: 60px;
        
      }
      .container1 h1 {
        text-align:center;
        padding-left:0;
      }
      .animation {
        font-size:60px;
      }
    }
    @media screen and (max-width:992px) and (min-width:768px){
      .container1 {
        height: 80px;
        
      }
      .container1 h1 {
        text-align:center;
        padding-left:0;
      }
      .animation {
        font-size:50px;
      }
    }
    @media screen and (max-width:768px) and (min-width:576px){
      .container1 {
        height: 20px;
      }
      .container1 h1 {
        text-align:center;
        padding-left:0;
      }
      .animation {
        font-size:50px;
      }
    }
    @media screen and (max-width:576px) and (min-width:0px){
      .container1 {
        height: 35px;
      }
      .container1 h1 {
        text-align:center;
        padding-left:0;
      }
      .animation {
        font-size:35px;
      }
    }