/* NTS Member Project page — Posts template gallery/lightbox/slider styles (copied 2026-09-26). */

/* Lightbox */
.lg-toolbar{ height: 0; }
.lg-content{
	width: calc(100vw - 360px);
  height: 100%;
}
.lg-components{
	position: fixed;
	left: auto;
	right: 0;
	top: 0;
	width: 360px;
	height: 100%;
	background: white;
  padding: 24px;
  text-align: left;
  color: var(--charcoal);
  font-family: var(--body);
}
.lg-sub-html{
	text-align: left;
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.4em;
  font-weight: normal;
  padding: 0;
}
.lg-sub-html a{
	text-decoration: underline;
}
.lg-close{
	position: absolute;
  right: 360px;
}
.lg-next, .lg-prev{
	height: 48px;
  width: 48px;
	border-radius: 50%;
  color: white;
}
.gallery-post-title{
	font-family: var(--headlines);
  font-weight: 450;
  font-size: 24px;
  line-height: 1.2em;
  font-variation-settings: "opsz"48;
  margin-bottom: 12px;
}
.lg-counter{
	color: var(--charcoal);
  padding: 0;
  font-size: 14px;
  height: auto;
  display: block;
  margin-bottom: 24px;
}
.lg-components{
	-webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
@media all and (max-width: 767px){
	.lg-content{
  	width: 100%;
  }
  .lg-counter{
  	margin-bottom: 12px;
    font-size: 12px;
  }
  .lg-components{
  	width: 100%;
    height: auto;
    top: auto;
    transform: translateY(100%) !important;;
  }
  .caption-toggle-button{
		position: absolute;
		top: 0;
    left: 24px;
		transform: translateY(-100%);
		background: white;
		font-size: 12px;
    color: var(--charcoal);
    border-radius: 4px 4px 0px 0px;
    padding: 2px 9px;
    display: block;
    cursor: pointer;
	}
  .caption-toggle-button:after{
		content: 'Show Caption';
    display: block;
	}
  .lg-components.open{
		transform: translateY(0%) !important;
	}
  .lg-components.open .caption-toggle-button:after{
		content: 'Hide Caption';
	}
}


.main-gallery-rich-text:before, .main-gallery-rich-text:after{ display: none; }
.main-gallery-rich-text{
	display: grid !important;
}
.main-gallery-rich-text > *:not(figure:not(.w-richtext-align-fullwidth)){
	grid-column: 1 / -1; /* display as 100% width */
  max-width: 864px;
  width: 100%;
}
.figure-orphan{
	grid-column: 1 / -1; /* display as 100% width */
}
.figure-orphan > figure:not(.w-richtext-aliign-fullwidth){
	max-width: 864px;
}
.figure-orphan > figure:not(.w-richtext-aliign-fullwidth).aspect-portrait{
	max-width: 504px;
}
.main-gallery-rich-text > figure.w-richtext-align-fullwidth.aspect-landscape{
	max-width: 1044px;
}
.main-gallery-rich-text > figure:not(.w-richtext-align-fullwidth){
	width: 100%;
	max-width: 864px;
}
.main-gallery-rich-text > figure.aspect-portrait{
	max-width: 504px;
}
.main-gallery-rich-text > .w-richtext-align-fullwidth.aspect-portrait{
	max-width: 543px;
}
.main-gallery-rich-text p + p{
  margin-top: 1.4em;
}
.main-gallery-rich-text h4:first-child, .main-gallery-rich-text figure.w-richtext-align-fullwidth:first-child{
	margin-top: 0;
}
.main-gallery-rich-text h4{
	margin-bottom: 1em;
  margin-top: 2.5em;
}
.main-gallery-rich-text figure{
	margin: 72px 0;
}
.main-gallery-rich-text blockquote{
	margin-top: 72px;
}
p.before-figure,blockquote.before-figure{ margin-bottom: 72px; }
p.after-figure{ margin-top: 72px; }
h6.after-blockquote, blockquote.before-p{ margin-bottom: 144px; }
.main-gallery-rich-text > p + ul, .main-gallery-rich-text > ul + p{ margin-top: 1.4em; }
.main-gallery-rich-text > p + video{ margin-top: 72px; }
.main-gallery-rich-text h6 a{ font-weight: bold; text-decoration: none; }
/* Tablet */
@media all and (max-width: 991px){
	.main-gallery-rich-text figure{
		margin: 48px 0;
	}
  .main-gallery-rich-text blockquote{ margin-top: 48px; }
  p.before-figure{
  	margin-bottom: 48px;
  }
  p.after-figure{ margin-top: 48px; }
  h6.after-blockquote, blockquote.before-p{ margin-bottom: 72px; }
  .main-gallery-rich-text > p + video{ margin-top: 48px; }
}
/* Mobile */
@media all and (max-width: 767px){
	.main-gallery-rich-text figure{
		margin: 24px 0;
	}
  .main-gallery-rich-text blockquote{ margin-top: 24px; }
  p.before-figure{
  	margin-bottom: 24px;
  }
  p.after-figure{ margin-top: 24px; }
  .main-gallery-rich-text > p + video{ margin-top: 24px; }
}
/* Image Aspect Ratios */
.aspect-square img{ aspect-ratio: 1/1; height: auto; }
.aspect-landscape img{ aspect-ratio: 3/2; height: auto; }
.aspect-portrait img{ aspect-ratio: 2/3; height: auto; }
.main-gallery-rich-text img { cursor: pointer }
/* Solo and orphan figure centring */
.figure-solo {
  grid-column: 1 / -1;
  max-width: 504px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.figure-orphan {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  max-width: 504px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}



.fade-in {
    opacity: 1 !important; /* Fully visible */
}


.before-after-slider{-webkit-user-select:none;user-select:none}
#after-image {
  display:block
}

#before-image {
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  left:0;
  overflow:hidden;
  z-index:2;
}

/* The .before-image *class* (on the <img> itself) carries a global
   max-width:100% from the site's default image styling. That clamps the
   image's rendered width to match its wrapper's current (drag-controlled)
   width, so instead of staying full-size and being masked by the wrapper's
   overflow:hidden, the image visibly scales up/down in sync with the drag
   — the "scales in from the top-left as you swipe" bug. Scoped to this
   wrapper only so the shared .before-image class isn't changed elsewhere. */
#before-image img {
  max-width: none;
}

/* #after-image sits in normal document flow (unlike the absolutely
   positioned #before-image), so it's what determines this slider's
   rendered height. Its <img> has no width/height HTML attributes, only a
   stale `sizes` hint (baked in from whatever narrow layout width Webflow's
   responsive-image generator saw at build time) — with nothing else
   constraining it, browsers use that `sizes` value as the image's default
   render width, collapsing it to ~45px. That collapsed the whole slider
   (overflow:hidden) down to a sliver, hiding both photos entirely. Forcing
   full width here, matching the JS-driven width on the before image, is
   what actually gives the slider its correct height. */
#after-image img {
  width: 100%;
  max-width: none;
}

#resizer {
  position:absolute;
  display:flex;
  align-items:center;
  z-index:5;
  top:0;
  left:50%;
  height:100%;
  width:2px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 15%, white 85%, rgba(255, 255, 255, 0) 100%);
  border-radius: 4px;
  /*Stop vertical scrolling on touch*/
  -ms-touch-action: pan-y;
    touch-action: pan-y;
}

#resizer:after {
  background: white url('data:image/svg+xml;utf8,<svg width="36" height="12" viewBox="0 0 36 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.9281 5.35688C35.4136 5.64819 35.4136 6.35182 34.9281 6.64312L27.1359 11.3185C26.636 11.6184 26 11.2583 26 10.6754V1.32464C26 0.741674 26.636 0.381589 27.1359 0.681525L34.9281 5.35688Z" fill="%232B2B2B"/><path d="M1.07187 5.35688C0.586365 5.64819 0.586364 6.35182 1.07187 6.64312L8.86413 11.3185C9.36402 11.6184 10 11.2583 10 10.6754L10 1.32464C10 0.741674 9.36402 0.381589 8.86413 0.681525L1.07187 5.35688Z" fill="%232B2B2B"/></svg>') center center no-repeat;  display:flex;
  content: '';
	justify-content:center;
  align-items:center;
  color:white;
  position:absolute;
  margin: 0 0 0 -23px;
  width:48px;
  height:48px;
  border-radius:50%;
  cursor: pointer;
}
@media all and (max-width: 767px){
	#resizer:after{
		transform: scale(0.75);
    background-position: center 18px;
	}
}