/*! Darkbox Gallery v1.0.0 MIT by Qrac */

/**
 * Darkbox - by Roko.CB
 * https://github.com/rokobuljan/Darkbox-Gallery
 */

[data-darkbox],
[data-darkbox-group] {
  cursor: pointer;
}

#darkbox {
  position: fixed;
  top: 24px;
  left: 24px;
  bottom: 24px;
  right: 24px;
  background: rgba(0, 0, 0, 0.8) none no-repeat 50% 50%/contain;
  box-shadow: 0 0 0 24px rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1.4;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
}

#darkbox.show {
  opacity: 1;
  visibility: visible;
}

#darkbox a:hover {
  color: #0bf;
  border-color: #0bf;
}

#darkbox_prev,
#darkbox_next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border: 0px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: 0.3s;
}

#darkbox_prev {
  left: -6px;
  border-width: 0 0 3px 3px;
  z-index: 2;
}

#darkbox_next {
  right: -6px;
  border-width: 3px 3px 0 0;
  z-index: 2;
}

#darkbox_description {
  position: absolute;
  bottom: 24px;
  right: 24px;
  text-align: right;
  text-shadow: 0 1px 1px #000;
}

#darkbox_stats {
  position: absolute;
  left: 0;
  top: 0;
}

#darkbox_close {
  position: absolute;
  top: -8px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#darkbox_close:after {
  cursor: pointer;
  content: "\2A2F";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2.2em;
}

#darkbox:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin: -25px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #fff;
  visibility: hidden;
  opacity: 0;
  -webkit-animation: darkboxRotate 1.5s linear infinite;
  animation: darkboxRotate 1.5s linear infinite;
}

#darkbox.spinner:before {
  visibility: visible;
  opacity: 1;
}

@-webkit-keyframes darkboxRotate {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes darkboxRotate {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}