@charset "utf-8";
.overlay-container {z-index: 2026;}

/*************** OVERLAY BEHAVIOURS ********************/
.scale-up-top {-webkit-animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
.scale-down-top {-webkit-animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
    @-webkit-keyframes scale-up-top {
  0%    {-webkit-transform: scale(0.5);transform: scale(0.5);
         -webkit-transform-origin: 50% 0%;transform-origin: 50% 0%; opacity: 0;}
  100%  {-webkit-transform: scale(1); transform: scale(1);
         -webkit-transform-origin: 50% 0%;transform-origin: 50% 0%; opacity: 1;}}
@keyframes scale-up-top {
  0%    {-webkit-transform: scale(0.5); transform: scale(0.5);
         -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 0;}
  100%  {-webkit-transform: scale(1); transform: scale(1);
         -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 1;}}
@-webkit-keyframes scale-down-top {
  0%    {-webkit-transform: scale(1); transform: scale(1);
         -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 1;}
  100%  {-webkit-transform: scale(0.1); transform: scale(0.1);
         -webkit-transform-origin: 50% 0%;transform-origin: 50% 0%; opacity: 0;}}
@keyframes scale-down-top {
  0%    {-webkit-transform: scale(1); transform: scale(1);
        -webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;opacity: 1;}
  100% {-webkit-transform: scale(0.1); transform: scale(0.1);
        -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 0;}}


.whitespace .over-control {background-color: transparent; color: var(--darkbase); border: none; position: relative; margin: 0 auto; width: 100%;padding: 10px 5px 0 5px;}
.divider .over-control {background-color: transparent; color: var(--darkbase); border: none; position: relative; margin: 0 auto; width: 100%; padding: 10px 5px 10px 5px;}
.js-gallery-text {height:50px;}
.img-fade-out {opacity: 0 !important;}
.ImgDesc{ max-width: 650px; text-align: center; }
.ImgDesc {padding:30px 0 0 0;}

/******************** OVERLAYS ************************/
.overlay-container  {top: 0; left:0; width: 100%; height:100vh; color: var(--light); width: 100vw;
  grid-template-rows: auto 1fr auto; position: fixed; background: var(--darkbasecontrast); overflow-y: hidden;}
.overlay-container .tabtop {display: flex;flex-direction: column; cursor: pointer; align-items: center; justify-content: center; align-self: flex-end; padding: 18px 10px 15px 10px;margin-top: auto;}
.overlay-container .over-control {display: flex;}
.overlay-container .over-top .tap {display: none;}
.overlay-container  .burger-line{width: 100%;  height: 4px;background: var(--light);  border-radius: 2px;}
.overlay-container .tabtop:hover .burger-line{background: var(--darkbase); }
.overlay-container .burger-line:nth-child(1) {transform: translateY(3px) rotate(45deg);}
.overlay-container .burger-line:nth-child(2) {transform: translateY(-5px) rotate(-45deg);}

.over-top, .over-bottom { background-color: var(--darkbase); width: 100vw;}
.over-top {padding-top: 60px;}
.over-top .contain {padding:0px 20px 0 20px;}
.over-top .logo {padding-bottom: 10px; text-align: center;}
.overlaylogo {width:200px; height: auto;}
svg.overlaylogo path {fill:var(--light);}
.over-top .contain, .over-bottom .contain {display: flex; justify-content: space-between; align-items: end; }

.over-mid {position: relative;display: block;width: 100%;height: 100%;  min-height: 300px;overflow: hidden;}
.over-mid img {
    width: 100%;height: 100%;object-fit: cover;display: block;transition: opacity 0.4s ease-in-out;opacity: 1; }
    .over-mid.tall {padding:0 10px;}
.over-mid.tall img {object-fit: contain; margin: 0 auto; max-height: 100%; }


.over-control {display: flex;  align-items: center; justify-content: center; background-color: var(--darkbase); 
border-top-left-radius: 12px;border-top-right-radius: 12px; width: fit-content;position: absolute; bottom:0;left: 50%; transform: translate(-50%, 0);
border:1px solid var(--light); border-bottom: none;}

.over-bottom .contain {display: flex; flex-direction: column; align-items: end; }
.over-bottom {flex-grow: 1; display: flex; flex-direction: column;}
.over-bottom .contain {align-items:flex-end; padding:0px 20px 50px 20px; justify-content: start; }
.over-bottom.simple{border-top: 1px solid var(--light);}
.over-bottom.simple .contain {align-items:flex-end; padding:10px 20px 10px 20px; }
.over-bottom .copyright {margin:15px 0 15px 0; border-top: 1px solid var(--light);}



.over-mid.ai-overview { padding:15px 0;}
.over-mid.ai-overview img{height: auto;}
.over-mid.ai-overview {overflow-y: auto;scroll-behavior: smooth;}
.over-mid .ai-page {background-color: #fff; color: #000; padding:40px 20px 40px 20px; display: grid; grid-template-columns:1fr; grid-template-rows:auto auto; gap:40px;max-width: 90%; margin: 0px auto; }

.ai-overview h3 {margin-bottom: 15px; font-size: 1.3rem; text-decoration: underline;}
.ai-left {padding:0px 0 0 0; display: flex; flex-direction: column; gap:20px; align-items: center;}
.ai-right h1 {margin-bottom: 25px;}
.ai-title{font-weight: 700;}
.ai-thumb {max-width: 200px;}
.ai-disclaimer {padding: 15px 0 90px 0;}
.ai-left {padding:0px 0 0 0; display: flex; flex-direction: column; gap:20px; align-items: center;}
.ai-right h1 {margin-bottom: 25px;}
.ai-title{font-weight: 700;}
.ai-thumb {max-width: 200px;}



@media (min-width: 1024px) and (max-height: 800px) {
 .over-mid.ai-overview { padding:20px 0;}
}


@media (min-width: 900px)
{
    .over-bottom .contain {flex-direction: row;}
    .over-mid .ai-page {padding:70px 70px 70px 70px !important; gap:50px !important;max-width: 900px !important;}

}

@media (min-width: 750px)
{
        .over-mid .ai-page {grid-template-columns: minmax(0, 225px) 1fr; max-width: 90%; }
    .ai-left {padding:70px 0 0 0 !important; gap:30px}
    .over-mid.ai-overview {padding:60px 0;}
    .over-mid.tall {height: 100%;}
}