.show {
  z-index: 1100;
  display: none;
  
}

.show .overlay {
  z-index: 1100;

  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.66);
  position: fixed; /* position fixed instead of absolute */
  top: 0;
  left: 0;
}

.show .img-show {
  z-index: 1100;

  width: 600px;
  height: 400px;
  background: #fff;
  position: fixed; /* position fixed instead of absolute */
  top: 50%; /* position at 50% from the top of the viewport */
  left: 50%; /* position at 50% from the left of the viewport */
  transform: translate(-50%, -50%); /* move the element up and left by half of its width and height */
  overflow: hidden;

}

.img-show span {
  z-index: 1120;
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.img-show img {
  z-index: 1100;

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

}
/*End style*/

@media only screen and (max-width: 600px) {
  .show .img-show {
    width: 90%;
    height: auto;
  }
}

@media only screen and (max-width: 600px) {
  .show .img-show {
    z-index: 1100;
  
    width: 90%;
    height:30%;
    background: #fff;
    position: fixed; /* position fixed instead of absolute */
    top: 50%; /* position at 50% from the top of the viewport */
    left: 50%; /* position at 50% from the left of the viewport */
    transform: translate(-50%, -50%); /* move the element up and left by half of its width and height */
    overflow: hidden;
  
  }
}