/* LIGHTBOX */
div.gal.flex{
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    margin: calc(-0.5 * var(--padding));
}
.pu img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
img.pu, picture.pu, .pu img {
    cursor: zoom-in;
    transition: all 0.5s ease-in-out;
    outline: calc(0.5 * var(--padding)) solid transparent;
    outline-offset: calc(-0.499 * var(--padding));
}
img.pu:hover, picture.pu:hover, pu img:hover {
    outline-color: var(--green);
}
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: 20000;
    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 0.5s ease-in, backdrop-filter 0.5s ease-in;
    border: none;
}
html.pu-open {
    overflow: hidden;
}
.pu-imagebox.pu-show {
    pointer-events: all;
    opacity: 1;
    backdrop-filter: blur(5px);
    transition: opacity 0.5s 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 0.5s 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 0.5s ease-in;
    transition: all 0.5s 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;
}
button.pu-sign {
    height: 2rem;
    width: 2rem;
    font-size: 3rem;
    color: #fff
}