.overlay {
       display: none;
       position: fixed;
       inset: 0;
       overflow-y: auto;
   }

   .overlay.active {
       display: block;
   }

   .grid.hidden {
       display: none;
   }


   .close-overlay {
       margin: 10px;
       /* position: fixed;
        z-index: 92401289492; */
       cursor: pointer;
       width: fit-content;
   }




   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */



   .overlay-km {
       top: 0;
       left: 0;
       width: 100vw;
       min-height: 100vh;
       /* background: black; */
       z-index: 1000;
   }

   .overlay-inside {
       padding: 10px;

   }

   .overlay-img-km {
       height: 100vh;
       width: 100vw;
       position: absolute;
       /* filter: blur(1vh); */
       animation: blur 17s linear infinite;
   }

   /* animation: kill 0.1s linear infinite; */

   @keyframes blur {
       0% {
           filter: blur(2vh);
       }

       50% {
           filter: blur(1vh);
       }

       100% {
           filter: blur(2vh);
       }
   }

   @keyframes hue {
       0% {
           filter: hue-rotate(0deg);
       }

       50% {
           filter: hue-rotate(360deg);
       }

       100% {
           filter: hue-rotate(0deg);
       }
   }

   @keyframes kill {
       0% {
           filter: invert(1);
       }

       49% {
           filter: invert(1);
       }

       50% {
           filter: invert(0);
       }

       100% {
           filter: invert(0);
       }
   }

   .hue {
       animation: hue 17s linear infinite;
   }

   .imgkm-container {
       position: absolute;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100vw;
       height: calc(100vh - 38px);
       z-index: -1;
       margin-top: -38px;
   }


   .overlay-img-km2 {
       max-width: 80%;
       /* width: 100%;
     max-width: 600px; */
       max-height: 70vh;
       opacity: 1;
       /* box-shadow: 0px 0px 450px 150px rgb(9, 255, 0); */
       box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.726);
   }



   .img-border {
       border: 1px solid rgb(207, 207, 207);
   }





   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */

   .overlay-site {
       background-color: black;
       min-height: 100vh;
   }

   .overlay-site-ap {
       min-height: 100vh;
   }

   .overlay-aa {
       width: 100%;
   }

   .overlay-img-fit {
       width: 100%;
       margin-bottom: 6px;
   }





   .overlay-ap {
       display: flex;
       justify-content: center;
       align-items: center;
       height: calc(100vh - 76px);
   }

   .gid-overlay-ap {
       display: flex;
       gap: 10px;
       width: calc(100% - 60px);
       justify-content: center;
       align-items: center;
       font-size: 0;
   }

   .gid-overlay-ap img {
       max-width: 25%;
       border: 1px solid rgb(170, 170, 170);
       object-fit: contain;
       height: 100%;
   }

   .gid-overlay-rr {
       display: flex;
       gap: 10px;
       width: calc(100% - 15px);
       justify-content: center;
       align-items: center;
       font-size: 0;
       height: auto;
       height: 85%;
       /* max-height: 85%; */
   }

   .gid-overlay-rr img {
       max-width: 33%;
       object-fit: contain;
       height: 100%;
   }

   .overlay-col {
       font-size: 0;
       width: 25%;
       max-width: calc(100% - 16px);
   }

   .overlay-col-ap {
       font-size: 0;
       width: 50%;
   }












   .gid-overlay-text {
       display: flex;
       /* grid-template-columns: repeat(3, 1fr); */
       gap: 10px;
       max-width: calc(100vw - 20px);
       padding: 0px 10px 0px 10px;

   }

   .gid-overlay {
       display: flex;
       /* grid-template-columns: repeat(3, 1fr); */
       gap: 10px;
       max-width: calc(100vw - 20px);
       padding: 10px 10px 0px 10px;
   }



   .overlay-text-aa {
       font-family: helvetica, arial;
       color: white;
       font-weight: 700;
       font-size: 11px;
       /* line-height: 40px; */
       padding-bottom: 10px;
   }

   .overlay-text-aa-var {
       font-family: helvetica, arial;
       color: white;
       font-weight: 700;
       font-size: 11px;
       /* line-height: 40px; */
       padding-bottom: 10px;
   }


   .give-me-an-outline {
       border: 1px solid rgb(179, 179, 179);
   }



   /* --------------------------------------- */
   /* --------------------------------------- */
   /* --------------------------------------- */



   @media screen and (max-width: 1100px) {

       .overlay-text-aa,
       .overlay-text-aa-var,
       .gid-overlay-text {
           display: none;
       }

       .overlay-img-fit {
           margin-bottom: 10px;
       }

       .gid-overlay {
           display: block;
       }

       .overlay {
           width: 100%;
       }

       .overlay-col {
           max-width: 600px;
           width: 100%;
       }

       .overlay-site {
           height: 100%;
       }

       .gid-overlay-ap,
       .overlay-ap,
       .gid-overlay-rr {
           display: block;
           height: auto;
       }

       .gid-overlay-ap img {
           max-width: 100%;
           height: auto;
           width: calc(100% - 2px);
           margin-bottom: 10px;
       }

       .gid-overlay-rr img {
           height: auto;
           /* margin-bottom: 10px; */
       }

       .gid-overlay-ap {
           width: calc(100% - 22px);
           padding: 20px 0px 0px 10px;
       }

       .gid-overlay-rr {
           width: calc(100% - 22px);
           padding: 20px 0px 0px 10px;
           display: grid;
           margin-bottom: 10px;
           justify-content: left;
       }

       .gid-overlay-rr img {
           max-width: 100%;
           max-height: calc(100vh - 20px);
       }

       .imgkm-container {
           height: calc(100vh - 0px);
       }

   }