.ml1 {
      font-weight: 900;
      font-size: 4em;
    }

    .ml1 .letter {
      color: white;
      display: inline-block;
      line-height: 1em;
    }

    .ml1 .text-wrapper {
      position: relative;
      display: inline-block;
      padding-top: 0.1em;
      padding-right: 0.05em;
      padding-bottom: 0.15em;
    }

    .ml1 .line {
      opacity: 0;
      position: absolute;
      left: 0;
      height: 3px;
      width: 100%;
      background-color: #fff;
      transform-origin: 0 0;
    }

    .ml1 .line1 { top: 0; }
    .ml1 .line2 { bottom: 0; }







    .ml11 .letter {
      color: white!important;
      display: inline-block;
      line-height: 1em;
    }
    .ml11 {
      font-weight: 900;
      font-size: 4em;
    }

    .ml11 .text-wrapper {
      position: relative;
      display: inline-block;
      padding-top: 0.1em;
      padding-right: 0.05em;
      padding-bottom: 0.15em;
    }

    .ml11 .line {
      opacity: 0;
      position: absolute;
      left: 0;
      height: 100%;
      width: 3px;
      background-color: #fff;
      transform-origin: 0 50%;
    }

    .ml11 .line1 { 
      top: 0; 
      left: 0;
    }

@media only screen and (max-width:600px) {
  .ml1,.ml11 {
        font-weight:400;
        font-size: 2em;
      }

}