/* Colors */

:root {
    --light-navy: #3A6F89;
    --navy: #094B6B;
    --dark-navy: #073C56;
    --light-teal: #45ABAB;
    --teal: #179696;
    --dark-teal: #127878;
    --light-magenta: #BD4576;
    --magenta: #AC1754;
    --dark-magenta: #8A1243;
    --light-purple: #976495;
    --purple: #7D3D7B;
    --dark-purple: #643162;
    --light-gold: #F5C875;
    --gold: #F2BA52;
    --dark-gold: #C29542;
    --light-green: #33A065;
    --green: #00883F;
    --dark-green: #006D32;
    --light-copper: #CF7939;
    --copper: #C35807;
    --dark-copper: #9C4606;
    --light-gray: #999999;
    --gray: #777777;
    --dark-gray: #555555;
    --silver: #F2F2F2;

    --navbar-desktop-height: 127px;
    --navbar-mobile-height: 10px;

    --custom-border-radius: 32px;

    --bs-body-color: var(--gray);

    --bs-primary-bg-subtle: var(--silver);
    --bs-primary-text-emphasis: var(--navy);

    --font-headings: "Montserrat", sans-serif;
    --font-body: "Open Sans", sans-serif;
}

.bg-navy {
    background-color: var(--navy);
}

.text-navy {
    color: var(--navy);
}

.bg-teal {
    background-color: var(--teal);
}

.text-teal {
    color: var(--teal);
}

.bg-magenta {
    background-color: var(--magenta);
}

.text-magenta {
    color: var(--magenta);
}

.bg-purple {
    background-color: var(--purple);
}

.text-purple {
    color: var(--purple);
}

.bg-gold {
    background-color: var(--gold);
}

.text-gold {
    color: var(--gold);
}

.bg-green {
    background-color: var(--green);
}

.text-green {
    color: var(--green);
}

.bg-copper {
    background-color: var(--copper);
}

.text-copper {
    color: var(--copper);
}

.bg-gray {
    background-color: var(--gray);
}

.text-gray {
    color: var(--gray);
}

.bg-silver {
    background-color: var(--silver);
}

.text-silver {
    color: var(--silver);
}


/* Fonts */

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--gray);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: var(--font-headings);
    font-weight: 400;
    color: var(--bs-black);
}

.display-1,
.display-2,
.display-3,
.display-4 {
    font-weight: 300;
}

#main_content a:not(.btn) {
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
}

#main_content a:not(.btn):hover,
#main_content a:not(.btn):focus,
#main_content a:not(.btn):target,
#main_content a:not(.btn):active {
    color: var(--light-navy);
    text-decoration: underline;
}

.eyebrow {
    font-family: var(--font-headings);
    color: var(--bs-black);
    position: relative;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: .5rem;
}

.eyebrow.text-gray {
    color: var(--gray);
}

.lead {
    font-weight: inherit;
}


/* Utilities */

.g-12px {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
}

.px-12px {
    padding-left: .75rem;
    padding-right: .75rem;
}

.font-12px {
    font-size: 12px;
}

.bg-ob-cover {
    width: 100% !important;
    height: 100% !important;
    -webkit-object-fit: cover !important;
    -moz-object-fit: cover !important;
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

.mt-n5 {
    margin-top: -3rem;
}

.lh-1 {
    line-height: 1;
}

.lh-125 {
    line-height: 1.25;
}

.unstyled-ul ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.unstyled-ul ul li {
    margin-bottom: .5rem;
    line-height: 1.15;
}

.unstyled-ul ul li a {
    display: block;
    margin: 0;
    padding: .1rem 0;
}

.no-last-p-margins p:last-child {
    margin-bottom: 0;
}

.no-last-ul-margins ul:last-child {
    margin-bottom: 0;
}

.no-last-margins *:last-child {
    margin-bottom: 0;
}


/* Navbar */

#main_navbar {
    background-color: var(--bs-white);
    padding: 12px 0;
    border-bottom: 1px solid var(--bs-gray-300);
    transition: all .3s ease;
}

#main_navbar .nav-link {
    font-weight: 700;
    color: var(--navy);
    padding: 16px;
    text-align: center;
}

#main_navbar .nav-link:hover,
#main_navbar .nav-link:focus,
#main_navbar .nav-link:target,
#main_navbar .nav-link:active {
    color: var(--light-navy);
}

a.navbar-brand {
    margin: 0;
    padding: 0;
    transition: all .3s ease;
}

.navbar-brand img {
    width: 250px;
    height: 102px;
    /* width: 182px;
    height: 75px; */
    transition: all .3s ease;
}

.btn-cta {
    width: 250px;
    transition: all .3s ease;
}

/* 
.navbar-brand img {
    width: 138px;
    height: 56px;
} */

@media (min-width: 1200px) {
    .navbar-scrolled .navbar-brand img {
        width: 182px;
        height: 75px;
    }

    .navbar-scrolled .btn-cta {
        width: 182px;
    }
}

@media (max-width: 1199.98px) {
    #main_navbar .nav-item {
        text-align: center;
    }

    .navbar-brand img {
        width: 185px;
        height: 75px;
        /* width: 160px;
        height: 65px; */
    }
}


/* Buttons */

.btn {
    font-weight: 700;
    padding: .75rem 1.5rem;
    border-radius: var(--custom-border-radius);
}

.btn .fa-external-link {
    font-size: 14px;
    vertical-align: top;
    margin-top: 5px;
    margin-left: 2px;
}

.btn-white {
    background-color: var(--bs-white);
    color: var(--navy);
    border: 2px var(--bs-border-style) var(--teal);
}

.btn-white:hover,
.btn-white:focus,
.btn-white:focus-visible,
.btn-white:target,
.btn-white:active,
.btn-white.active {
    background-color: var(--baby-navy) !important;
    color: var(--navy) !important;
    border: 2px var(--bs-border-style) var(--teal) !important;
}

.btn-outline-white {
    background-color: var(--transparent);
    color: var(--bs-white);
    border: 2px var(--bs-border-style) var(--bs-white);
}

.btn-outline-white:hover,
.btn-outline-white:focus,
.btn-outline-white:focus-visible,
.btn-outline-white:target,
.btn-outline-white:active,
.btn-outline-white.active {
    background-color: var(--bs-white) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--bs-white) !important;
}

.btn-navy {
    background-color: var(--navy);
    color: var(--bs-white);
    border: 2px var(--bs-border-style) var(--bs-white);
}

.btn-navy:hover,
.btn-navy:focus,
.btn-navy:focus-visible,
.btn-navy:target,
.btn-navy:active,
.btn-navy.active {
    background-color: var(--dark-navy) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--navy) !important;
}

.btn-outline-navy {
    background-color: var(--transparent);
    color: var(--navy);
    border: 2px var(--bs-border-style) var(--navy);
}

.btn-outline-navy:hover,
.btn-outline-navy:focus,
.btn-outline-navy:focus-visible,
.btn-outline-navy:target,
.btn-outline-navy:active,
.btn-outline-navy.active {
    background-color: var(--navy) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--navy) !important;
}

.btn-teal {
    background-color: var(--teal);
    color: var(--bs-white);
    border: 2px var(--bs-border-style) var(--teal);
}

.btn-teal:hover,
.btn-teal:focus,
.btn-teal:focus-visible,
.btn-teal:target,
.btn-teal:active,
.btn-teal.active {
    background-color: var(--light-teal) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--light-teal) !important;
}

.btn-outline-teal {
    background-color: var(--transparent);
    color: var(--teal);
    border: 2px var(--bs-border-style) var(--teal);
}

.btn-outline-teal:hover,
.btn-outline-teal:focus,
.btn-outline-teal:focus-visible,
.btn-outline-teal:target,
.btn-outline-teal:active,
.btn-outline-teal.active {
    background-color: var(--teal) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--teal) !important;
}

.btn-purple {
    background-color: var(--purple);
    color: var(--bs-white);
    border: 2px var(--bs-border-style) var(--purple);
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:focus-visible,
.btn-purple:target,
.btn-purple:active,
.btn-purple.active {
    background-color: var(--light-purple) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--light-purple) !important;
}

.btn-outline-purple {
    background-color: var(--transparent);
    color: var(--purple);
    border: 2px var(--bs-border-style) var(--purple);
}

.btn-outline-purple:hover,
.btn-outline-purple:focus,
.btn-outline-purple:focus-visible,
.btn-outline-purple:target,
.btn-outline-purple:active,
.btn-outline-purple.active {
    background-color: var(--purple) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--purple) !important;
}

.btn-magenta {
    background-color: var(--magenta);
    color: var(--bs-white);
    border: 2px var(--bs-border-style) var(--magenta);
}

.btn-magenta:hover,
.btn-magenta:focus,
.btn-magenta:focus-visible,
.btn-magenta:target,
.btn-magenta:active,
.btn-magenta.active {
    background-color: var(--light-magenta) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--light-magenta) !important;
}

.btn-outline-magenta {
    background-color: var(--transparent);
    color: var(--magenta);
    border: 2px var(--bs-border-style) var(--magenta);
}

.btn-outline-magenta:hover,
.btn-outline-magenta:focus,
.btn-outline-magenta:focus-visible,
.btn-outline-magenta:target,
.btn-outline-magenta:active,
.btn-outline-magenta.active {
    background-color: var(--magenta) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--magenta) !important;
}

.btn-gold {
    background-color: var(--gold);
    color: var(--navy);
    border: 2px var(--bs-border-style) var(--gold);
}

.btn-gold:hover,
.btn-gold:focus,
.btn-gold:focus-visible,
.btn-gold:target,
.btn-gold:active,
.btn-gold.active {
    background-color: var(--light-gold) !important;
    color: var(--navy) !important;
    border: 2px var(--bs-border-style) var(--light-gold) !important;
}

.btn-outline-gold {
    background-color: var(--transparent);
    color: var(--gold);
    border: 2px var(--bs-border-style) var(--gold);
}

.btn-outline-gold:hover,
.btn-outline-gold:focus,
.btn-outline-gold:focus-visible,
.btn-outline-gold:target,
.btn-outline-gold:active,
.btn-outline-gold.active {
    background-color: var(--gold) !important;
    color: var(--bs-white) !important;
    border: 2px var(--bs-border-style) var(--gold) !important;
}


/* Line Clamping */

.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-one {
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.clamp-two {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.clamp-three {
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.clamp-four {
    line-clamp: 4;
    -webkit-line-clamp: 4;
}

.clamp-five {
    line-clamp: 5;
    -webkit-line-clamp: 5;
}

.clamp-six {
    line-clamp: 6;
    -webkit-line-clamp: 6;
}


/* Subpages */

.subpage-banner {
    text-align: center;
    background-color: var(--navy);
    color: var(--bs-white);
    /* background-color: var(--silver);
    border-bottom: 1px solid var(--bs-gray-300); */
}

.subpage-banner .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.subpage-banner h1,
.subpage-banner h2 {
    color: var(--bs-white);
    margin-bottom: 0;
}

.subpage-banner p {
    margin-top: .5rem;
}

.subpage-banner p:last-child {
    margin-bottom: 0;
}

.subpage-banner .row {
    justify-content: center;
}

@media (min-width: 1200px) {
    .subpage-banner .row {
        max-width: 75%;
        margin: 0 auto;
    }
}


/* Accordions */

.accordion-button:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

.accordion-button h2 {
    display: block;
    width: 100%;
    margin-bottom: 0;
}

.accordion-button.collapsed i {
    transform: rotate(0deg);
}

.accordion-button i {
    transition: all .3s ease;
    transform: rotate(-45deg);
}

.accordion-button .eyebrow {
    color: var(--gray);
    margin: 0;
    width: 32px;
}


/* Cards */

.card {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
}


/* Footer */

footer {
    background-color: var(--navy);
    color: var(--bs-white);
    /* border-top: 1px solid var(--bs-gray-300); */
}

.footer-brand {
    margin: 0;
    padding: 0;
}

.footer-brand img {
    width: 300px;
}

#footer_links {
    flex-direction: row;
    justify-content: center;
}

#footer_links .nav-link {
    font-weight: 700;
    color: var(--bs-white);
    padding: 16px;
    text-align: center;
}

#footer_links .nav-link:hover,
#footer_links .nav-link:focus,
#footer_links .nav-link:target,
#footer_links .nav-link:active {
    color: var(--gold);
}

footer a:not(.btn) {
    font-weight: 700;
    color: var(--bs-white);
    text-decoration: none;
}

footer a:not(.btn):hover,
footer a:not(.btn):focus,
footer a:not(.btn):target,
footer a:not(.btn):active {
    color: var(--gold);
}

@media (max-width: 767.98px) {
    #footer_links {
        flex-direction: column;
    }
}


/* Forms */

.form-control {
    border: 1px solid var(--bs-black);
}


/* Scroll Top Button */

.scroll-top {
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    position: fixed;
    z-index: 10;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: auto;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: var(--bs-white);
    color: var(--navy);
    border: 1px solid var(--bs-gray-300);
    border-radius: 100%;
    transition: all .3s ease;
}

.scroll-top.show {
    visibility: visible;
    opacity: 1;
}

.scroll-top:hover,
.scroll-top:focus,
.scroll-top:target,
.scroll-top:active {
    background-color: var(--silver);
    color: var(--navy) !important;
}