/* (A) LIGHTBOX BACKGROUND */
#lightbox {
  /* (A1) COVERS FULLSCREEN */
  position: fixed; z-index: 999;
  /* top: 0; left: 0; */
  top: 0vh; left: 0vh; 
  width: 100vw; height: 100vh;

  /* (A2) BACKGROUND */
  background: rgba(0, 0, 0, 0.5);

  /* (A3) CENTER IMAGE ON SCREEN */
  display: flex;
  align-items: center;
  align-items: center;

  /* (A4) HIDDEN BY DEFAULT */
  visibility: hidden;
  opacity: 0;

  /* (A5) SHOW/HIDE ANIMATION */
  transition: opacity ease 0.4s;

}

/* (A6) TOGGLE VISIBILITY */
#lightbox.show {
  visibility: visible;
  opacity: 1;
}

/* (B) LIGHTBOX IMAGE */
#lightbox img {
  /* (B1) DIMENSIONS */
  align: center;
  width: auto;
  margin: 0 auto;
  border-radius: 5%;
  /* border: solid 4px #a39147;*/

  /* (B2) IMAGE FIT */
  /* contain | cover | fill | scale-down */
  object-fit: fill;
}

@media screen and (min-width: 600px) and (max-width: 900px) { #lightbox img {height: 55%;}}

@media screen and (min-width: 900px) { #lightbox img {height: 60%;}}

@media screen and (max-width: 600px) { #lightbox img {height: 70%;}}

/* (C) LIGHTBOX IMAGE - FULLSCREEN ALTERNATIVE *
#lightbox img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* (X) DOES NOT MATTER */
body {
  padding: 0;
  margin: 0;
}
* { box-sizing: border-box; }

.zoomD { cursor: pointer; display: inline-block; position: relative; width: 100px; height: 200px; overflow: hidden; border-radius: 20%; border: 1px solid #fff;}