.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  display: block;
  margin-left: auto;
  margin-right: auto
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal, .modal1_1, .modal1_2, .modal2_1, .modal2_2, .modal3_1, .modal3_2, .modal4_1, .modal4_2, 
.modal5_1, .modal5_2, .modal1_1_av, .modal1_2_av, .modal2_1_av, .modal2_2_av, .modal3_1_av,
 .modal3_2_av, .modal4_1_av, .modal4_2_av, .modal5_1_av, .modal5_2_av, .modal6_1_av, .modal6_2_av {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* 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(255,255,255,0.9); /* Black w/ opacity */
}
.modalImg1_1, .modalImg1_2, .modalImg2_1, .modalImg2_2, .modalImg3_1,
 .modalImg3_2, .modalImg4_1, .modalImg4_2, .modalImg5_1, .modalImg5_2, .modalImg1_1_av, 
 .modalImg1_2_av, .modalImg2_1_av, .modalImg2_2_av, .modalImg3_1_av, .modalImg3_2_av, .modalImg4_1_av, .modalImg4_2_av, 
 .modalImg5_1_av, .modalImg5_2_av, 
 .modalImg6_1_av, .modalImg6_2_av {
  background-color: #d9dbdb;
  padding: 5px 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  height: auto;
}
.modalImg {
  padding: 5px 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  height: auto;
}
/* Modal Content (image) */
.modal-content1_1, .modal-content1_2,
 .modal-content2_1, .modal-content2_2, .modal-content3_1,
  .modal-content3_2, .modal-content4_1, .modal-content4_2, .modal-content5_1, .modal-content5_2, .modal-content1_1_av, 
  .modal-content1_2_av, .modal-content2_1_av, 
  .modal-content2_2_av, .modal-content3_1_av, 
  .modal-content3_2_av, .modal-content4_1_av, 
  .modal-content4_2_av, .modal-content5_1_av, 
  .modal-content5_2_av, .modal-content6_1_av, 
  .modal-content6_2_av {
  margin: auto;
  display: block;
  width: 90%;
  border-radius: 10px;
  //max-width: 75%;
}
.modal-content {
  margin: auto;
  display: block;
  width: 90%;
  box-shadow: none!important;
  border-radius: 10px;
  //max-width: 75%;
}
/* Caption of Modal Image */
#caption1, #caption1_1, #caption1_2, #caption2_1, #caption2_2, 
#caption3_1, #caption3_2, #caption4_1, #caption4_2, #caption5_1, #caption5_2, 
#caption1_1_av, #caption1_2_av, #caption2_1_av, #caption2_2_av, #caption3_1_av, 
#caption3_2_av, #caption4_1_av, #caption4_2_av, #caption5_1_av, #caption5_2_av, #caption6_1_av, #caption6_2_av {
  margin: auto;
  display: block;
  width: 90%;
  text-align: center;
  color: black;
  padding: 10px 0;
  /*height: 150px;*/
  margin-bottom: 20px;
}
.w3-dis-left {
  position:absolute;
  top:50%;
  left:25%;
  transform:translate(0%,-50%);
  -ms-transform:translate(-0%,-50%)
}
.w3-dis-right {
  position:absolute;
  top:50%;
  right:25%;
  transform:translate(0%,-50%);
  -ms-transform:translate(-0%,-50%)
}
.caption1, .caption1_1, .caption1_2, .caption2_1, .caption2_2, .caption3_1, .caption3_2, .caption4_1,
 .caption4_2, .caption5_1, .caption5_2, .caption1_1_av, .caption1_2_av, .caption2_1_av, .caption2_2_av, 
 .caption3_1_av, .caption3_2_av, 
 .caption4_1_av, .caption4_2_av, 
 .caption5_1_av, .caption5_2_av, 
 .caption6_1_av, .caption6_2_av {
  margin: auto;
  display: block;
  width: 90%;
  text-align: left;
  color: white;
  padding: 10px 0;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(1)}
  to {-webkit-transform:scale(2)}
}
 
@keyframes zoom {
  from {transform:scale(0.4)}
  to {transform:scale(1)}
}
@-webkit-keyframes zoom-out {
  from {transform:scale(1)}
  to {transform:scale(0)}
}
@keyframes zoom-out {
  from {transform:scale(1)}
  to {transform:scale(0)}
}
/* Add Animation */
.modal-content, #caption1, .modal-content1_1, #caption1_1,
 .modal-content1_2, #caption1_2, .modal-content2_1, #caption2_1,
  .modal-content2_2, #caption2_2, .modal-content3_1, #caption3_1, .modal-content3_2, #caption3_2,
   .modal-content4_1, #caption4_1, .modal-content4_2, #caption4_2,
    .modal-content5_1, #caption5_1, .modal-content5_2, #caption5_2, .modal-content1_1_av, #caption1_1_av, 
    .modal-content1_2_av, #caption1_2_av, .modal-content2_1_av, #caption2_1_av, .modal-content2_2_av, #caption2_2_av, 
    .modal-content3_1_av, #caption3_1_av, .modal-content3_2_av, #caption3_2_av, 
    .modal-content4_1_av, #caption4_1_av, .modal-content4_2_av, #caption4_2_av, 
    .modal-content5_1_av, #caption5_1_av, .modal-content5_2_av, #caption5_2_av, 
    .modal-content6_1_av, #caption6_1_av, .modal-content6_2_av, #caption6_2_av {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
.out {
  animation-name: zoom-out;
  animation-duration: 0.6s;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content, .modal-content1_1, .modal-content1_2, .modal-content2_1,
   .modal-content2_2, .modal-content3_1, .modal-content3_2, .modal-content4_1, .modal-content4_2,
    .modal-content5_1, .modal-content5_2, .modal-content1_1_av, .modal-content1_2_av, .modal-content2_1_av, .modal-content2_2_av, 
    .modal-content3_1_av, .modal-content3_2_av, 
    .modal-content4_1_av, .modal-content4_2_av, 
    .modal-content5_1_av, .modal-content5_2_av, 
    .modal-content6_1_av, .modal-content6_2_av {
      width: 100%;
  }
}