/* [IMAGE] */
.zoomD {
  width: 600px;
  height: auto;
  cursor: pointer;
  
}

/* [LIGHTBOX BACKGROUND] */
#lb-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all ease 0.5s;
  
}
#lb-back.show {
  visibility: visible;
  opacity: 1;
}

/* [LIGHTBOX IMAGE] */
#lb-img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
#lb-img img {
  /* You might want to play around with 
     width, height, max-width, max-height
     to fit portrait / landscape pictures properly. */
  width: 100%;
  height: auto;
  
  /* ALTERNATE EXAMPLE
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto; */
}

/* [DOES NOT MATTER] */
html, body {
  padding: 0;
  margin: 0;
}