.modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  padding-top: 5%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
 max-width: 100%; /* Optional: Limit the modal width */
  max-height: 100%; /* Ensure it doesn't exceed the viewport */
}

.no-scroll {
  overflow: hidden;
}

.modalwrap{
	justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-content {
  margin: auto;
  display: flex;
  width: 80%;
  max-width: 800px;
  min-width: 200px;
  margin-top: 3%;
   max-height: 90vh;
     overflow-y: auto;
}

#gallery-modal{
}

.closeside{
	display: flex;
  margin: 0 auto;
  flex-direction: row;
  position: relative;
  right: -95%;
  padding-bottom: 41%;
  justify-content: flex-start;
  bottom: 5%;

}

.modal-header{
	color: #fff;
  font-family: Instrument Sans;
  display: flex;
  flex-direction: row;
	justify-content: center; 
	padding-top: 3%;
}

#modal-description{
	max-width: 40%;
}

.modal-header h2{
	font-size: 400%;
  margin: 0;
 text-align: right;
 max-width: 23%;
}

.modal-header> p{
padding-top: 1%;
max-width: 40%;
}

.modspace{
	width: 12%;
}

.modcont{
	flex-direction: row;
  display: flex;
  justify-content: center;
  width: 67%;
  margin-bottom: 15%;
}

.close {
color: white;
  cursor: pointer;
  font-size: 60px;
  z-index: 10;
 
  position: relative;
}

.modcon{
	display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 69%;
  align-items: center;
  margin-left: -7%;	
}

.modconbox{
	display: block;
	height: 5%;
}

.prev, .next {
   cursor: pointer;
  width: auto;
  color: white;
  font-weight: 100%;
  font-size: 51px;
  user-select: none;
  font-family: "Instrument Sans";
  padding-top: 2%;
  z-index: 100;
}

.prev {
  left: -10%;
  padding-top:2.3%;
}

.next {
  right: -10%;
}

.prev:hover, .next:hover {
  
}

.hidden{
 display: none;
}

.hidden:first-child{
	display: none;
	padding-right: 2%;
}