body.us a#us {
    color: rgb(0, 58, 71);
}

/* 
    Us 
*/

body.us  {
    background-color: rgb(0,173,238);
    color: rgb(0, 58, 71);
}

.us-container {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;

    width: 100%;
}

article.us-bio {
    float: left;
    width: calc((100% - 24px) / 2.0);
    height: auto;
    color: white;
}

figure.us-mugshot {
    width: 216px;
    height: 233px;
    overflow: hidden;
    position: relative; /* Allows us to superimpose the caption on the image. */
    background-color: rgb(0, 173, 238); /* Needed so mix-blend-mode will work on Chrome. */
}

figure.us-mugshot img {
    position: relative;
    font-size: 0; /* Prevents alt text from appearing before image loads. */
    mix-blend-mode: multiply;
}

figure.us-mugshot figcaption {
    position: absolute; /* Requires enclosing element to use relative positioning. */
    width: inherit;
    height: inherit;
    top: 0;
    padding: 12px;
    font-size: 0px;
    text-transform: uppercase;
}

figure.us-mugshot figcaption:hover {
    font-size: 38px;
    background: repeating-linear-gradient(to right bottom, rgba(255, 76, 222, 0.6) 0px, rgba(255, 76, 222, 0.6) 20px, rgba(255, 76, 222, 0.0) 21px, rgba(255, 76, 222, 0.0) 51px, rgba(255, 76, 222, 0.6) 52px, rgba(255, 76, 222, 0.6) 62px);
}

article.us-bio:first-child figure.us-mugshot figcaption:hover {
    background: repeating-linear-gradient(to right bottom, rgba(255, 213, 0, 0.5) 0px, rgba(255, 213, 0, 0.5) 20px, rgba(255, 213, 0, 0.0) 21px, rgba(255, 213, 0, 0.0) 51px, rgba(255, 213, 0, 0.5) 52px, rgba(255, 213, 0, 0.5) 62px);
}


article.us-bio h2 {    
    font-style: italic;
    font-weight: 500;
    margin: 12px 0px;
    font-size: 18px;
    text-transform: uppercase;
}

@media (max-width: 486px) {
    
    article.us-bio {
        width: 100%;
        margin-bottom: 24px;
    }
}