/* Style the Image Used to Trigger the Modal */

.popupImage {

border-radius: 5px;

cursor: pointer;

transition: 0.3s;

}
.popupImage:hover {opacity: 0.7;}
/* The Modal (background) */

.modal-Image {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 9999; /* 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-Image .modal-content {

margin: auto;

display: block;

width: 95%;

max-width: 1200px;

}
/* Caption of Modal Image (Image Text) - Same Width as the Image */

.modal-Image #caption {

margin: auto;

display: block;

width: 95%;

max-width: 1200px;

text-align: center;

color: #ccc;

padding: 10px 0;

height: 150px;

}
/* Add Animation - Zoom in the Modal */

.modal-Image .modal-content, .modal-Image #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 */

.modal-Image .close {

position: absolute;

top: 15px;

right: 35px;

color: #f1f1f1;

font-size: 40px;

font-weight: bold;

transition: 0.3s;

}
.modal-Image .close:hover,

.modal-Image .close:focus {

color: #bbb;

text-decoration: none;

cursor: pointer;

}
/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 1200px){

.modal-Image .modal-content {

width: 100%;

}

}