.lightbox {
  background-color: #141414;
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: auto;
  z-index: 100;
  height: 100%;
}


.lightbox-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 10px;
  max-width: 1004px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  overflow: auto;
}


.lightbox-content {
  background-color: #fff;
  min-height: 100px;
  position: relative;
  overflow: auto;
  width: 100%;
}

.lightbox-content img {
  display: inline-block;
  float: left;
}

.lightbox-content .lightbox-img {
  position: relative;
  width: 100%;
  z-index: 10;
}

.lightbox-content .has-label { float: right; }

.lightbox-content .previous,
.lightbox-content .next {
  cursor: auto;
  display: inline-block;
  height: 100%;
  position: absolute;
  top: 0;
  width: calc(50%);
  z-index: 11;
}

.lightbox-content .previous { left: 0; }

.lightbox-content .next { right: 0; }

.close-btn {
  float: right;
  padding: 0 12px 12px;
  position: relative;
}

.close-btn:before {
    background-color: #141414;
    bottom: 0;
    content: "";
    height: 200%;
    opacity: 0;
    right: 0;
    position: absolute;
    width: 200%;
}

.lightbox-ttl,
.lightbox-sub {
  color: #fff;
  font-size: 11px;
  line-height: 1.7;
  float: left;
}

.lightbox-ttl {
  margin: 0;
  width: calc(100% - 70px);
}

.lightbox-sub { margin: 5px 0 0; }



@media screen and (min-width: 320px) and (max-width: 1024px) {

  .lightbox-content img {
    display: block;
    float: none;
    margin: 0 auto;
  }
  
  
  .lightbox-content .has-label { float: none; }
  
  .lightbox-content .img-lbl { margin-bottom: 30px; }

   .lightbox-wrapper {
      max-width: 100%;
      box-sizing: border-box; 
    }

}

@media screen and (min-width: 320px) and (max-width: 640px) {

  .lightbox-content .lightbox-img { width: 100%; }
  
 
}

/*
========= Zoom Picture =================*/

.warper-zoom {
  position: fixed ;
  top: 0;
  left: 0;
  right: 0;
  max-width : 100%;
  height: 100%; 
  background-color: #000;
  display: none;
}

.zoom {
  max-width: 100%;
  height: 400px;
  margin: 10% 20px 0px;
  overflow: scroll;
  background-color: #fff;
}

.txt-close {
  position: relative;
}

.txt-close p{
  position: fixed;
  top: 5px;
  right: 25px;
  z-index: 1000;
  cursor: pointer;
}

.zoom p.close img { padding: 20px; }

.hide-important { display: none !important; }