
/* The Modal (background) */
.modal-overlay {
  top: 0;
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black background with opacity */
  z-index: 5551; /* Specify a stack order in case you're using a different order for other elements */
  overflow: auto; /* Enable scroll if needed */
}


/* Modal Content (image) */
.modal-content {
  margin: auto;
  width: 70%;
  max-width: 1200px;
}

/* Caption of Modal Image */
/* #caption_1234567 { */
  /* margin: auto; */
  /* display: flex; */
  /* width: 70%; */
  /* max-width: 1200px; */
  /* text-align: center; */
  /* color: #ccc; */
  /* padding: 10px 0; */
  /* height: 150px; */
/* } */

/* Add Animation */
/* .modal-content, #caption_1234567 {   */
  /* animation-name: zoom; */
  /* animation-duration: 0.6s; */
/* } */

@keyframes zoom {
  from {transform: scale(0.1)}
  to {transform: scale(1)}
}

/* The Close Button */
.overlay_close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.overlay_close:hover,
.overlay_close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
