.image-lightbox {
  display: none;
  opacity: 0;
}
.image-lightbox.active {
  z-index: 99999;
  opacity: 1;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 5px;
  background-color: #2d2d2d;
  display: block;
}
@media only screen and (min-width: 64.063em) {
  .image-lightbox.active {
    display: flex;
    flex-flow: column nowrap;
  }
}
.image-lightbox.active .active-view-container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 0;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
}
@media only screen and (min-width: 64.063em) {
  .image-lightbox.active .active-view-container {
    height: initial;
    padding: 1.5em;
  }
}
.image-lightbox.active .active-view-container .active-img-container {
  -webkit-transition: opacity 0.08s ease-in-out;
  -moz-transition: opacity 0.08s ease-in-out;
  -ms-transition: opacity 0.08s ease-in-out;
  -o-transition: opacity 0.08s ease-in-out;
  transition: opacity 0.08s ease-in-out;
  display: block;
  opacity: 1;
  position: relative;
}
.image-lightbox.active .active-view-container .active-img-container.changing {
  opacity: 0;
}
.image-lightbox.active .active-view-container .active-img-container .active-img {
  max-width: 100%;
}
.image-lightbox.active .active-view-container .active-img-container .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0.5em;
  background-color: rgba(41, 41, 41, 0.9);
  color: #fafafa;
  width: 100%;
}
.image-lightbox.active .active-view-container .active-img-container .caption:empty {
  display: none;
}
.image-lightbox.active .active-view-container > .ctrl-container {
  background-color: transparent !important;
  height: 100%;
  position: absolute;
  z-index: 100009;
  bottom: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.image-lightbox.active .active-view-container > .ctrl-container button {
  color: #8a8a8a;
  margin-bottom: 0;
  padding: 20px;
  background-color: rgba(45, 45, 45, 0.9);
  border: 1px solid #262626;
}
.image-lightbox.active .active-view-container > .ctrl-container button:hover, .image-lightbox.active .active-view-container > .ctrl-container button:focus {
  color: #c5c5c5;
  background-color: #292929;
  outline: none;
}
.image-lightbox.active .active-view-container > .ctrl-container.prev {
  left: 0;
}
@media only screen and (min-width: 90.063em) {
  .image-lightbox.active .active-view-container > .ctrl-container.prev {
    left: -56px;
  }
}
.image-lightbox.active .active-view-container > .ctrl-container.next {
  right: 0;
}
@media only screen and (min-width: 90.063em) {
  .image-lightbox.active .active-view-container > .ctrl-container.next {
    right: -56px;
  }
}
.image-lightbox.active .active-view-container > .ctrl-container.disabled button {
  background-color: transparent;
  border: 1px solid transparent;
  color: #616161;
  opacity: 0.1;
}
.image-lightbox.active button {
  background-color: transparent;
}
.image-lightbox.active .thumbnails {
  display: none;
}
@media only screen and (min-width: 64.063em) {
  .image-lightbox.active .thumbnails {
    -webkit-transition: margin 0.2s ease-in-out;
    -moz-transition: margin 0.2s ease-in-out;
    -ms-transition: margin 0.2s ease-in-out;
    -o-transition: margin 0.2s ease-in-out;
    transition: margin 0.2s ease-in-out;
    height: 200px;
    width: 100%;
    display: flex;
    flex: 0 0 200px;
  }
}
.image-lightbox.active .thumbnails button {
  padding: 0;
  width: 10%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 0 0 10%;
  opacity: 0.25;
  color: transparent;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}
.image-lightbox.active .thumbnails button.active, .image-lightbox.active .thumbnails button:hover, .image-lightbox.active .thumbnails button:focus {
  opacity: 1;
}
.image-lightbox.active.single-img .thumbnails {
  display: none;
}
.image-lightbox.active .close-button {
  z-index: 100010;
  margin-bottom: 0;
}
.image-lightbox.active .close-button:hover, .image-lightbox.active .close-button:focus {
  color: #adadad;
  outline: none;
}