@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";
@import"https://use.fontawesome.com/releases/v6.4.2/css/all.css";

* {
    box-sizing: border-box
}

body, p, ol, ul, blockquote, h1, h2, h3, h4, h5, h6, figure {
    margin: 0;
    padding: 0
}

body {
    font-family: DM Sans,sans-serif;
    font-size: 18px;
    line-height: 145%;
    font-weight: 400;
    -webkit-font-smoothing: antialiased
}

blockquote, q {
    quotes: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

button {
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none
}

a {
    text-decoration: underline;
    text-underline-offset: .25em;
    text-decoration-thickness: 1px
}

    a:hover {
        text-decoration: none
    }

nav.contextual-region {
    position: unset
}

nav ul {
    list-style: none
}

hr {
    margin: 32px 0
}

p, ul, ol {
    font-family: DM Sans,sans-serif;
    font-size: 18px;
    line-height: 145%;
    font-weight: 400;
    color: #21282d
}

a {
    font-family: DM Sans,sans-serif;
    font-size: 18px;
    line-height: 145%;
    font-weight: 400;
    color: #066EB9
}

.nav a,
.member-panel a {
    color: #21282d
}

.hero__container a,
.promotional-banner__content a,
.stacked-card a {
    color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
    color: #21282d
}

h1 {
    font-family: DM Sans,sans-serif;
    font-size: 56px;
    line-height: 120%;
    font-weight: 700
}

@media (min-width: 821px) {
    h1 {
        font-family: DM Sans,sans-serif;
        font-size: 76px;
        line-height: 120%;
        font-weight: 700
    }
}

h2 {
    font-family: DM Sans,sans-serif;
    font-size: 42px;
    line-height: 120%;
    font-weight: 700
}

@media (min-width: 821px) {
    h2 {
        font-family: DM Sans,sans-serif;
        font-size: 56px;
        line-height: 120%;
        font-weight: 700
    }
}

h3 {
    font-family: DM Sans,sans-serif;
    font-size: 31px;
    line-height: 120%;
    font-weight: 700
}

@media (min-width: 821px) {
    h3 {
        font-family: DM Sans,sans-serif;
        font-size: 42px;
        line-height: 120%;
        font-weight: 700
    }
}

h4 {
    font-family: DM Sans,sans-serif;
    font-size: 23px;
    line-height: 120%;
    font-weight: 700
}

@media (min-width: 821px) {
    h4 {
        font-family: DM Sans,sans-serif;
        font-size: 31px;
        line-height: 120%;
        font-weight: 700
    }
}

h5 {
    font-family: DM Sans,sans-serif;
    font-size: 20px;
    line-height: 120%;
    font-weight: 700
}

@media (min-width: 821px) {
    h5 {
        font-family: DM Sans,sans-serif;
        font-size: 23px;
        line-height: 120%;
        font-weight: 700
    }
}

h6 {
    font-family: DM Sans,sans-serif;
    font-size: 18px;
    line-height: 120%;
    font-weight: 700;
    text-transform: uppercase
}

@media (min-width: 821px) {
    h6 {
        font-family: DM Sans,sans-serif;
        font-size: 17px;
        line-height: 120%;
        font-weight: 700
    }
}

.no-scroll {
    position: fixed;
    height: 100%
}

.layout-container {
    max-width: 1440px;
    padding-right: 24px;
    padding-left: 24px
}

@media (min-width: 821px) {
    .layout-container {
        padding-right: 64px;
        padding-left: 64px;
        margin: 0 auto
    }
}

.bleeding-bg {
    position: relative
}

    .bleeding-bg:before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        width: 100vw;
        height: 100%;
        background-color: #fff;
        z-index: -2
    }

.spacer-bottom-1x {
    margin-bottom: 8px
}

.spacer-top-1x {
    margin-top: 8px
}

.spacer-right-1x {
    margin-right: 8px
}

.spacer-bottom-2x {
    margin-bottom: 16px
}

.spacer-top-2x {
    margin-top: 16px
}

.spacer-right-2x {
    margin-right: 16px
}

.spacer-bottom-3x {
    margin-bottom: 24px
}

.spacer-top-3x {
    margin-top: 24px
}

.spacer-right-3x {
    margin-right: 24px
}

.spacer-bottom-4x {
    margin-bottom: 32px
}

.spacer-top-4x {
    margin-top: 32px
}

.spacer-right-4x {
    margin-right: 32px
}

.spacer-bottom-5x {
    margin-bottom: 40px
}

.spacer-top-5x {
    margin-top: 40px
}

.spacer-right-5x {
    margin-right: 40px
}

.spacer-bottom-6x {
    margin-bottom: 48px
}

.spacer-top-6x {
    margin-top: 48px
}

.spacer-right-6x {
    margin-right: 48px
}

.spacer-bottom-7x {
    margin-bottom: 56px
}

.spacer-top-7x {
    margin-top: 56px
}

.spacer-right-7x {
    margin-right: 56px
}

.spacer-bottom-8x {
    margin-bottom: 64px
}

.spacer-top-8x {
    margin-top: 64px
}

.spacer-right-8x {
    margin-right: 64px
}

.spacer-bottom-9x {
    margin-bottom: 72px
}

.spacer-top-9x {
    margin-top: 72px
}

.spacer-right-9x {
    margin-right: 72px
}

.spacer-bottom-10x {
    margin-bottom: 80px
}

.spacer-top-10x {
    margin-top: 80px
}

.spacer-right-10x {
    margin-right: 80px
}

#storybook-root {
    width: 100%
}

.sb-main-padded.sb-show-main {
    padding: 0;
    margin: 0
}

.sb-table {
    width: 100%;
    border-collapse: collapse;
    color: #21282d;
    margin: 24px auto 64px
}

    .sb-table th, .sb-table td {
        padding: 20px;
        border: 1px solid #E6EAE9;
        text-align: left;
        vertical-align: middle
    }

    .sb-table .sb-table__value, .sb-table .sb-table__variable, .sb-table .sb-table__mixin, .sb-table .sb-table__class {
        font-family: monospace;
        width: 150px
    }

    .sb-table .sb-table__mixin {
        width: 250px
    }

    .sb-table .sb-table__color {
        width: 50px;
        height: 50px
    }

.prismjs .tag {
    display: inline;
    text-transform: none
}

    .prismjs .tag:after, .prismjs .tag:before {
        content: none
    }

.docblock-argstable-head th span {
    color: #fff
}

@media (max-width: 922px) {
    .mobile-only-margin {
        margin: 0px 10px;
    }
}


/*Overrides to clean up strange behaviors*/
.nohover:hover {
    border-bottom: 0px solid #fff !important;
    text-decoration: unset !important;
}

.hs-form-booleancheckbox{
    list-style-type: none;
}

/*this class is causing some extra space below our footer. only noticed it on the home page*/
#hs-web-interactives-floating-container {
    position: absolute;
}
/*****************************************/