table img {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

table img:hover {opacity: 0.7;}



/* The Modal (background) */
.modasl {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
 border: #269abc 2px solid;
border-radius: 10px;
left: 40%;

  top:20%;

  width: max-content;
  height: max-content;
 text-align: center;
  overflow: auto; /* Enable scroll if needed */
margin: 0;
box-sizing: border-box;
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 600px;
z-index: -1;
 text-align: center;
 padding: 30px
}




/* The Close Button */
.close {
position:absolute;right: 30px;  display:block; background:url(../images/controls.png) no-repeat top center;
width:58px; height:29px;z-index: 2;text-indent: -9999px;
}

.close:hover,
.close:focus {
 background-position:bottom center;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}