/***********************************************************************
   ПРОСМОТР ФОТОГРАФИЙ АЛЬБОМА (см. lightbox.js)
   Размеры элементов в em: на телефоне скрипт увеличивает font-size окна,
   потому что страница сайта показывается там уменьшенной.
***********************************************************************/
.lb{position:fixed;left:0;top:0;width:100%;height:100%;z-index:2147483000;display:none;
  background:#16120e;color:#eee;font-family:Tahoma,Arial,sans-serif;font-size:16px;line-height:1.3;
  overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;text-align:left}
.lb *{box-sizing:border-box}
.lb.lb-open{display:block}

/* сцена с фото */
.lb-stage{position:absolute;left:0;right:0;top:3.25em;bottom:7.5em;overflow:hidden}
.lb .lb-img{position:absolute;left:0;top:0;max-width:none;max-height:none;margin:0;padding:0;border:0;
  transform-origin:50% 50%;cursor:zoom-in;-webkit-user-drag:none;box-shadow:0 .3em 1.5em rgba(0,0,0,.5)}
.lb .lb-img.lb-zoomed{cursor:grab}
.lb-dragging .lb-img.lb-zoomed{cursor:grabbing}
.lb .lb-img.lb-anim{transition:transform .25s ease}
.lb .lb-img.lb-in{animation:lb-in .3s ease}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-loading .lb-img{opacity:.35}

/* индикатор загрузки */
.lb-spin{display:none;position:absolute;left:50%;top:50%;width:2.5em;height:2.5em;margin:-1.25em 0 0 -1.25em;
  border:.2em solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;
  animation:lb-spin .8s linear infinite;pointer-events:none}
.lb-loading .lb-spin,.lb-busy .lb-spin{display:block}
@keyframes lb-spin{to{transform:rotate(360deg)}}

/* верхняя панель: счётчик и кнопки */
.lb-bar{position:absolute;left:0;right:0;top:0;height:3.25em;display:flex;align-items:center;
  padding:0 .5em;background:rgba(0,0,0,.25)}
.lb-cnt{flex:1;padding-left:.5em;font-size:.9em;opacity:.8;white-space:nowrap}
.lb-tools{display:flex;align-items:center}
.lb .lb-tool{display:flex;align-items:center;justify-content:center;width:2.75em;height:2.75em;
  margin:0 0 0 .15em;padding:0;border:0;border-radius:.4em;background:transparent;color:#eee;
  cursor:pointer;text-decoration:none;font-size:1em}
.lb .lb-tool:hover,.lb .lb-tool:focus-visible{background:rgba(255,255,255,.14);outline:none}
.lb svg{display:block;width:1.5em;height:1.5em}

/* стрелки по бокам */
.lb .lb-nav{position:absolute;top:50%;margin:-2.25em 0 0 0;width:3em;height:4.5em;padding:0;border:0;
  border-radius:.4em;background:rgba(0,0,0,.35);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1em}
.lb .lb-nav svg{width:2em;height:2em}
.lb .lb-nav:hover,.lb .lb-nav:focus-visible{background:rgba(0,0,0,.65);outline:none}
.lb-prev{left:.5em}
.lb-next{right:.5em}

/* подпись и лента миниатюр */
.lb-bottom{position:absolute;left:0;right:0;bottom:0;height:7.5em}
.lb-cap{height:2.25em;line-height:2.25em;padding:0 1em;text-align:center;font-size:.95em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-strip{height:5.25em;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.lb-strip-in{position:relative;display:flex;width:-webkit-max-content;width:max-content;height:100%;
  margin:0 auto;padding:.35em .5em .6em}
.lb .lb-th{height:100%;width:auto;max-width:none;margin:0 .2em;padding:0;border:.15em solid transparent;
  border-radius:.25em;opacity:.5;cursor:pointer;flex:none}
.lb .lb-th:hover{opacity:.85}
.lb .lb-th.lb-th-on{opacity:1;border-color:#e8c98a}

/* одно фото в альбоме: без стрелок и ленты */
.lb-single .lb-nav,.lb-single .lb-strip{display:none}

/* полноэкранный режим */
.lb:-webkit-full-screen{width:100%;height:100%}
.lb:fullscreen{width:100%;height:100%}
