#imagelightbox
{
    position: fixed;
    z-index: 9999;
}

#imagelightbox-close {
    background-color: #666666;
    border-radius: 50%;
    height: 2.5em;
    position: fixed;
    right: 2.5em;
    text-align: left;
    text-indent: -9999px;
    top: 2.5em;
    transition: color 0.3s ease 0s;
    width: 2.5em;
    z-index: 10002;
}

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

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

*, *:before, *:after {
    /*box-sizing: border-box;*/
}

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

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

#imagelightbox-loading, #imagelightbox-overlay, #imagelightbox-close, #imagelightbox-caption, #imagelightbox-nav {
    animation: 0.25s linear 0s normal none 1 fade-in;
}

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


/* LIGHTBOX DESCRIPTION */

#imagelightbox-caption {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 10000;
    padding: 7px;
    text-align: center;
    background: rgba(0, 0, 0, .75);
    color: #fff;
}


/* LIGHTBOX ARROWS */

.imagelightbox-arrow
{
    width: 3.75em; /* 60 */
    height: 7.5em; /* 120 */
    background-color: #444;
    background-color: rgba( 0, 0, 0, .5 );
    vertical-align: middle;
    display: none;
    position: fixed;
    z-index: 10001;
    top: 50%;
    margin-top: -3.75em; /* 60 */
    -webkit-appearance: button;
    cursor: pointer;
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus  { background-color: rgba( 0, 0, 0, .75 ); }
.imagelightbox-arrow:active { background-color: #111; }

    .imagelightbox-arrow-left   { left: 2.5em; /* 40 */ }
    .imagelightbox-arrow-right  { right: 2.5em; /* 40 */ }

    .imagelightbox-arrow:before
    {
        width: 0;
        height: 0;
        border: 1em solid transparent;
        content: '';
        display: inline-block;
        margin-bottom: -0.125em; /* 2 */
    }
        .imagelightbox-arrow-left:before
        {
            border-left: none;
            border-right-color: #fff;
            margin-left: -0.313em; /* 5 */
        }
        .imagelightbox-arrow-right:before
        {
            border-right: none;
            border-left-color: #fff;
            margin-right: -0.313em; /* 5 */
        }

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow
{
    -webkit-animation: fade-in .25s linear;
    animation: fade-in .25s linear;
}
    @-webkit-keyframes fade-in
    {
        from    { opacity: 0; }
        to      { opacity: 1; }
    }
    @keyframes fade-in
    {
        from    { opacity: 0; }
        to      { opacity: 1; }
    }

@media only screen and (max-width: 41.250em) /* 660 */
{
    #container
    {
        width: 100%;
    }
    #imagelightbox-close
    {
        top: 1.25em; /* 20 */
        right: 1.25em; /* 20 */
    }
    #imagelightbox-nav
    {
        bottom: 1.25em; /* 20 */
    }

    .imagelightbox-arrow
    {
        width: 2.5em; /* 40 */
        height: 3.75em; /* 60 */
        margin-top: -2.75em; /* 30 */
    }
    .imagelightbox-arrow-left   { left: 1.25em; /* 20 */ }
    .imagelightbox-arrow-right  { right: 1.25em; /* 20 */ }
}

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