figcaption {
    letter-spacing: 2px;
    top: 15%; right: 0;
    width: 80%;
    /* transform: translateX(-50%); */
}
    figcaption h1 { color: #FFF; }
    figcaption h4 { color: #FFF; }

    figcaption::after {
        clear: both;
        content: "";
        display: table;
    }
        @media (min-width: 768px) {
            figcaption h1 { font-size: 4.5rem; }
            figcaption h4 { font-size: 2.0rem; }
        }


#portfolio-page h2 {
    background-color: #0054a6;
}



.gallery .thumbnail {
    width: 100%; height: auto;
    overflow: hidden;
    border: 7px #FFF solid;
    border-radius: 0.25rem;
    box-shadow: 5px 5px 8px #CCC;
}
.gallery img {
    width: 100%; height: auto;
}
    @media (min-width: 576px) {
        .gallery .thumbnail { max-height: 168px; }
    }

    @media (min-width: 768px) {
        .gallery .thumbnail { max-height: 147px; }
    }
  
    @media (min-width: 992px) {
        .gallery .thumbnail { max-height: 205px; }
    }
  
    @media (min-width: 1200px) {
        .gallery .thumbnail { max-height: 262px; }
    }

    .gallery .filters .button {
        margin: 5px;
        background-color: #0054a6;
        color: #FFF;
    }
    .gallery .filters .button.is-checked {
        background-color: #ffde00;
        color: #636466;
    }
    .btn.focus, .btn:focus {
        outline: 0;
        box-shadow: 0 0 0 0.1rem rgba(151, 142, 85, 0.25);
    }
    @media (max-width: 767px) {
        .gallery [class*="col-"]:nth-child(odd) {
            padding-right: 5px; padding-left: 10px;
        }
        .gallery [class*="col-"]:nth-child(even) {
            padding-right: 10px; padding-left: 5px;
        }
    }