#myImg, #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 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover, #myImg1:hover, #myImg2:hover, #myImg3:hover, #myImg4:hover,
#myImg5:hover, #myImg6:hover, #myImg7:hover, #myImg8:hover,
 #myImg8:hover, #myImg9:hover, #myImg10:hover, #myImg11:hover,
  #myImg12:hover, #myImg13:hover, #myImg14:hover, #myImg15: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{opacity: 0.7;}

/* The Modal (background) */
.modal{  
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 360px; /* 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: 100%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

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

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

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

/* The Close Button */


.close:hover, .close1:hover, .close2:hover, .close3:hover, .close4:hover, .close5:hover,
 .close6:hover, .close7:hover, .close8:hover, .close9:hover, .close10:hover, .close11:hover,
  .close12:hover, .close13:hover, .close14:hover, .close15:hover, .close16:hover, .close17:hover,
   .close18:hover, .close19:hover, .close20:hover, .close21:hover, .close22:hover, .close23:hover, .close24:hover, .close25:hover,
    .close26:hover,
    .close27:hover, .close28:hover, .close29:hover, .close30:hover, .close31:hover, .close32:hover, .close33,
     .close34:hover, .close35:hover, .close36:hover,
     .close37:hover, .close38:hover, .close39:hover, .close40:hover, .close41:hover, .close42:hover
.close:focus, .close1:focus, .close2:focus, .close3:focus, .close4:focus, .close5:focus,
 .close6:focus, .close7:focus, .close8:focus, .close9:focus, .close10:focus, .close11:focus,
  .close12:focus, .close13:focus, .close14:focus, .close15:focus, .close16:focus, .close17:focus,
   .close18:focus, .close19:focus, .close20:focus, .close21:focus, .close22:focus, .close23:focus, .close24:focus, .close25:focus,
    .close26:focus,
    .close27:focus, .close28:focus, .close29:focus, .close30:focus, .close31:focus, .close32:focus, .close33:focus, 
    .close34:focus, .close35:focus, .close36:focus,
     .close37:focus, .close38:focus, .close39:focus, .close40:focus, .close41:focus, .close42:focus 
       {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.close, .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 {
    position: absolute;
   /* top: 15px;
    right: 35px;*/
	 top: 5px;
    right: 15px;
    color: #fff;
   /* font-size: 40px;*/
    font-size: 30px;
    font-weight: bold;
    transition: 0.3s;
    color: #bbb;
    opacity: 1;
    z-index: 1;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 90%;
        margin: 0 auto;
    }
}