html, body {
    max-width: 100%;
    overflow-x: hidden;
	background-color: #dddddd;
}

.title {
	text-align: center;
	color: #000000;
	font-size: 50px; 
	font-family: indie flower,cursive; /*Courier;*/
}
.bottomtext {
	text-align: center;
	color: #333333;
	font-size: 24px; 
	font-family: Courier;
}
.pages {
	text-align: center;
	color: #000000;
	font-size: 50px; 
	font-family: Courier;
}
.currentPage {
	text-align: center;
	color: #000000;
	font-size: 65px; 
	font-family: Courier;
}

.photo-grid-box
{
	position:relative;
	width:100%;
	margin:0px auto;
	background-color:#dddddd;
}

.photo-grid-box .photo-block
{
	display:inline-block;
	position:absolute;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50%
}

.photo-grid-box .photo-block--clickable
{
	cursor:pointer;
}

.photo-grid-box .photo-block__panel
{
	position:relative;
	width:100%;
	height:100%;
	opacity:0;
	-webkit-transition:opacity .3s;
	transition:opacity .3s;
	overflow:hidden;
}

.photo-grid-box .photo-block:hover .photo-block__panel
{
	opacity:1;
}




#div_zoomimg_wait {
	position: fixed; z-index: 888;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
    margin: 0 auto;
	visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	
	display: flex;
	opacity: 0.0;
	transition: opacity ease 0.4s;
}
#div_zoomimg_wait.show {
	opacity: 1;
	visibility: visible;
}
.img_zoomimg_wait {
    width:10%;
    z-index:12;
    margin: 0 auto;
}



/* (A) LIGHTBOX BACKGROUND */
#lightbox {
  /* (A1) COVERS FULLSCREEN */
  position: fixed; z-index: 998;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
 
  /* (A2) BACKGROUND */
  background: rgba(0, 0, 0, 0.5);
 
  /* (A3) CENTER IMAGE ON SCREEN */
  display: flex;
  align-items: center;
 
  /* (A4) HIDDEN BY DEFAULT */
  visibility: hidden;
  opacity: 0;
 
  /* (A5) SHOW/HIDE ANIMATION */
  transition: opacity ease 0.6s;
}
 
/* (A6) TOGGLE VISIBILITY */
#lightbox.show {
  visibility: visible;
  opacity: 1;
}
 
/* (B) LIGHTBOX IMAGE */
#lightbox img {
  /* (B1) DIMENSIONS */
  width: 100%;
  height: auto;

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

#downloadBtn {
	z-index: 999;
	background-color=#338934;
	text-align: center;
	color: #ffffff;
    position: fixed;
	right: 0; top: 0;
	width: 8vh; height: 8vh;
	opacity: 0;
	visibility: hidden;
	cursor:pointer;
}
#downloadBtn.show {
  visibility: visible;
  opacity: 1;
}
/* (C) LIGHTBOX IMAGE - FULLSCREEN ALTERNATIVE *
#lightbox img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
*/