.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
/* Modal Styling */
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0a0a0a;
    padding: 2% 2.5%;
    border-radius: 0.25rem;
    color:#FFF;
    border-color:#E91C2D;
    border-style:solid;
    border-width:2px;
}
.close-button {
    float: right;
    width: 2.0rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: transparent;
    color:#FFF;
    font-size:2.5em;
}
.close-button:hover {
    color:#E91C2D;
    font-size:2.7em;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    z-index:15;
}
/* End of modal Styling */

#gallery{   /* Gallery container */
	display: -webkit-flex;
	display:flex;
	flex-wrap:wrap;
    margin:auto;
    max-width:100%;
	align-items:center;
	/* overflow:hidden; */
	/* height:245px; */
    z-index:1;
    justify-content:center;
}
#album{   /*  Picture styling */
    max-width:245px;
    max-height:245px;
    width:100%;
    height:100%;
    position:relative;
    display:block;
    margin:0 auto;
    z-index:2;
	cursor:pointer;
    transition: transform .2s;
}
#album:hover{   /*  Picture styling transformation on hover*/
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
.col{   /*  Picture container */
    /*float:left;*/
    max-width:245px;
    max-height:245px;
    width:100%;
    height:100%;
    position:relative;
    background-color:transparent;
    padding:2px;
    margin:2px;
    z-index:1;
	vertical-align:middle;
}