/* Header */

/* "Skip to content" link (header.php): hidden until focused with the keyboard */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    clip: auto !important;
    clip-path: none;
    color: #1f2732;
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 12px 24px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/*
 * "Talk to Us" button in the scrolled (white) header.
 * styles.css draws a 1px border here, but the button's animated white layer (:before, z-index 1 + transform)
 * can end up a sub-pixel over the top edge and hide it until the button is repainted on hover.
 * Draw the line as an outline instead: outlines paint above the button's own layers.
 * The transparent border keeps the button exactly the same size.
 */
.header-style1.scrollHeader .attr-nav > ul > li > a.btn-style1 {
    border: 1px solid transparent;
    outline: 1px solid #1d1d1d;
    outline-offset: -1px;
    isolation: isolate;
}