#myImg {cursor: pointer;transition: 0.3s;margin-bottom: 5px;}
#myImg:hover {opacity: 0.7;} 
.modal {display: none;position: fixed;z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.9);z-index:99999;}
.modal-content {margin: auto;display: block;width: 80%;max-width: 500px;}
#caption {margin: auto;display: block;width: 80%;max-width: 500px;text-align: center;color: #ccc;padding: 10px 0;height: 150px;}
.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)}
}

.close {position: absolute;top: 15px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;opacity:1;}
.close:hover, .close:focus {color: #bbb;text-decoration: none;cursor: pointer;}
@media only screen and (max-width: 700px){
    .modal-content {width: 100%;}
}