html
{
-ms-touch-action: manipulation;
touch-action: manipulation;
}

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

#imagelightbox-loading,
#imagelightbox-loading div {
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
}

#imagelightbox-loading {
width: 2.5em;
height: 2.5em;
background-color: #444444;
background-color: rgba( 0, 0, 0, .5 );
position: fixed;
z-index: 10003;
top: 50%;
left: 50%;
padding: 0.625em;
margin: -1.25em 0 0 -1.25em;
-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
   -moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
        box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
}

#imagelightbox-loading div {
width: 1.25em;
height: 1.25em;
background-color: #111111;
-webkit-animation: imagelightbox-loading .5s ease infinite;
   -moz-animation: imagelightbox-loading .5s ease infinite;
     -o-animation: imagelightbox-loading .5s ease infinite;
        animation: imagelightbox-loading .5s ease infinite;
}

@-webkit-keyframes imagelightbox-loading {
from { opacity: .5;  -webkit-transform: scale( .75 ); }
50%  { opacity: 1;  -webkit-transform: scale( 1 ); }
to   { opacity: .5;  -webkit-transform: scale( .75 ); }
}

@-moz-keyframes imagelightbox-loading {
from { opacity: .5;  -moz-transform: scale( .75 ); }
50%  { opacity: 1;  -moz-transform: scale( 1 ); }
to   { opacity: .5;  -moz-transform: scale( .75 ); }
}

@-o-keyframes imagelightbox-loading {
from { opacity: .5;  -o-transform: scale( .75 ); }
50%  { opacity: 1;  -o-transform: scale( 1 ); }
to   { opacity: .5;  -o-transform: scale( .75 ); }
}

@keyframes imagelightbox-loading {
from { opacity: .5;  transform: scale( .75 ); }
50%  { opacity: 1;  transform: scale( 1 ); }
to   { opacity: .5;  transform: scale( .75 ); }
}

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

#imagelightbox-close {
width: 2.5em;
height: 2.5em;
text-align: left;
text-indent: -9999px;
background-color: #111111;
position: fixed;
z-index: 10002;
top: 2.5em;
right: 2.5em;
border: 4px solid #FFFFFF;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
-webkit-transition: color .3s ease;
   -moz-transition: color .3s ease;
    -ms-transition: color .3s ease;
     -o-transition: color .3s ease;
        transition: color .3s ease;
}

#imagelightbox-close:hover {
background-color: #222222;
}

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

#imagelightbox-close:before {
-webkit-transform: rotate( 45deg );
   -moz-transform: rotate( 45deg );
    -ms-transform: rotate( 45deg );
     -o-transform: rotate( 45deg );
        transform: rotate( 45deg );
}

#imagelightbox-close:after {
-webkit-transform: rotate( -45deg );
   -moz-transform: rotate( -45deg );
    -ms-transform: rotate( -45deg );
     -o-transform: rotate( -45deg );
        transform: rotate( -45deg );
}

#imagelightbox-caption {
text-align: center;
color: #fff;
background-color: #111111;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 1em 0;
border-top: 2px solid #ffffff;
font-size: 120%;
}

#imagelightbox-nav {
background-color: #444444;
background-color: rgba( 0, 0, 0, .5 );
border-radius: 20px;
position: fixed;
z-index: 10001;
left: 50%;
bottom: 3.75em;
padding: 0.313em;
-webkit-transform: translateX( -50% );
    -ms-transform: translateX( -50% );
        transform: translateX( -50% );
}

#imagelightbox-nav button {
width: 1em;
height: 1em;
background-color: transparent;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
margin: 0 0.313em;
}

#imagelightbox-nav button.active {
background-color: #ffffff;
}

.imagelightbox-arrow {
width: 3.75em; /* 60 */
height: 7.5em; /* 120 */
background-color: #111111;
vertical-align: middle;
display: none;
position: fixed;
z-index: 10001;
top: 50%;
margin-top: -3.75em; /* 60 */
cursor: pointer;
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus
{
background-color: #111111;
}
.imagelightbox-arrow:active
{
background-color: #111111;
}
.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: #ffffff;
margin-left: -0.313em; /* 5 */
}
.imagelightbox-arrow-right:before
{
border-right: none;
border-left-color: #ffffff;
margin-right: -0.313em; /* 5 */
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav {
-webkit-animation: fade-in .25s linear;
   -moz-animation: fade-in .25s linear;
     -o-animation: fade-in .25s linear;
        animation: fade-in .25s linear;
}

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

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

@-o-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;
  right: 1.25em;
  }
  #imagelightbox-nav
  {
  bottom: 1.25em;
  }
}