/* greenpowernc.com — staged responsive overlay 2026-11-09
   Load AFTER css/style.css. Desktop (>=981px) unchanged.
   2026-11-12 (William): top banner/hero (#BannerWrap, .slider, slide
   images, .click overlay, .caption) and #BodyWrap background sizing
   are held back so the live banner displays and sizes exactly as it
   does now. Do not add rules that change that area. */

/* Global shrink for content images/video only — banner images exempted below. */
img, iframe, video {
  max-width: 100% !important; height: auto !important;
}
#BannerWrap img,
#BannerWrap .slider img,
#BannerWrap .jquery-slider img,
#BannerWrap img.click,
.slider img,
.jquery-slider img,
img.click {
  max-width: none !important;
  width: unset !important;
  height: unset !important;
}

.gsn-video-facade {
  position: relative; display: block; width: 100%; max-width: 425px;
  cursor: pointer; background: #000; aspect-ratio: 16 / 10;
}
.gsn-video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsn-video-facade .gsn-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 68px; height: 48px; border-radius: 14px; background: rgba(255,0,0,0.85);
  color: #fff; font: bold 20px/48px Arial, sans-serif; text-align: center;
  pointer-events: none;
}
.gsn-video-facade iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
.video { max-width: 100%; }

@media screen and (max-width: 980px) {
  html, body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* overflow-x hidden would clip the unchanged 960px banner; leave visible. */
  }
  /* Banner/hero (#BannerWrap, .slider, .jquery-slider, .caption, .click)
     deliberately omitted so live banner CSS continues to apply. */
  #header_wrap, .HeaderWrap, #nav, #BodyWrap, #Body,
  #RightCol, .LeftCol, #FooterWrap, .Footer, .Shado, #ServiceWrapHome,
  .Service, #OurTeam, .PageTitle, .PageTitle2,
  .peopleWork, .boxField, .Box01, .Gallery, .seting {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  .HeaderWrap .Logo, img.Logo {
    position: static !important;
    max-width: 140px !important;
    height: auto !important;
    margin: 0 auto 8px !important;
    display: block !important;
    float: none !important;
  }
  .HeaderWrap p {
    float: none !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 8px 8px !important;
  }
  #nav {
    height: auto !important;
    background: #0a3d73 !important;
    background-image: none !important;
    padding: 6px 0 10px !important;
  }
  #nav ul {
    float: none !important; display: block !important; width: 100% !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
  }
  #nav li, #nav li.RightTab {
    float: none !important; display: block !important;
    width: auto !important; height: auto !important;
  }
  #nav li a, #nav li.RightTab a,
  #nav li a.select, #nav li.RightTab a.select2,
  #nav li a:hover, #nav li.RightTab a:hover {
    display: block !important; width: auto !important; height: auto !important;
    background: #0a5aa8 !important; background-image: none !important;
    margin: 4px 12px !important; padding: 12px 10px !important;
    text-align: center !important; border-radius: 6px;
    line-height: 1.2 !important; float: none !important;
  }
  /* #BodyWrap background-size/position held back (was cover / center top). */
  .LeftCol, #RightCol { width: 100% !important; padding: 0 8px !important; }
  .video, .gsn-video-facade { width: 100% !important; max-width: 100% !important; }
  img[width] { width: 100% !important; height: auto !important; }
  /* Keep live banner image/overlay dimensions (overrides img[width] above). */
  #BannerWrap img,
  #BannerWrap .slider img,
  #BannerWrap .jquery-slider img,
  #BannerWrap img.click,
  .slider img,
  .jquery-slider img,
  img.click {
    max-width: none !important;
    width: unset !important;
    height: unset !important;
  }
  .gallery, .gallery  {
    width: 46% !important; max-width: 170px; display: inline-block; vertical-align: top;
  }
  .gallery img { width: 100% !important; height: auto !important; }
  #Body, #OurTeam { padding: 8px !important; }
  .PageTitle, .PageTitle2 { font-size: 22px !important; line-height: 1.25 !important; }
  .Box01, .boxField { width: 100% !important; background-size: contain !important; }
}

@media screen and (max-width: 420px) {
  body { font-size: 15px !important; }
  .gallery, .gallery  { width: 100% !important; max-width: none; display: block; }
  .PageTitle, .PageTitle2 { font-size: 20px !important; }
}