/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  padding: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100vw; /* Full width */
  height: 100vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(255, 255, 255); /* Fallback color */
  justify-content: space-between;
  text-align: justify-all;
  align-content: center;
  /* background-color: rgba(255,255,255,0.9); */ /* White w/ opacity */
}
/* Modal Content (Image) */
#modalBox {
  margin: 0 auto;
  display: block;
  width: 90vw;
}
#modalImageContainer {
	display: block;
	margin: 0 auto;
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;
}
#modalImageWrapper {
	width: max-content;
	height: max-content;
	margin: 0 auto;
/*	user-select: none; */
/*	cursor: grab; */
}
.modalContent {
  display: block;
  max-height: 90vh;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
	pointer-events: none;
/*	user-select: none; */
  /*	max-height:70%; */
  /*	object-fit: contain; */
}
.modalContent.landscape {
  display: block;
  max-height: 100%;
  max-width: 90vw;
  width: 100%;
  margin: auto 0;
	pointer-events: none;
/*	user-select: none; */
  /*	max-height:70%; */
  /*	object-fit: contain; */
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#modalCaption {
  margin: 0 auto;
  display: block;
  max-width: 100%;
  height: auto;
  text-align: left;
  color: black;
  padding: 10px 0;
  background: white;
}
#modalNavigation {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  text-align: justify-all;
  color: black;
  /*	font-size: 127%;
	font-weight: bold; */
}
.modalBreak {
  flex-basis: 100%;
  height: 0;
}
/* Add Animation - Zoom in the Modal */
.modalContent, #modalCaption {
  animation-name: zoom;
  animation-duration: 0.6s;
}
@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
/* The Close Button */
#modalClose, #modalIndex, #modalEmpty {
  justify-content: space-between;
  /*  top: 15px;
  right: 35px; */
  transition: 0.3s;
}
#modalNext, #modalPrevious {
  margin: 0;
  position: relative;
  width: 20px;
  padding: 0 10px;
}
#modalNextIcon, #modalPreviousIcon {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#modalClose {
  font-size: 135%;
}
@media(hover: hover) and (pointer: fine) {
#modalClose:hover, #modalClose:focus, #modalClose:active, #modalNextIcon:hover, #modalNextIcon:focus, #modalNextIcon:active, #modalPreviousIcon:hover, #modalPreviousIcon:focus, #modalPreviousIcon:active {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
	}
/* 100% Image Width on Smaller Screens
@media only screen and (max-width: 900px) {
  .modalContent {
    width: 95vw;
  }
} */