/* Style the Image Used to Trigger the Modal */
#myImg0 , #myImg1 , #myImg2 , #myImg3 , #myImg4 , #myImg5 , #myImg6 , #myImg7 , #myImg8 , #myImg9 , #myImg10 , #myImg11 , #myImg12 , #myImg13 , #myImg14 , #myImg15 , #myImg16 , #myImg17 , #myImg18 , #myImg19 , #myImg20 , #myImg21 , #myImg22 , #myImg23 , #myImg24 , #myImg25 , #myImg26 , #myImg27 , #myImg28 , #myImg29 , #myImg30 , #myImg31 , #myImg32 , #myImg33 , #myImg34 , #myImg35 , #myImg36 , #myImg37 , #myImg38 , #myImg39 , #myImg40 , #myImg41 , #myImg42 , #myImg43 , #myImg44 , #myImg45 , #myImg46 , #myImg47 , #myImg48 , #myImg49 , #myImg50 , #myImg51 , #myImg52 , #myImg53 , #myImg54 , #myImg55 , #myImg56 , #myImg57 , #myImg58 , #myImg59 , #myImg60 , #myImg61 , #myImg62 , #myImg63 , #myImg64 , #myImg65 , #myImg66 , #myImg67 , #myImg68 , #myImg69 , #myImg70 , #myImg71 , #myImg72 , #myImg73 , #myImg74 , #myImg75 , #myImg76 , #myImg77 , #myImg78 , #myImg79 , #myImg80 , #myImg81 , #myImg82 , #myImg83 , #myImg84 , #myImg85 , #myImg86 , #myImg87 , #myImg88 , #myImg89 , #myImg90 , #myImg91 , #myImg92 , #myImg93 , #myImg94 {
  cursor: pointer;
  transition: 0.3s;
}
#myImg0:hover , #myImg1:hover , #myImg2:hover , #myImg3:hover , #myImg4:hover , #myImg5:hover , #myImg6:hover , #myImg7:hover , #myImg8:hover , #myImg9:hover , #myImg10:hover , #myImg11:hover , #myImg12:hover , #myImg13:hover , #myImg14:hover , #myImg15:hover , #myImg16:hover , #myImg17:hover , #myImg18:hover , #myImg19:hover , #myImg20:hover , #myImg21:hover , #myImg22:hover , #myImg23:hover , #myImg24:hover , #myImg25:hover , #myImg26:hover , #myImg27:hover , #myImg28:hover , #myImg29:hover , #myImg30:hover , #myImg31:hover , #myImg32:hover , #myImg33:hover , #myImg34:hover , #myImg35:hover , #myImg36:hover , #myImg37:hover , #myImg38:hover , #myImg39:hover , #myImg40:hover , #myImg41:hover , #myImg42:hover , #myImg43:hover , #myImg44:hover , #myImg45:hover , #myImg46:hover , #myImg47:hover , #myImg48:hover , #myImg49:hover , #myImg50:hover , #myImg51:hover , #myImg52:hover , #myImg53:hover , #myImg54:hover , #myImg55:hover , #myImg56:hover , #myImg57:hover , #myImg58:hover , #myImg59:hover , #myImg60:hover , #myImg61:hover , #myImg62:hover , #myImg63:hover , #myImg64:hover , #myImg65:hover , #myImg66:hover , #myImg67:hover , #myImg68:hover , #myImg69:hover , #myImg70:hover , #myImg71:hover , #myImg72:hover , #myImg73:hover , #myImg74:hover , #myImg75:hover , #myImg76:hover , #myImg77:hover , #myImg78:hover , #myImg79:hover , #myImg80:hover , #myImg81:hover , #myImg82:hover , #myImg83:hover , #myImg84:hover , #myImg85:hover , #myImg86:hover , #myImg87:hover , #myImg88:hover , #myImg89:hover , #myImg90:hover , #myImg91:hover , #myImg92:hover , #myImg93:hover , #myImg94:hover  {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 4; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close0, .close1, .close2, .close3, .close4, .close5, .close6, .close7, .close8, .close9, .close10, .close11, .close12, .close13, .close14, .close15, .close16, .close17, .close18, .close19, .close20, .close21, .close22, .close23, .close24, .close25, .close26, .close27, .close28, .close29, .close30, .close31, .close32, .close33, .close34, .close35, .close36, .close37, .close38, .close39, .close40, .close41, .close42, .close43, .close44, .close45, .close46, .close47, .close48, .close49, .close50, .close51, .close52, .close53, .close54, .close55, .close56, .close57, .close58, .close59, .close60, .close61, .close62, .close63, .close64, .close65, .close66, .close67, .close68, .close69, .close70, .close71, .close72, .close73, .close74, .close75, .close76, .close77, .close78, .close79, .close80, .close81, .close82, .close83, .close84, .close85, .close86, .close87, .close88, .close89, .close90, .close91, .close92, .close93, .close94 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

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