/* LIGHTBOX */
div.gal.flex{
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    margin: calc(-0.5 * var(--padding));
}
img.pu[class*="box"], picture.pu[class*="box"], div.gal > * {
    padding: 0;
    width: 300px;
    display: block;
    object-fit: cover;
    height: 300px;
    flex: 1 1 300px;
}
picture.pu img, div.pu img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
img.pu, picture.pu, div.pu, .gallery div.empty {
    cursor: zoom-in;
    transition: all var(--transition-time) ease-in-out;
    outline: calc(0.5 * var(--padding)) solid transparent;
    outline-offset: calc(-0.499 * var(--padding));
/*    flex: 1 1 max(calc(2 * .5 * var(--flex-base)), calc(1/5 * 100%));*/
}
.gallery .pu {
    outline: calc(0.5 * var(--padding)) solid rgba(var(--blue-light-rgb),.4)
}
.gallery .pu > .caption {
    left: calc(0.5 * var(--padding));
    bottom: calc(0.5 * var(--padding))
}
img.pu:hover, picture.pu:hover, div.pu:hover {
    outline-color: rgba(var(--blue-dark-rgb), .7);
}
img.pu[data-img*='.mp4'], img.pu[data-img*='.webm'], img.pu[data-img*='.mov'] {
    cursor: pointer;
}
img.pu[data-img*='.mp4'] + i, img.pu[data-img*='.webm'] + i, img.pu[data-img*='.mov'] + i {
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    color: #fff;
    text-shadow: 0 0 10px #000;
    pointer-events: none;
}
.pu-imagebox {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    max-width: 100vw;
    max-height: 100vh;
    background-color: rgba(0,0,0,0.7);
    z-index: 2000;
    width: auto;
    height: auto;
    padding: 40px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(0px);
    transition: opacity var(--transition-time) ease-in, backdrop-filter var(--transition-time) ease-in;
}
html.pu-open {
    overflow: hidden;
}
.pu-imagebox.pu-show {
    pointer-events: all;
    opacity: 1;
    backdrop-filter: blur(5px);
    transition: opacity var(--transition-time) ease-in;
}
.pu-imagebox .pu-caption {
    color: #fff;
}
.pu-sign {
    color: #fff;
    cursor: pointer;
    font-size: 3rem;
    position: absolute;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none; 
    opacity: 0.7;
    transition: opacity var(--transition-time) ease-in;
}
.pu-sign:hover {
    opacity: 1;
}
.pu-arr {
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1em;
}
.noset .pu-arr {
    display: none;
}
.pu-arr#pu-left {
    left: 20px;
}
.pu-arr#pu-right {
    right: 20px;
}
.pu-close {
    top: 15px;
    right: 20px;
}
.pu-imagewrapper {
    position: relative;
    height: calc(100% - 80px);
    width: calc(100% - 80px);
    margin: 0 auto;
    overflow: hidden;
}
.pu-zoomable {
    cursor: zoom-in;
}
.pu-zoomable.pu-zoom {
    cursor: zoom-out
}
.pu-zoom .pu-imagewrapper {
    overflow: scroll;
    scrollbar-width: thin;
}
.pu-imagewrapper img, .pu-imagewrapper video {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: pu-fadein var(--transition-time) ease-in;
    transition: all var(--transition-time) ease-in;
}
.pu-zoom .pu-imagewrapper img{
    cursor: grab;
    bottom: auto;
}
@keyframes pu-fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.pu-text {
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
}
body .swiper-button-next,
body .swiper-button-prev {
  top:0;
  bottom: 0;
  margin:auto;
  z-index:10;
}