/*
    override all this jquery cruft and make lightbox responsive:
    https://github.com/lokesh/lightbox2/issues/641                  */

.lightbox
{
    position: fixed;
    top: 30px !important;
}
.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 - 38px) !important; /*minus the 30px from the top, including 2 x 4px border*/
}
.lb-dataContainer
{
    width:  initial !important;
}
.lb-details
{
    text-align: center !important;
    width: 100% !important;
}
.lb-close
{
    display: none !important;
}

.lb-number
{
    display: initial !important;
}
#lightboxOverlay
{
    width: 100%  !important;
    height: 150% !important;
    position: fixed;
}


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