/* The Modal/Popup */
    .modal {
	  display: none;
	  position: fixed;
	  z-index: 9999;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.9);
	  overflow: auto; /* Allow the modal itself to scroll */
	}

	.modal-content {
	  position: relative;
	  margin: auto;
	  display: none; /* Hide images initially */
	  width: 100%;
	  max-width: 850px;
	  margin-top: 5%;
	  margin-bottom: 5%;
	  background-color: white; /* Optional background */
	  max-height: 90%; /* Ensure modal content doesn't overflow screen */
	  overflow-y: auto; /* Allow scrolling of the content */
	  box-sizing: border-box; /* Include padding in height calculation */
	}

	.modal-content img {
	  width: 100%;
	  height: auto; /* Ensure the image scales appropriately */
	}
	.modal-div {
		color:#ffffff;
		font-size:1.2em;
		margin-top: 1%;
		margin-bottom: 5%;
	}
	.modal-div a {
		color:#ffffff;
		text-decoration:none;
	}
	.modal-div a:hover {
		text-decoration:underline;
		color:#ded9c2;
	}


    /* Close button */
    .close {
      position: absolute;
      top: 30px;
      right: 25px;
      color: white;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }

    /* Slideshow controls */
    .prev, .next {
      position: absolute;
      top: 50%;
      padding: 10px;
      background-color: rgba(0,0,0,0.8);
      color: white;
      font-size: 24px;
      border: none;
      cursor: pointer;
      border-radius: 50%; /* This makes the buttons circular */
      width: 50px; /* Adjust the width */
      height: 50px; /* Adjust the height */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }

    .prev {
      left: 10px;
    }

    .next {
      right: 10px;
    }

    .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.6);
    }
	
	
	@media (max-width: 768px) {
		.modal-content {
			margin-top:10%;
			margin-bottom:10%;
		}
		.modal-content {
		max-width: 600px;
		}
		.modal-div {
		font-size:0.9em;
		margin-left: 2%;
		margin-right: 2%;
		}
	}