.flex {
      display: flex;
      height: 60vh;
      justify-content: center;
      align-items: center;
    }

    .flex-justify-from-left {
      display: flex;
      height: 60vh;
      justify-content: left;
      align-items: center;
    }

    /* Reveal from center height div */
    /* image holder div */

    .hero {
      height: 100%;  /* default 100% you can modify the height in GSAP */
      width: 70%;   /* you can modify the width here */
      position: relative;

    }

    .hero-02 {
      height: 100%;  /* default 100% you can modify the height in GSAP */
      width: 70%;   /* you can modify the width here */
      position: relative;

    }

    /* Reveal from center width div */

    .hero-03 {
      height: 100%;  /* you can modify the height here */
      width: 100%; /* default 100% you can modify the width in GSAP */
      position: relative;
      /* max-width: 500px; */

    }

    .hero-04 {
      height: 100%;  /* you can modify the height here */
      width: 100%;  /* default 100% you can modify the width in GSAP */
      position: relative;

    }

    /* Reveal from center width and height div */

    .hero-05 {
      height: 100%;  /* you can modify the height here */
      width: 100%;  /* default 100% you can modify the width in GSAP */
      position: relative;

    }

    .hero-06 {
      height: 100%; /* you can modify the height here */
      width: 100%; /* default 100% you can modify the width in GSAP */
      position: relative;

    }

    /* Reveal from center height img */
    /* if using overlay set width 100%*/

    .hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    .hero-02 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }


    /* Reveal from center width img */

    .hero-03 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    .hero-04 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    /* Reveal from center width and height img */

    .hero-05 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    .hero-06 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    /* project titles set opacity 0 */

    .project-name-01, .project-name-02  {
      opacity: 0;
    }

    .project-name-03, .project-name-04  {
      opacity: 0;
    }

    .project-name-05, .project-name-06  {
      opacity: 0;
    }

    /* overlay  */

    .overlay-01, .overlay-02, .overlay-03, .overlay-04, .overlay-05, .overlay-06   {
      content: '';
      background: #000;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      opacity:0.4;
      visibility: visible;
      transition: visibility 0s linear 0s, opacity 500ms;
      cursor: pointer;
    }

    /* overlay set visibility hidden */

    .initial-hide {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s linear 500ms, opacity 500ms;
    }