#ggbl_lightbox {
width: 100%;
height: 100%;
position:fixed;
z-index:10000;
background: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
color: #fff;
}
#ggbl_slider {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden; }
#ggbl_slider, #ggbl_slider li {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#ggbl_slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none; overflow: visible; }
#ggbl_slider img {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
max-height: 90vh;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6);
}
.ggbl_nav {
width: 100%;
top: 50vh;
display: flex;
align-items: center;
}
.ggbl_nav, .ggbl_close {
position: absolute;
z-index: 1;
}
.ggbl_prev, .ggbl_next {
color: #fff;
text-decoration: none;
position: absolute;
display: block;
width: 0;
height: 0;
padding: 0 .2rem;
}
.ggbl_prev {
left: 0;
border-top: 2vw solid transparent;
border-bottom: 2vw solid transparent;
border-right: 2vw solid rgba(255, 255, 255, 0.7);
transition: border ease .2s;
}
.ggbl_next {
right: 0;
border-top: 2vw solid transparent;
border-bottom: 2vw solid transparent;
border-left: 2vw solid rgba(255, 255, 255, 0.7);
transition: border ease .2s;
}
.ggbl_prev:hover {
border-right: 2vw solid rgba(255, 255, 255, 1);
}
.ggbl_next:hover {
border-left: 2vw solid rgba(255, 255, 255, 1);
}
.ggbl_close {
position: absolute;
color: #fff;
text-decoration: none;
right: 0;
top: 0;
display: block;
padding: 1rem;
}
.ggbl_close {
right: 32px;
top: 32px;
width: 32px;
height: 32px;
opacity: 0.6;
transition: opacity ease .2s;
}
.ggbl_close:hover {
opacity: 1;
}
.ggbl_close:before, .ggbl_close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #fff;
}
.ggbl_close:before {
transform: rotate(45deg);
}
.ggbl_close:after {
transform: rotate(-45deg);
}
.ggbl_noscroll {
overflow-y: hidden;
}