/* [LIGHTBOX] */
#lb-back {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    width: 30%;
    height: auto;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s;
}

    #lb-back.show {
        visibility: visible;
        opacity: 1;
    }

#lb-img {
    text-align: center;
    border: 8px solid #FDFDFD;
    -webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
}


/*Extra small devices (portrait phones, less than 576px) ##############################################################*/
@media (min-width: 300px) and (max-width: 480px) {
    /* [LIGHTBOX] */
    #lb-back {
        width: 60%;
        height: auto;
    }

    #lb-img {
        text-align: center;
        border: 3px solid #FDFDFD;
        -webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
    }
}


@media (min-width: 481px) and (max-width: 575px) {
    /* [LIGHTBOX] */
    #lb-back {
        width: 60%;
        height: auto;
    }

    #lb-img {
        text-align: center;
        border: 3px solid #FDFDFD;
        -webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    /* [LIGHTBOX] */
    #lb-back {
        width: 50%;
        height: auto;
    }

    #lb-img {
        text-align: center;
        border: 3px solid #FDFDFD;
        -webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.5);
    }

}