.modal {
     display: none;
     position: fixed;
     z-index: 999;
     padding-top: 100px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: black;
 }

 /* Modal Content */
 .modal-content {
     position: relative;
     background-color: #fefefe;
     margin: auto;
     padding: 0;
     width: 60% !important;
     max-width: 1200px;
 }

 /* The Close Button */
 .close {
     color: white;
     position: absolute;
     top: 50px;
     right: 265px;
     font-size: 35px;
     font-weight: bold;
 }

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

 .mySlides {
     display: none;
 }

 .cursor {
     cursor: pointer;
 }

 /* Next & previous buttons */
 .prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     padding: 16px;
     margin-top: -50px;
     background: #fff;
     font-weight: bold;
     font-size: 20px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     user-select: none;
     -webkit-user-select: none;
 }

 .mySlides a svg path {
     fill: #fff;
 }

 /* Position the "next button" to the right */
 .next {
     right: 0;
     border-radius: 3px 0 0 3px;
 }

 /* On hover, add a black background color with a little bit see-through */
 .prev:hover,
 .next:hover {
     background-color: rgba(0, 0, 0, 0.8);

 }

 .prev:hover svg path,
 .next:hover svg path {
     fill: #fff;
 }

 /* Number text (1/3 etc) */
 .numbertext {
     color: #f2f2f2;
     font-size: 12px;
     padding: 8px 12px;
     position: absolute;
     top: 0;
 }

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

 .demo {
     opacity: 0.6;
 }

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

 .hover-shadow:hover {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

 .mySlides img {
     height: 500px;
     object-fit: cover;
 }