/* ---- Gallery lightbox ---- Self-contained: the overlay is a appended to by js/lightbox.js, so nothing here depends on the template stylesheet. */ .lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; padding: 0; border: 0; background: transparent; overscroll-behavior: contain; } .lightbox::backdrop { background: rgba(0, 0, 0, 0.9); } /* Older engines paint the backdrop element instead of the pseudo-element. */ .lightbox + .backdrop { background: rgba(0, 0, 0, 0.9); } .lightbox__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 70px 60px; text-align: center; } .lightbox__img { display: block; max-width: 90vw; max-height: 80vh; margin: 0 auto; object-fit: contain; } .lightbox__caption, .lightbox__counter { margin: 0; color: #fff; font-size: 15px; text-align: center; } .lightbox__caption { margin-top: 18px; max-width: 700px; } .lightbox__counter { position: absolute; left: 0; right: 0; bottom: 18px; font-size: 13px; letter-spacing: 2px; } .lightbox__close, .lightbox__nav { position: absolute; width: 48px; height: 48px; padding: 0; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 22px; line-height: 48px; text-align: center; cursor: pointer; transition: background 0.3s; } .lightbox__close:hover, .lightbox__nav:hover, .lightbox__close:focus, .lightbox__nav:focus { background: rgba(255, 255, 255, 0.28); color: #fff; outline: none; } .lightbox__close { top: 16px; right: 16px; } .lightbox__nav { top: 50%; margin-top: -24px; font-size: 30px; } .lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; } .lightbox__nav[hidden], .lightbox__counter[hidden] { display: none; } @media (max-width: 767px) { .lightbox__inner { padding: 60px 16px; } .lightbox__nav { width: 40px; height: 40px; margin-top: -20px; font-size: 24px; line-height: 40px; } .lightbox__nav--prev { left: 6px; } .lightbox__nav--next { right: 6px; } }