@charset "UTF-8";

/* =========================
   Base
   ========================= */
a img{ border: 0; }
body{ margin: 0; }

/* =========================
   Header / Nav (override any legacy absolute positioning)
   ========================= */
#apDiv1{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 77px !important;
  height: auto !important;
  margin: 22px auto 10px !important;
  transform: none !important;
}
#apDiv1 img{
  display: block !important;
  width: 77px !important;
  height: auto !important;
  margin: 0 auto !important;
}

nav,
#nav2{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: 1000px !important;
  height: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
}

nav{ margin-bottom: 10px !important; }
#nav2{ margin-bottom: 18px !important; }

.redBullet{ color:#f00; }

nav a, #nav2 a{
  color: #000 !important;
  text-decoration: none !important;
}
nav a:visited, #nav2 a:visited{
  color: #000 !important;
}

/* =========================
   Main wrapper
   ========================= */
#main{
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 0 22px !important;
}

/* Instruction bar */
.portfolio-instructions{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.4;

  padding: 14px 16px;
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;

  max-width: 1000px;
  margin: 0 auto 14px;
}

/* =========================
   Desktop layout
   ========================= */
#portfolioLayout{
  width: 100% !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 22px !important;
  align-items: start !important;
}

/* =========================
   Thumbnails (desktop)
   ========================= */
#thumnbnails{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;

  width: 115px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#thumnbnails a{
  display: block !important;
  width: 115px !important;

  border: 1px solid #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;

  background: transparent !important;
  cursor: pointer !important;
  transition: border-color .2s ease, transform .12s ease, box-shadow .2s ease !important;
}

#thumnbnails a:hover{
  border-color:#f00 !important;
  transform: translateY(-1px) !important;
}

#thumnbnails a.selected{
  border-color:#cf3 !important;
  box-shadow: 0 0 0 2px rgba(204,255,51,.35) !important;
}

/* Square thumbs (cropped) */
#thumnbnails img{
  width: 115px !important;
  height: 115px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Placeholder thumb boxes */
#thumnbnails a.thumb-placeholder{
  height: 115px !important;
  background: rgba(0,0,0,.04) !important;
}

/* =========================
   Before/After container
   ========================= */
#b4aft{ min-width: 0 !important; }

/* Twentytwenty should clip and fill the column */
.twentytwenty-container{
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  overflow: hidden !important;

  /* small breathing room so handle isn't tight to edge */
  margin-right: 8px !important;
  box-sizing: border-box !important;

  transition: opacity .35s ease-in-out;
}
.twentytwenty-container.is-fading{ opacity: .35; }

/* Ensure images behave */
.twentytwenty-container img{
  display: block !important;
}

/* =========================
   DESKTOP (>=901px)
   - single red divider line
   - red arrows
   - no oval handle border
   ========================= */
@media (min-width: 901px){

  /* Invisible draggable handle */
  .twentytwenty-handle{
    width: 44px !important;
    margin-left: -22px !important;

    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    margin-top: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    z-index: 40 !important;
    cursor: ew-resize !important;
  }

  /* ONE divider line (kill the second line) */
  .twentytwenty-horizontal .twentytwenty-handle:before{
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 3px !important;

    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    margin: 0 !important;

    background: #f00 !important;
    box-shadow: none !important;
  }
  .twentytwenty-horizontal .twentytwenty-handle:after{
    display: none !important;
    content: none !important;
  }

  /* Red arrows ON */
  .twentytwenty-left-arrow,
  .twentytwenty-right-arrow{
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 45 !important;
  }
  .twentytwenty-left-arrow{
    left: 50% !important;
    margin-left: -16px !important;
    border-right-color: #f00 !important;
  }
  .twentytwenty-right-arrow{
    right: 50% !important;
    margin-right: -16px !important;
    border-left-color: #f00 !important;
  }
}

/* =========================
   MOBILE (<=900px)
   - stack layout
   - thumbnails as 4-up grid
   - prevent skinny-strip (force height)
   - clean single red line (no arrows)
   ========================= */
@media (max-width: 900px){

  #portfolioLayout{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* thumb grid */
  #thumnbnails{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }

  #thumnbnails a{
    width: 100% !important;
  }

  #thumnbnails img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  .twentytwenty-container{
    margin-right: 0 !important;
    height: 52vh !important;
    min-height: 340px !important;
    max-height: 520px !important;
    border-radius: 14px !important;
  }

  /* override twentytwenty.css max-width:130% on mobile */
  .twentytwenty-container img{
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Touch-friendly handle, single line */
  .twentytwenty-handle{
    width: 44px !important;
    margin-left: -22px !important;

    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    margin-top: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    z-index: 40 !important;
  }

  /* Draw single red line that moves with handle */
  .twentytwenty-handle::before{
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 3px !important;
    transform: translateX(-50%) !important;
    background: #f00 !important;
  }

  /* Keep it clean */
  .twentytwenty-left-arrow,
  .twentytwenty-right-arrow{ display: none !important; }

  /* Labels shouldn't intercept dragging */
  .twentytwenty-before-label,
  .twentytwenty-after-label{ pointer-events: none !important; }
}
/* =========================================================
   MOBILE: restore the red divider line (override content:none)
   Paste at VERY END of portfolio.css
   ========================================================= */
@media (max-width: 900px){

  /* Draw the line on the SAME pseudo-element the plugin uses */
  .twentytwenty-horizontal .twentytwenty-handle:before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 3px !important;
    top: 0 !important;
    bottom: 0 !important;
    background: #f00 !important;
    box-shadow: none !important;
  }

  /* Ensure there’s only one line */
  .twentytwenty-horizontal .twentytwenty-handle:after{
    content: none !important;
    display: none !important;
  }
@media (max-width: 900px){

  .twentytwenty-horizontal .twentytwenty-handle:before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 3px !important;
    top: 0 !important;
    bottom: 0 !important;
    background: #f00 !important;
    box-shadow: none !important;
  }

  .twentytwenty-horizontal .twentytwenty-handle:after{
    content: none !important;
    display: none !important;
  }
}

}