/* Lightboxes */

body.lightbox-open { overflow: hidden; }

.lightbox { position: fixed; top: -300vh; left: 0; width: 100%; height: 100vh; opacity: 0.0; transition: opacity 0.3s linear; z-index: 1001; background: #010061; }
.lightbox:target { top: 0; opacity: 1.0; }

.lightbox a { border-bottom: 1px solid white; }
.lightbox a:hover, .lightbox a:focus { border: none; }
.lightbox a[href*="//"]:not([href*="www.jmberlin.de"])::after { background: transparent url(/themes/custom/jmb/icons/link_external_white.svg) 0 0 no-repeat; }

.lightbox a.download { border: none; }

.lightbox__box { display: flex; }

.lightbox__media { display: flex; justify-content: center; align-items: center; flex-grow: 1; z-index: 1; padding: 40px; width: 65%; min-width: 65%; max-width: 65%; height: 100vh; position: relative; border-right: 1px solid #FFF; }
.lightbox__media img { width: auto; height: auto; max-height: 90vh; max-height: calc(100vh - 80px); }
.lightbox__media .video-item { max-width: 100%; }
.lightbox__media .vjs-audio { width: 100%; }
.lightbox__media .vjs-fluid { width: 640px; }
.lightbox__caption { margin-top: 120px; padding: 0 40px 0 40px; overflow-y: auto; height: calc(100vh - 120px); color: white; width: 35%; }
.lightbox__caption::after { content: ""; display: block; height: 40px; width: 100%; }
.lightbox__caption a.download:hover span, .lightbox__caption a.download:focus span { border-bottom: 1px solid white; }

.lightbox__caption summary { border-top: 1px solid #FFF; }
.lightbox__caption summary::before { background: url("/themes/custom/jmb/icons/plus_16x16_white.svg") center center; }
.lightbox__caption summary::after {
  background: url("/themes/custom/jmb/icons/minus_16x16_white.svg") center center; }

.lightbox__link { display: block; position: relative; border: none; }
.lightbox__link svg { width: 35px; height: 35px; padding: 9px 6px 6px 9px; background: rgba(0, 0, 0, 0.5); position: absolute; bottom: 10px; left: 10px; border-radius: 18px; }
.lightbox__link:hover svg { background: rgba(0, 0, 0, 0.9); }

.gallery-caption .lightbox__link { display: inline-block; border-bottom: 1px solid black; }
.gallery-caption .lightbox__link:hover, .gallery-caption .lightbox__link:focus { display: inline-block; border-bottom: 0px solid black; }

.lightbox__nav { position: absolute; top: 0; right: 0; width: 100%; height: 120px; background-color: #010061; z-index: 1; background: #010061; height: 120px; width: 34.5%; min-width: 300px; }

.lightbox__btn { display: block; width: 60px; height: 60px; position: absolute; top: 30px; right: 30px; z-index: 1; border: 2px solid white; border-radius: 60px; }
.lightbox__btn:hover circle, .lightbox__btn:focus circle { opacity: 1.0; }
.lightbox__btn:hover polygon, .lightbox__btn:focus polygon { fill: #010061; }

.lightbox__btn--prev { right: 210px; }
.lightbox__btn--next { right: 120px;}

.lightbox__back { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #010061; z-index: 1000; display: none; }
body.lightbox-open .lightbox__back { display: block; }

.lightbox--notext .lightbox__media { border-right: 0px solid #FFF; }

@media only screen and (max-width: 960px) {
  .lightbox__box { display: block; height: calc(100vh - 120px); overflow-y: auto; margin-top: 120px; }
  .lightbox__media { height: auto; width: 100%; max-width: 100%; margin-top: 0; border-right: 0px solid #FFF; }
  .lightbox__caption { height: auto; margin-top: 0; width: 100%; max-width: 100%; overflow-y: hidden; padding-bottom: 80px; }
  .lightbox__caption::after { display: none; }
  .lightbox__nav { width: 100%; }
  .cm_gallery .lightbox__media img { max-height: 70vh; }
}