/* LAST UPDATED: 03.15.2024 - SM */


.skip-link {
    background-color: var(--primary-color);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
        -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    color: var(--primary-neutral-light);
    display: block;
    font-family: var(--primary-font-family);
    font-size: 0.77em;
    font-weight: 700;
    height: auto;
    left: 6px;
    line-height: normal;
    padding: 15px 23px 14px;
    position: absolute;
    text-decoration: none;
    top: -100px;
    transition: top .75s ease-out;
        -webkit-transition: top .75s ease-out;
    width: auto;
    z-index: 100000;
}

.skip-link:focus,
.skip-link:hover {
    background-color: var(--primary-color);
    color: var(--primary-neutral-light);
    top: 7px;
    text-decoration: underline;
    transition: top 0s;
        -webkit-transition: top 0s;
}

/* There are two screen reader classes in use... */
.screen-reader-text,
.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
}

.screen-reader-text:focus,
.sr-only:focus {
    background-color: var(--primary-color);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
        -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto;
    color: var(--primary-neutral-light);
    display: block;
    font-size: 0.77em;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: underline;
    top: 5px;
    width: auto;
    z-index: 100000;
}