.lightbox
{
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    position: fixed;
    background-color: rgba(0, 0, 0, .7);
}

.lightbox-image.center {
    transform: translate(50%, 10%);
    width: 50%;
    max-height: 50%;
}

.lightbox-close {
    position: absolute;
    width: 3em;
    top: .5em;
    right: 2em;
    background-color: #000;
}

.lightbox-arrow {
    position: absolute;
    width: 3em;
    top: calc(50% - 1em);
    background-color: #000;
}

.lightbox-arrow svg, .lightbox-close svg
{
    color: rgba(255,255,255, 0.7);
    stroke: rgba(255,255,255, 0.7);
    stroke-linejoin: round;
    stroke-width: 3;
}

.lightbox-arrow svg:hover, .lightbox-close svg:hover
{
    stroke: #fff;
    cursor: pointer;
}

.lightbox-arrow.left {
    left: 2em;
}

.lightbox-arrow.right {
    right: 2em;
}