/* Pictures full screen on the same page (js/klightbox.js): the picture as large as fits, arrows on its sides, the
   caption and counter on top, the thumbnails below. */
[data-lb-at] { cursor: zoom-in; }
html.klb-lock { overflow: hidden; }
.klb { position: fixed; inset: 0; z-index: 3000; display: none; flex-direction: column; background: rgba(14, 20, 27, .95); color: #fff; font-family: Lato, sans-serif; }
.klb.on { display: flex; }
.klb-top { display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 22px; font-family: Montserrat, sans-serif; text-transform: uppercase; }
.klb-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; letter-spacing: .05em; }
.klb-count { font-size: 13px; color: #18bc9c; letter-spacing: .05em; }
.klb-close { width: 42px; height: 42px; padding: 0; border: none; border-radius: 50%; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.klb-close svg { width: 20px; height: 20px; display: block; }
.klb-close:hover, .klb-close:focus { background: rgba(255, 255, 255, .12); outline: none; }
.klb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 76px; }
.klb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); user-select: none; -webkit-user-drag: none; transition: opacity .15s; }
.klb-img.loading { opacity: .35; }
.klb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; padding: 0; border: none; border-radius: 50%; background: #18bc9c; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); transition: background .2s; }
.klb-arrow svg { width: 20px; height: 20px; display: block; }
.klb-arrow:hover, .klb-arrow:focus { background: #128f76; outline: none; }
.klb-prev { left: 14px; }
.klb-next { right: 14px; }
.klb-arrow[hidden], .klb-strip[hidden] { display: none; }
.klb-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 16px; scrollbar-width: none; }
.klb-strip::-webkit-scrollbar { display: none; }
.klb-strip > :first-child { margin-left: auto; }
.klb-strip > :last-child { margin-right: auto; }
.klb-thumb { flex: 0 0 auto; width: 88px; height: 55px; padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; background: #2c3e50; opacity: .5; transition: opacity .2s, border-color .2s; }
.klb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.klb-thumb:hover, .klb-thumb.on { opacity: 1; border-color: #18bc9c; }
@media (max-width: 767px) {
    .klb-stage { padding: 0 6px; }
    .klb-arrow { width: 40px; height: 40px; background: rgba(24, 188, 156, .8); }
    .klb-prev { left: 8px; }
    .klb-next { right: 8px; }
    .klb-thumb { width: 64px; height: 40px; }
}