#myImg, #myImg2 {
		  border-radius: 5px;
		  cursor: pointer;
		  transition: 0.3s;
		}
		
		#myImg:hover {opacity: 0.7;}
		#myImg2:hover {opacity: 0.7;}

		.modal {
		  display: none;
		  position: fixed;
		  z-index: 1;
		  padding-top: 120px;
		  left: 0;
		  top: 0;
		  width: 100%; 
		  height: 100%; 
		  overflow: auto; /* Enable scroll if needed */
		  background-color: rgba(0, 0, 0, 0.64); /* Black w/ opacity */
		}

		.modal-content {
		  margin: auto;
		  display: block;
		  width: 80%;
		  max-width: 700px;
		}
		
		#caption {
		  margin: auto;
		  display: block;
		  width: 80%;
		  max-width: 700px;
		  text-align: center;
		  color: #ccc;
		  padding: 10px 0;
		}
		
		.modal-content, #caption {  
		  animation-name: zoom;
		  animation-duration: 0.6s;
		}
		
		@keyframes zoom {
		  from {transform: scale(0.1)} 
		  to {transform: scale(1)}
		}
		
		@media ( max-width :576px) {
			.close {
			  top: 65px;
			  right: 1px;
			}
		}
		@media ( min-width :576px){
			.close {
			  top: 85px;
			  right: 35px;
			}
		}
		.close {
		  position: absolute;
		  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%;
		  }
		}