.modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  display: flex;
  flex-direction: column;
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: min(800px, 100% - 2rem);
  height: min(600px, 100% - 2rem);
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-img {
  height: 450px;
  width: 100%;
}

.modal-text {
  height: 100%;
  width: 100%;
padding: 50px!important;
	line-height: 28px!important;; 
	  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
	font-size: 20px !important;
	font-weight: bold;
text-align: center !important;
}

a.modal-link {
  color: maroon;
}