.thumbnails {
    width: 100%;
}

.thumbnails .thumbnail {
    display: inline-block;
    background-position: center;
    background-size: contain;
    position: relative;
    cursor: pointer;
    cursor: hand;
    background-color: #000;
    background-repeat: no-repeat;
}

.thumbnails .thumbnail .caption {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.5);
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    max-height: 60px;
    overflow: auto;
}

.thumbnails .thumbnail:hover > .caption {
    background-color: rgba(0,0,0,0.8);
    color: rgba(255,255,255,0.8);
}

.thumbnails-lightbox {
    padding: 0 !important;
    /*max-width: none;*/
    width: auto;
    position: relative;
}

.thumbnails-lightbox img {
    width: 100%;
}

.thumbnails-lightbox .caption {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.5);
    padding: 5px;
}

.thumbnails-lightbox:hover > .caption {
    background-color: rgba(0,0,0,0.8);
    color: rgba(255,255,255,0.8);
}

@media only screen and (min-width: 901px) {
    .thumbnails .thumbnail {
        width: 32%;
        padding-bottom: 18.7%;
        margin-right: 2%;
    }
    .thumbnails .thumbnail:nth-child(3n) {
        margin-right: 0%;
    }
}


@media only screen and (min-width: 601px) and (max-width: 900px) {
    .thumbnails .thumbnail {
        width: 49%;
        padding-bottom: 27.6%;
        margin-right: 2%;
    }
    .thumbnails .thumbnail:nth-child(2n) {
        margin-right: 0%;
    }
}

@media only screen and (max-width: 600px) {
    .thumbnails .thumbnail {
        display: block;
        max-width: 300px;
        width: 100%;
        padding-bottom: 56.25%;
        margin-left: auto;
        margin-right: auto;
    }
}