.modal {
			  display: none;
			  position: fixed;
			  z-index: 30;
			  left: 0;
			  top: 0;
			  overflow: auto;
			  background-color: white;
			}

			.modal-content {
			  display:flex;
			  justify-content: center;
			  align-items: center;
			  height: 100%; 
			  border-radius: 0px;
			  border: none;

			}

			.close {
			  color: black;
			  position: absolute;
			  top: 10px;
			  right: 25px;
			  font-size: 35px;
			  font-weight: bold;
			  z-index: 31;
			}

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

			.mySlides {
			  display: none;
			  margin: auto;
			  width: auto;
			  height: auto;
			}

			.cursor {
			  cursor: pointer;
			}

			.prev,
			.next {
			  cursor: pointer;
			  position: absolute;
			  top: 50%;
			  width: auto;
			  padding: 16px;
			  margin-top: -20px;
			  color: black;
			  font-weight: bold;
			  font-size: 20px;
			  transition: 0.6s ease;
			  border-radius: 0 3px 3px 0;
			  user-select: none;
			  -webkit-user-select: none;
			}

			.next {
			  right: 0;
			  border-radius: 3px 0 0 3px;
			}

			.prev {
				left: 0;
			}

			.prev:hover,
			.next:hover {
			  background-color: rgba(0, 0, 0, 0.8);
			}

			.numbertext {
			  color: #000;
			  font-size: 12px;
			  padding: 8px 12px;
			  text-align: center;
			}

			.caption-container {
			  text-align: center;
			  background-color: black;
			  padding: 2px 16px;
			  color: white;
			}

			.demo {
			  opacity: 0.6;
			}

			.active,
			.demo:hover {
			  opacity: 1;
			}

			.thumbnail:hover {
			border-color: #000000;
			cursor: pointer;
			opacity: 0.6;
			}

			.gallery {
				padding: 5px;
			}

			.thumbnail {
				margin: 5px;
				margin-bottom: 10px;
			}

			.gallery img {
			width: 100%;
			height: auto;
			}

			img {
				box-shadow: 
			}

			@media only screen and (max-width: 768px) {
				.next, .prev {
			  		color: orange;
				}				}
			}