/* (A) FULL PAGE OVERLAY */
#owrap {
  /* (A1) COVER ENTIRE SCREEN */
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; z-index: 998;
  background: #000;
  
  /* (A2) HIDE OVERLAY BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s;
}

/* (A3) TOGGLE OPEN OVERLAY */
#owrap.show { opacity: 1; visibility: visible; }

/* (B) OVERLAY CONTENT */
#ocontent {
  /* (B1) CENTER ON SCREEN */
  z-index: 999;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 100%;
  
  /* (B2) DIMENSIONS */
  box-sizing: border-box; padding: 10px;
 /* min-width: 300px; max-width: 400px;*/
  
  /* (B3) COSMETICS */
  background: #000; text-align: center;
}

#ocontent::before {
	content: '';
	width: 100%;
	height: 100%;
	background: #0000000d;
	position: absolute;
}

/* (C) OVERLAY CLOSE */
#oclose {
  /* (C1) POSITION TOP RIGHT CORNER */
  position: absolute;
  top: 10px; right: 25px;
  background-color: #fff;

  /* (C2) COSMETICS FONT SIZE */
 font-size: 22px; color: #ce0909; cursor: pointer; width: 32px; height: 32px; line-height: 25px; border-radius: 50%; padding: 5px; font-family: arial; z-index: 999999999;text-align:center;
}

/* (D) FULL PAGE "NO GAPS" */
html, body { padding: 0; margin: 0; }

/* (X) DOES NOT MATTER */