.lightbox {
position: fixed;
background: rgba(0, 0, 0, 0.90);
display: none;
z-index: 100;
}
.lightbox .img-show {
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.img-caption {
background: rgba(0, 0, 0, 0.3);
padding: 10px;
position: absolute;
bottom: 0;
display: block;
z-index: 101;
color: #fff;
text-shadow: 1px 0.4px rgba(0, 0, 0, 0.5);
width: 100%;
box-sizing: border-box;
}
.lightbox .btn-close {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border: 1px solid #fff;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
text-align: center;
font-size: 18pt;
z-index: 101;
cursor: pointer;
}
.lightbox .btn-close:hover {
background: #fff;
}
.lightbox .lightbox-status {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 14px;
z-index: 101;
}
.img-show img {
width: 100%;
height: auto;
position: absolute;
display: block;
top: 0;
bottom: 0;
margin: auto;
} .btn-prev,
.btn-next {
width: 32px;
height: 100px;
background: rgba(0, 0, 0, 0.30);
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -50px;
z-index: 101;
border: 0;
font-family: FontAwesome;
color: #fff;
color: rgba(255, 255, 255, 0.6);
font-size: 18pt;
border-radius: 5px;
}
.btn-prev:hover,
.btn-next:hover {
background: rgba(0, 0, 0, 0.7);
color: #fff;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: 0.4s;
-o-transition: .4s;
}
.btn-prev {
left: 5px;
}
.btn-next {
right: 5px;
}
.btn-prev:before {
content: "\f104";
}
.btn-next:before {
content: "\f105";
}
@media only screen and ( min-width: 680px) {
.lightbox {
border-radius: 5px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
}