/* (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;
  height: 40vh;
  border-radius: 10%;
  border: 6px solid #fff;
  box-shadow: 3px 3px 20px 3px #000;

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

/* (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: 60px; height: 60px; overflow: hidden; border-radius: 50%; border: 2px solid #fff;}

/* .zoomn {background-image: url("img/zoomnero.png"); background-repeat: no-repeat; top: 0px; right: 0px;}

.zoomb {background-image: url("img/zoombianco.png"); background-repeat: no-repeat; top: 0px; right: 0px;} */