#lightbox {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
#background_lb_remove {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10100;
}
#lb_img {
  max-height: 100vh;
  max-width: 100vw;
  z-index: 10200;
  background: url(../icons/loader.svg) no-repeat;
}

#lb_btn_prev, #lb_btn_next, #lb_btn_close {
  position: absolute;
  height: 30%;
  opacity: 0;
  transition: opacity 0.6s;
  z-index: 10300;
  font-size: 56px;
  color: #fff;
  font-weight: 700;
  padding: 20px
}
#lb_btn_prev {
  width: 34%;
  left: 0;
}
#lb_btn_next {
  width: 64%;
  right: 0;
  justify-content: end;
}
#lb_btn_close {
  width: 20%;
  right: 0;
  top: 0;
  display: block;
  text-align: right;
  line-height: 0;
}
#lb_btn_next:hover, #lb_btn_prev:hover, #lb_btn_close:hover, #lb_attrTitle:hover {
  opacity: 1;
  cursor: pointer;
}
#lb_info {
  position: absolute;
  height: auto;
  bottom: 0;
  left: 10px;
  z-index: 10300;
}
#lb_attrTitle {
  opacity: 0;
  transition: opacity 0.6s;
}

.lb_show { animation: lb_show 1s forwards}
@keyframes lb_show {
  from { opacity: 0 }
  to   { opacity: 1 }
}
.lb_hide { animation: lb_hide .4s forwards}
@keyframes lb_hide {
  from { opacity: 1 }
  to   { opacity: 0 }
}