body { background-color: black; }

// Old value var(--highlight)
.lightbox3-chrome { background-color: var(--highlight); }
.lightbox3-image { border: 4px solid #444 !important; }
.lightbox3-counter { color: white !important; }
.lightbox3-caption { color: white !important; font-size: 120% !important; }

/****************************/
/*   GALLERY MASONRY GRID   */
/****************************/
:root {
  --gallery-radius: 8px;
  --gallery-gap: 6px;
  --overlayBorder: 4px;
  --gridColumns: 7;
  --gridRows: calc((100dvw / var(--gridColumns)) * 0.65);
  --aspectGap: calc((var(--gridColumns) - 1) * var(--gallery-gap));
  }
.gallery-heading { position: relative; display: block; width: 100%; padding: 20px 0px 24px; }
.gallery-container {
  display: grid; grid-gap: var(--gallery-gap);
  grid-template-columns: repeat(var(--gridColumns), 1fr);
  grid-auto-rows: var(--gridRows); grid-auto-flow: dense;
  transition: 0.5s ease-in-out;
  }
.content-strip.collection.folders .gallery-container { grid-auto-rows: calc(var(--gridRows) * 1.05); } 

.gallery-container .wide {
  grid-column: span 2;
  }
.gallery-container .tall {
  grid-row: span 2;
  }
.gallery-container .big {
  grid-column: span 2;
  grid-row: span 2;
  }
.gallery-container .gallery-block {
  position: relative; display: flex; justify-content: center; align-items: center;
  border-radius: var(--gallery-radius); overflow: hidden; outline: none;
  }
.gallery-container .gallery-block .gallery-image {
  display: block; width: 100%; height: 100%; object-fit: cover; transition: 1s ease-in-out; transform: scale(1.0); overflow: hidden;
  } 
.gallery-container .gallery-block:hover .gallery-image {
  transform: scale(1.05); transition: 1s ease-in-out;
  }
.gallery-container .gallery-block .imageid {
  position: absolute; display: none; height: auto; padding: 8px 15px 5px 15px; background-color: var(--highlight); color: white; text-align: center;
  font-size: 80%; bottom: 0px; left: 50%; transform: translateX(-50%); line-height: 1.0; font-family: 'Raleway'; white-space: nowrap;
  border-top-right-radius: 6px; border-top-left-radius: 6px; border: 2px solid var(--highlight); z-index: 3; min-width: 200px; max-width: 80%;
  }
.gallery-container .gallery-block .gallery-overlay {
  position: absolute; display: block; width: 100%; height: 100%; box-sizing: border-box; z-index: 5; border: none;
  }
.gallery-container .gallery-block:hover .imageid { display: block; }
.gallery-container .gallery-block:hover .gallery-overlay { border: var(--overlayBorder) solid var(--highlight); border-radius: calc(var(--gallery-radius) - var(--overlayBorder) + 2px); }
.gallery-container .gallery-block .icon-padlock { position: absolute; display: block; width: 25px; height: 30px; top: 10px; left: 10px; z-index: 99; opacity: 0.7 !important; }

.gallery-lightbox { position: relative; display: block; width: 100%; height: 100%; z-index: 2; aspect-ratio: 3/2; }
.gallery-download { position: absolute; display: none; width: 38px; height: 35px; z-index: 3; background-color: var(--highlight); top: 0px; left: 0px; text-align: center; border-bottom-right-radius: 6px; background-image: url('download.png'); background-position: center; background-size: 52%; background-repeat: no-repeat; color: white; fill: #fff !important; }
.gallery-download:active { background-size: 45%; }
.gallery-block:hover .gallery-download { display: block; }

/* POP UP CAPTION SETTINGS */
.popup-caption.gallery { width: 100%; bottom: 0px; left: 0px; padding: 9px 10px 7px; border-radius: 0px; background-color: #00000090; transition: unset; text-wrap: balance; }
/* .popup-caption.gallery { width: calc(100% - 6px); bottom: 3px; left: 3px; padding: 16px 10px 16px; border-radius: calc(var(--borderRadius) - 2px); background-color: #00000090; } */
.gallery-container .gallery-block:hover .popup-caption.gallery { background-color: var(--highlight); }
.popup-caption.gallery .caption-heading {
  letter-spacing: 0.00; text-transform: uppercase;
  font-family: 'Raleway'; font-weight: 600; 
  font-size: clamp(0.75rem, 1.0vw, 0.95rem);
  }

/* ZOOM BUTTONS */
.zoom { background-position: center; background-size: 20px; background-repeat: no-repeat; width: 60px; padding-left: 0px !important; padding-right: 0px !important; user-select: none !important; }
.zoom.minus { background-image: url('zoomminus.png'); }
.zoom.plus { background-image: url('zoomplus.png'); background-position: calc(50% - 3px) center; width: 63px; }
.zoom:active { background-size: 18px; }

/* PASSWORD UNLOCK PAGE */
.content-container.unlock { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 20px var(--gapX) 25px !important; gap: 0px; }
.searchsubmit.pw { color: white !important; text-decoration: none; font-weight: 600; font-size: 1.06rem; letter-spacing: -0.01rem; text-align: center; padding-top: 4px; padding-left: 5px; width: 135px; }
.pwinput {
position: relative; display: block; padding: 0px 15px; height: 40px; box-sizing: border-box;
font-family: var(--fontBody); font-size: 16px; font-weight: 400; color: black; border: 0px; max-width: 350px; width: 50%;
border-radius: 20px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;
outline: 0 !important; background-color: #ffffff80; transition: 0.25s ease-in-out;
}

/* MISC SETTINGS */
.content-strip.dummy { padding: 0px; margin: 0px; }
.content-strip.collection { padding: 38px 20px !important; }
.content-strip.galleryfilters { padding: 38px 0px 36px !important; }
.content-strip.galleryfilters h4.crosshead { font-size: 1.5rem; }
.content-strip.galleryfilters .content-container.thin { padding: 0px 10px; }

.filter-container.library { padding: 14px 20px !important; display: flex !important; }
.filter-container.galleries { padding: 15px 0px 0px !important; }

// Previous Gallery Button...
.content-strip.previous { padding: 30px 0px; background-color: #282828; }
.content-strip.previous .button { margin-top: 0px; }

.content-strip.pagestrap.library { padding: 0px; background-color: #222; }
.content-strip.notes { padding: 35px 0px; background-color: var(--colorStripB); }

// Breadcrumbs
//.content-strip:has(.breadcrumb) { padding: 14px var(--gapX); background-color: #282828; }
.content-strip.bc { padding: 14px var(--gapX); background-color: #282828; }
.breadcrumb { text-align: center; line-height: 1.2; }
.breadcrumb a { color: white; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb.current { color: var(--highlight); font-weight: 700; }

@media only screen and (min-width: 2400px) {
  :root { --overlayBorder: 5px; }--gridColumns:
  }

@media only screen and (max-width: 2400px) {
  :root { --gridColumns: 5; }
  }
@media only screen and (max-width: 1800px) {
  :root { --gridColumns: 4; }
  }
@media only screen and (max-width: 1200px) {
  :root { --gallery-gap: 3px; --gridColumns: 3; }
  .zoom { background-size: 18px; }
  .popup-caption.gallery { padding-bottom: 8px; }
  //.popup-caption.gallery .caption-heading { font-size: 1.3dvw; }
  }
@media only screen and (max-width: 680px) {
  :root { --gridColumns: 2; }
  .popup-caption.gallery { padding: 9px 10px 7px; }
  //.popup-caption.gallery .caption-heading { font-size: 0.75rem; }
  }

@media only screen and (max-width: 600px) {
  .content-strip.galleryfilters { padding: 30px 10px 15px !important; }
  .content-strip.collection { padding: 32px 10px 25px !important; }
  .content-strip.pagestrap.library { font-size: 90%; }
  .content-strip.pagestrap.library .option { padding: 12px 15px; padding-top: 16px; }
  .content-strip.pagestrap.library .option:first-of-type { padding-left: 24px; }
  .content-strip.pagestrap.library .option:last-of-type { padding-right: 24px; }
  }