.lightbox-popup,
.lightbox-popup * {
box-sizing: border-box;
}
.lightbox-gallery figure,
.lightbox-gallery figcaption,
.lightbox-gallery figure img {
display: block;
margin: 0;
padding: 0;
}
.lightbox-gallery figure {
cursor: pointer;
position: relative;
}
.lightbox-gallery figure:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: all 0.3s ease-in-out;
z-index: 1;
}
.lightbox-gallery figure:after {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 20 20" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g transform="matrix(0.0390625,0,0,0.0390625,0,-0.000117187)"> <path d="M505.749,475.587L360.149,329.987C388.352,295.15 405.333,250.883 405.333,202.67C405.333,90.926 314.41,0.003 202.666,0.003C90.922,0.003 0,90.925 0,202.669C0,314.413 90.923,405.336 202.667,405.336C250.88,405.336 295.147,388.355 329.984,360.152L475.584,505.752C479.744,509.912 485.205,512.003 490.667,512.003C496.129,512.003 501.59,509.912 505.75,505.752C514.091,497.411 514.091,483.928 505.749,475.587ZM202.667,362.669C114.432,362.669 42.667,290.904 42.667,202.669C42.667,114.434 114.432,42.669 202.667,42.669C290.902,42.669 362.667,114.434 362.667,202.669C362.667,290.904 290.901,362.669 202.667,362.669Z" style="fill-rule:nonzero;"/> </g></svg>');
position: absolute;
font-weight: bold;
text-align: center;
left: 50%;
top: 50%;
width: 38px;
height: 38px;
padding: 0 10px;
line-height: 45px;
margin-top: -16px;
margin-left: -16px;
display: block;
background: #fff;
border-radius: 50%;
opacity: 0;
z-index: 2;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
.lightbox-gallery figure:hover:before,
.lightbox-gallery figure:hover:after {
opacity: 1;
}
.lightbox-gallery figcaption {
position: absolute;
bottom: 0;
z-index: 3;
}
.lightbox-popup {
background: rgba(30, 30, 30, 0.9);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 40px
}
.lightbox-popup .lightbox-img {
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.2));
}
.lightbox-popup .lightbox-img img {
display: block;
max-width: 100%;
max-height: calc(100vh - 80px);
margin: 0 auto;
}
.lightbox-popup .close,
.lightbox-popup .prev,
.lightbox-popup .next {
width: 38px;
height: 38px;
border-radius: 50%;
background: #000;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.lightbox-popup .close {
top: 0.5rem;
right: 0.5rem;
}
.lightbox-popup .prev {
top: 50%;
margin-top: -16px;
left: 0.5rem;
}
.lightbox-popup .next {
top: 50%;
margin-top: -16px;
right: 0.5rem;
}
.lightbox-popup .close svg,
.lightbox-popup .prev svg,
.lightbox-popup .next svg {
width: 20px;
height: 20px;
}
.lightbox-popup .close path,
.lightbox-popup .prev path,
.lightbox-popup .next path {
fill: #fff;
}
.lightbox-popup .capation,
.lightbox-popup .nav {
color: #fff;
text-align: center;
padding: 10px;
font-size: 14px;
line-height: 1;
}
.lightbox-popup .thumbs {
position: absolute;
bottom: 0;
display: flex;
}
.lightbox-popup .thumbs > div {
width: 60px;
padding: 5px;
}
.lightbox-popup .thumbs img {
width: auto;
height: 100%;
object-fit: cover;
}
.is-cropped figure {
height: 100%;
}
.is-cropped figure a,
.is-cropped figure img {
width: 100%;
height: 100% !important;
flex: 1;
-o-object-fit: cover !important;
object-fit: cover !important;
}