.modal {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: rgba(0,0,0,0.2);
  width: 100%;
  height: 100%;
  margin: auto;
  cursor: pointer;
}

/* Modal Content (image) */
.modal-content {
  display: block;
  background-color: #ffff;
  width: 80%;
  height: auto;
  max-width: 700px;
  margin: 100px auto;
  padding: 15px;
  border-radius: 8px;

  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.4s;
  animation-name: zoom;
  animation-duration: 0.4s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0.8); transform:scale(0.8)}
  to {-webkit-transform:scale(1); transform:scale(1)}
}

@keyframes zoom {
  from {-webkit-transform:scale(0.8); transform:scale(0.8)}
  to {-webkit-transform:scale(1); transform:scale(1)}
}


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

}