#imagelightbox {
    cursor: pointer;
    position: fixed;
    z-index: 10000;
    top: 50%;
    touch-action: none;
    box-shadow: 0 0 3.125em rgba(0, 0, 0, .75); /* 50 */
}

.imagelightbox-open {
    user-select: none;
    overflow: hidden;
}

.imagelightbox-overlay {
    background-color: rgba(0, 0, 0, .8);
    position: fixed;
    z-index: 9998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.imagelightbox-close {
    cursor: pointer;
    width: 2.5em;
    height: 2.5em;
    position: fixed;
    z-index: 10002;
    top: 2.5em;
    right: 2.5em;
    border-radius: 50%;
    transition: color .3s ease;
}

.imagelightbox-close:hover { background-color: #000; }

.imagelightbox-close:before,
.imagelightbox-close:after {
    width: 2px;
    background-color: #fff;
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 50%;
    margin-left: -1px;
}

.imagelightbox-close:before { transform: rotate(45deg); }

.imagelightbox-close:after { transform: rotate(-45deg); }

.imagelightbox-arrow {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 3.75em;
    height: 7.5em;
    vertical-align: middle;
    display: none;
    position: fixed;
    z-index: 10001;
    top: 50%;
    margin-top: -3.75em;
}

.imagelightbox-arrow:hover { background: #000; }

.imagelightbox-arrow:before {
    content: "\e90c";
    display: block;
    font-size: 48px;
}

.imagelightbox-arrow.imagelightbox-arrow-left { left: 2.5em; }

.imagelightbox-arrow.imagelightbox-arrow-left:before { transform: rotate(90deg); }

.imagelightbox-arrow.imagelightbox-arrow-right { right: 2.5em; }

.imagelightbox-arrow.imagelightbox-arrow-right:before { transform: rotate(-90deg); }

.imagelightbox-loading,
.imagelightbox-overlay,
.imagelightbox-close,
.imagelightbox-nav,
.imagelightbox-arrow { animation: fade-in .25s linear; }

@keyframes fade-in {
    from	{ opacity: 0; }
    to		{ opacity: 1; }
}

@media only screen and (max-width: 41.250em) {
    #container {
        width: 100%;
    }

    .imagelightbox-close {
        top: 1.25em;
        right: 1.25em;
    }

    .imagelightbox-arrow {
        width: 2.5em;
        height: 3.75em;
        margin-top: -1.875em;
    }

    .imagelightbox-arrow.imagelightbox-arrow-left { left: 1.25em; }

    .imagelightbox-arrow.imagelightbox-arrow-right { right: 1.25em; }
}

@media only screen and (max-width: 20em) {
    .imagelightbox-arrow-left { left: 0; }
    .imagelightbox-arrow-right { right: 0; }
}