/* make lightbox responsive: https://github.com/lokesh/lightbox2/issues/641 */

.lb-outerContainer
{
    display: inline-block;
    width:  initial !important;
    height: initial !important;
}
.lb-image
{
    width:  initial !important;
    height: initial !important;
    max-width: 100% !important;
    max-height: calc(100vh - 29px - 2 * var(--lb-image-border-width)) !important; /*minus the 29px from bottom label area, including 2 x 4px border*/
}
.lb-prev, .lb-next
{
    height: 100% !important;
}
.lb-dataContainer
{
    width: initial !important;
}
.lb-details
{
    text-align: center !important;
    width: 100% !important;
}
.lb-number
{
    display: initial !important;
}
.lb-close
{
    display: none !important;
}

#lightboxOverlay
{
    width:  100% !important;
    height: 150% !important; /*avoid looking (temporarily) beyond bounds while scrolling*/
}

@media screen and (max-width: 1050px)
{
    #lightbox
    {
        top: 0 !important;
    }
}