/* LiteCMS v2.42: Before/After comparisons on both standalone pages and popups. */
.media-frame.media-frame-compare {
  display:block; width:100%; height:auto; aspect-ratio:auto;
  overflow:visible; padding:0; border:0; box-shadow:none;
  background:transparent; cursor:default;
}
.media-frame-compare .media-compare-visual {
  --compare-value:50%;
  position:relative; width:100%; height:auto; aspect-ratio:4 / 3;
  overflow:hidden; isolation:isolate; background:#e9e7e2;
  user-select:none; -webkit-user-select:none; cursor:ew-resize;
  touch-action:none;
}
.media-frame-compare .media-compare-visual > img,
.focused-project .media-frame-compare .media-compare-visual > img {
  position:absolute; inset:0; display:block;
  width:100%; height:100%; max-width:none;
  object-fit:contain; background:transparent;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
  transform:none!important; transition:none!important;
}
.media-frame-compare .media-compare-before-image {z-index:1;opacity:1;}
.media-frame-compare .media-compare-after-image {
  z-index:2; opacity:1!important;
  clip-path:inset(0 0 0 var(--compare-value));
  -webkit-clip-path:inset(0 0 0 var(--compare-value));
}
.media-frame-compare .media-compare-divider {
  position:absolute; z-index:4; top:0; bottom:0;
  left:var(--compare-value); width:2px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 0 10px rgba(0,0,0,.22);
  transform:translateX(-50%); pointer-events:none;
}
.media-frame-compare .media-compare-handle {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:42px; height:42px;
  border:2px solid white; border-radius:50%; background:rgba(35,38,40,.73);
  color:#fff; font:700 15px/1 Arial,sans-serif; white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.26);
}
.media-frame-compare .media-compare-label {
  position:absolute; z-index:3; top:14px; padding:6px 10px;
  border-radius:3px; background:rgba(30,33,35,.64); color:#fff;
  font:650 12px/1.2 Inter,Arial,sans-serif; pointer-events:none;
}
.media-frame-compare .media-compare-label-before {left:14px;}
.media-frame-compare .media-compare-label-after {right:14px;}
.media-frame-compare .media-compare-drag-range {
  position:absolute; inset:0; z-index:5; display:block;
  width:100%; height:100%; min-height:0; padding:0; margin:0;
  opacity:0; cursor:ew-resize; touch-action:none;
}
.media-frame-compare .media-compare-visual:focus-within .media-compare-handle {
  outline:3px solid #24668c; outline-offset:3px;
}
.project-media-gallery .media-thumb.media-thumb-compare {position:relative;}
.project-media-gallery .media-thumb.media-thumb-compare::after {
  content:'BEFORE / AFTER'; position:absolute; bottom:3px; left:3px;
  padding:3px 5px; background:rgba(17,27,37,.84); color:white;
  font:700 8px/1.1 Arial,sans-serif; letter-spacing:.02em; pointer-events:none;
}
@media(max-width:520px){
  .media-frame-compare .media-compare-handle {width:36px;height:36px;font-size:13px;}
  .media-frame-compare .media-compare-label {font-size:10px;top:10px;}
}