.modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
}

.modal-content { 
        animation-name: zoom;
        animation-duration: 0.6s;
}

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

#img-viewer {
        display: none;
        position: fixed;
        z-index: 1000;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
}

#img-viewer .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
}

#img-viewer .close:hover{
        cursor: pointer;
}

@media only screen and (max-width: 700px){
        .modal-content {
                width: 100%;
        }
}

.img-container{
        position:relative;
        width:300px;
}
.img-source{
        border:5px solid #ccc;
        border-radius:5px;
        width: 100%;
}
.expand-icon{
        position:absolute; 
        right:10px; 
        top:15px; 
        cursor:pointer;
}