/* container to keep correct margins on page as images float */
#gallery {
    margin:0 0 0 -15px;
    box-sizing: border-box;
}

/* Small image and title container */
div.img {
    margin:0 0 15px 15px;
    float: left;
    width: 137px;
}

/* The Image */
div.img img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border:1px solid #666666;
    transition:0.2s;
}

div.img img:hover {box-shadow:0px 0px 6px 6px rgba(0,0,0,0.4)}

/* Description of Image */
div.desc {
    padding:0;
    text-align: center;
    height:50px;
    font-size:14px;
    line-height:18px;
}

/* Long description (div acts as holder for formatted modal caption) */

.longtext {
   display:none;
}

/* Modal background */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 0; /* Location of box, set to something like 80px if no static text is above it */
    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 */
    box-sizing: border-box;
}

/* Modal image */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 452px;
    border:1px solid #cccccc;
}

/* Modal caption */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 452px;
    font-size:14px;
    line-height:20px;
    text-align:justify;
    color: #eee;
    padding: 15px 0 80px 0;
}

/* Add Animation */
/* Incluse .close only if text is non-clickable info */
.modal-content, #caption, .close {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

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

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

/* The Close Button (this version is non-clickable, shows info only) */
.close {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 452px;
    font-size:13px;
    line-height:20px;
    text-align:center;
    color: #eee;
    padding: 40px 0 15px 0;
}

/* Previous version, click text to close */
/*.close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #cccccc;
    font-size: 20px;
    font-weight: normal;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
} */

/* Adjust spacing of images for larger screens, match min-width to the one in style.css */

@media all and (min-width: 700px) {
   #gallery     {margin:15px 0 0 -25px}
   div.img      {margin-left:25px}
   #caption     {padding-bottom:10px}
}