:root {
    --transition-time: .3s;
    --transition-time-short: .1s;
    --transition-time-long: .5s;
    --min-screen-size: 310px;
    --max-text-width-size: 672px;
    --font-size-default: 18px;
    --font-size-mobile-default: 16px;
    --font-size-print-default: 12px;
    --line-height-default: 1.5;
    --font-serif: "Merriweather", georgia, serif;
    --font-sans-serif: "Source Sans Pro", arial, sans-serif;
    --font-monospace: "Source Code Pro", monospace;
    --font-size-peta: 3.04rem;
    --font-size-tera: 2.44rem;
    --font-size-giga: 1.95rem;
    --font-size-mega: 1.56rem;
    --font-size-kilo: 1.25rem;
    --font-size-hecto: 1rem;
    --font-size-centi: .8rem;
    --font-size-milli: .64rem;
    --border-radius-small: 2px;
    --border-radius: 3px;
    --border-radius-medium: 5px;
    --border-radius-large: 8px;
    --depth__base: 0;
    --depth__contentComponents: 10;
    --depth__stickyComponents: 100;
    --depth__contentComponentDialogs: 201;
    --depth__headingComponents: 300;
    --depth__floatingComponents: 400;
    --depth__pageDialogs: 500;
    --depth__notifications: 600;
    --nav-mainbar-height: 72px;
    --notification-height: 38px;
    --links-bar-height: 26px
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    :root {
        --nav-mainbar-height: 64px
    }
}

:root {
    --neutral-01: rgb(255 255 255);
    --neutral-02: rgb(249 249 249);
    --neutral-03: rgb(236 236 236);
    --neutral-04: rgb(188 188 188);
    --neutral-05: rgb(106 106 106);
    --neutral-06: rgb(43 43 43);
    --neutral-07: rgb(0 0 0);
    --brand-01: rgb(0 156 222);
    --brand-02: rgb(13 111 180);
    --accent-01: rgb(69 114 5);
    --accent-02: rgb(245 133 30);
    --accent-03: rgb(210 31 24);
    --accent-04: rgb(128 0 128);
    --accent-05: rgb(207 109 200);
    --shadow-color-default: rgb(106 106 106 / 50%);
    --shadow-color-brand-01: rgb(0 123 171 / 50%);
    --shadow-color-accent-03: rgb(158 24 19 / 50%);
    --shadow-color-neutral-04: rgb(188 188 188 / 50%);
    --shadow-color-neutral-06: rgb(43 43 43 / 70%);
    --shadow-color-facebook: rgb(38 59 99 / 50%);
    --shadow-color-twitter: rgb(46 128 191 / 50%);
    --shadow-color-linkedin: rgb(0 87 130 / 50%);
    --text-color: var(--neutral-06);
    --text-color-secondary: var(--neutral-05);
    --text-color-inverted: var(--neutral-01);
    --link-color: var(--brand-02);
    --link-color-visited: var(--accent-04);
    --brand-color-facebook: rgb(59 89 152);
    --brand-color-instagram: rgb(81 127 164);
    --brand-color-linkedin: rgb(0 123 182);
    --brand-color-pinterest: rgb(203 32 39);
    --brand-color-twitter: rgb(56 161 243);
    --brand-color-buffer-bg: rgb(50 59 67);
    --color-hover-gray: rgb(244 244 244);
    --color-light-gray: rgb(221 221 221);
    --hero-overlay-color: rgb(0 0 0 / 80%);
    --hero-overlay-color-small-screen: rgb(0 0 0 / 60%);
    --section-background-color: var(--neutral-02);
    --contrast-section-background-color: var(--neutral-03)
}

.svg-icon {
    fill: currentColor
}

.background-neutral-01 {
    background-color: var(--neutral-01) !important
}

.text-neutral-01 {
    color: var(--neutral-01) !important
}

.border-neutral-01 {
    border-color: var(--neutral-01) !important
}

.fill-neutral-01 {
    fill: var(--neutral-01)
}

.background-neutral-02 {
    background-color: var(--neutral-02) !important
}

.text-neutral-02 {
    color: var(--neutral-02) !important
}

.border-neutral-02 {
    border-color: var(--neutral-02) !important
}

.fill-neutral-02 {
    fill: var(--neutral-02)
}

.background-neutral-03 {
    background-color: var(--neutral-03) !important
}

.text-neutral-03 {
    color: var(--neutral-03) !important
}

.border-neutral-03 {
    border-color: var(--neutral-03) !important
}

.fill-neutral-03 {
    fill: var(--neutral-03)
}

.background-neutral-04 {
    background-color: var(--neutral-04) !important
}

.text-neutral-04 {
    color: var(--neutral-04) !important
}

.border-neutral-04 {
    border-color: var(--neutral-04) !important
}

.fill-neutral-04 {
    fill: var(--neutral-04)
}

.background-neutral-05 {
    background-color: var(--neutral-05) !important
}

.text-neutral-05 {
    color: var(--neutral-05) !important
}

.border-neutral-05 {
    border-color: var(--neutral-05) !important
}

.fill-neutral-05 {
    fill: var(--neutral-05)
}

.background-neutral-06 {
    background-color: var(--neutral-06) !important
}

.text-neutral-06 {
    color: var(--neutral-06) !important
}

.border-neutral-06 {
    border-color: var(--neutral-06) !important
}

.fill-neutral-06 {
    fill: var(--neutral-06)
}

.background-brand-01 {
    background-color: var(--brand-01) !important
}

.text-brand-01 {
    color: var(--brand-01) !important
}

.border-brand-01 {
    border-color: var(--brand-01) !important
}

.fill-brand-01 {
    fill: var(--brand-01)
}

.background-brand-02 {
    background-color: var(--brand-02) !important
}

.text-brand-02 {
    color: var(--brand-02) !important
}

.border-brand-02 {
    border-color: var(--brand-02) !important
}

.fill-brand-02 {
    fill: var(--brand-02)
}

.background-accent-01 {
    background-color: var(--accent-01) !important
}

.text-accent-01 {
    color: var(--accent-01) !important
}

.border-accent-01 {
    border-color: var(--accent-01) !important
}

.fill-accent-01 {
    fill: var(--accent-01)
}

.background-accent-02 {
    background-color: var(--accent-02) !important
}

.text-accent-02 {
    color: var(--accent-02) !important
}

.border-accent-02 {
    border-color: var(--accent-02) !important
}

.fill-accent-02 {
    fill: var(--accent-02)
}

.background-accent-03 {
    background-color: var(--accent-03) !important
}

.text-accent-03 {
    color: var(--accent-03) !important
}

.border-accent-03 {
    border-color: var(--accent-03) !important
}

.fill-accent-03 {
    fill: var(--accent-03)
}

.background-accent-04 {
    background-color: var(--accent-04) !important
}

.text-accent-04 {
    color: var(--accent-04) !important
}

.border-accent-04 {
    border-color: var(--accent-04) !important
}

.fill-accent-04 {
    fill: var(--accent-04)
}

.background-aceent-05 {
    background-color: var(--accent-05) !important
}

.text-aceent-05 {
    color: var(--accent-05) !important
}

.border-aceent-05 {
    border-color: var(--accent-05) !important
}

.fill-aceent-05 {
    fill: var(--accent-05)
}

.backgroundMatchingSection {
    background-color: var(--section-background-color)
}

:root {
    --easeInQuad: cubic-bezier(.55, .085, .68, .53);
    --easeOutQuad: cubic-bezier(.25, .46, .45, .94);
    --easeInOutQuad: cubic-bezier(.455, .03, .515, .955);
    --easeOutQuint: cubic-bezier(.23, 1, .32, 1);
    --easeInOutQuint: cubic-bezier(.86, 0, .07, 1);
    --easeInBack: cubic-bezier(.6, -.28, .735, .045);
    --easeOutBack: cubic-bezier(.175, .885, .32, 1.275);
    --easeInOutBack: cubic-bezier(.68, -.55, .265, 1.55);
    --squatchStretch: cubic-bezier(.07, .85, .82, 1.14)
}

html {
    box-sizing: border-box;
    min-height: 100%;
    scroll-behavior: smooth
}

*, *:before, *:after {
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: inherit
}

body {
    background: var(--neutral-02);
    color: var(--text-color);
    font-family: var(--font-sans-serif);
    margin: 0;
    min-width: var(--min-screen-size)
}

a, area, input, .input, label, select, summary, textarea, [tabindex], button, .button, [type=button], [type=reset], [type=submit], [role=button] {
    touch-action: manipulation
}

    a:active, input:active, .input:active, optgroup:active, select:active, textarea:active, button:active, .button:active, [type=button]:active, [type=reset]:active, [type=submit]:active, [role=button]:active {
        outline: none
    }

    a:focus, a.input--focus, input:focus, input.input--focus, .input:focus, .input.input--focus, optgroup:focus, optgroup.input--focus, select:focus, select.input--focus, textarea:focus, textarea.input--focus, button:focus, button.input--focus, .button:focus, .button.input--focus, [type=button]:focus, [type=button].input--focus, [type=reset]:focus, [type=reset].input--focus, [type=submit]:focus, [type=submit].input--focus, [role=button]:focus, [role=button].input--focus {
        outline-color: var(--brand-01)
    }

a, label, select, button, .button, [type=button], [type=reset], [type=submit], [role=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    color: inherit;
    cursor: pointer
}

[type=text], [type=password], [type=url], [type=email], textarea {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

[type=number][step]:hover, [type=number][min]:hover, [type=number][max]:hover {
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset
}

button, .button, [type=button], [type=reset], [type=submit] {
    border: 0;
    display: inline-block;
    margin: 0
}

input, .input, optgroup, select, textarea {
    font: inherit;
    margin: 0
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, th, td {
    margin: 0;
    padding: 0
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, select {
    text-transform: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

address, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, ol, ul, hr, table, fieldset {
    margin-bottom: 10px
}

code:not([class*=language-]) {
    background-color: #e7f1f8;
    border-radius: var(--border-radius-small);
    color: var(--brand-01);
    font-size: .9em;
    padding: 3px 6px
}

:root {
    font-family: var(--font-serif);
    font-size: var(--font-size-default);
    line-height: var(--line-height-default)
}

@media only screen and (max-width: 767px) {
    :root {
        font-size: var(--font-size-mobile-default)
    }
}

@media print {
    :root {
        font-size: var(--font-size-print-default)
    }
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga","clig","pnum","kern","liga","clig";
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility
}

p {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.78;
    margin-bottom: 24px;
    max-width: var(--max-text-width-size)
}

small {
    font-size: .8rem;
    letter-spacing: .15px;
    line-height: 1.2
}

kbd {
    font-size: .8rem;
    font-weight: 500
}

code, pre {
    font-size: .8rem
}

.petaTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 3.04rem;
    font-weight: 700;
    letter-spacing: -.75px;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 64px
}

.teraTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 2.44rem;
    font-weight: 700;
    letter-spacing: -.75px;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 64px
}

.gigaTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 1.95rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 40px
}

.megaTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 1.56rem;
    font-weight: 700;
    letter-spacing: -.25px;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 40px
}

.kiloTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 32px
}

.hectoTypeFont {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 8px;
    margin-top: 24px
}

.bodyTypeFont {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.78;
    margin-bottom: 24px;
    max-width: var(--max-text-width-size)
}

.centiTypeFont {
    font-family: var(--font-sans-serif);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .15px;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px
}

.milliTypeFont {
    font-family: var(--font-sans-serif);
    font-size: .64rem;
    font-weight: 400;
    line-height: 1.2
}

.UITypeStyle {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px
}

.largeQuote {
    color: var(--neutral-05);
    font-family: var(--font-serif);
    font-size: var(--font-size-kilo);
    font-style: italic;
    line-height: 1.78
}

code, pre {
    overflow-y: auto
}

fieldset > legend {
    font-family: var(--font-serif)
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-sans-serif);
    font-weight: 700;
    line-height: 1.2
}

h1 {
    font-size: var(--font-size-tera);
    letter-spacing: -.75px;
    margin-bottom: 16px;
    margin-top: 64px
}

h2 {
    font-size: var(--font-size-giga);
    letter-spacing: -.5px;
    margin-bottom: 16px;
    margin-top: 40px
}

h3 {
    font-size: var(--font-size-mega);
    letter-spacing: -.25px;
    margin-bottom: 16px;
    margin-top: 40px
}

h4 {
    font-size: var(--font-size-kilo);
    margin-bottom: 16px;
    margin-top: 32px
}

h5 {
    font-size: var(--font-size-default);
    margin-bottom: 8px;
    margin-top: 24px
}

h6 {
    font-size: var(--font-size-centi);
    margin-bottom: 8px;
    margin-top: 24px
}

.h1 {
    font-size: var(--font-size-tera)
}

.h2 {
    font-size: var(--font-size-giga)
}

.h3 {
    font-size: var(--font-size-mega)
}

.h4 {
    font-size: var(--font-size-kilo)
}

.h5 {
    font-size: var(--font-size-default)
}

.h6 {
    font-size: var(--font-size-centi)
}

img {
    display: inline-block;
    font-style: italic;
    max-width: 100%;
    position: relative;
    transition: opacity .5s ease;
    vertical-align: middle
}

    img[data-src] {
        opacity: 0
    }

        img[data-src][src] {
            animation: fadeIn .35s var(--easeOutQuad) forwards .65s
        }

            img[data-src][src].lightense-target {
                animation: none;
                opacity: 1
            }

    img:where([width]) {
        height: auto
    }

figure {
    margin: 0
}

[data-aspect-ratio="500/322"] {
    aspect-ratio: 500 / 322;
    display: block
}

:root {
    --form-input-height: 48px
}

@media only screen and (max-width: 767px) {
    :root {
        --form-input-height: 45px
    }
}

.input[disabled], input[disabled], textarea[disabled], fieldset[disabled] input, fieldset[disabled] textarea {
    background-color: var(--color-light-gray);
    cursor: not-allowed
}

.input:not([type=checkbox],[type=radio]), input:not([type=checkbox],[type=radio]), textarea {
    font-family: var(--font-serif);
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-05);
    border-radius: var(--border-radius-large);
    box-shadow: inset 0 1px 4px 0 var(--shadow-color-default);
    display: block;
    height: var(--form-input-height);
    padding: 8px;
    width: 100%
}

    .input:not([type=checkbox],[type=radio]):disabled, input:not([type=checkbox],[type=radio]):disabled, textarea:disabled {
        background-color: var(--neutral-03);
        border-color: var(--neutral-04);
        box-shadow: none
    }

    .input:not([type=checkbox],[type=radio])[type=range], input:not([type=checkbox],[type=radio])[type=range], textarea[type=range] {
        box-shadow: none
    }

    .input:not([type=checkbox],[type=radio]):read-only:not(:disabled,.input__stripe,.disable-read-only), fieldset:not(:disabled) .input:not([type=checkbox],[type=radio]):read-only:not(.disable-read-only), input:not([type=checkbox],[type=radio]):read-only:not(:disabled,.input__stripe,.disable-read-only), fieldset:not(:disabled) input:not([type=checkbox],[type=radio]):read-only:not(.disable-read-only), textarea:read-only:not(:disabled,.input__stripe,.disable-read-only), fieldset:not(:disabled) textarea:read-only:not(.disable-read-only) {
        background-color: transparent;
        border-color: transparent;
        border-radius: 0;
        box-shadow: none;
        cursor: default;
        outline: none
    }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    opacity: 1
}

.input__stripe:not([type=checkbox],[type=radio]) {
    padding-bottom: 10px;
    padding-top: 10px
}

.input__stripe.error:before {
    content: none !important
}

textarea[rows] {
    height: auto
}

::placeholder {
    color: var(--neutral-04)
}

:root {
    --color-link: var(--brand-02);
    --color-link-hover: rgb(86 154 203)
}

a {
    -webkit-tap-highlight-color: transparent;
    text-decoration: underline
}

    a, a:hover, a:focus, a:active {
        color: var(--color-link);
        text-decoration: underline
    }

        a:hover, a:focus {
            color: var(--color-link-hover)
        }

.link {
    background-color: transparent;
    color: var(--color-link);
    display: inline-block;
    line-height: inherit;
    padding: 0;
    text-decoration: underline
}

    .link:before, .link:after {
        display: inline-block;
        text-decoration: none
    }

    .link.disabled, .link[disabled] {
        cursor: not-allowed;
        opacity: .5
    }

    .link, .link:hover, .link:focus, .link:active {
        color: var(--color-link);
        text-decoration: underline
    }

        .link:hover, .link:focus {
            color: var(--color-link-hover)
        }

.link--small {
    font-size: var(--font-size-centi)
}

.link--block {
    display: block
}

.link--inheritColor {
    color: inherit
}

    .link--inheritColor:hover, .link--inheritColor:focus {
        color: var(--color-link-hover)
    }

.link--noUnderline, .link--noUnderline:hover, .link--noUnderline:focus, .link--noUnderline:active {
    text-decoration: none
}

.link--back, .link--back:hover, .link--back:focus, .link--back:active {
    color: var(--neutral-06)
}

    .link--back:hover {
        color: var(--neutral-05)
    }

.link--toggle.dataToggle__button--expanded svg {
    transform: rotate(180deg)
}

.link--secondary, .link--secondary:hover, .link--secondary:focus, .link--secondary:active {
    color: var(--neutral-03)
}

    .link--secondary:hover, .link--secondary:focus {
        color: var(--neutral-01)
    }

.link--darkBackground {
    color: var(--brand-01)
}

    .link--darkBackground:hover, .link--darkBackground:focus {
        color: var(--brand-02)
    }

.link--cancel, .link--cancel:hover, .link--cancel:focus, .link--cancel:active {
    color: var(--neutral-05)
}

    .link--cancel:hover, .link--cancel:focus {
        color: var(--neutral-06)
    }

.link--animated {
    color: var(--text-color);
    position: relative
}

    .link--animated:before {
        background-color: currentColor;
        bottom: -3px;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s var(--easeOutQuint),background-color .25s var(--easeOutQuint);
        width: 100%
    }

    .link--animated:hover:before {
        color: var(--color-light-blue);
        transform: scaleX(1)
    }

dl, ul {
    padding-left: 24px
}

ol {
    padding-left: 32px
}

    ol li > ol li {
        list-style-type: lower-alpha
    }

        ol li > ol li > ol li {
            list-style-type: lower-roman
        }

ul, ol, dl {
    list-style-position: outside;
    margin-bottom: 24px
}

    dl:last-child {
        margin-bottom: 0
    }

.list-none {
    list-style: none
}

.list-disc {
    list-style: disc
}

.list {
    font-family: var(--font-serif);
    line-height: 1.78
}

    .list li, .list dd {
        margin-bottom: 8px
    }

    .list dd {
        margin-inline-start: 24px
    }

.summary--noStyle {
    list-style: none
}

    .summary--noStyle::marker, .summary--noStyle::-webkit-details-marker {
        display: none
    }

blockquote {
    margin-block: 0 0;
    margin-inline: 0 0
}

.blockquote, blockquote {
    border-left: 5px solid var(--neutral-05);
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.78;
    margin: 24px 0;
    padding-left: 16px
}

@media only screen and (min-width: 768px) {
    .blockquote, blockquote {
        margin-left: 24px
    }
}

.quote {
    font-family: var(--font-serif);
    font-size: var(--font-size-kilo);
    font-style: italic;
    line-height: 1.78
}

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid var(--neutral-05);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    float: left;
    height: 20px;
    margin-left: 3px;
    margin-right: 7px;
    margin-top: 3px;
    transition: background-color .35s var(--squatchStretch),border-color .35s var(--squatchStretch);
    width: 20px
}

    input[type=checkbox] + label {
        font-family: var(--font-serif);
        color: var(--text-color);
        line-height: 1.45;
        margin: 0;
        overflow: hidden
    }

        input[type=checkbox] + label ~ .error {
            padding-left: 30px !important
        }

    input[type=checkbox]:checked {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" d="M12.925 20.349L6.56 13.985a1 1 0 00-1.414 0L2.86 16.27a1 1 0 000 1.414l9.292 9.292a1 1 0 001.414 0l15.712-15.712a1 1 0 000-1.414l-2.22-2.22a1 1 0 00-1.415 0l-12.72 12.719z"/></svg>') center no-repeat;
        background-color: #717a83;
        background-size: 16px;
        border-color: #717a83
    }

    input[type=checkbox]:disabled {
        background-color: var(--neutral-04);
        border-color: var(--neutral-04);
        pointer-events: none
    }

        input[type=checkbox]:disabled + label {
            color: var(--neutral-05);
            cursor: default;
            pointer-events: none
        }

    input[type=checkbox]:focus {
        border-color: var(--brand-01);
        outline: auto 5px var(--brand-01)
    }

.error input[type=checkbox]:not([aria-invalid=true]):not(:checked) {
    border-color: var(--accent-03)
}

input[type=checkbox]:not([aria-invalid=true]):not(:checked):hover, input[type=checkbox]:not([aria-invalid=true]):not(:checked):focus {
    border-color: var(--brand-01)
}

@media only screen and (max-width: 767px) {
    input[type=checkbox] {
        height: 18px;
        margin-top: 2px;
        width: 18px
    }

        input[type=checkbox] ~ .error {
            padding-left: 28px !important
        }
}

input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid var(--neutral-04);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--neutral-01);
    float: left;
    height: 20px;
    margin-left: 3px;
    margin-right: 7px;
    margin-top: 3px;
    transition: background-color .35s var(--squatchStretch),border-color .35s var(--squatchStretch);
    width: 20px
}

    input[type=radio] + label {
        font-family: var(--font-serif);
        color: var(--text-color);
        line-height: 1.45;
        margin: 0;
        overflow: hidden
    }

        input[type=radio] + label ~ .error {
            padding-left: 30px !important
        }

    input[type=radio]:focus {
        outline: auto 5px var(--brand-01)
    }

    input[type=radio]:checked {
        background-color: var(--brand-01);
        border-color: var(--brand-01)
    }

    input[type=radio]:disabled {
        box-shadow: none;
        pointer-events: none
    }

        input[type=radio]:disabled:checked {
            background-color: var(--neutral-04);
            border-color: var(--neutral-04);
            box-shadow: inset 0 0 0 3px var(--neutral-01)
        }

        input[type=radio]:disabled + label {
            color: var(--neutral-05);
            pointer-events: none
        }

.error input[type=radio]:not([aria-invalid=true]):not(:checked) {
    border-color: var(--accent-03)
}

input[type=radio]:not([aria-invalid=true]):not(:checked):hover, input[type=radio]:not([aria-invalid=true]):not(:checked):focus {
    border-color: var(--brand-01)
}

@media only screen and (max-width: 767px) {
    input[type=radio] {
        height: 18px;
        margin-top: 2px;
        width: 18px
    }

        input[type=radio] ~ .error {
            padding-left: 28px !important
        }
}

:root {
    --select-padding: 8px;
    --select-icon-size: 26px
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--neutral-01);
    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(43 43 43)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M17.6 19.87l5-6.67A2 2 0 0021 10H11a2 2 0 00-1.6 3.2l5 6.67a2 2 0 003.2 0z'/%3E%3C/svg%3E");
    background-position: calc(100% - var(--select-padding)) 50%;
    background-size: var(--select-icon-size);
    border: solid 1px var(--neutral-05);
    border-radius: var(--border-radius-large);
    font-family: var(--font-serif);
    height: var(--form-input-height);
    line-height: 1.7;
    padding: var(--select-padding);
    padding-right: calc(var(--select-icon-size) + 2 * (var(--select-padding)));
    width: 100%
}

@media only screen and (max-width: 767px) {
    select {
        --select-icon-size: 24px
    }
}

fieldset[disabled] select, select[disabled] {
    background-color: var(--neutral-04);
    color: var(--neutral-05)
}

select[multiple] {
    height: auto
}

.error select {
    border-color: var(--accent-03);
    color: var(--accent-03)
}

.select--large select {
    --select-icon-size: 32px;
    font-size: 22.5px;
    height: 56px
}

@media only screen and (max-width: 767px) {
    .select--large select {
        --select-icon-size: 28px;
        font-size: 20px;
        height: 52px
    }
}

dialog {
    position: absolute;
    left: 0;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background: #fff;
    color: #000;
    display: block
}

    dialog:not([open]) {
        display: none
    }

    dialog + .backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0000001a
    }

._dialog_overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

dialog.fixed {
    position: fixed;
    top: 50%;
    transform: translateY(-50%)
}

:root {
    --dialog-border-color: rgb(102 102 102);
    --dialog-border-radius: 8px;
    --dialog-button-close-size: 44px;
    --dialog-max-width: 736px;
    --dialog-min-width: 320px;
    --dialog-padding-horizontal: 16px;
    --dialog-padding-vertical: 32px
}

@media only screen and (min-width: 768px) {
    :root {
        --dialog-button-close-size: 32px;
        --dialog-padding-horizontal: 32px
    }
}

dialog {
    box-shadow: 0 12px 20px #6a6a6a1a;
    border: solid 1px var(--dialog-border-color);
    border-radius: var(--dialog-border-radius);
    bottom: 0;
    box-sizing: border-box;
    max-width: var(--dialog-max-width);
    min-width: var(--dialog-min-width);
    padding: var(--dialog-padding-vertical) var(--dialog-padding-horizontal);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--depth__pageDialogs)
}

@media only screen and (max-width: 767px) {
    dialog {
        bottom: 50%;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        top: 50%;
        transform: translateY(-50%);
        width: calc(100% - 20px)
    }
}

dialog.dialog--small {
    max-width: calc(var(--dialog-max-width) * .75)
}

dialog.dialog--large {
    max-width: calc(var(--dialog-max-width) * 1.25) !important
}

dialog[open] {
    animation: fx-show-modal .2s ease-in forwards
}

form[method=DIALOG] menu {
    margin: 0;
    padding: 0
}

dialog::backdrop {
    background-color: #2b2b2b99
}

dialog + .backdrop {
    background-color: #2b2b2b99
}

.dialog__title {
    margin: 0 var(--dialog-button-close-size) 16px 0;
    text-align: left
}

.dialog__body {
    font-family: var(--font-serif)
}

@media only screen and (min-width: 768px) {
    .dialog__body {
        max-height: 70vh;
        overflow: hidden auto
    }
}

.dialog__footer .button {
    margin-top: 24px
}

@media only screen and (min-width: 768px) {
    .dialog__footer {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start
    }

        .dialog__footer .button {
            margin-left: 24px
        }
}

.dialog__buttonClose {
    float: right;
    height: var(--dialog-button-close-size);
    padding: 0;
    width: var(--dialog-button-close-size)
}

.dialog--animationFadeIn[aria-hidden=false] {
    animation: fx-show-modal-fade-in .3s ease-in forwards
}

.dialog--noAnimation[aria-hidden=false] {
    animation: none
}

@keyframes fx-show-modal {
    0% {
        transform: scale(.8)
    }

    to {
        transform: none
    }
}

@keyframes fx-show-modal-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

video {
    aspect-ratio: 16/9;
    width: 100%
}

.video-gif {
    aspect-ratio: auto;
    height: auto;
    max-width: 100%;
    width: auto
}

iframe[data-src], video {
    background: #000 url(/images/logoaihoc.svg) center no-repeat;
    background-size: 120px
}

.flex-video {
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;
    padding-bottom: 56.25% !important;
    padding-top: 0 !important;
    position: relative
}

    .flex-video iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

.container {
    max-width: 1024px;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%
}

@media only screen and (min-width: 1056px) {
    .container {
        margin-left: auto;
        margin-right: auto;
        padding: 0
    }
}

.content-wrapper {
    flex-grow: 1
}

.default-text-max-width {
    max-width: var(--max-text-width-size)
}

@supports (padding: max(0)) {
    .container, .content-wrapper {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right)
    }
}

.box {
    margin: auto 0;
    width: 100%
}

.centeredSmallContainer {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-text-width-size)
}

.centeredMediumContainer {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--max-text-width-size) + 120px)
}

.landingSection {
    padding-bottom: 64px;
    padding-top: 64px
}

.alternateBackgroundContainer.alternateBackgroundContainer--altFirst > section:nth-of-type(odd), .alternateBackgroundContainer:not(.alternateBackgroundContainer--altFirst) > section:nth-of-type(2n) {
    --section-background-color: var(--neutral-03);
    --contrast-section-background-color: var(--neutral-02);
    background: var(--neutral-03)
}

:root {
    --gridGap: 16px
}

@media only screen and (min-width: 768px) {
    :root {
        --gridGap: 24px
    }
}

@media only screen and (min-width: 1056px) {
    :root {
        --gridGap: 32px
    }
}

.pageContainer {
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    min-height: 100vh
}

.gridContainer {
    display: grid;
    grid-template-areas: ". content .";
    grid-template-columns: 16px 1fr 16px
}

@media only screen and (max-width: 767px) {
    .gridContainer {
        max-width: 100vw;
        width: 100%
    }
}

@media only screen and (min-width: 1056px) {
    .gridContainer {
        grid-template-columns: 1fr 1024px 1fr
    }
}

.gridContent {
    grid-area: content
}

@media only screen and (max-width: 1055px) {
    .gridContent {
        max-width: calc(100vw - 32px)
    }
}

.row {
    display: grid;
    grid-gap: var(--gridGap);
    grid-template-columns: repeat(12,1fr)
}

    .row > * {
        grid-column: span 12
    }

.col-sm-1 {
    grid-column: span 1
}

.col-centered-sm-1 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 1;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-2 {
    grid-column: span 2
}

.col-centered-sm-2 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 2;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-3 {
    grid-column: span 3
}

.col-centered-sm-3 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 3;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-4 {
    grid-column: span 4
}

.col-centered-sm-4 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 4;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-5 {
    grid-column: span 5
}

.col-centered-sm-5 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 5;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-6 {
    grid-column: span 6
}

.col-centered-sm-6 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 6;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-7 {
    grid-column: span 7
}

.col-centered-sm-7 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 7;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-8 {
    grid-column: span 8
}

.col-centered-sm-8 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 8;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-9 {
    grid-column: span 9
}

.col-centered-sm-9 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 9;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-10 {
    grid-column: span 10
}

.col-centered-sm-10 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 10;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-11 {
    grid-column: span 11
}

.col-centered-sm-11 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 11;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

.col-sm-12 {
    grid-column: span 12
}

.col-centered-sm-12 {
    --gapSpacing: calc(var(--gridGap) * 11);
    --columnWidth: calc((100% - var(--gapSpacing)) / 12);
    --gridSpan: 12;
    margin: 0 auto;
    max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
}

@media only screen and (min-width: 768px) {
    .col-md-1 {
        grid-column: span 1
    }

    .col-centered-md-1 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 1;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-2 {
        grid-column: span 2
    }

    .col-centered-md-2 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 2;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-3 {
        grid-column: span 3
    }

    .col-centered-md-3 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 3;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-4 {
        grid-column: span 4
    }

    .col-centered-md-4 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 4;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-5 {
        grid-column: span 5
    }

    .col-centered-md-5 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 5;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-6 {
        grid-column: span 6
    }

    .col-centered-md-6 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 6;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-7 {
        grid-column: span 7
    }

    .col-centered-md-7 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 7;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-8 {
        grid-column: span 8
    }

    .col-centered-md-8 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 8;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-9 {
        grid-column: span 9
    }

    .col-centered-md-9 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 9;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-10 {
        grid-column: span 10
    }

    .col-centered-md-10 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 10;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-11 {
        grid-column: span 11
    }

    .col-centered-md-11 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 11;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 768px) {
    .col-md-12 {
        grid-column: span 12
    }

    .col-centered-md-12 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 12;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-1 {
        grid-column: span 1
    }

    .col-centered-lg-1 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 1;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-2 {
        grid-column: span 2
    }

    .col-centered-lg-2 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 2;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-3 {
        grid-column: span 3
    }

    .col-centered-lg-3 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 3;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-4 {
        grid-column: span 4
    }

    .col-centered-lg-4 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 4;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-5 {
        grid-column: span 5
    }

    .col-centered-lg-5 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 5;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-6 {
        grid-column: span 6
    }

    .col-centered-lg-6 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 6;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-7 {
        grid-column: span 7
    }

    .col-centered-lg-7 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 7;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-8 {
        grid-column: span 8
    }

    .col-centered-lg-8 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 8;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-9 {
        grid-column: span 9
    }

    .col-centered-lg-9 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 9;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-10 {
        grid-column: span 10
    }

    .col-centered-lg-10 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 10;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-11 {
        grid-column: span 11
    }

    .col-centered-lg-11 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 11;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

@media only screen and (min-width: 1056px) {
    .col-lg-12 {
        grid-column: span 12
    }

    .col-centered-lg-12 {
        --gapSpacing: calc(var(--gridGap) * 11);
        --columnWidth: calc((100% - var(--gapSpacing)) / 12);
        --gridSpan: 12;
        margin: 0 auto;
        max-width: calc(var(--gridSpan) * var(--columnWidth) + (var(--gridSpan) - 1) * var(--gridGap))
    }
}

.zero-grid-row-gap {
    grid-row-gap: 0
}

.zero-grid-column-gap {
    grid-column-gap: 0
}

@media only screen and (max-width: 767px) {
    .sm\:zero-grid-row-gap {
        grid-row-gap: 0
    }
}

.medium-large-grid-row-gap {
    grid-row-gap: 24px
}

.secondaryContentWidth {
    max-width: 232px;
    min-width: 232px;
    width: 232px
}

.button {
    font-family: var(--font-sans-serif);
    box-shadow: 0 2px 8px #6a6a6a66;
    align-items: center;
    border: solid 1px transparent;
    border-radius: var(--border-radius-large);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    min-width: 160px;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    transition: box-shadow .25s cubic-bezier(.455,.03,.515,.955),transform .13s cubic-bezier(.455,.03,.515,.955);
    vertical-align: middle
}

@media only screen and (max-width: 767px) {
    .button {
        display: block;
        width: 100%
    }
}

.button, .button:hover, .button:focus, .button:active {
    color: var(--neutral-01);
    text-decoration: none
}

    .button:hover {
        box-shadow: 0 4px 12px #6a6a6a66
    }

    .button:focus, .button:active {
        box-shadow: 0 1px 4px #6a6a6a7f
    }

    .button:active {
        transform: translateY(2px)
    }

    .button:disabled {
        box-shadow: none;
        cursor: not-allowed;
        opacity: .7;
        transform: none;
        transition-property: background-color
    }

@keyframes buttonLoading--rotation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(720deg)
    }
}

.button--loading {
    --loaderSize: 22px;
    border-color: var(--neutral-05);
    box-shadow: none;
    pointer-events: none;
    position: relative
}

    .button--loading:before {
        background: var(--neutral-05);
        border-radius: var(--border-radius-large);
        content: "";
        height: calc(100% + 2px);
        left: 0;
        position: absolute;
        top: 0;
        width: calc(100% + 2px)
    }

    .button--loading:after {
        animation: buttonLoading--rotation 1.2s linear infinite;
        background: url(/images/icons/button-spinner.svg) no-repeat;
        content: "";
        height: var(--loaderSize);
        left: calc(50% - var(--loaderSize) / 2);
        position: absolute;
        top: calc(50% - var(--loaderSize) / 2);
        width: var(--loaderSize)
    }

.button--primary {
    background: #717a83
}

    .button--primary:disabled {
        background-color: var(--neutral-03);
        border: solid 1px var(--neutral-04);
        color: var(--neutral-04)
    }

@keyframes secondaryBackgroundPulse {
    0% {
        background-color: var(--neutral-05)
    }

    50% {
        background-color: var(--neutral-06)
    }

    to {
        background-color: var(--neutral-05)
    }
}

.button--secondary {
    background-color: var(--neutral-05)
}

    .button--secondary.button--small {
        display: inline-block;
        width: unset
    }

.button--secondaryDark {
    background-color: var(--neutral-04);
    color: var(--neutral-06)
}

    .button--secondaryDark, .button--secondaryDark:hover, .button--secondaryDark:active, .button--secondaryDark:focus {
        color: var(--neutral-06)
    }

        .button--secondaryDark.button--small {
            display: inline-block;
            width: unset
        }

        .button--secondaryDark:disabled {
            background-color: var(--neutral-05);
            border: solid 1px var(--neutral-04);
            color: var(--neutral-04)
        }

.button--secondary:disabled {
    background-color: var(--neutral-03);
    border: solid 1px var(--neutral-04);
    color: var(--neutral-04)
}

.button--secondaryPulse:not(:disabled) {
    animation: secondaryBackgroundPulse 10s 3s infinite
}

.button--ghost {
    background-color: transparent;
    border: solid 1px var(--neutral-06);
    box-shadow: none;
    color: var(--neutral-06);
    min-width: unset
}

    .button--ghost:hover, .button--ghost:focus {
        background-color: transparent;
        box-shadow: none;
        color: var(--neutral-06)
    }

    .button--ghost:active {
        background-color: var(--neutral-03);
        box-shadow: none;
        color: var(--neutral-06)
    }

    .button--ghost:disabled {
        background-color: transparent;
        border-color: var(--neutral-04);
        color: var(--neutral-04)
    }

.button--ghostDark {
    background-color: transparent;
    border: solid 1px var(--neutral-03);
    box-shadow: none;
    color: var(--neutral-03);
    min-width: unset
}

    .button--ghostDark:hover {
        box-shadow: none
    }

    .button--ghostDark:active, .button--ghostDark:focus {
        background-color: var(--neutral-05);
        border-color: var(--neutral-03);
        box-shadow: none
    }

    .button--ghostDark:disabled {
        background-color: transparent;
        border-color: var(--neutral-05);
        color: var(--neutral-05)
    }

.button--small {
    font-size: var(--font-size-centi);
    min-width: unset;
    padding: 8px 12px
}

@media only screen and (min-width: 768px) {
    .button--large {
        font-size: var(--font-size-mega);
        line-height: 1;
        padding: 16px 32px
    }
}

.button--block {
    display: block;
    width: 100%
}

.button--inline {
    display: inline-block;
    min-width: unset
}

@media only screen and (max-width: 767px) {
    .button--inlineAtSmall {
        display: inline-block !important;
        width: auto !important
    }
}

@media only screen and (max-width: 767px) {
    html body .sm\:button--small {
        font-size: var(--font-size-centi);
        min-width: unset;
        padding: 8px 12px
    }
}

.button-link {
    font-family: var(--font-sans-serif)
}

    .button-link, .button-link:hover {
        background: none;
        display: inline-block;
        line-height: inherit;
        padding: 0
    }

        .button-link:active {
            transform: none
        }

.button--withArrow {
    display: inline-flex;
    justify-content: center;
    padding: 12px 16px 12px 24px
}

    .button--withArrow:not(:disabled):hover .button__arrowIcon {
        transform: translate(4px)
    }

@media only screen and (min-width: 768px) {
    .button--large.button--withArrow {
        padding: 16px 20px 16px 32px
    }

    .button--large .button__arrowIcon {
        height: 30px;
        width: 30px
    }
}

.button__arrowIcon {
    height: 20px;
    transition: transform var(--transition-time-short) linear;
    width: 20px
}

@media only screen and (max-width: 767px) {
    .button__arrowIcon {
        height: 18px;
        width: 18px
    }
}

.button--loading .button__arrowIcon {
    display: none
}

.button--withIcon {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center
}

    .button--withIcon:where(.block,.button--block) {
        display: flex;
        width: 100%
    }

    .button--withIcon:where(.inline,.button--inline) {
        display: inline-flex;
        width: auto
    }

:where(.button--withIcon) .svg-icon {
    height: 1.2em;
    width: 1.2em
}

@media only screen and (max-width: 1055px) {
    .button--withIconCollapsible {
        padding: 12px;
        width: auto
    }
}

.button--facebook {
    color: var(--neutral-01)
}

    .button--facebook, .button--facebook:hover, .button--facebook:active, .button--facebook:focus {
        background-color: var(--brand-color-facebook)
    }

        .button--facebook:hover, .button--facebook:active, .button--facebook:focus {
            color: #d6d6d6
        }

.button--instagram {
    color: var(--neutral-01)
}

    .button--instagram, .button--instagram:hover, .button--instagram:active, .button--instagram:focus {
        background-color: var(--brand-color-instagram)
    }

        .button--instagram:hover, .button--instagram:active, .button--instagram:focus {
            color: #d6d6d6
        }

.button--twitter {
    color: var(--neutral-01)
}

    .button--twitter, .button--twitter:hover, .button--twitter:active, .button--twitter:focus {
        background-color: var(--brand-color-twitter)
    }

        .button--twitter:hover, .button--twitter:active, .button--twitter:focus {
            color: #d6d6d6
        }

.button--buffer {
    color: var(--neutral-01)
}

    .button--buffer:before {
        background-image: url(/images/icons/icon-buffer.svg);
        background-size: 14px;
        content: "";
        display: inline-block;
        height: 16px;
        margin-bottom: -2px;
        margin-right: 6px;
        width: 16px
    }

    .button--buffer, .button--buffer:hover, .button--buffer:active, .button--buffer:focus {
        background-color: var(--brand-color-buffer-bg)
    }

        .button--buffer:hover, .button--buffer:active, .button--buffer:focus {
            color: #d6d6d6
        }

.button--warning {
    background-color: var(--accent-03)
}

    .button--warning, .button--warning:hover, .button--warning:active, .button--warning:focus {
        color: var(--neutral-01)
    }

        .button--warning:disabled {
            background-color: var(--neutral-03);
            border: solid 1px var(--neutral-04);
            color: var(--neutral-04)
        }

.button--ghostWarning {
    background-color: transparent;
    border: solid 1px var(--accent-03);
    box-shadow: none;
    color: var(--accent-03);
    min-width: unset
}

    .button--ghostWarning:hover {
        box-shadow: none;
        color: var(--accent-03)
    }

    .button--ghostWarning:active, .button--ghostWarning:focus {
        background-color: var(--accent-03);
        border-color: var(--accent-03);
        box-shadow: none;
        color: var(--neutral-01)
    }

    .button--ghostWarning:disabled {
        background-color: transparent;
        border-color: var(--neutral-05);
        color: var(--neutral-05)
    }

.button--applePay {
    -webkit-appearance: -apple-pay-button;
    height: 44px;
    -apple-pay-button-style: var(--color-always-black);
    -apple-pay-button-type: plain;
    width: 160px
}

@media only screen and (max-width: 767px) {
    .button--applePay {
        display: block;
        height: 42px;
        width: 100%
    }
}

.button--googlePay {
    --bg-color: var(--color-always-black);
    background: var(--bg-color) url(/images/payment/google_pay--dark.svg) no-repeat center center;
    background-origin: content-box;
    background-size: contain;
    min-height: 44px;
    padding: 12px 24px 10px
}

.footer {
    background: var(--neutral-06);
    color: var(--neutral-03);
    line-height: 1.8;
    position: relative;
    z-index: calc(var(--depth__contentComponentDialogs) - 1)
}

    .footer a, .footer a:hover {
        color: var(--neutral-01);
        text-decoration: underline
    }

.footer__links {
    background: var(--neutral-06);
    border-top: 1px solid var(--neutral-02);
    font-size: var(--font-size-milli);
    padding: 6px
}

    .footer__links a, .footer__links button {
        font-family: var(--font-sans-serif);
        color: inherit;
        text-decoration: none !important
    }

        .footer__links a:hover, .footer__links button:hover {
            opacity: .8;
            text-decoration: none !important
        }

@media only screen and (max-width: 767px) {
    .footer__links .footerLinks__list {
        display: block
    }
}

.footer__links .footerLinks__list > li {
    margin-right: 32px
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .footer__links .footerLinks__list > li {
        margin-right: 24px
    }
}

.footer--minimal .footer__links {
    border-top: none
}

@media only screen and (max-width: 767px) {
    .footerLinks__listItem {
        margin-bottom: 8px
    }
}

.footer__sitemapLinks a {
    text-decoration: none !important;
    width: calc(100% + 32px)
}

    .footer__sitemapLinks a:active, .footer__sitemapLinks a:focus {
        background-color: var(--neutral-05);
        color: var(--neutral-01)
    }

.footer__separator {
    background: var(--neutral-04);
    height: 1px;
    margin-top: 40px;
    padding: 0 !important
}

.footer__bottomSpacer {
    margin-bottom: 40px
}

.footer__inner {
    padding: 24px 0
}

.footer__logo {
    margin-top: 40px;
    width: 320px
}

.footer--minimal {
    border-top: 1px solid var(--color-light-gray);
    padding-top: 0
}

@media only screen and (max-width: 767px) {
    .connectWithUs__faq {
        margin-bottom: 0
    }
}

@media only screen and (min-width: 768px) {
    .connectWithUs__faq {
        margin-top: 24px
    }
}

label {
    font-family: var(--font-sans-serif);
    color: var(--neutral-05);
    display: block;
    margin-bottom: 24px
}

    label > input[type=radio], label > input[type=checkbox], label > input[type=file], label > select {
        margin-bottom: 2px;
        vertical-align: middle
    }

    label .note {
        font-weight: 400
    }

.form {
    position: relative
}

    .form > * {
        margin-bottom: 24px
    }

        .form > *:last-child {
            margin-bottom: 0
        }

.form--inline {
    align-items: center;
    display: flex;
    flex-flow: row wrap
}

    .form--inline > * {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
        width: auto
    }

        .form--inline > * + * {
            margin-left: 20px
        }

    .form--inline input:not([type]), .form--inline input[type=text], .form--inline input[type=password], .form--inline input[type=date], .form--inline input[type=datetime], .form--inline input[type=datetime-local], .form--inline input[type=month], .form--inline input[type=week], .form--inline input[type=email], .form--inline input[type=number], .form--inline input[type=search], .form--inline input[type=tel], .form--inline input[type=time], .form--inline input[type=url], .form--inline input[type=color], .form--inline textarea {
        display: inline-block;
        margin-bottom: 0;
        margin-right: 20px;
        vertical-align: middle;
        width: auto
    }

    .form--inline .form__field {
        width: auto
    }

        .form--inline .form__field .form__microCopy, .form--inline .form__field .error {
            left: 0;
            position: absolute;
            width: 100%
        }

        .form--inline .form__field .form__microCopy {
            bottom: -100%
        }

        .form--inline .form__field > .awesomplete {
            width: 100%
        }

    .form--inline .error .form__microCopy {
        display: none
    }

.form--centered {
    justify-content: center
}

.form__controls {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px 0 0;
    text-align: center
}

    .form__controls > * {
        margin-bottom: 8px
    }

        .form__controls > *:last-child {
            margin-bottom: 0
        }

.form__controls--inline {
    flex-flow: row wrap
}

    .form__controls--inline > * {
        margin-bottom: 0;
        margin-right: 8px
    }

@media only screen and (min-width: 768px) {
    .md\:form__controls--inline {
        flex-flow: row wrap
    }

        .md\:form__controls--inline > * {
            margin-bottom: 0;
            margin-right: 8px
        }
}

@media only screen and (max-width: 767px) {
    .md\:form__controls--inline .button:not(:last-child) {
        margin-bottom: 20px
    }
}

.form__uploadButton {
    font-family: var(--font-serif);
    background-color: var(--color-light-gray);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px #0000004d;
    color: var(--neutral-06);
    display: inline-block;
    font-size: var(--font-size-centi);
    font-weight: 400;
    padding: 8px 20px;
    text-align: center
}

    .form__uploadButton:hover, .form__uploadButton :active {
        background-color: var(--neutral-03)
    }

.form__microCopy {
    color: var(--neutral-05);
    display: block;
    line-height: 1.2;
    margin-top: 4px
}

.form__field {
    position: relative;
    width: 100%
}

    .form__field > input, .form__field > textarea, .form__field > .inputGroup {
        margin-bottom: 0
    }

    .form__field > .message {
        bottom: 0;
        left: 0;
        position: absolute
    }

    .form__field label {
        line-height: 1.2;
        margin-bottom: 4px
    }

    .form__field.inline > input, .form__field.inline > label {
        display: inline-block
    }

    .form__field.inline > input {
        width: auto
    }

.form__field--withAutocomplete .awesomplete {
    display: block
}

.form__formNote {
    font-family: var(--font-sans-serif);
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    position: absolute;
    right: 0
}

label.error {
    color: var(--accent-03)
}

span.error, small.error {
    font-family: var(--font-sans-serif);
    background-color: transparent;
    color: var(--accent-03);
    display: block;
    line-height: 1.2;
    margin-bottom: -8px;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transform: translateY(-40px);
    transition: transform .25s var(--squatchStretch);
    z-index: -1
}

    span.error *, small.error * {
        color: var(--accent-03)
    }

.error small.error, .error span.error, .error ~ small.error, .error ~ span.error {
    max-height: none;
    padding-top: 4px;
    position: relative;
    transform: translateY(0);
    z-index: 1
}

    .error small.error:before, .error span.error:before, .error ~ small.error:before, .error ~ span.error:before {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(210 31 24)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M15.628 25.427c-1.146 0-2-.88-2-2.023 0-1.167.854-2.047 2-2.047s2 .88 2 2.047c0 1.143-.854 2.023-2 2.023zm1.664-16.006l-.114 2.927-.47 6.732H14.55l-.472-6.732-.113-2.927h3.327zm11.54 13.892L18.206 5.466A2.975 2.975 0 0015.628 4a2.977 2.977 0 00-2.578 1.466L2.427 23.313a2.967 2.967 0 00-.03 3.017 2.965 2.965 0 002.607 1.518h21.25a2.965 2.965 0 002.606-1.518 2.97 2.97 0 00-.029-3.017z'/%3E%3C/svg%3E") no-repeat center;
        content: "";
        display: inline-block;
        height: 20px;
        margin-right: 4px;
        vertical-align: bottom;
        width: 20px
    }

@media only screen and (max-width: 767px) {
    .error small.error:before, .error span.error:before, .error ~ small.error:before, .error ~ span.error:before {
        height: 18px;
        width: 18px
    }
}

.error label:not(.button) {
    color: var(--accent-03) !important;
    position: relative;
    z-index: 1
}

.error .input, .error input {
    margin-bottom: 0
}

    .error .input, .error input:not([type=checkbox],[type=radio]), .error textarea {
        border-color: var(--accent-03);
        z-index: 3
    }

        .error .input:focus, .error input:not([type=checkbox],[type=radio]):focus, .error textarea:focus {
            border-color: transparent
        }

        .error .input + .form__microCopy, .error input:not([type=checkbox],[type=radio]) + .form__microCopy, .error textarea + .form__microCopy {
            margin-top: 0
        }

.error a {
    color: var(--color-link)
}

.error .error + .form__microCopy {
    display: none
}

.error .form__helpText {
    display: none
}

.error + .form__helpText {
    display: none
}

.error--captcha {
    border: var(--accent-03) 1px solid
}

.form_passwordInput {
    position: relative
}

    .form_passwordInput input {
        padding-right: 50px
    }

        .form_passwordInput input[type=text] {
            font-family: var(--font-monospace) !important
        }

.form_passwordInputButton {
    color: var(--brand-02);
    padding: 2px 8px;
    position: absolute;
    right: 0;
    top: 10px
}

*:target {
    scroll-margin-top: var(--nav-mainbar-height)
}

input:target {
    scroll-margin-top: calc(var(--nav-mainbar-height) + 24px)
}

.navigationHeader {
    font-family: var(--font-sans-serif);
    pointer-events: none;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: calc(var(--depth__headingComponents) + 2)
}

@media only screen and (max-width: 767px) {
    .navigationHeader {
        display: none
    }
}

@media print {
    .navigationHeader {
        display: none
    }
}

@media only screen and (max-width: 767px) {
    .navigationHeader--mentor {
        display: block
    }
}

.navigationHeader__primaryNavigationBar {
    background-color: var(--neutral-01);
    box-shadow: 0 8px 16px #6a6a6a1a;
    height: var(--nav-mainbar-height);
    position: relative
}

.navigationHeader__primaryNavigationBar--hideContent .primaryNavigationBar {
    display: none
}

.primaryNavigationBar {
    align-items: center;
    display: flex;
    height: 100%;
    position: relative
}

.primaryNavigationBar__navigation {
    margin-left: 24px;
    position: relative;
    transition: transform var(--transition-time) var(--easeOutQuint)
}

@media only screen and (min-width: 1056px) {
    .navigationHeader--collapsed .primaryNavigationBar__navigation {
        transform: translate(-30px)
    }
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .primaryNavigationBar__navigation {
        margin-left: 16px
    }
}

.primaryNavigationBar__navigation > ul {
    flex-wrap: nowrap;
    line-height: 1;
    margin: 0;
    pointer-events: all;
    transform-origin: center left;
    transition: transform var(--transition-time) var(--easeOutQuint);
    white-space: nowrap
}

    .primaryNavigationBar__navigation > ul > li {
        margin: 0
    }

        .primaryNavigationBar__navigation > ul > li:not(:last-of-type) {
            margin-right: 16px
        }

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .primaryNavigationBar__navigation > ul > li:not(:last-of-type) {
        margin-right: 8px
    }
}

.primaryNavigationBar__navigation .link {
    color: var(--neutral-06);
    display: block
}

    .primaryNavigationBar__navigation .link:hover {
        color: var(--brand-02)
    }

.primaryNavigationBar__logo {
    flex-shrink: 0;
    height: 58px;
    pointer-events: all;
    transform-origin: center left;
    transition: transform var(--transition-time) var(--easeOutQuint)
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .primaryNavigationBar__logo {
        height: 48px
    }
}

@media only screen and (max-width: 767px) {
    .primaryNavigationBar__logo {
        height: 42px
    }
}

@media only screen and (min-width: 1056px) {
    .navigationHeader--collapsed .primaryNavigationBar__logo {
        transform: scale(calc(48 / 58))
    }
}

.primaryNavigationBar__accountDetails {
    justify-content: flex-end;
    margin-left: auto;
    min-width: 186px
}

.primaryNavigationBar__accountDetails--mentor {
    min-width: unset
}

.primaryNavigationBar__searchbar {
    align-items: stretch;
    background: var(--color-always-white);
    display: none;
    flex-direction: column;
    justify-content: center;
    left: 0;
    opacity: .5;
    pointer-events: all;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%
}

@supports (clip-path: polygon(0 0,100% 0,100% 100%,0 100%)) {
    .primaryNavigationBar__searchbar {
        clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
        display: block;
        transition: clip-path .3s ease-out,opacity .3s ease-in
    }
}

.primaryNavigationBar__searchbar--active {
    display: flex;
    opacity: 1
}

@supports (clip-path: polygon(0 0,100% 0,100% 100%,0 100%)) {
    .primaryNavigationBar__searchbar--active {
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        transition: clip-path .3s ease-out,opacity .3s ease-out
    }
}

.navigationHeaderLogo__image {
    display: block;
    height: 100%;
    margin-bottom: auto;
    margin-top: auto;
    width: auto
}

.navigationHeader__secondaryNavigationBar {
    background-color: var(--neutral-06);
    color: var(--neutral-03);
    display: flex;
    flex-direction: column;
    height: var(--links-bar-height);
    justify-content: center;
    overflow: hidden;
    pointer-events: all;
    position: relative;
    z-index: calc(var(--depth__headingComponents) + 2)
}

    .navigationHeader__secondaryNavigationBar .navigationHeader__linksList {
        flex-wrap: nowrap
    }

.navigationHeader__linksList {
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-centi);
    list-style: none;
    white-space: nowrap
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .navigationHeader__linksList {
        font-size: var(--font-size-milli)
    }
}

.navigationHeader__linksList > li {
    margin-bottom: 0
}

    .navigationHeader__linksList > li:not(:last-of-type) {
        margin-right: 32px
    }

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .navigationHeader__linksList > li:not(:last-of-type) {
        margin-right: 24px
    }
}

.navigationHeader__linksList > li > a {
    color: inherit;
    display: block;
    text-decoration: none
}

    .navigationHeader__linksList > li > a:hover {
        color: var(--neutral-01)
    }

.navigationHeader__link {
    font-size: .8rem;
    text-decoration: none
}

@media only screen and (min-width: 1056px) {
    .navigationHeader__link {
        font-size: 1rem
    }
}

.userMenu__toggle {
    align-items: center;
    color: var(--neutral-06) !important;
    display: flex;
    font-size: var(--font-size-milli) !important;
    height: 100%;
    margin: 0;
    padding-right: 12px
}

    .userMenu__toggle:before {
        display: none !important
    }

#profileMenuToggle:checked ~ .mobileHeaderMainNav__memberMenu {
    display: block
}

.btn-offcanvas {
    font-size: var(--font-size-kilo);
    height: 64px;
    width: 64px
}

.stickySecondaryNavHeaderScrollMargin *:target {
    scroll-margin-top: calc(var(--nav-mainbar-height) + 60px)
}

.stickySecondaryNavHeader {
    position: sticky;
    top: var(--nav-mainbar-height);
    z-index: var(--depth__headingComponents)
}

@media only screen and (max-width: 767px) {
    .stickySecondaryNavHeader {
        top: 64px
    }

    .hasCollapsedHeader .stickySecondaryNavHeader {
        position: static
    }
}

.mobileHeader {
    box-shadow: 0 8px 16px #6a6a6a1a;
    left: 0;
    position: sticky;
    top: 0;
    transition: transform var(--transition-time) var(--easeOutQuint);
    width: 100%;
    will-change: transform;
    z-index: calc(var(--depth__headingComponents) + 2)
}

@media only screen and (min-width: 768px) {
    .mobileHeader {
        display: none
    }
}

@media print {
    .mobileHeader {
        display: none
    }
}

.mobileHeader--collapsed {
    transform: translateY(calc(-100% - 3px))
}

.mobileHeaderMainNav {
    align-items: center;
    background-color: var(--neutral-01);
    display: flex;
    height: 64px
}

.mobileHeaderMainNav__logo {
    width: 128px
}

.mobileHeaderMainNav__searchMenu {
    margin-left: auto
}

.mobileHeaderMainNav__userMenu {
    display: flex;
    height: 100%;
    margin-left: auto;
    position: relative
}

    .mobileHeaderMainNav__userMenu .button {
        margin-bottom: auto;
        margin-right: 16px;
        margin-top: auto;
        min-width: unset
    }

.mobileHeaderMainNav__searchMenu + .mobileHeaderMainNav__userMenu {
    margin-left: 18px
}

.mobileHeaderMainNav__memberMenu {
    box-shadow: 0 8px 16px #6a6a6a1a;
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-04);
    border-radius: 8px;
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 100%;
    white-space: nowrap;
    width: 100px
}

.mobileHeaderMainNav__memberMenuItem {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    z-index: 2
}

    .mobileHeaderMainNav__memberMenuItem:not(:first-of-type) {
        border-top: 1px solid var(--neutral-04)
    }

.mobileHeaderMainNav__memberMenuItemLinks {
    color: inherit;
    height: 100%;
    justify-content: center;
    padding: 12px 0;
    text-decoration: none;
    width: 100%
}

.userMenuCaret {
    transition: transform var(--transition-time-short) linear
}

#profileMenuToggle:checked ~ .userMenu__toggle .userMenuCaret {
    transform: rotate(180deg)
}

.heading-group {
    margin-bottom: 45px;
    margin-top: 45px
}

    .heading-group + .sharingPanel {
        margin-bottom: 45px;
        margin-top: -25px
    }

.heading {
    font-family: var(--font-sans-serif);
    margin-bottom: 20px;
    position: relative
}

.heading-group__subheading {
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    margin-top: 10px
}

.heading--componentHeading {
    border-bottom: 1px solid var(--color-light-gray);
    font-size: 26px;
    margin-bottom: 20px;
    margin-top: 20px
}

.heading--bodyHeading {
    margin-bottom: 20px;
    margin-top: 10px
}

.heading--subComponentHeading {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: 22px;
    justify-content: flex-start;
    margin-bottom: 20px;
    margin-top: 20px
}

[data-lazyload] * {
    animation: none !important
}

.inlineList {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0
}

    .inlineList > li, .inlineList__item {
        margin-right: 16px;
        padding: 0
    }

        .inlineList > li:last-of-type, .inlineList__item:last-of-type {
            margin-right: 0
        }

.inlineList__item--right {
    margin-left: auto
}

.inlineList--withSeparator li {
    margin-right: 12px;
    padding-right: 12px;
    position: relative
}

    .inlineList--withSeparator li:after {
        background-color: var(--neutral-04);
        content: "";
        height: 90%;
        position: absolute;
        right: 0;
        top: 2px;
        width: 2px
    }

    .inlineList--withSeparator li:last-of-type {
        padding-right: 0
    }

        .inlineList--withSeparator li:last-of-type:after {
            content: none
        }

.accountDetails {
    align-items: center;
    display: flex;
    padding: 0 20px;
    pointer-events: all
}

.accountDetails--offCanvas {
    justify-content: center;
    padding-top: 30px
}

.accountDetails__inner {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start
}

.accountDetails__login.link {
    color: var(--neutral-06);
    font-size: .8rem;
    margin-bottom: 2px
}

@media only screen and (min-width: 1056px) {
    .accountDetails__login.link {
        font-size: 1rem
    }
}

.accountDetails__loginList > li {
    margin-bottom: 0;
    margin-right: 20px
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .accountDetails__loginList > li {
        margin-right: 16px
    }
}

.accountDetails__image {
    border-radius: 50%;
    color: var(--neutral-05);
    flex-shrink: 0;
    height: 48px;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: transform var(--transition-time) var(--easeOutQuint);
    width: 48px
}

@media only screen and (min-width: 1056px) {
    .accountDetails__image {
        height: 56px;
        width: 56px
    }
}

.accountDetails__image:after {
    border-radius: 50%;
    content: "";
    left: 0;
    max-height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.accountDetails__image img {
    height: auto;
    overflow: hidden;
    width: 100%
}

@media only screen and (min-width: 1056px) {
    .navigationHeader--collapsed .accountDetails__image {
        transform: scale(calc(52 / 56))
    }
}

.accountDetails__info {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    line-height: 1;
    padding-left: 10px
}

.accountDetails__name {
    color: var(--neutral-06);
    font-size: var(--font-size-centi);
    line-height: 1.25;
    max-height: 32.5px;
    max-width: 200px;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .accountDetails__name {
        font-size: var(--font-size-milli)
    }
}

.accountDetails__links {
    line-height: 1;
    padding: 0
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .accountDetails__links .link--small {
        font-size: var(--font-size-milli)
    }
}

.accountDetails--right {
    padding-right: 0
}

    .accountDetails--right .accountDetails__info {
        align-items: flex-end;
        order: 1;
        padding-left: 0;
        padding-right: 10px
    }

    .accountDetails--right .accountDetails__name {
        text-align: right
    }

    .accountDetails--right .accountDetails__image {
        order: 2
    }

    .accountDetails--right.accountDetails--isGuest {
        min-width: 170px
    }

@media only screen and (min-width: 1056px) {
    .accountDetails--right.accountDetails--isGuest {
        min-width: 310px
    }
}

ixdf-ad-area {
    aspect-ratio: 1024/126;
    background: var(--neutral-03);
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media only screen and (width <= 649px) {
    ixdf-ad-area {
        aspect-ratio: 464/360;
        max-width: 464px
    }
}

ixdf-ad-area[location=column] {
    aspect-ratio: 464/360;
    max-width: 464px
}

@media only screen and (width <= 349px) {
    ixdf-ad-area, ixdf-ad-area[location=column] {
        aspect-ratio: 256/339;
        max-width: 256px
    }
}

ixdf-ad-area[location=sidebar] {
    aspect-ratio: 256/339;
    max-width: 256px
}

ixdf-ad-area img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.alertMessage {
    animation: slideOutToLeft var(--transition-time) ease-in;
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-04);
    border-radius: var(--border-radius-large);
    color: var(--text-color);
    display: block;
    margin: 16px 0;
    overflow: hidden;
    padding: 8px;
    pointer-events: all;
    position: relative
}

    .alertMessage:after {
        content: "";
        height: 20px;
        left: 8px;
        position: absolute;
        top: 10px;
        width: 20px
    }

@media only screen and (max-width: 767px) {
    .alertMessage:after {
        height: 18px;
        width: 18px
    }
}

.alertMessage__text {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0
}

.alertMessage__title {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0
}

.alertMessage__subtitle {
    font-family: var(--font-sans-serif);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .15px;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px
}

.alertMessage__closeButton {
    color: var(--text-color);
    font-size: var(--font-size-mega);
    padding: 0 13px;
    position: absolute;
    right: 4px;
    top: 3px
}

    .alertMessage__closeButton:hover, .alertMessage__closeButton:focus {
        color: var(--neutral-05)
    }

.alertMessage--success:after {
    background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(69 114 5)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M12 25a1 1 0 01-.71-.29l-8-8A1 1 0 014.7 15.3l7.3 7.29 15.29-15.3A1 1 0 0128.7 8.7l-16 16a1 1 0 01-.7.3z'/%3E%3C/svg%3E") no-repeat center
}

.alertMessage--warning:after {
    background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(245 133 30)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M25.95 24.68L24 18.84V14a8 8 0 00-7-7.93V5a1 1 0 00-2 0v1.07A8 8 0 008 14v4.84l-1.95 5.84A1 1 0 007 26h6.18a3 3 0 005.63 0H25a1 1 0 00.95-1.32zM10 14a6 6 0 1112 0v4H10v-4zM8.39 24l1.33-4h12.56l1.33 4H8.39z'/%3E%3C/svg%3E") no-repeat center
}

.alertMessage--error:after {
    background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(210 31 24)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M15.628 25.427c-1.146 0-2-.88-2-2.023 0-1.167.854-2.047 2-2.047s2 .88 2 2.047c0 1.143-.854 2.023-2 2.023zm1.664-16.006l-.114 2.927-.47 6.732H14.55l-.472-6.732-.113-2.927h3.327zm11.54 13.892L18.206 5.466A2.975 2.975 0 0015.628 4a2.977 2.977 0 00-2.578 1.466L2.427 23.313a2.967 2.967 0 00-.03 3.017 2.965 2.965 0 002.607 1.518h21.25a2.965 2.965 0 002.606-1.518 2.97 2.97 0 00-.029-3.017z'/%3E%3C/svg%3E") no-repeat center
}

.alertMessage--info:after {
    background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(106 106 106)'%3E%3Cg fill-rule='evenodd'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M16 11.6c-1.12 0-1.92-.721-1.92-1.721s.8-1.72 1.92-1.72c1.122 0 1.92.72 1.92 1.72s-.799 1.72-1.92 1.72zm-1.72 12.242h3.44V13.84h-3.44v10.002zM16 3C8.832 3 3 8.832 3 16s5.832 13 13 13 13-5.832 13-13S23.168 3 16 3z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center
}

.alertMessage--closingAnimation {
    animation: fadeOut var(--transition-time) ease-out,verticalScaleOut calc(var(--transition-time) * .3) ease-out calc(var(--transition-time) * .7)
}

.alertMessage__fillerDiv {
    height: 0;
    transition: height calc(var(--transition-time) * .5) ease-in
}

.alertContainer {
    contain: content;
    overflow: hidden
}

.alertContainer--page {
    padding-bottom: 20px;
    pointer-events: none;
    position: fixed;
    top: 64px;
    transform: translateY(0);
    transition: transform var(--transition-time) var(--easeOutQuint);
    width: 100%;
    will-change: opacity;
    z-index: var(--depth__notifications)
}

    .alertContainer--page .alertMessage {
        box-shadow: 0 12px 20px #6a6a6a1a;
        margin-left: auto;
        max-width: 100%;
        padding: 17px 45px;
        width: calc(100% - 40px)
    }

@media only screen and (max-width: 767px) {
    .alertContainer--page .alertMessage {
        margin-right: auto
    }
}

@media only screen and (min-width: 768px) {
    .alertContainer--page .alertMessage {
        width: calc(100% * 5 / 12)
    }
}

@media only screen and (min-width: 1056px) {
    .alertContainer--page .alertMessage {
        width: calc(1000px * 1 / 3)
    }
}

.alertContainer--page .alertMessage:after {
    left: 17px;
    top: 18px
}

.alertContainer--page .alertMessage__closeButton {
    top: 12px
}

@media only screen and (min-width: 768px) {
    .alertContainer--page .alertMessage__closeButton {
        top: 10px
    }
}

.alertContainer--inline .alertMessage__text {
    margin-left: 24px;
    margin-right: 24px
}

.alertContainer--inline .alertMessage--success {
    border: solid 1px var(--accent-01);
    color: var(--accent-01)
}

.alertContainer--inline .alertMessage--error {
    border: solid 1px var(--accent-03);
    color: var(--accent-03)
}

@media only screen and (max-width: 767px) {
    body.hasCollapsedHeader .alertContainer--page {
        transform: translateY(-54px)
    }
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .alertContainer--page {
        top: 87px
    }

    body.hasCollapsedHeader .alertContainer--page {
        transform: translateY(-25px)
    }
}

@media only screen and (min-width: 1056px) {
    .alertContainer--page {
        top: 112px
    }

    body.hasCollapsedHeader .alertContainer--page {
        transform: translateY(-54px)
    }
}

.assistant {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%
}

    .assistant img {
        height: auto;
        width: 100%
    }

.assistant__image {
    flex: 0 0 64px;
    height: 64px;
    width: 64px
}

@media only screen and (min-width: 768px) {
    .assistant__image {
        flex: 0 0 84px;
        height: 84px;
        max-width: 84px
    }
}

.assistant__bubble {
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-04);
    border-radius: 8px;
    flex: 1 1 auto;
    margin-left: 14px;
    padding: 16px;
    position: relative
}

    .assistant__bubble:before {
        border-color: transparent var(--neutral-04);
        border-style: solid;
        border-width: 8px 8px 8px 0;
        content: "";
        display: block;
        left: -9px;
        position: absolute;
        top: 42%;
        width: 0
    }

    .assistant__bubble:after {
        border-color: transparent var(--neutral-01);
        border-style: solid;
        border-width: 7px 7px 7px 0;
        content: "";
        display: block;
        left: -7px;
        position: absolute;
        top: 43%;
        width: 0
    }

.awesomplete > ul mark {
    background: none;
    color: var(--brand-01)
}

.awesomplete > input {
    min-width: 20%
}

.form__field div.awesomplete {
    display: block;
    width: 100%
}

.breadcrumbs__crumbs {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0
}

.breadcrumbs__item {
    font-family: var(--font-sans-serif);
    align-items: center;
    color: var(--text-color);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-right: 8px;
    max-width: 100%
}

    .breadcrumbs__item:not(:last-of-type):after {
        border-bottom: solid 1px var(--neutral-05);
        border-bottom-right-radius: 2px;
        border-right: solid 1px var(--neutral-05);
        content: "";
        height: 10px;
        margin-left: 4px;
        transform: rotate(-45deg);
        width: 10px
    }

    .breadcrumbs__item a {
        color: var(--text-color);
        max-width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

@media only screen and (max-width: 767px) {
    .breadcrumbs__item a {
        max-width: 260px
    }
}

.breadcrumbs__item a:hover, .breadcrumbs__item a:focus, .breadcrumbs__item a:active {
    color: var(--color-link-hover)
}

.cell {
    border: 1px solid var(--neutral-05)
}

@media only screen and (min-width: 768px) {
    .cell {
        border-left: none
    }
}

.cell:first-of-type {
    border-bottom-left-radius: 8px;
    border-left: 1px solid var(--neutral-05);
    border-top-left-radius: 8px
}

.cell:last-of-type {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px
}

.cell:hover {
    background-color: var(--color-hover-gray)
}

.countdown {
    font-family: var(--font-sans-serif);
    color: var(--text-color);
    max-width: 180px;
    text-align: center
}

    .countdown .countdown__title {
        border-bottom: 1px solid var(--neutral-04);
        padding: 0 0 4px
    }

    .countdown .clock {
        padding-top: 8px;
        place-content: flex-start flex-start;
        text-transform: lowercase
    }

        .countdown .clock .number {
            font-weight: 700;
            line-height: 1
        }

        .countdown .clock .clock-item:not(:first-child) .number {
            border-left: 1px solid var(--neutral-04)
        }

        .countdown .clock .unit {
            color: var(--neutral-05);
            font-size: var(--font-size-milli)
        }

.clock-item--fixWidth {
    width: 35px
}

.countdown--horizontal {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: none
}

    .countdown--horizontal .countdown__title {
        border-bottom: 0;
        flex: 0 0 auto;
        margin: 0 8px 0 0;
        padding: 0
    }

    .countdown--horizontal .countdown__container {
        flex: 1 0 50%;
        width: 160px
    }

        .countdown--horizontal .countdown__container.flexible-countdown {
            width: auto
        }

@media only screen and (max-width: 767px) {
    .courseStickyFooter .countdown__label {
        display: none
    }

    .courseStickyFooter .countdown__container {
        font-size: var(--font-size-milli)
    }

    .courseStickyFooter .clock-item--fixWidth, .courseStickyFooter .clock-item--fixWidth div {
        display: inline-block;
        width: auto
    }

    .courseStickyFooter .countdown .clock {
        padding-top: 0
    }

        .courseStickyFooter .countdown .clock .clock-item .number {
            border: none;
            color: var(--neutral-05);
            font-weight: unset
        }
}

:root {
    --courseAdImageWidth: 100%;
    --courseAdPadding: 24px
}

@media only screen and (max-width: 767px) {
    :root {
        --courseAdPadding: 16px
    }
}

@media only screen and (min-width: 1056px) {
    :root {
        --courseAdImageWidth: 240px
    }
}

.courseAd {
    background-color: var(--neutral-03);
    border-radius: 8px;
    margin-bottom: 24px;
    margin-top: 24px;
    padding: var(--courseAdPadding);
    position: relative
}

@media print {
    .courseAd {
        display: none
    }
}

.courseAd__title {
    margin-top: 0
}

@media only screen and (min-width: 1056px) {
    .courseAd__title {
        margin: 0 16px 16px 0;
        max-width: calc(100% - var(--courseAdImageWidth))
    }
}

.rteContent .courseAd__certificateSample, .courseAd__certificateSample {
    box-shadow: 0 2px 8px #6a6a6a66;
    max-width: var(--courseAdImageWidth)
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .rteContent .courseAd__certificateSample, .courseAd__certificateSample {
        width: 480px
    }
}

@media only screen and (min-width: 1056px) {
    .rteContent .courseAd__certificateSample, .courseAd__certificateSample {
        position: absolute;
        right: var(--courseAdPadding);
        top: var(--courseAdPadding)
    }
}

.rteContent .courseAd__items, .courseAd__items {
    list-style: none;
    margin: 24px 0 0;
    padding: 0
}

    .rteContent .courseAd__items li:not(:last-child), .courseAd__items li:not(:last-child) {
        margin-bottom: 32px
    }

    .rteContent .courseAd__items li:last-child, .courseAd__items li:last-child {
        margin-bottom: 0
    }

@media only screen and (min-width: 1056px) {
    .rteContent .courseAd__items li:first-child, .courseAd__items li:first-child {
        max-width: calc(100% - var(--courseAdImageWidth))
    }
}

.courseAd__closeTime {
    font-style: italic
}

.courseCertificate:hover .overlay {
    display: flex
}

.courseCertificate img {
    width: 100%
}

.courseCertificate__label {
    font-family: var(--font-serif);
    background-color: #0000007f;
    bottom: 0;
    color: var(--neutral-01);
    display: block;
    height: 72px;
    left: 0;
    padding: 8px 16px;
    position: absolute;
    width: 100%
}

.courseCertificate__overlay {
    font-family: var(--font-serif);
    align-items: center;
    background-color: #bcbcbce5;
    color: var(--neutral-05);
    display: none;
    flex-direction: column;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    width: 100%
}

    .courseCertificate__overlay:before {
        display: none
    }

    .courseCertificate__overlay .overlay-logo {
        height: 112px;
        opacity: .6
    }

.courseCertificate__inner {
    position: relative
}

.difficulty__widget {
    padding-left: 20px;
    width: 40px
}

.difficulty__bars {
    background: var(--neutral-03);
    height: 8px;
    position: relative;
    width: 8px
}

    .difficulty__bars:before, .difficulty__bars:after {
        background: var(--neutral-03);
        content: "";
        height: 8px;
        position: absolute;
        width: 8px
    }

    .difficulty__bars:before {
        background-color: var(--brand-01);
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        left: -10px
    }

    .difficulty__bars:after {
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        right: -10px
    }

.difficulty--intermediate .difficulty__bars, .difficulty--advanced .difficulty__bars {
    background-color: var(--brand-01)
}

    .difficulty--advanced .difficulty__bars:after {
        background-color: var(--brand-01)
    }

.badge__item {
    margin-right: 8px !important
}

    .badge__item:last-child {
        margin-right: 0 !important
    }

.badge__icon {
    height: 24px;
    width: 24px !important
}

.featureBanner {
    overflow: hidden;
    position: relative
}

.featureBanner__background {
    display: block;
    left: calc(50% + 200px);
    opacity: .16;
    position: absolute;
    top: 14px;
    transform: rotate(-15deg);
    width: 380px;
    z-index: 1
}

.featureBanner__content {
    position: relative;
    z-index: 2
}

:root {
    --floating-toolbar-hidden-x-translation: 210px;
    --floating-toolbar-width: 252px
}

.floatingHelpToolbar {
    bottom: 24px;
    position: fixed;
    right: 0;
    transform: translate(var(--floating-toolbar-hidden-x-translation));
    width: var(--floating-toolbar-width);
    will-change: transform;
    z-index: calc(var(--depth__floatingComponents) + 1)
}

@media only screen and (max-width: 767px) {
    .floatingHelpToolbar {
        bottom: 56px
    }
}

.floatingHelpToolbar.is-open {
    transform: translate(0) !important
}

    .floatingHelpToolbar.is-open .floatingHelpToolbar__body {
        animation: animateHelperBody .3s var(--easeOutQuad) forwards .25s
    }

.floatingHelpToolbar.is-closed {
    transform: translate(var(--floating-toolbar-hidden-x-translation))
}

    .floatingHelpToolbar.is-closed .floatingHelpToolbar__body {
        animation: animateHelperBodyOut .3s var(--easeOutQuad) forwards
    }

.floatingHelpToolbar--interactable {
    transform: translate(var(--floating-toolbar-hidden-x-translation));
    transition: transform .35s var(--easeInOutQuint)
}

@media only screen and (min-width: 768px) {
    .floatingHelpToolbar--interactable:hover, .floatingHelpToolbar--interactable:focus {
        transform: translate(0)
    }
}

.floatingHelpToolbar--animate-initial {
    transform: translate(100%)
}

.floatingHelpToolbar--animate-in {
    animation: displayHelpHint .35s var(--easeInOutBack) forwards 2s;
    transform: translate(272px)
}

.floatingHelpToolbar--animate-out {
    animation: hideHelpHint .35s var(--easeInOutBack)
}

.floatingHelpToolbar__name {
    font-size: 21px;
    padding-left: 8px
}

.floatingHelpToolbar__trigger {
    align-items: center;
    background-color: var(--brand-01);
    display: flex;
    height: 50px;
    min-width: 45px;
    padding: 0 20px 0 16px;
    width: var(--floating-toolbar-width)
}

    .floatingHelpToolbar__trigger, .floatingHelpToolbar__trigger:hover, .floatingHelpToolbar__trigger:focus, .floatingHelpToolbar__trigger:active {
        color: var(--neutral-01)
    }

        .floatingHelpToolbar__trigger i {
            font-size: 21px
        }

.floatingHelpToolbar__body {
    max-height: 0;
    opacity: 0;
    overflow: hidden
}

.floatingHelpToolbar__items {
    background-color: var(--neutral-01);
    border: 1px solid var(--neutral-03);
    margin: 0;
    padding: 0
}

    .floatingHelpToolbar__items li {
        min-width: 192px;
        position: relative
    }

        .floatingHelpToolbar__items li:hover {
            background-color: var(--neutral-03)
        }

    .floatingHelpToolbar__items button {
        line-height: 1
    }

@keyframes animateHelperBody {
    0% {
        display: none;
        max-height: 0;
        opacity: 0
    }

    1% {
        display: block;
        max-height: 0;
        opacity: 0
    }

    to {
        max-height: 300px;
        opacity: 1
    }
}

@keyframes animateHelperBodyOut {
    0% {
        display: block;
        max-height: 300px;
        opacity: 1
    }

    99% {
        display: block;
        max-height: 0;
        opacity: 0
    }

    to {
        display: none;
        max-height: 0;
        opacity: 0
    }
}

@keyframes displayHelpHint {
    0% {
        opacity: 0;
        transform: translate(var(--floating-toolbar-hidden-x-translation))
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes hideHelpHint {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(var(--floating-toolbar-hidden-x-translation))
    }
}

.toggleInput {
    display: inline-block;
    height: 24px;
    margin-bottom: 0;
    position: relative;
    width: 40px
}

    .toggleInput input {
        height: 0;
        opacity: 0;
        width: 0
    }

    .toggleInput .toggleInput__slider {
        background-color: var(--neutral-05);
        border-radius: 8px;
        cursor: pointer;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        transition: .4s ease-in-out
    }

        .toggleInput .toggleInput__slider:before {
            background-color: var(--neutral-01);
            border-radius: 6px;
            bottom: 2px;
            content: "";
            height: 20px;
            left: 2px;
            position: absolute;
            transition: .4s ease-in-out;
            width: 20px
        }

        .toggleInput .toggleInput__slider:after {
            background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(106 106 106)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M17.41 16l8.49-8.49a1 1 0 00-1.41-1.41L16 14.59 7.51 6.1A1 1 0 006.1 7.51L14.59 16 6.1 24.49a1 1 0 101.41 1.41L16 17.41l8.49 8.49a1 1 0 001.41-1.41L17.41 16z'/%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            bottom: 6px;
            content: "";
            height: 12px;
            left: 6px;
            position: absolute;
            transition: .4s ease-in-out;
            width: 12px
        }

    .toggleInput input:checked + .toggleInput__slider:before {
        transform: translate(16px)
    }

    .toggleInput input:checked + .toggleInput__slider:after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(0 156 222)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M12 26a2 2 0 01-1.41-.59l-8-8a2 2 0 012.82-2.82L12 21.17 26.59 6.59a2 2 0 012.82 2.82l-16 16A2 2 0 0112 26z'/%3E%3C/svg%3E");
        transform: translate(16px)
    }

    .toggleInput input:checked + .toggleInput__slider {
        background-color: var(--brand-01)
    }

    .toggleInput input:focus + .toggleInput__slider {
        box-shadow: 0 0 2px 2px var(--brand-01)
    }

    .toggleInput input:disabled + .toggleInput__slider {
        background-color: var(--neutral-05);
        cursor: default;
        opacity: .24
    }

        .toggleInput input:disabled + .toggleInput__slider:before {
            background-color: var(--neutral-06)
        }

        .toggleInput input:disabled + .toggleInput__slider:after {
            background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(255 255 255)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M17.41 16l8.49-8.49a1 1 0 00-1.41-1.41L16 14.59 7.51 6.1A1 1 0 006.1 7.51L14.59 16 6.1 24.49a1 1 0 101.41 1.41L16 17.41l8.49 8.49a1 1 0 001.41-1.41L17.41 16z'/%3E%3C/svg%3E")
        }

        .toggleInput input:disabled + .toggleInput__slider:hover, .toggleInput input:disabled + .toggleInput__slider:focus {
            box-shadow: none
        }

    .toggleInput input:disabled:checked + .toggleInput__slider:after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(255 255 255)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M12 26a2 2 0 01-1.41-.59l-8-8a2 2 0 012.82-2.82L12 21.17 26.59 6.59a2 2 0 012.82 2.82l-16 16A2 2 0 0112 26z'/%3E%3C/svg%3E")
    }

    .toggleInput input[readonly] + .toggleInput__slider {
        cursor: default
    }

        .toggleInput input[readonly] + .toggleInput__slider:before {
            background-color: var(--neutral-06)
        }

        .toggleInput input[readonly] + .toggleInput__slider:after {
            background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(249 249 249)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M17.41 16l8.49-8.49a1 1 0 00-1.41-1.41L16 14.59 7.51 6.1A1 1 0 006.1 7.51L14.59 16 6.1 24.49a1 1 0 101.41 1.41L16 17.41l8.49 8.49a1 1 0 001.41-1.41L17.41 16z'/%3E%3C/svg%3E")
        }

        .toggleInput input[readonly] + .toggleInput__slider:hover, .toggleInput input[readonly] + .toggleInput__slider:focus {
            box-shadow: none
        }

    .toggleInput input[readonly]:checked + .toggleInput__slider {
        cursor: default
    }

        .toggleInput input[readonly]:checked + .toggleInput__slider:before {
            background-color: var(--brand-02)
        }

        .toggleInput input[readonly]:checked + .toggleInput__slider:after {
            background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(249 249 249)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M12 26a2 2 0 01-1.41-.59l-8-8a2 2 0 012.82-2.82L12 21.17 26.59 6.59a2 2 0 012.82 2.82l-16 16A2 2 0 0112 26z'/%3E%3C/svg%3E")
        }

        .toggleInput input[readonly]:checked + .toggleInput__slider:hover, .toggleInput input[readonly]:checked + .toggleInput__slider:focus {
            box-shadow: none
        }

.getWeeklyInsightsSidebar {
    box-shadow: 0 2px 8px #6a6a6a66;
    background: var(--neutral-01);
    border-radius: 8px;
    padding: 16px
}

.getWeeklyInsightsSidebar__header {
    font-size: var(--font-size-hecto);
    font-weight: 700;
    margin: 0
}

.getWeeklyInsightsSidebar__description {
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    margin: 8px 0
}

.getWeeklyInsightsSidebar__form {
    display: flex
}

.getWeeklyInsightsSidebar__input {
    font-family: var(--font-sans-serif);
    flex: 2 0 80%
}

    .getWeeklyInsightsSidebar__input input {
        font-family: var(--font-sans-serif);
        color: var(--neutral-06);
        font-size: var(--font-size-centi);
        margin: 0
    }

.getWeeklyInsightsSidebar__button {
    margin-left: -6px
}

.getWeeklyInsightsSidebar__submit {
    background-color: var(--brand-01);
    border: solid 1px var(--neutral-05);
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: var(--neutral-01);
    cursor: pointer;
    font-size: var(--font-size-hecto);
    height: var(--form-input-height);
    min-width: 32px;
    padding: 0;
    width: 46px
}

.hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    position: relative
}

.hero-background {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-size: cover;
    pointer-events: none
}

    .hero-background:after {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        background-color: #000;
        content: "";
        opacity: .5
    }

.hero-background__imageContainer {
    height: 100%;
    width: 100%
}

.hero-background__image {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.hero__title {
    color: var(--neutral-01);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    max-width: 1000px;
    text-align: center
}

.hero__actions {
    margin: 32px 0 0
}

@media only screen and (max-width: 767px) {
    .hero__actions > .button {
        display: block;
        width: 100%
    }
}

.hero__inner {
    align-items: center;
    color: var(--neutral-01);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    padding-bottom: 40px;
    padding-top: 40px;
    position: relative;
    width: 100%
}

.hero__dynamicOverlay {
    position: relative
}

    .hero__dynamicOverlay:before {
        background-blend-mode: multiply;
        background-image: linear-gradient(to right,var(--hero-overlay-color) 0%,transparent 100%);
        content: "";
        height: calc(100% + 160px);
        left: 0;
        position: absolute;
        top: -80px;
        width: 100%;
        z-index: 0
    }

@media only screen and (max-width: 767px) {
    .hero__dynamicOverlay:before {
        background: #2b2b2bb3;
        left: -16px;
        width: 100vw
    }
}

.hero__dynamicOverlay:after {
    background: var(--hero-overlay-color);
    background-blend-mode: multiply;
    bottom: 0;
    content: "";
    display: block;
    height: calc(100% + 160px);
    position: absolute;
    right: 100%;
    top: -80px;
    width: 50vw
}

@media only screen and (max-width: 767px) {
    .hero__dynamicOverlay:after {
        content: none
    }
}

.hero--withDynamicOverlay .hero__inner {
    padding: 80px 0
}

@media only screen and (max-width: 767px) {
    .hero--withDynamicOverlay .hero__inner {
        padding: 40px 0
    }
}

.hero--withDynamicOverlay .hero-background:after {
    display: none
}

.hero--withDynamicOverlay .hero-background__image {
    object-position: right
}

.hero--withTransparentOverlay .hero-background:after {
    display: none
}

.inputGroup {
    display: flex;
    margin-bottom: 10px;
    position: relative;
    width: 100%
}

    .inputGroup > input {
        margin: 0;
        min-width: 50px
    }

    .inputGroup > label {
        margin: 0 10px
    }

    .inputGroup ~ .error {
        margin-bottom: 10px;
        margin-top: 0
    }

    .inputGroup button, .inputGroup .button {
        transition-property: background-color
    }

        .inputGroup button, .inputGroup button:active, .inputGroup .button, .inputGroup .button:active {
            transform: none
        }

.inputGroup__addon {
    background-color: var(--neutral-03);
    border-radius: var(--border-radius-large);
    color: var(--neutral-05);
    display: flex;
    flex-direction: column;
    height: var(--form-input-height);
    justify-content: center;
    line-height: 37px;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap
}

    .inputGroup__addon:before {
        border: 1px solid rgb(0 0 0 / 20%);
        border-radius: var(--border-radius-large);
        content: "";
        height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1
    }

    .inputGroup__addon:not(:first-child,:last-child) {
        border-radius: 0
    }

    .inputGroup__addon:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        margin-right: -1px
    }

        .inputGroup__addon:not(:last-child):before {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0
        }

        .inputGroup__addon:not(:last-child) > .button {
            border-radius: var(--border-radius-large) 0 0 var(--border-radius-large)
        }

    .inputGroup__addon:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }

        .inputGroup__addon:not(:first-child):before {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0
        }

        .inputGroup__addon:not(:first-child) > button {
            border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0
        }

    .inputGroup__addon:last-child {
        margin-left: -5px
    }

    .inputGroup__addon > * {
        margin: 0
    }

    .inputGroup__addon > i, .inputGroup__addon > span, .inputGroup__addon > a:not(.button), .inputGroup__addon > button:not(.button) {
        color: var(--neutral-06);
        padding: 0 30px;
        vertical-align: middle
    }

    .inputGroup__addon > button {
        bottom: 0;
        height: 100%;
        min-width: unset;
        top: 0
    }

    .inputGroup__addon input[type=radio], .inputGroup__addon input[type=checkbox] {
        margin-top: 0
    }

.inputGroup__addon--noBorder:before {
    content: none
}

.inputGroup--inline {
    align-items: center;
    display: inline-flex;
    margin-bottom: 24px;
    padding-right: 24px;
    vertical-align: middle;
    width: auto
}

    .inputGroup--inline > label, .inputGroup--inline > input, .inputGroup--inline > select, .inputGroup--inline > .form__field {
        width: auto
    }

    .inputGroup--inline > :last-child {
        margin: 0
    }

@supports (-ms-ime-align: auto) {
    .inputGroup > input {
        flex: 1 1 0
    }
}

.image, .image img {
    display: block
}

.imageIcon--small {
    height: 16px;
    width: 16px
}

.image--tiny {
    border: solid 4px transparent;
    height: 48px;
    width: 48px
}

.image--small {
    border: solid 6px transparent;
    height: 64px;
    width: 64px
}

.image--medium {
    height: 80px;
    width: 80px
}

.image--large {
    height: 120px;
    width: 120px
}

.image--svgLarge {
    height: 96px;
    width: auto
}

.image--companyLogo {
    height: 60px;
    width: 60px
}

.image--featureHeader {
    aspect-ratio: 100/38;
    object-fit: cover;
    width: 100%
}

.image--round img, img.image--round {
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover
}

.image__placeholder {
    display: block;
    height: 0;
    position: relative
}

.image__placeholderImageItem {
    position: absolute
}

.image__height--auto {
    height: auto
}

.linkStrip {
    font-family: var(--font-sans-serif);
    list-style-type: none;
    margin-left: 0;
    padding-left: 0
}

    .linkStrip:last-child {
        margin-bottom: 0
    }

    .linkStrip.disabled {
        background-color: var(--color-light-gray);
        cursor: auto;
        opacity: .4;
        transition: opacity .6s,background-color .6s
    }

        .linkStrip.disabled a {
            cursor: default
        }

.linkStrip__item {
    align-items: stretch;
    border-bottom: 1px solid var(--neutral-04);
    display: flex;
    margin-bottom: 0;
    padding: 16px;
    transition: background-color .21s var(--easeInOutQuad)
}

    .linkStrip__item:hover, .linkStrip__item:active {
        background-color: var(--neutral-01)
    }

.linkStrip__link {
    align-items: center;
    align-self: center;
    display: flex;
    font-weight: 700;
    line-height: 1.25;
    margin: -16px;
    padding: 16px;
    width: 100%
}

    .linkStrip__link, .linkStrip__link:hover, .linkStrip__link:focus, .linkStrip__link:active {
        color: var(--text-color);
        text-decoration: none
    }

        .linkStrip__link > span {
            width: 100%
        }

        .linkStrip__link .fa, .linkStrip__link [class^=icon-] {
            flex: 0 0 32px;
            line-height: .5;
            text-align: left
        }

            .linkStrip__link .fa + span, .linkStrip__link [class^=icon-] + span {
                flex: 0 0 85%;
                word-wrap: break-word
            }

.linkStrip__item--link {
    padding: 0
}

    .linkStrip__item--link:after {
        content: none
    }

    .linkStrip__item--link .linkStrip__link {
        margin: 0;
        padding: 20px
    }

        .linkStrip__item--link .linkStrip__link svg {
            margin-left: auto;
            transition: transform .25s cubic-bezier(.175,.885,.32,1.275)
        }

        .linkStrip__item--link .linkStrip__link:hover svg {
            transform: translate(5px)
        }

.linkStrip--2cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

    .linkStrip--2cols .linkStrip__item {
        width: 100%
    }

@media only screen and (min-width: 768px) {
    .linkStrip--2cols .linkStrip__item {
        width: 48%
    }
}

.linkStrip__list--fullWidth {
    width: calc(100% + 32px)
}

ixdf-animation {
    display: block
}

.media {
    align-items: center;
    display: flex
}

.media__image {
    flex: 0 0 auto
}

.media__image--40 {
    flex: 0 0 40px;
    max-width: 40px
}

    .media__image--40 img {
        height: auto;
        width: 40px !important
    }

.media__image--64 {
    flex: 0 0 64px;
    max-width: 64px
}

    .media__image--64 img {
        height: auto;
        width: 64px !important
    }

.media__image--80 {
    flex: 0 0 80px;
    max-width: 80px
}

    .media__image--80 img {
        height: auto;
        width: 80px !important
    }

.media__image--120 {
    flex: 0 0 120px;
    max-width: 120px
}

    .media__image--120 img {
        height: auto;
        width: 120px !important
    }

.media__image--160 {
    flex: 0 0 160px;
    max-width: 160px
}

    .media__image--160 img {
        height: auto;
        width: 160px !important
    }

.media__image--smallSquare {
    height: 72px;
    width: 72px
}

    .media__image--smallSquare img {
        width: 72px !important
    }

.media__image--round {
    border-radius: 50%;
    overflow: hidden
}

.media__body {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.78;
    max-width: var(--max-text-width-size);
    flex: 1 1 auto;
    margin: 0;
    padding-left: 16px
}

.media--vertical {
    align-items: center;
    flex-direction: column;
    justify-content: center
}

    .media--vertical .media__image {
        max-width: 100%
    }

    .media--vertical .media__image--120 {
        flex: 0 0 70px;
        max-height: 70px
    }

        .media--vertical .media__image--120 img {
            height: 70px !important;
            width: auto !important
        }

    .media--vertical .media__body {
        padding-left: 0 !important;
        padding-top: 10px
    }

@media only screen and (max-width: 767px) {
    .sm\:media--vertical {
        align-items: center;
        flex-direction: column;
        justify-content: center
    }

        .sm\:media--vertical .media__image {
            max-width: 100%;
            width: 100%
        }

        .sm\:media--vertical .media__image--120 {
            flex: 0 0 70px;
            max-height: 70px
        }

            .sm\:media--vertical .media__image--120 img {
                height: 70px !important;
                width: auto !important
            }

        .sm\:media--vertical .media__body {
            padding-left: 0 !important;
            padding-top: 10px;
            width: 100%
        }
}

.pageAnnouncements {
    box-shadow: 0 8px 16px #6a6a6a1a
}

.pageAnnouncements--mobileHeader.invisible {
    display: none
}

.pageAnnouncement {
    align-items: center;
    background-color: #fc005b;
    margin: 0;
    padding: 8px 0;
    pointer-events: all
}

    .pageAnnouncement a, .pageAnnouncement .link {
        color: inherit;
        font-size: inherit
    }

        .pageAnnouncement a:hover, .pageAnnouncement .link:hover {
            opacity: .8
        }

    .pageAnnouncement .button--block {
        height: var(--notification-height)
    }

.pageAnnouncement__button {
    height: 20px;
    margin-bottom: auto;
    margin-top: auto;
    padding: 0;
    width: 20px
}

@media only screen and (max-width: 767px) {
    .pageAnnouncement__button {
        height: 18px;
        width: 18px
    }
}

@media only screen and (max-width: 767px) {
    .pageAnnouncementButton__icon {
        height: 18px;
        width: 18px
    }
}

.pagination {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-height: 24px;
    padding: 0
}

.pagination__item {
    font-family: var(--font-sans-serif);
    align-items: center;
    border: 1px solid var(--neutral-05);
    color: var(--text-color);
    cursor: default;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-hecto);
    height: 44px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 40px
}

@media only screen and (min-width: 768px) {
    .pagination__item {
        height: 46px;
        width: 46px
    }
}

.pagination__item:first-of-type {
    border-bottom-left-radius: var(--border-radius-large);
    border-top-left-radius: var(--border-radius-large)
}

.pagination__item:last-of-type {
    border-bottom-right-radius: var(--border-radius-large);
    border-top-right-radius: var(--border-radius-large)
}

.pagination__item:not(:last-of-type) {
    border-right: none
}

.pagination__item:hover, .pagination__item:active {
    background-color: var(--brand-01)
}

.pagination__item[aria-disabled=true] {
    pointer-events: none
}

.pagination__item--active {
    background: var(--brand-01);
    color: var(--neutral-01);
    font-weight: 700
}

.pagination__item--summary {
    background: var(--brand-01);
    color: var(--neutral-01);
    width: 80px
}

.pagination__itemLink {
    align-items: center;
    background-color: transparent;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    line-height: inherit;
    padding: 0;
    position: relative;
    text-decoration: none;
    width: 100%
}

    .pagination__itemLink:focus {
        color: var(--text-color);
        text-decoration: none
    }

    .pagination__itemLink:hover, .pagination__itemLink:active {
        color: var(--neutral-01);
        text-decoration: none
    }

    .pagination__itemLink:before {
        content: "";
        height: 20px;
        position: absolute;
        width: 20px
    }

@media only screen and (max-width: 767px) {
    .pagination__itemLink:before {
        height: 18px;
        width: 18px
    }
}

.pagination__itemLink--prev:before {
    background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(43 43 43)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M21 27a1 1 0 01-.71-.29l-10-10a1 1 0 010-1.41l10-10a1 1 0 011.41 1.41L12.41 16l9.29 9.29A1 1 0 0121 27z'/%3E%3C/svg%3E") no-repeat center
}

.pagination__itemLink--next:before {
    background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(43 43 43)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M11 27a1 1 0 01-.71-1.71l9.3-9.29-9.3-9.29A1 1 0 0111.7 5.3l10 10a1 1 0 010 1.41l-10 10a1 1 0 01-.7.29z'/%3E%3C/svg%3E") no-repeat center
}

.pagination__itemLink--first:before {
    background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(43 43 43)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M15.546 5.038A1 1 0 0116 6.71L6.7 16l9.3 9.29a1 1 0 01-.71 1.71 1 1 0 01-.71-.29l-10-10a1 1 0 010-1.41l10-10a1 1 0 01.966-.262zm11.812.314a1 1 0 01.052 1.358L18.13 16l9.29 9.29a1 1 0 01-.71 1.71 1 1 0 01-.71-.29l-10-10a1 1 0 010-1.41l10-10a1 1 0 011.358.052z'/%3E%3C/svg%3E") no-repeat center
}

.pagination__itemLink--last:before {
    background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(43 43 43)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M17.41 5.3l10 10a1 1 0 010 1.41l-10 10A1 1 0 0116 25.29L25.3 16 16 6.71a1 1 0 011.41-1.41zM6 5.29l10 10a1 1 0 010 1.41l-10 10a1 1 0 11-1.42-1.41L13.87 16 4.58 6.71A1.004 1.004 0 016 5.29z'/%3E%3C/svg%3E") no-repeat center
}

.paginationSimple {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0
}

.paginationSimple__button {
    width: 136px
}

@media only screen and (min-width: 768px) {
    .paginationSimple__button {
        width: 160px
    }
}

.paginationSimple__button[aria-disabled=true] {
    pointer-events: none
}

.paginationSimple__button--prev:not(:disabled):hover .button__arrowIcon {
    transform: translate(-4px)
}

.panel {
    margin-bottom: 30px;
    padding: 16px;
    position: relative
}

    .panel > .heading {
        margin-top: 0
    }

.panel__inner {
    margin-right: 0
}

    .panel__inner:first-of-type > .heading {
        margin-top: 0
    }

.panel--minimalFlows {
    width: auto
}

@media only screen and (min-width: 768px) {
    .panel--minimalFlows {
        margin-left: auto;
        margin-right: auto;
        width: 496px
    }
}

.productDescriptionWithPrice {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px
}

.productDescriptionWithPrice__price {
    min-width: 6em
}

.productDescriptionWithPrice--total {
    font-weight: 700
}

.paymentForm__expirationField {
    width: 110px
}

.paymentForm__cvcField {
    width: 70px
}

.progressCircular {
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-kilo);
    font-weight: 700;
    height: 64px;
    position: relative;
    width: 100%  /*64px*/
}

    .progressCircular:after {
        color: var(--neutral-06);
        content: attr(data-percentage) "%";
        display: block;
        left: 0;
        position: absolute;
        text-align: center;
        top: calc(50% - 1px);
        transform: translateY(-50%);
        width: 100%
    }

.progressCircular--small {
    height: 40px;
    width: 40px
}

.progressCircular__indicatorContainer {
    height: 100%;
    transform: rotate(-90deg);
    width: 100%
}

    .progressCircular__indicatorContainer .progressCircular__filledOutIndicator {
        stroke-dashoffset: 101
    }

.progressCircular__potentialIndicator {
    stroke: var(--neutral-03);
    stroke-dashoffset: 0;
    stroke-width: 3px;
    transition: stroke-dashoffset 1s linear
}

.progressCircular__filledOutIndicator {
    stroke: var(--brand-01);
    stroke-dashoffset: 157.14;
    stroke-width: 4px;
    transition: stroke-dashoffset 1s linear
}

.progressCircular--hidePercentage:after {
    content: none
}

.progressCircular--hidePercentage .progressCircular__indicatorContainer {
    margin-bottom: -10px
}

.progressCircular--complete .progressCircular__filledOutIndicator {
    stroke: var(--accent-03)
}

.socialChannels {
    flex-wrap: wrap;
    margin: 40px auto 0;
    max-width: 330px
}

.socialChannels--noMargin {
    margin: 0
}

.socialChannel {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .socialChannel a {
        color: var(--neutral-06);
        transition: all .3s ease-in-out
    }

        .socialChannel a:hover {
            color: var(--brand-01)
        }

.socialChannel__followers {
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    text-transform: uppercase
}

.socialLinks {
    display: flex
}

@media only screen and (max-width: 767px) {
    .socialLinks {
        flex-wrap: wrap
    }
}

.socialLinks--smallSpacing {
    flex-wrap: wrap
}

@media only screen and (min-width: 1056px) {
    .socialLinks--smallSpacing {
        flex-wrap: nowrap
    }
}

.socialLinks--smallSpacing .socialLinks__item {
    margin: 8px 6px
}

.socialLinks__item {
    color: var(--neutral-05);
    display: block;
    margin: auto 12px
}

@media only screen and (max-width: 767px) {
    .socialLinks__item {
        margin: 6px 6px 24px
    }
}

.socialLinks__item:first-child {
    margin-left: 0
}

.socialLinks__item:hover {
    color: var(--brand-01)
}

.socialLinks--white {
    fill: var(--neutral-03)
}

    .socialLinks--white .socialLinks__item:hover {
        fill: var(--neutral-01)
    }

.socialSignal {
    box-shadow: 0 12px 20px #6a6a6a1a;
    font-family: var(--font-sans-serif);
    align-items: flex-start;
    background-color: var(--neutral-06);
    border-radius: var(--border-radius-large);
    color: var(--neutral-01);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 8px 19px;
    pointer-events: auto;
    position: relative;
    width: 350px
}

@media only screen and (max-width: 767px) {
    .socialSignal {
        width: 100% !important
    }
}

@media print {
    .socialSignal {
        display: none
    }
}

.socialSignal--link {
    cursor: pointer
}

.socialSignal__icon {
    background-color: var(--neutral-01);
    border-radius: 50%;
    color: var(--neutral-05);
    display: block;
    flex: 0 0;
    font-size: var(--font-size-centi);
    margin: 4px 10px 0 0;
    min-height: 20px;
    min-width: 20px;
    padding-top: 2px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .socialSignal__icon {
        margin-top: 2px
    }
}

.socialSignal__message {
    flex: 10 0;
    margin-right: 10px;
    word-wrap: break-word
}

    .socialSignal__message a, .socialSignal__message label {
        color: var(--neutral-01)
    }

        .socialSignal__message a:hover {
            color: var(--neutral-04);
            text-decoration: none
        }

.socialSignal__closeButton {
    color: var(--neutral-04);
    flex: 0 0;
    font-size: var(--font-size-mega);
    line-height: 16px;
    margin-top: 5px;
    padding: 0 0 0 13px
}

button.socialSignal__closeButton {
    border: 0;
    padding: 0
}

.icon-ixdf-tree:before {
    background-image: url(/images/icon-why-join-us-signal.svg);
    background-size: 18px;
    content: "";
    display: block;
    height: 16px;
    width: 20px
}

#socialSignalsContainer {
    padding: 0 20px;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: var(--depth__stickyComponents)
}

    #socialSignalsContainer.socialSignalsContainer--bottomCenter > .socialSignal {
        margin-left: auto;
        margin-right: auto;
        width: 100%
    }

@media only screen and (min-width: 768px) {
    #socialSignalsContainer.socialSignalsContainer--bottomCenter > .socialSignal {
        width: 42%
    }
}

@media only screen and (min-width: 1056px) {
    #socialSignalsContainer.socialSignalsContainer--bottomCenter > .socialSignal {
        width: 33%
    }
}

.socialSignalsContainer--bottomCenter {
    bottom: 0
}

@media only screen and (max-width: 767px) {
    .socialSignalsContainer--bottomCenter {
        left: 0 !important;
        margin: 0
    }
}

:root {
    --spinner-animation-duration: .75s;
    --spinner-size: 80px;
    --spinner-ball-size: calc(var(--spinner-size) * .15);
    --spinner-bowl-border-width: calc(var(--spinner-ball-size) / 3);
    --spinner-ball-holder-offset: calc(((var(--spinner-size) - var(--spinner-ball-size)) / 2) - var(--spinner-bowl-border-width));
    --spinner-ball-radius: calc(var(--spinner-ball-size) / 2)
}

.spinner {
    height: var(--spinner-size);
    margin: 0 auto;
    position: relative;
    width: var(--spinner-size)
}

.spinner__bowlRing {
    background-image: url(/images/logo_aihoc_white.svg);
    background-size: 95%;
    border: var(--spinner-bowl-border-width) solid var(--neutral-02);
    border-radius: var(--spinner-size);
    height: var(--spinner-size);
    position: absolute;
    width: var(--spinner-size)
}

.spinner__ballHolder {
    animation-duration: var(--spinner-animation-duration);
    animation-iteration-count: infinite;
    animation-name: ball_move;
    animation-timing-function: linear;
    height: var(--spinner-size);
    left: var(--spinner-ball-holder-offset);
    position: absolute;
    top: calc(-1 * var(--spinner-bowl-border-width));
    width: var(--spinner-ball-size)
}

.spinner__ball {
    background-color: var(--neutral-02);
    border-radius: var(--spinner-ball-radius);
    height: var(--spinner-ball-size);
    left: 0;
    position: absolute;
    top: calc(-1 * var(--spinner-bowl-border-width));
    width: var(--spinner-ball-size)
}

.spinner__message {
    color: var(--neutral-02)
}

    .spinner__message > * {
        color: var(--neutral-02)
    }

@keyframes ball_move {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.spinner__bowlRing--gray {
    border: var(--spinner-bowl-border-width) solid var(--color-light-gray)
}

.spinner__ball--gray {
    background-color: var(--color-light-gray)
}

.spinnerContainer {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: calc(var(--depth__headingComponents) - 1)
}

.spinnerContainer__target {
    position: relative !important
}

.spinnerContainer--page {
    position: fixed;
    z-index: calc(var(--depth__pageDialogs) + 99)
}

.spinnerContainer__backdrop, .spinnerContainer__messageContainer {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.spinnerContainer__backdrop {
    background-color: #0009
}

code.src, pre.src {
    background-color: var(--color-light-gray);
    border-radius: 5px;
    display: block;
    font-size: var(--font-size-centi);
    margin: 16px 0;
    overflow-y: auto;
    padding: 16px
}

:root {
    --stepsNumberDiameter: 32px;
    --stepsMarginWithIndex: 16px;
    --stepsLineHeight: 27px
}

@media only screen and (max-width: 767px) {
    :root {
        --stepsNumberDiameter: 24px;
        --stepsMarginWithIndex: 8px;
        --stepsLineHeight: 20px
    }
}

.steps {
    counter-reset: my-list-counter;
    font-family: var(--font-sans-serif);
    list-style: none;
    margin: 0;
    padding: 0
}

.steps__item {
    counter-increment: my-list-counter;
    margin-bottom: 0;
    padding-bottom: 32px;
    position: relative
}

    .steps__item:not(:last-child):after {
        border-left: solid 2px var(--neutral-06);
        content: "";
        height: calc(100% - var(--stepsNumberDiameter));
        left: calc(var(--stepsNumberDiameter) / 2);
        position: absolute;
        top: var(--stepsNumberDiameter)
    }

    .steps__item:last-child {
        padding-bottom: 0
    }

.steps__headingLine {
    display: flex
}

    .steps__headingLine:before {
        border: solid 2px var(--neutral-06);
        border-radius: 50%;
        content: counter(my-list-counter);
        display: inline-block;
        font-size: 1.25rem;
        font-weight: 700;
        height: var(--stepsNumberDiameter);
        line-height: var(--stepsLineHeight);
        margin-right: var(--stepsMarginWithIndex);
        min-width: var(--stepsNumberDiameter);
        text-align: center
    }

.steps__heading {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: var(--stepsLineHeight);
    margin: 0 0 16px
}

.stepsItem--disabled {
    cursor: default;
    opacity: .4;
    pointer-events: none
}

.stepsItem__content {
    margin-left: calc(var(--stepsMarginWithIndex) + var(--stepsNumberDiameter))
}

.stepsItem__content--disabled :not(.stepPart--visible) {
    display: none
}

.stickyToBottom {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    will-change: opacity;
    z-index: calc(var(--depth__stickyComponents) - 1)
}

.stickyToBottom__container {
    display: flex;
    justify-content: center;
    padding: 16px;
    text-align: center
}

@media only screen and (max-width: 767px) {
    .stickyToBottom__container {
        flex-direction: column;
        padding: 8px 16px
    }
}

.stickyToBottom__text {
    font-family: var(--font-serif);
    margin: auto 0
}

@media only screen and (max-width: 767px) {
    .stickyToBottom__text {
        margin-bottom: 8px
    }
}

.stickyToBottom__buttonContainer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center
}

.stickyToBottom__button {
    margin-left: 24px;
    width: unset
}

@media only screen and (max-width: 767px) {
    .stickyToBottom__button {
        margin-left: 8px;
        padding: 12px
    }
}

toc-container {
    display: block;
    margin-bottom: 24px
}

.textItem {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.textItem__main {
    line-height: 1.25
}

    .textItem__main + .textItem__complementary {
        margin-top: 4px
    }

.textItem__main--heading {
    font-size: var(--font-size-default);
    font-weight: 700;
    line-height: 1.35
}

.textItem__complementary {
    font-family: var(--font-sans-serif);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .15px;
    line-height: 1.2;
    color: var(--neutral-05);
    margin: 0
}

.tileGrid {
    --gap: 24px;
    counter-reset: tile-counter;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap)
}

.tileGrid__tile {
    border: 1px solid var(--neutral-04);
    border-radius: 16px;
    min-height: 366px;
    padding: 16px;
    width: 100%
}

@media only screen and (min-width: 768px) {
    .tileGrid__tile {
        width: calc(50% - var(--gap) / 2)
    }
}

.tileGrid__tileTitle {
    margin-top: 0
}

.tileGrid__tileTitle--numbered {
    counter-increment: tile-counter;
    display: flex;
    flex-direction: column
}

@media only screen and (min-width: 1056px) {
    .tileGrid__tileTitle--numbered {
        align-items: center;
        display: flex;
        flex-direction: row
    }
}

.tileGrid__tileTitle--numbered:before {
    align-self: flex-start;
    content: counter(tile-counter);
    flex-shrink: 0;
    font-feature-settings: "clig" off,"liga" off;
    font-size: 92px;
    margin-right: 16px
}

.dataToggle__content {
    height: 0;
    overflow: hidden;
    position: relative
}

.dataToggle__defaultLabel {
    align-items: center;
    display: inline-flex
}

.dataToggle__expandedLabel {
    display: none
}

.dataToggle__button--expanded .dataToggle__expandedLabel {
    align-items: center;
    display: inline-flex
}

.dataToggle__button--expanded .dataToggle__defaultLabel {
    display: none
}

.dataToggle__gradient {
    display: block;
    position: relative;
    text-align: center;
    top: 8px;
    width: 100%
}

    .dataToggle__gradient:before {
        background-image: linear-gradient(#fff0,#fff);
        content: "";
        height: 64px;
        left: 0;
        position: absolute;
        top: -64px;
        width: 100%;
        z-index: 1
    }

    .dataToggle__gradient.expanded:before {
        content: none
    }

.dataToggle__gradient--darkBackground:before {
    background-image: linear-gradient(to bottom,rgb(236 236 236 / 0%),var(--neutral-03))
}

.dataToggleTransitionClass {
    overflow: hidden;
    transition: height var(--transition-time) ease-out
}

.m-none {
    margin: 0 !important
}

.m-auto {
    margin: auto
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.m-tiny {
    margin: 4px !important
}

.m-small {
    margin: 8px !important
}

.m-medium, .m-medium-large {
    margin: 16px !important
}

.m-large {
    margin: 32px !important
}

.m-large-huge {
    margin: 40px !important
}

.m-huge {
    margin: 50px !important
}

.m-giant {
    margin: 64px !important
}

.mt-none {
    margin-top: 0 !important
}

.mt-tiny {
    margin-top: 4px !important
}

.mt-small {
    margin-top: 8px !important
}

.mt-medium {
    margin-top: 16px !important
}

.mt-medium-large {
    margin-top: 24px !important
}

.mt-large {
    margin-top: 32px !important
}

.mt-large-huge {
    margin-top: 40px !important
}

.mt-huge {
    margin-top: 50px !important
}

.mt-giant {
    margin-top: 64px !important
}

.mb-none {
    margin-bottom: 0 !important
}

@media only screen and (max-width: 767px) {
    .sm\:mb-none {
        margin-bottom: 0 !important
    }
}

.mb-tiny {
    margin-bottom: 4px !important
}

.mb-small {
    margin-bottom: 8px !important
}

.mb-medium {
    margin-bottom: 16px !important
}

.mb-medium-large {
    margin-bottom: 24px !important
}

@media only screen and (max-width: 767px) {
    .sm\:mb-medium-large {
        margin-bottom: 24px !important
    }
}

.mb-large {
    margin-bottom: 32px !important
}

.mb-large-huge {
    margin-bottom: 40px !important
}

.mb-huge {
    margin-bottom: 50px !important
}

.mb-giant {
    margin-bottom: 64px !important
}

.ml-none {
    margin-left: 0 !important
}

.ml-tiny {
    margin-left: 4px !important
}

.ml-small {
    margin-left: 8px !important
}

.ml-medium {
    margin-left: 16px !important
}

.ml-medium-large {
    margin-left: 24px !important
}

.ml-large {
    margin-left: 32px !important
}

.ml-large-huge {
    margin-left: 40px !important
}

.ml-huge {
    margin-left: 50px !important
}

.ml-giant {
    margin-left: 64px !important
}

.mr-none {
    margin-right: 0 !important
}

.mr-tiny {
    margin-right: 4px !important
}

.mr-small {
    margin-right: 8px !important
}

.mr-medium {
    margin-right: 16px !important
}

.mr-medium-large {
    margin-right: 24px !important
}

.mr-large {
    margin-right: 32px !important
}

.mr-large-huge {
    margin-right: 40px !important
}

.mr-huge {
    margin-right: 50px !important
}

.mr-giant {
    margin-right: 64px !important
}

.p-none {
    padding: 0 !important
}

.p-tiny {
    padding: 4px !important
}

.p-small {
    padding: 8px !important
}

.p-medium, .p-medium-large {
    padding: 16px !important
}

.p-large {
    padding: 32px !important
}

.p-large-huge {
    padding: 40px !important
}

.p-huge {
    padding: 50px !important
}

.p-giant {
    padding: 64px !important
}

.pt-none {
    padding-top: 0 !important
}

.pt-tiny {
    padding-top: 4px !important
}

.pt-small {
    padding-top: 8px !important
}

.pt-medium {
    padding-top: 16px !important
}

.pt-medium-large {
    padding-top: 24px !important
}

.pt-large {
    padding-top: 32px !important
}

.pt-large-huge {
    padding-top: 40px !important
}

.pt-huge {
    padding-top: 50px !important
}

.pt-giant {
    padding-top: 64px !important
}

.pb-none {
    padding-bottom: 0 !important
}

.pb-tiny {
    padding-bottom: 4px !important
}

.pb-small {
    padding-bottom: 8px !important
}

.pb-medium {
    padding-bottom: 16px !important
}

.pb-medium-large {
    padding-bottom: 24px !important
}

.pb-large {
    padding-bottom: 32px !important
}

.pb-large-huge {
    padding-bottom: 40px !important
}

.pb-huge {
    padding-bottom: 50px !important
}

.pb-giant {
    padding-bottom: 64px !important
}

.pl-none {
    padding-left: 0 !important
}

.pl-tiny {
    padding-left: 4px !important
}

.pl-small {
    padding-left: 8px !important
}

.pl-medium {
    padding-left: 16px !important
}

.pl-medium-large {
    padding-left: 24px !important
}

.pl-large {
    padding-left: 32px !important
}

.pl-large-huge {
    padding-left: 40px !important
}

.pl-huge {
    padding-left: 50px !important
}

.pl-giant {
    padding-left: 64px !important
}

.pr-none {
    padding-right: 0 !important
}

.pr-tiny {
    padding-right: 4px !important
}

.pr-small {
    padding-right: 8px !important
}

.pr-medium {
    padding-right: 16px !important
}

.pr-medium-large {
    padding-right: 24px !important
}

.pr-large {
    padding-right: 32px !important
}

.pr-large-huge {
    padding-right: 40px !important
}

.pr-huge {
    padding-right: 50px !important
}

.pr-giant {
    padding-right: 64px !important
}

.inBetweenMargin__vertical--medium > *:not(:last-child) {
    margin-bottom: 16px !important
}

.inBetweenMargin__vertical--medium > *:last-child {
    margin-bottom: 0 !important
}

@media only screen and (max-width: 767px) {
    .sm\:p-tiny {
        padding: 4px !important
    }

    .sm\:p-none {
        padding: 0 !important
    }
}

.topicNavigator {
    font-family: var(--font-serif)
}

.topicNavigator__list {
    display: flex;
    flex-flow: row wrap;
    gap: 24px 32px
}

@media only screen and (min-width: 1056px) {
    .topicNavigator__list {
        flex-wrap: nowrap
    }
}

.topicNavigator__listItem {
    --large-spacing: 32px;
    flex-basis: calc(100% / 6 - var(--large-spacing));
    flex-shrink: 0;
    min-width: 1em;
    text-align: center
}

@media only screen and (min-width: 768px) {
    .topicNavigator__listItem {
        flex-basis: calc(100% / 12 - var(--large-spacing))
    }
}

@media only screen and (min-width: 1056px) {
    .topicNavigator__listItem {
        flex-basis: 100%;
        flex-shrink: 1;
        min-width: 0;
        width: 100%
    }
}

.topicNavigator__link {
    color: inherit
}

    .topicNavigator__link:not([href]) {
        opacity: .25;
        pointer-events: none;
        text-decoration: none
    }

[data-tip] {
    --tooltip-size: 5px;
    --tooltip-width: 240px;
    position: relative
}

    [data-tip]:not(.no-cursor).has-tip {
        border-bottom: none;
        font-weight: 700
    }

@media only screen and (max-width: 767px) {
    [data-tip]:not(.open):before {
        content: none !important
    }

    [data-tip]:not(.open,.dataTip__showInResponsive):after {
        content: none !important
    }
}

[data-tip]:after {
    font-family: var(--font-sans-serif);
    background-color: var(--neutral-06);
    border-radius: var(--border-radius-large);
    bottom: 100%;
    color: var(--neutral-01);
    font-size: var(--font-size-centi);
    font-weight: 400;
    left: -10px;
    line-height: 1.2;
    margin-bottom: calc(2 * var(--tooltip-size));
    opacity: 0;
    padding: 4px 8px;
    position: absolute;
    text-transform: none;
    transform-origin: bottom center;
    white-space: normal;
    width: var(--tooltip-width)
}

[data-tip]:before {
    border: var(--tooltip-size) solid transparent;
    border-bottom-width: 0;
    border-top-color: var(--neutral-06);
    left: 50%;
    margin-left: calc(-1 * var(--tooltip-size));
    margin-top: calc(-2 * var(--tooltip-size));
    opacity: 0;
    position: absolute;
    text-transform: none;
    top: 0;
    transform-origin: top center
}

[data-tip].open:before, [data-tip]:hover:before, [data-tip]:active:before {
    animation: animateTooltip 125ms var(--easeOutQuint) forwards 50ms;
    content: "";
    z-index: calc(var(--depth__contentComponents) + 99)
}

[data-tip].open:after, [data-tip]:hover:after, [data-tip]:active:after {
    animation: animateTooltip 125ms var(--easeOutQuint) forwards 50ms;
    content: attr(data-title);
    text-align: left;
    z-index: calc(var(--depth__notifications) + 99)
}

[data-tip].tip-small:after {
    left: calc(50% - 24px);
    max-width: var(--tooltip-width);
    white-space: nowrap;
    width: auto
}

[data-tip].tip-wide:after {
    --tooltip-width: 320px
}

[data-tip].tip-bottom:after {
    bottom: auto;
    margin-bottom: 0;
    margin-top: calc(2 * var(--tooltip-size));
    top: 100%;
    transform-origin: top center
}

[data-tip].tip-bottom:before {
    border-bottom-color: var(--neutral-06);
    border-bottom-width: var(--tooltip-size);
    border-top-width: 0;
    bottom: 0;
    margin-bottom: calc(-2 * var(--tooltip-size));
    margin-top: 0;
    top: auto;
    transform-origin: bottom center
}

[data-tip].tip-rtl.tip-bottom:after {
    transform-origin: top right
}

[data-tip].tip-rtl:after {
    left: auto;
    margin-left: 0;
    right: -10px;
    transform-origin: bottom right
}

[data-tip].tip-center:after {
    left: 50%;
    margin-left: -115px
}

[data-tip].tip-left:before {
    left: 8px
}

@keyframes animateTooltip {
    0% {
        opacity: 0;
        transform: scale(.3)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.wrapper {
    display: flex;
    flex-flow: column nowrap;
    margin: 0;
    place-content: stretch flex-start
}

.wrapper--list {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0
}

@media only screen and (min-width: 768px) {
    .wrapper--list {
        display: flex
    }

        .wrapper--list > li {
            padding-right: 16px;
            width: 50%
        }
}

.horizontalLine {
    background-color: var(--neutral-05);
    border: 0;
    height: 1px;
    margin: 24px 0
}

    .horizontalLine > span {
        background-color: var(--neutral-01);
        border: 1px solid var(--neutral-05);
        padding: 0 2px;
        position: relative;
        top: -12px
    }

    .horizontalLine:last-child {
        display: none
    }

.horizontalLine--white {
    background-color: var(--neutral-02)
}

    .horizontalLine--white > span {
        border-color: var(--neutral-02)
    }

.horizontalLine--light {
    background-color: var(--neutral-04)
}

    .horizontalLine--light > span {
        border-color: var(--neutral-04)
    }

.horizontalLine--small {
    margin: 24px auto;
    width: 80px
}

.horizontalLine--medium {
    margin: 24px auto;
    width: 140px
}

.panel .horizontalLine:not(.with-padding) {
    margin-left: -20px;
    margin-right: -20px
}

.consentBanner {
    --button-size: 36px;
    bottom: 4px;
    color: var(--color-always-white);
    left: 4px;
    max-width: calc(100vw - 16px);
    pointer-events: auto;
    position: fixed;
    transition: opacity .3s ease-out,pointer-events .4s ease-out;
    will-change: opacity,pointer-events;
    z-index: calc(var(--depth__floatingComponents))
}

    .consentBanner input:disabled + .toggleInput__slider {
        opacity: .4
    }

    .consentBanner input[type=radio] {
        border: 2px solid var(--neutral-04);
        box-shadow: inset 0 0 0 3px var(--neutral-06)
    }

        .consentBanner input[type=radio]:focus {
            outline-color: var(--brand-01)
        }

        .consentBanner input[type=radio]:disabled:checked {
            background-color: var(--neutral-06);
            border-color: var(--brand-01);
            box-shadow: inset 0 0 0 3px var(--neutral-06)
        }

        .consentBanner input[type=radio]:disabled + label {
            color: var(--neutral-06)
        }

    .below-the-fold .consentBanner, .consentBanner.hide {
        opacity: 0;
        pointer-events: none
    }

.consentBanner__button {
    background-color: var(--neutral-06);
    border-radius: 8px;
    display: block;
    height: var(--button-size);
    pointer-events: auto;
    position: relative;
    transition: border-radius .01s .24s linear;
    width: var(--button-size);
    z-index: calc(var(--depth__floatingComponents))
}

.consentBanner__button--hidden {
    pointer-events: none
}

.consentBanner__icon {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%)
}

.consentBanner__container {
    background-color: var(--neutral-06);
    border-radius: 8px;
    bottom: 0;
    clip-path: polygon(0 100%,0 calc(100% - var(--button-size)),0 calc(100% - var(--button-size)),0 100%);
    left: 0;
    margin-left: -1px;
    max-height: calc(100vh - 16px);
    max-width: calc(100vw - 16px);
    overflow: auto;
    padding: 24px;
    pointer-events: none;
    position: absolute;
    transition: clip-path .25s ease-out;
    width: 360px;
    will-change: clip-path;
    z-index: calc(var(--depth__floatingComponents) + 1)
}

    .consentBanner__container::-webkit-scrollbar {
        background-color: var(--neutral-06);
        border-radius: 0 8px 8px 0;
        width: 5px
    }

    .consentBanner__container::-webkit-scrollbar-thumb {
        background-color: var(--brand-02);
        border-radius: 8px
    }

::-webkit-scrollbar-track {
    background: var(--neutral-06);
    border-radius: 5px
}

.consentBanner.consentBanner--customized .consentBanner__container {
    width: 480px
}

:where(.consentBanner[aria-expanded=true]) .consentBanner__container {
    clip-path: polygon(0 100%,0 0,100% 0,100% 100%);
    pointer-events: auto;
    transition: clip-path .3s ease-out
}

.consentBanner__content {
    color: var(--neutral-04)
}

    .consentBanner__content a {
        color: var(--brand-02)
    }

:where(.consentBanner[aria-expanded=true]) .consentBanner__form .button:first-child {
    box-shadow: none
}

:where(.consentBanner__form[aria-expanded=false]) .consentBanner__privacySettingContainer {
    display: none;
    opacity: 0;
    transition: all 1s ease-out
}

:where(.consentBanner__form[aria-expanded=true]) .consentBanner__privacySettingContainer {
    display: block;
    opacity: 1;
    transition: all 1s ease-out
}

.consentBanner__settingsPanel {
    background-color: var(--neutral-06);
    color: var(--color-always-white)
}

    .consentBanner__settingsPanel .accordionItem__content {
        background-color: var(--neutral-06);
        margin-bottom: 1rem;
        padding: 0
    }

    .consentBanner__settingsPanel .accordionItem__titleContent {
        padding: 1rem 0
    }

    .consentBanner__settingsPanel .accordionItem__title {
        font-weight: 700
    }

    .consentBanner__settingsPanel .consentBanner__cookie {
        background-color: #ffffff0d;
        border-radius: 8px;
        margin: .5rem 0;
        padding: 1rem .5rem
    }

.arrowPointingMessage {
    display: flex;
    flex-direction: row;
    transition-duration: var(--transition-time);
    transition-property: transform,opacity;
    transition-timing-function: ease
}

.arrowPointingMessage__message {
    margin-left: 10px;
    margin-top: 25px
}

.profileImageEditor {
    display: table;
    margin-left: auto;
    margin-right: auto
}

    .profileImageEditor .cropper-modal.cropper-modal {
        background-color: var(--neutral-01);
        opacity: .8
    }

    .profileImageEditor .cropper-view-box.cropper-view-box {
        border-radius: 50%;
        outline: 0
    }

.profileEditorFooter {
    margin: 0 auto;
    text-align: center;
    width: 90%
}

.brokenCertificate {
    height: 180px;
    margin: 0 auto;
    position: relative;
    width: 250px
}

@media only screen and (min-width: 768px) {
    .brokenCertificate {
        height: 288px;
        width: 400px
    }
}

.brokenCertificate__torned {
    filter: drop-shadow(0 0 3px rgb(0 0 0 / 50%))
}

.brokenCertificate__torned--left {
    transform: rotate(2deg);
    transform-origin: top left
}

.brokenCertificate__torned--right {
    transform: rotate(-2deg);
    transform-origin: top right
}

@media only screen and (min-width: 768px) {
    .brokenCertificate__torned--right {
        left: 3px
    }
}

.brokenCertificate__image--left {
    clip-path: url(#brokenCertificate__leftTornedPath--small)
}

@media only screen and (min-width: 768px) {
    .brokenCertificate__image--left {
        clip-path: url(#brokenCertificate__leftTornedPath--medium)
    }
}

.brokenCertificate__image--right {
    clip-path: url(#brokenCertificate__rightTornedPath--small)
}

@media only screen and (min-width: 768px) {
    .brokenCertificate__image--right {
        clip-path: url(#brokenCertificate__rightTornedPath--medium)
    }
}

.copyButton {
    transition: background-color var(--transition-time) ease-out
}

    .copyButton.is-copied {
        background-color: var(--neutral-03);
        color: var(--neutral-06)
    }

.link--copy, .link--copy:hover, .link--copy:focus, .link--copy:active {
    color: var(--neutral-05)
}

    .link--copy:hover {
        color: var(--neutral-04)
    }

    .link--copy.is-copied {
        background-color: transparent !important
    }

        .link--copy.is-copied, .link--copy.is-copied:hover, .link--copy.is-copied:focus, .link--copy.is-copied:active {
            color: var(--accent-01)
        }

@keyframes pulseCopied {
    0% {
        transform: scale(0)
    }

    40% {
        transform: scale(1.3)
    }

    to {
        transform: scale(1)
    }
}

:root {
    --collapsibleOverflowTextZindex: 0
}

.collapsibleOverflowText__text {
    overflow: hidden;
    position: relative;
    z-index: var(--collapsibleOverflowTextZindex)
}

.collapsibleOverflowText__overlay:after {
    background-image: linear-gradient(to bottom,rgb(236 236 236 / 0%),var(--section-background-color));
    bottom: 0;
    content: "";
    height: 64px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: calc(var(--collapsibleOverflowTextZindex) + 1)
}

.collapsibleOverflowText__overlay--dark:after {
    background-image: linear-gradient(to bottom,rgb(236 236 236 / 0%),var(--neutral-03))
}

.collapsibleOverflowText__overlay--darkest:after {
    background-image: linear-gradient(to bottom,rgb(43 43 43 / 0%),var(--neutral-06))
}

.collapsibleOverflowText--transition {
    transition: height var(--transition-time) ease-out
}

.collapsibleOverflowText__chevron {
    transform: transform var(--transition-time) ease-out
}

.collapsibleOverflowText__ButtonText--expanded {
    display: none
}

.collapsibleOverflowText--expanded .collapsibleOverflowText__chevron {
    transform: rotate(180deg)
}

.collapsibleOverflowText--expanded .collapsibleOverflowText__ButtonText--collapsed {
    display: none
}

.collapsibleOverflowText--expanded .collapsibleOverflowText__ButtonText--expanded {
    display: initial
}

.collapsibleContentArea__button {
    cursor: pointer
}

.collapsibleContentArea__openButton, .collapsibleContentArea__closeButton {
    display: inline-flex
}

.collapsibleContentArea[open] .collapsibleContentArea__openButton, .collapsibleContentArea:not([open]) .collapsibleContentArea__closeButton {
    display: none
}

.focusOnTheMainPageContainer {
    margin: 0 auto;
    max-width: 660px
}

.checkboxWithHint__message {
    pointer-events: none;
    transition-duration: var(--transition-time);
    transition-property: opacity,transform,max-height;
    transition-timing-function: ease-out
}

.checkboxWithHint__checkbox:checked ~ .checkboxWithHint__message {
    display: none;
    opacity: 0;
    transform: translateY(-1.2em)
}

.checkboxWithHint__checkbox:not(:checked) ~ .checkboxWithHint__message {
    opacity: 1;
    transform: translateY(0)
}

.tagsWidget {
    margin: 32px 0
}

.tagsWidget__heading {
    text-transform: uppercase;
    font-family: var(--font-sans-serif);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .15px;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px
}

.tagsWidget__taglist-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tagsWidget__taglist-item {
    background: var(--neutral-03);
    border-radius: 8px;
    color: var(--neutral-05);
    display: block;
    font-weight: 700;
    padding: 4px 12px;
    text-decoration: none
}

    .tagsWidget__taglist-item:hover {
        color: var(--neutral-05);
        text-decoration: none;
        box-shadow: 0 1px 4px #6a6a6a7f
    }

.eventListItem {
    border-bottom: solid 1px var(--neutral-04);
    padding: 16px 0 16px 16px
}

.eventListItemHeading {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 5px
}

.eventListItem__date, .eventListItem__place {
    color: var(--neutral-05);
    fill: var(--neutral-05);
    font-size: var(--font-size-centi)
}

.eventLisItemDot {
    margin: 0 2px
}

.scheduleBar__wrapper {
    min-height: 71px;
    position: relative;
    z-index: var(--depth__stickyComponents)
}

    .scheduleBar__wrapper.detached .scheduleBar {
        box-shadow: 0 8px 16px #6a6a6a1a;
        animation: fx-show-schedule-bar .2s ease-in forwards;
        bottom: 0;
        left: 0;
        position: fixed;
        width: 100%
    }

@media only screen and (max-width: 767px) {
    .scheduleBar__wrapper.detached .scheduleBar__time {
        display: none
    }

    .scheduleBar__wrapper.detached .scheduleBar__timeText {
        display: block
    }

    .scheduleBar__wrapper.detached .button {
        flex-shrink: 0;
        min-width: unset;
        padding: 12px;
        width: unset
    }
}

@keyframes fx-show-schedule-bar {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: none
    }
}

@media only screen and (max-width: 767px) {
    .scheduleBar__wrapper:not(.detached) .scheduleBar__inner {
        flex-direction: column
    }

        .scheduleBar__wrapper:not(.detached) .scheduleBar__inner > * {
            margin-bottom: 20px
        }
}

.scheduleBar__wrapper.reverted .scheduleBar {
    animation: fx-revert-schedule-bar .1s ease-out forwards
}

@keyframes fx-revert-schedule-bar {
    0% {
        transform: none
    }

    to {
        transform: translateY(100%)
    }
}

.scheduleBar__inner {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center
}

.scheduleBar__timeText {
    display: none
}

.scheduleBar__price {
    display: flex;
    flex-grow: 1;
    justify-content: space-evenly
}

.genericList__listItem {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    border-bottom: 1px solid var(--neutral-04);
    color: var(--neutral-06);
    margin: 0;
    padding: 16px
}

.genericList__listItem--link:hover {
    background-color: var(--neutral-01)
}

.genericList__listItem--link > .linkStrip__link {
    width: calc(100% + 32px)
}

.genericList__listItem--onDarkBackground > .genericList__listItem {
    border-bottom-color: var(--neutral-05)
}

    .genericList__listItem--onDarkBackground > .genericList__listItem:hover {
        background-color: var(--neutral-05)
    }

.rankedItem {
    align-items: flex-start;
    border: 1px solid var(--neutral-04);
    border-width: 0 0 1px;
    color: var(--neutral-06);
    display: flex;
    flex: 0 0 100%;
    font-size: 1rem;
    font-weight: 700;
    padding: 16px
}

    .rankedItem:last-child {
        border-width: 0
    }

@media only screen and (min-width: 768px) {
    .rankedItem--horizontal {
        border-width: 0 1px 0 0;
        flex: 0 0 33.33%
    }
}

.rankedItem--link:hover {
    background-color: var(--neutral-01)
}

.rankedItem--noBorder {
    border-bottom: none
}

.rankedItem__rank {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-right: 16px;
    min-width: 12px;
    text-align: right
}

.rankedItem__content {
    display: flex;
    flex-grow: 2
}

.rankedItem__titles {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.rankedItem__title {
    margin: 0
}

.rankedItem__subtitle {
    color: var(--neutral-05);
    font-size: .8rem;
    font-weight: 400;
    margin-top: 2px
}

.rankedItem__imageContainer {
    min-width: 72px
}

.rankedItem__image {
    height: 64px;
    margin-right: 8px;
    width: 64px
}

.rankedItemBreak {
    color: var(--neutral-05);
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0;
    text-align: center
}

:root {
    --todo-number-diameter: 32px;
    --todo-margin-with-index: 16px;
    --todo-line-height: 27px;
    --todo-icon-height: 24px
}

@media only screen and (max-width: 767px) {
    :root {
        --todo-number-diameter: 24px;
        --todo-margin-with-index: 8px;
        --todo-line-height: 20px;
        --todo-icon-height: 16px
    }
}

.todo {
    color: var(--neutral-06);
    counter-reset: my-list-counter;
    display: flex;
    flex-direction: column;
    width: 100%
}

.todo__listItem {
    display: flex;
    margin-bottom: 24px;
    padding: 0;
    position: relative
}

    .todo__listItem:before {
        border: solid 2px var(--neutral-06);
        border-radius: 50%;
        content: counter(my-list-counter);
        display: inline-block;
        font-size: 1.25rem;
        font-weight: 700;
        height: var(--todo-number-diameter);
        line-height: var(--todo-line-height);
        margin-right: var(--todo-margin-with-index);
        min-width: var(--todo-number-diameter);
        text-align: center
    }

.todo__listItem--incomplete {
    counter-increment: my-list-counter
}

.todo__listItem--complete {
    order: 2
}

    .todo__listItem--complete:before {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(69 114 5)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M12 26a2 2 0 01-1.41-.59l-8-8a2 2 0 012.82-2.82L12 21.17 26.59 6.59a2 2 0 012.82 2.82l-16 16A2 2 0 0112 26z'/%3E%3C/svg%3E") no-repeat center;
        background-size: var(--todo-icon-height);
        border-color: var(--accent-01);
        content: ""
    }

.todoListItem__title {
    font-size: 1rem;
    margin: 0
}

.todoListItem__subtitle {
    color: var(--neutral-05);
    font-size: .8rem;
    margin-top: 4px
}

.todoListItem__doneText {
    color: var(--accent-01);
    font-family: var(--font-sans-serif);
    margin: 0
}

.accordionList__item {
    border-bottom: 1px solid var(--neutral-04);
    padding: 0
}

.accordionItem__titleContent {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 16px
}

.accordionItem__title {
    flex-grow: 2
}

details[aria-expanded=true] .accordionItem__chevron {
    transform: rotate(180deg)
}

.accordionItem__chevron {
    flex-shrink: 0;
    height: 20px;
    transition: transform var(--transition-time) ease-out;
    width: 20px
}

@media only screen and (max-width: 767px) {
    .accordionItem__chevron {
        height: 18px;
        width: 18px
    }
}

.accordionItem__content {
    background-color: var(--contrast-section-background-color);
    padding: 16px
}

.tableContainer {
    background-attachment: local,local,scroll,scroll;
    background-color: var(--section-background-color);
    background-image: linear-gradient(to right,var(--section-background-color),var(--section-background-color)),linear-gradient(to right,var(--section-background-color),var(--section-background-color)),linear-gradient(to right,#0000147f,#fff0),linear-gradient(to left,#0000147f,#fff0);
    background-position: left center,right center,left center,right center;
    background-repeat: no-repeat;
    background-size: 20px 100%,20px 100%,10px 100%,10px 100%;
    overflow-x: auto
}

@media print {
    .tableContainer {
        background: none;
        overflow-x: visible
    }
}

.baseTable--fullWidth {
    width: 100%
}

.baseTable {
    font-family: var(--font-sans-serif);
    background-color: transparent;
    border: none;
    border-collapse: collapse;
    margin: 0
}

.baseTable__body--alignTop {
    vertical-align: top
}

.baseTable__headingRow {
    border-bottom: solid 1px var(--neutral-04)
}

.baseTable__headingColumn {
    padding: 0 0 4px 16px;
    text-align: left
}

.baseTable__row {
    border-bottom: solid 1px var(--neutral-04)
}

.baseTable__column {
    font-family: var(--font-serif);
    padding: 16px
}

.tableRecord__row {
    border-bottom: solid 1px var(--neutral-04);
    padding: 16px
}

.basteTable__sortingButton {
    align-items: center;
    display: flex;
    font-weight: 700
}

    .basteTable__sortingButton:hover {
        box-shadow: 0 4px 12px #6a6a6a66
    }

    .basteTable__sortingButton:focus, .basteTable__sortingButton:active {
        box-shadow: 0 1px 4px #6a6a6a7f
    }

    .basteTable__sortingButton:active {
        transform: translateY(2px)
    }

.baseTable__sortingIcon {
    margin-right: 4px
}

    .baseTable__sortingIcon[aria-hidden=true] {
        display: none
    }

.tabs {
    --underlineHeight: 4px;
    font-family: var(--font-sans-serif);
    background-attachment: local,local,scroll,scroll;
    background-color: var(--section-background-color);
    background-image: linear-gradient(to right,var(--section-background-color),var(--section-background-color)),linear-gradient(to right,var(--section-background-color),var(--section-background-color)),linear-gradient(to right,#00000040,#fff0),linear-gradient(to left,#00000040,#fff0);
    background-position: left center,right center,left center,right center;
    background-repeat: no-repeat;
    background-size: 25px 100%,25px 100%,15px 100%,15px 100%;
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    list-style: none;
    margin-bottom: 0;
    margin-left: 0;
    overflow-x: auto;
    padding-left: 0
}

@media only screen and (max-width: 1055px) {
    .tabs {
        grid-column: 1/4;
        max-width: 100%
    }
}

.tabs__item {
    margin-bottom: 0;
    padding: 0;
    font-size: 1rem;
    white-space: nowrap
}

@media only screen and (min-width: 768px) {
    .tabs__item {
        margin-bottom: 0
    }
}

.tabs__item--active .tabs__itemLink {
    border-bottom: solid 4px var(--brand-02);
    color: var(--brand-02);
    font-weight: 700
}

.tabs__itemLink {
    background-color: transparent;
    border-bottom: solid 4px transparent;
    color: var(--text-color);
    display: inline-block;
    height: 100%;
    margin-right: 1px;
    padding: 16px 12px calc(16px - var(--underlineHeight));
    text-decoration: none
}

    .tabs__itemLink:active, .tabs__itemLink:focus, .tabs__itemLink:hover {
        border-bottom: solid var(--underlineHeight) var(--brand-02);
        color: var(--text-color);
        text-decoration: none
    }

    .tabs__itemLink:active {
        outline: none
    }

    .tabs__itemLink:before {
        display: block;
        content: attr(title);
        font-weight: 700;
        height: 0;
        overflow: hidden;
        visibility: hidden
    }

@media only screen and (min-width: 768px) {
    .tabs--pageSticky {
        background: var(--neutral-02);
        position: sticky;
        top: 54px;
        z-index: calc(var(--depth__headingComponents) - 1)
    }
}

.tabs__contentGroup {
    margin-bottom: 24px;
    width: 100%
}

.tabs__singleTabContent {
    display: none
}

.tabs__singleTabContent--active {
    display: block;
    float: none;
    padding: 15px 0;
    width: 100%
}

.textLink--light {
    color: var(--brand-02)
}

    .textLink--light:visited {
        color: var(--accent-04)
    }

.textLink--dark {
    color: var(--brand-01)
}

    .textLink--dark:visited {
        color: var(--accent-05)
    }

.templateWidget {
    border: solid 1px var(--neutral-04);
    border-radius: 8px
}

.tagsInput {
    align-items: center;
    background-color: var(--neutral-01);
    border: solid 1px var(--neutral-05);
    border-radius: var(--border-radius-large);
    box-shadow: inset 0 1px 4px 0 var(--shadow-color-default);
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    line-height: 1em;
    min-height: 37px;
    padding: 5px 5px 0;
    width: 100%
}

    .tagsInput input[type=text] {
        background-color: transparent;
        border: none;
        box-shadow: none;
        flex: 2 0;
        height: 24px;
        margin: 0;
        max-width: 100%;
        outline: none;
        overflow: hidden;
        padding: 0
    }

.tagsInput__tag {
    background-color: var(--neutral-05);
    border-radius: var(--border-radius-large);
    color: var(--neutral-01);
    display: inline-flex;
    font-weight: 700;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 5px 4px 5px 12px
}

.tagsInput__deleteButton {
    font-size: 30px;
    line-height: 18px;
    margin: 0 0 0 5px;
    overflow: hidden;
    padding: 0
}

    .tagsInput__deleteButton:after {
        content: "×";
        padding: 0 2px
    }

rt-content, .rteContent {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.78;
    margin-bottom: 24px;
    max-width: var(--max-text-width-size);
    max-width: 100%
}

    rt-content small a, .rteContent small a {
        vertical-align: middle
    }

    rt-content ul, rt-content ol, .rteContent ul, .rteContent ol {
        font-family: var(--font-serif);
        line-height: 1.78
    }

    rt-content ul, .rteContent ul {
        list-style-type: disc
    }

    rt-content li, .rteContent li {
        margin-bottom: 8px
    }

        rt-content li p:last-child, .rteContent li p:last-child {
            margin-bottom: 0
        }

    rt-content u, .rteContent u {
        font-weight: 700;
        text-decoration: none
    }

    rt-content img, .rteContent img {
        height: auto
    }

    rt-content ixdf-ad-area + p, .rteContent ixdf-ad-area + p {
        margin-top: 24px
    }

    rt-content .rteContent__isolatedBlock h1:not(:first-child), rt-content .rteContent__isolatedBlock h2:not(:first-child), rt-content .rteContent__isolatedBlock h3:not(:first-child), rt-content .rteContent__isolatedBlock h4:not(:first-child), rt-content .rteContent__isolatedBlock h5:not(:first-child), rt-content .rteContent__isolatedBlock h6:not(:first-child), .rteContent .rteContent__isolatedBlock h1:not(:first-child), .rteContent .rteContent__isolatedBlock h2:not(:first-child), .rteContent .rteContent__isolatedBlock h3:not(:first-child), .rteContent .rteContent__isolatedBlock h4:not(:first-child), .rteContent .rteContent__isolatedBlock h5:not(:first-child), .rteContent .rteContent__isolatedBlock h6:not(:first-child) {
        margin-top: 0
    }

    rt-content .rteContent__isolatedBlock h4:not(:first-child), rt-content .rteContent__isolatedBlock h5:not(:first-child), rt-content .rteContent__isolatedBlock h6:not(:first-child), .rteContent .rteContent__isolatedBlock h4:not(:first-child), .rteContent .rteContent__isolatedBlock h5:not(:first-child), .rteContent .rteContent__isolatedBlock h6:not(:first-child) {
        font-weight: 400
    }

    rt-content table, .rteContent table {
        font-family: var(--font-sans-serif);
        background-color: transparent;
        border: none;
        border-collapse: collapse;
        margin: 0
    }

        rt-content table p, .rteContent table p {
            margin: 0
        }

    rt-content thead tr, .rteContent thead tr {
        border-bottom: solid 1px var(--neutral-04)
    }

    rt-content thead tr, .rteContent thead tr {
        border-bottom: 1px solid var(--rte-placeholder-color)
    }

    rt-content tbody tr, .rteContent tbody tr {
        border-bottom: solid 1px var(--neutral-04)
    }

    rt-content tbody tr, .rteContent tbody tr {
        border-bottom: 1px solid var(--rte-placeholder-color)
    }

    rt-content th, .rteContent th {
        padding: 0 0 4px 16px;
        text-align: left
    }

@media only screen and (max-width: 1055px) {
    rt-content th, .rteContent th {
        white-space: nowrap
    }
}

rt-content td, .rteContent td {
    font-family: var(--font-serif)
}

rt-content td, .rteContent td {
    border: 1px solid var(--rte-placeholder-color);
    padding: 16px
}

rt-content .button, .rteContent .button {
    background: var(--brand-01)
}

rt-content figure, .rteContent figure {
    margin-bottom: 24px
}

    rt-content figure figcaption, .rteContent figure figcaption {
        font-family: var(--font-serif);
        color: var(--neutral-05);
        display: block;
        font-size: var(--font-size-centi);
        font-style: italic;
        margin-bottom: 20px;
        margin-top: 4px
    }

        rt-content figure figcaption > p + p:has(.copyright), .rteContent figure figcaption > p + p:has(.copyright) {
            display: block;
            margin-top: -18px
        }

rt-content img.lightense-target + .caption, .rteContent img.lightense-target + .caption {
    font-family: var(--font-serif);
    color: var(--neutral-05);
    display: block;
    font-size: var(--font-size-centi);
    font-style: italic;
    margin-bottom: 20px;
    margin-top: 4px
}

rt-content small, .rteContent small {
    display: block
}

    rt-content small i, .rteContent small i {
        font-family: var(--font-serif);
        color: var(--neutral-05);
        display: block;
        font-size: var(--font-size-centi);
        font-style: italic;
        margin-bottom: 20px;
        margin-top: 4px
    }

    rt-content small em, .rteContent small em {
        font-family: var(--font-serif);
        color: var(--neutral-05);
        display: block;
        font-size: var(--font-size-centi);
        font-style: italic;
        margin-bottom: 20px;
        margin-top: 4px;
        display: inline
    }

    rt-content small.copyright, .rteContent small.copyright {
        display: inline;
        font-style: italic
    }

.rteContent--imageFit img[width], .rteContent--imageFit img[height] {
    max-width: 100%
}

.rteContent--imageFit .rteContent__isolatedBlock img[width], .rteContent--imageFit .rteContent__isolatedBlock img[height] {
    max-width: none
}

.rteContent--bodyLineHeight {
    line-height: 1.78
}

.rteContent--bodyFullWidth p {
    max-width: 100%
}

.copyright {
    color: var(--neutral-05);
    font-style: italic
}

:root {
    --rte-active-color: var(--neutral-03);
    --rte-background-color: var(--neutral-01);
    --rte-border-color: var(--neutral-05);
    --rte-hover-color: var(--color-light-gray);
    --rte-placeholder-color: var(--neutral-04);
    --rte-padding: calc(var(--rte-toolbar-border-radius) * 1.5);
    --rte-toolbar-border-radius: var(--border-radius-large);
    --rte-toolbar-icon-size: 20px;
    --rte-toolbar-item-margin: calc(var(--rte-toolbar-border-radius) / 2);
    --rte-toolbar-item-radius: 4px;
    --rte-toolbar-item-size: 32px;
    --rte-toolbar-padding: 6px;
    --rte-toolbar-shadow-color: var(--shadow-color-default)
}

rt-editor {
    background: var(--rte-background-color);
    border: 1px solid var(--rte-border-color);
    border-radius: var(--rte-toolbar-border-radius);
    box-shadow: inset 0 1px 4px 0 var(--rte-toolbar-shadow-color);
    display: block;
    position: relative
}

    rt-editor:before {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.78;
        margin-bottom: 24px;
        max-width: var(--max-text-width-size);
        margin: var(--rte-padding)
    }

    rt-editor .rt-editor__textarea {
        border: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        visibility: hidden
    }

    rt-editor[aria-busy=false]:before {
        content: none
    }

    rt-editor[aria-busy=false] .rt-editor__textarea {
        visibility: visible
    }

    rt-editor.error {
        border-color: var(--accent-03)
    }

rt-content {
    display: block;
    margin: var(--rte-padding);
    margin-bottom: 0;
    max-width: var(--max-text-width-size)
}

    rt-content[aria-readonly=true] {
        visibility: hidden
    }

    rt-editor:before, rt-content:before {
        color: var(--rte-placeholder-color);
        content: attr(placeholder);
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%
    }

.rt-editor__textarea {
    --rt-textarea-top: calc(var(--rte-toolbar-item-size) + 2 * var(--rte-toolbar-padding));
    background-color: var(--neutral-06);
    bottom: 0;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--neutral-04);
    display: block;
    font-family: monospace;
    font-size: var(--font-size-centi);
    margin: 0;
    outline: 0;
    padding: var(--border-radius-large);
    position: absolute;
    resize: none;
    top: var(--rt-textarea-top);
    width: 100%
}

    .rt-editor__textarea, .rt-editor__textarea[rows] {
        height: calc(100% - var(--rt-textarea-top))
    }

rt-widget {
    display: block;
    outline: 1px dashed;
    white-space: normal
}

.tooltipBubble {
    --arrow-width: 24px;
    --arrow-height: var(--arrow-width);
    display: block;
    padding: 6px 6px calc(var(--arrow-height) + 2px)
}

.tooltipBubble__content {
    background: var(--color-always-white);
    border: solid var(--color-always-black) 1px;
    display: inline-block;
    max-width: 240px;
    padding: 6px;
    position: relative;
    font-family: var(--font-sans-serif);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .15px;
    line-height: 1.2;
    margin-bottom: 4px;
    margin-top: 4px
}

    .tooltipBubble__content:after, .tooltipBubble__content:before {
        content: "";
        display: block;
        position: absolute
    }

    .tooltipBubble__content:after {
        background: inherit;
        bottom: calc(1px - var(--arrow-height));
        clip-path: polygon(0 0,100% 0,0 100%);
        height: var(--arrow-height);
        left: 20px;
        width: var(--arrow-width)
    }

    .tooltipBubble__content:before {
        background: var(--color-always-black);
        bottom: calc(-1.5px - var(--arrow-height));
        clip-path: polygon(0 0,100% 0,0 100%);
        height: calc(var(--arrow-height) + 4px);
        left: 19px;
        width: calc(var(--arrow-width) + 4px);
        z-index: -1
    }

.videoCopyrightToggle {
    border: 1px solid var(--neutral-05);
    border-radius: var(--border-radius-large);
    margin: -8px 0;
    padding: 0 8px
}

:where(.videoCopyrightToggle) summary {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    list-style: none;
    margin: 0 0 0 -8px;
    padding: 8px;
    width: calc(100% + 16px)
}

    :where(.videoCopyrightToggle) summary::marker, :where(.videoCopyrightToggle) summary::-webkit-details-marker {
        display: none
    }

    :where(.videoCopyrightToggle) summary:after {
        background: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='rgb(43 43 43)'%3E%3Cpath fill='none' stroke='none' d='M0 0h32v32H0z'/%3E%3Cpath d='M16 24a1 1 0 01-.71-.29l-10-10A1 1 0 016.7 12.3l9.3 9.29 9.29-9.29a1 1 0 011.41 1.41l-10 10a1 1 0 01-.7.29z'/%3E%3C/svg%3E") no-repeat center;
        content: "";
        display: block;
        height: 20px;
        margin-left: 4px;
        transform: rotate(0);
        transition: transform linear var(--transition-time);
        width: 20px
    }

:where(.videoCopyrightToggle[open]) summary:after {
    transform: rotate(-180deg)
}

:where(.videoCopyrightToggle[open]) summary {
    border-bottom: 1px solid var(--neutral-05);
    margin-bottom: 8px
}

.videoTranscript .videoTranscript__summaryOpenText {
    display: none
}

.videoTranscript[open] .videoTranscript__summaryIcon {
    transform: rotate(-180deg)
}

.videoTranscript[open] .videoTranscript__summaryOpenText {
    display: inline
}

.videoTranscript[open] .videoTranscript__summaryClosedText {
    display: none
}

.videoTranscript__summary {
    cursor: pointer;
    list-style: none
}

    .videoTranscript__summary::marker, .videoTranscript__summary::-webkit-details-marker {
        display: none
    }

.videoTranscript__summaryIcon {
    transition: transform linear var(--transition-time)
}

.videoTranscript__details {
    max-height: 400px;
    overflow-y: auto
}

.videoTranscript__transcriptTime {
    flex-basis: 80px
}

@media only screen and (max-width: 767px) {
    .videoTranscript__transcriptTime {
        flex-basis: 60px
    }
}

:root {
    --color-card-bg: var(--color-always-white);
    --color-card-title: var(--color-always-white);
    --color-card-text: var(--text-color-secondary);
    --color-card-text-accent: var(--text-color);
    --color-card-separator: var(--neutral-04);
    --card-radius: var(--border-radius-large);
    --card-header-height: 210px;
    --card-footer-height: 52px;
    --card-transition-timing: .2s ease-out;
    --card-header-z-index: 1
}

@media only screen and (max-width: 767px) {
    .card-wrapper {
        margin: 0 16px 16px
    }
}

@media only screen and (max-width: 767px) {
    .card-wrapper:last-child {
        margin-bottom: 0
    }
}

.card {
    box-shadow: 0 2px 8px #6a6a6a66;
    font-family: var(--font-sans-serif);
    background: var(--color-card-bg);
    border: none;
    border-radius: var(--card-radius);
    color: var(--color-card-text);
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
    padding-top: var(--card-header-height);
    position: relative;
    text-decoration: none;
    transition: box-shadow var(--card-transition-timing);
    width: 100%
}

a.card:hover, a.card:focus, a.card:active, .card--isLink:hover, .card--isLink:focus, .card--isLink:active, .card--isLink:focus-within {
    box-shadow: 0 4px 12px #6a6a6a66;
    color: var(--color-card-text);
    text-decoration: none
}

    a.card:hover .cardFooter__icon, a.card:focus .cardFooter__icon, a.card:active .cardFooter__icon, .card--isLink:hover .cardFooter__icon, .card--isLink:focus .cardFooter__icon, .card--isLink:active .cardFooter__icon, .card--isLink:focus-within .cardFooter__icon {
        transform: translate(4px);
        visibility: visible;
        width: unset
    }

    a.card:hover:not(.card--noImageExpansion) .card__header, a.card:focus:not(.card--noImageExpansion) .card__header, a.card:active:not(.card--noImageExpansion) .card__header, .card--isLink:hover:not(.card--noImageExpansion) .card__header, .card--isLink:focus:not(.card--noImageExpansion) .card__header, .card--isLink:active:not(.card--noImageExpansion) .card__header, .card--isLink:focus-within:not(.card--noImageExpansion) .card__header {
        height: calc(100% - var(--card-footer-height))
    }

    a.card:hover:not(.card--noImageExpansion) .card__contents, a.card:focus:not(.card--noImageExpansion) .card__contents, a.card:active:not(.card--noImageExpansion) .card__contents, .card--isLink:hover:not(.card--noImageExpansion) .card__contents, .card--isLink:focus:not(.card--noImageExpansion) .card__contents, .card--isLink:active:not(.card--noImageExpansion) .card__contents, .card--isLink:focus-within:not(.card--noImageExpansion) .card__contents {
        transform: translateY(15px)
    }

a.card:focus, a.card:active, .card--isLink:focus, .card--isLink:active {
    box-shadow: 0 1px 4px #6a6a6a7f;
    transform: translateY(2px)
}

@media only screen and (min-width: 768px) {
    .card--large .card__title {
        font-size: var(--font-size-mega)
    }
}

.card__header {
    contain: strict;
    height: var(--card-header-height);
    overflow: hidden;
    padding: 15px;
    position: absolute;
    top: 0;
    transition: all var(--card-transition-timing);
    width: 100%;
    z-index: var(--card-header-z-index)
}

.card__link {
    color: transparent;
    display: block;
    font-size: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    text-indent: -50px;
    z-index: 2
}

.card__picture {
    contain: strict;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

    .card__picture:after {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        background: linear-gradient(to bottom,#2b2b2b,#2b2b2b33);
        content: "";
        mix-blend-mode: multiply
    }

.card--new:before {
    align-items: flex-end;
    background: var(--accent-02);
    color: var(--neutral-01);
    content: "New";
    display: flex;
    font-weight: 600;
    height: 67px;
    justify-content: center;
    left: 0;
    padding-bottom: 4px;
    position: absolute;
    top: 0;
    transform: rotate(45deg) translate(50%,-40%);
    transform-origin: top right;
    width: 100%;
    z-index: calc(var(--card-header-z-index) + 1)
}

.card__title {
    color: var(--color-card-title);
    display: block;
    font-size: var(--font-size-kilo);
    font-weight: 700;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 0 1px 4px rgb(43 43 43 / 70%);
    z-index: 1
}

.card__contents {
    flex-grow: 1;
    padding: 8px 16px 16px;
    transition: all var(--card-transition-timing);
    z-index: 0
}

    .card__contents .card__copy {
        font-size: var(--font-size-centi);
        margin: 0 0 16px
    }

        .card__contents .card__copy:last-child {
            margin: 0
        }

    .card__contents .card__copy--commaSeparated > span:not(:last-child):after {
        content: ","
    }

    .card__contents .card__description {
        font-family: var(--font-sans-serif);
        font-size: var(--font-size-hecto);
        min-height: 42px;
        word-break: break-word
    }

.card__footer {
    bottom: 0;
    height: var(--card-footer-height);
    width: 100%
}

    .card__footer .button {
        border-radius: 0;
        height: 100%;
        padding: 12px;
        width: 100%
    }

a.card .card__footer .button {
    pointer-events: none
}

.card__footer .button:disabled {
    border: none
}

.cardFooter__button {
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cardFooter__buttonText {
    align-items: flex-end;
    display: flex;
    justify-content: center
}

.cardFooter__icon {
    transform: translate(0);
    transition: width var(--card-transition-timing),transform var(--card-transition-timing);
    visibility: hidden;
    width: 0
}

.card__actions {
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    border-top: solid 1px var(--color-card-separator);
    flex-grow: 0;
    overflow: hidden;
    padding: 4px 0
}

    .card__actions .button-card {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        color: var(--color-card-text-accent);
        display: block;
        fill: var(--color-card-text-accent);
        font-weight: 400;
        outline: none;
        padding: 8px 16px;
        text-align: left;
        transition: padding .1s;
        width: 100%
    }

        .card__actions .button-card:hover, .card__actions .button-card:focus, .card__actions .button-card:active {
            background: var(--brand-02);
            color: var(--neutral-01);
            fill: var(--neutral-01)
        }

        .card__actions .button-card:active {
            box-shadow: inset 0 1px 4px 0 var(--shadow-color-default);
            padding: 10px 18px 6px;
            transform: none
        }

    .card__actions .button-card--delete {
        color: var(--accent-03);
        fill: var(--accent-03)
    }

        .card__actions .button-card--delete:hover, .card__actions .button-card--delete:focus, .card__actions .button-card--delete:active {
            background: var(--accent-03);
            color: var(--neutral-01);
            fill: var(--neutral-01)
        }

    .card__actions .button-card--noAction {
        cursor: default
    }

        .card__actions .button-card--noAction:hover, .card__actions .button-card--noAction:focus, .card__actions .button-card--noAction:active {
            background: initial;
            color: initial
        }

        .card__actions .button-card--noAction:active {
            box-shadow: initial;
            padding: initial;
            transform: none
        }

.card--clearerHeader .card__header {
    align-items: flex-end;
    display: flex
}

.card--clearerHeader .card__picture:after {
    background: linear-gradient(to bottom,#2b2b2b00 40.62%,#2b2b2be5)
}

.card--member {
    overflow: visible;
    padding: 0;
    position: static
}

    .card--member .card__contents {
        display: flex;
        flex-direction: column;
        padding: 16px
    }

    .card--member .card--member__description {
        font-size: 1rem;
        margin-top: 16px !important
    }

    .card--member .badge {
        margin: auto auto 0 0
    }

.cardPerson__image {
    margin-right: 8px;
    width: 64px
}

.card--member__specialty {
    color: var(--color-card-text-accent);
    margin: 0
}

.card--course.card--disabled .countdown {
    visibility: hidden
}

.card__bookingProgress {
    position: relative
}

.card__bookingProgressValue {
    color: var(--text-color);
    font-weight: 700;
    position: absolute;
    text-align: center;
    top: 15px;
    width: 100%
}

    .card__bookingProgressValue:after {
        content: attr(data-percentage) "%"
    }

.card__bookingProgressUnit {
    font-size: var(--font-size-milli);
    position: absolute;
    text-align: center;
    top: 35px;
    width: 100%
}

.card--course__progress {
    color: var(--text-color)
}

.card--course__progressBar {
    background-color: var(--neutral-03);
    border-radius: 1px;
    contain: strict;
    height: 4px;
    margin-top: 4px;
    overflow: hidden;
    width: 100%
}

.card--course__progressLine {
    background-color: var(--brand-01);
    border-radius: 1px;
    height: 4px;
    width: 0
}

.card--course__contentTitle {
    color: var(--text-color);
    font-size: var(--font-size--hecto);
    margin: 0 0 4px
}

.card--courseCompleted {
    padding-top: 0
}

    .card--courseCompleted .card__header {
        contain: none;
        height: auto;
        padding: 4px 4px 0;
        position: static
    }

        .card--courseCompleted .card__header:before {
            content: none
        }

a.card--courseCompleted:hover .card__header {
    height: auto
}

a.card--courseCompleted:hover .card__contents {
    transform: none
}

.card--courseCompleted .card__title {
    color: var(--color-card-text-accent);
    margin: 10px 12px 0;
    text-shadow: none
}

.card--courseCompleted .card__picture {
    contain: none;
    position: static
}

    .card--courseCompleted .card__picture:after {
        content: none
    }

    .card--courseCompleted .card__picture img {
        height: initial;
        object-fit: initial
    }

.card__title--extraMargin .card__title {
    margin: 10px 12px 16px
}

.card__header .card__picture--book {
    background: var(--neutral-06);
    text-align: center
}

.cardBootcampCohort__banner {
    font-size: .8rem;
    left: 0;
    line-height: var(--line-height-default);
    position: absolute;
    top: 0;
    width: 100%
}

.cardBootcampCohort__countDownContainer {
    min-width: 100px
}

.profileCard {
    width: 100%
}

@media only screen and (max-width: 767px) {
    .profileCard {
        align-items: flex-start
    }
}

.profileCard__mediaImage {
    flex: 0 0 120px;
    width: 120px
}

    .profileCard__mediaImage img {
        height: auto;
        width: 100%
    }

@media only screen and (min-width: 1056px) {
    .profileCard__mediaImage {
        flex: 0 0 160px;
        width: 160px
    }
}

.profileCard__place > span:not(:first-child,:last-child):after {
    content: ", "
}

.typed-cursor {
    animation: typedjsBlink .7s infinite;
    opacity: 1
}

@keyframes typedjsBlink {
    50% {
        opacity: 0
    }
}

.featureTable {
    --table-column-width: 232px;
    font-family: var(--font-sans-serif);
    margin: 0
}

    .featureTable h3 {
        display: block;
        font-weight: 500;
        margin-bottom: 32px;
        text-align: center
    }

    .featureTable table {
        background: transparent;
        border: none;
        border-collapse: collapse;
        margin-bottom: 0
    }

        .featureTable table tr {
            border-bottom: solid 1px var(--neutral-04)
        }

        .featureTable table thead {
            background: transparent;
            font-size: var(--font-size-kilo)
        }

            .featureTable table thead th {
                max-width: var(--table-column-width);
                min-width: var(--table-column-width);
                padding: 0;
                width: var(--table-column-width);
                transition: width .3s ease-out,max-width .3s ease-out,min-width .3s ease-out
            }

                .featureTable table thead th.disabled .columnHeader .button {
                    color: var(--neutral-01);
                    pointer-events: none
                }

                .featureTable table thead th .button {
                    font-size: var(--font-size-default);
                    margin-top: 16px
                }

            .featureTable table thead [aria-hidden=true] {
                --table-column-width: 0;
                overflow: hidden
            }

                .featureTable table thead [aria-hidden=true] .columnHeader {
                    padding: 0
                }

            .featureTable table thead th:first-child {
                padding: 16px;
                vertical-align: bottom
            }

        .featureTable table .columnHeader {
            font-family: var(--font-sans-serif);
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 40px
        }

@media only screen and (min-width: 768px) {
    .featureTable table .columnHeader {
        height: 182px;
        padding: 16px
    }
}

.featureTable table .columnHeader form {
    text-align: center;
    width: 100%
}

.featureTable table .columnHeader .price {
    width: 100%
}

    .featureTable table .columnHeader .price .period {
        color: var(--neutral-05);
        font-size: var(--font-size-centi);
        font-weight: 400;
        text-align: center;
        text-transform: none
    }

.featureTable table .columnHeader .featureTable__priceNumber {
    font-size: var(--font-size-mega);
    text-align: center
}

.featureTable table .columnHeader .featureTable__priceNumber--long {
    font-size: var(--font-size-kilo)
}

.featureTable table .columnHeader .discount {
    color: var(--neutral-05);
    font-size: var(--font-size-centi);
    margin-top: 8px
}

.featureTable table .columnHeader .cta {
    max-width: 100%;
    min-width: unset
}

@media only screen and (min-width: 768px) {
    .featureTable table .columnHeader--referred {
        height: 201px
    }
}

.featureTable table .columnHeader__membershipPlan {
    font-family: var(--font-sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-end;
    margin: 0;
    text-align: center;
    width: 100%
}

@media only screen and (max-width: 767px) {
    .featureTable table .columnHeader__membershipPlan {
        margin: 0
    }
}

@media only screen and (max-width: 1055px) {
    .featureTable table.table--columnAdded {
        --table-column-width: 20%
    }

        .featureTable table.table--columnAdded .columnHeader__membershipPlan {
            height: 48px
        }
}

.featureTable table .highlightedColumn {
    box-shadow: 0 8px 16px #6a6a6a1a;
    background: var(--neutral-01)
}

.featureTable table tbody {
    background: transparent
}

    .featureTable table tbody td {
        padding: 16px;
        text-align: center
    }

@media only screen and (max-width: 767px) {
    .featureTable table tbody td {
        padding: 16px 0
    }
}

@media only screen and (min-width: 768px) {
    .featureTable table tbody td:first-child {
        width: 320px
    }
}

.featureTable table tbody td.disabled .check {
    border-left: solid thick rgb(252,252,252);
    border-right: solid thick rgb(252,252,252)
}

.featureTable table tbody td .check, .featureTable table tbody td .description {
    align-items: center;
    display: flex;
    height: 100%;
    line-height: 1.2;
    min-height: 24px
}

@media only screen and (min-width: 768px) {
    .featureTable table tbody td .check, .featureTable table tbody td .description {
        flex-direction: row;
        justify-content: space-between
    }
}

.featureTable table tbody td .description {
    text-align: left
}

.featureTable table tbody td .check {
    color: var(--brand-01);
    justify-content: center
}

.featureTable table tbody .featureTable__columnText {
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    transition: width .3s ease-out
}

@media only screen and (min-width: 1056px) {
    .featureTable table tbody .featureTable__columnText {
        width: 200px
    }
}

.featureTable table tbody [aria-hidden=true] {
    padding: 0
}

    .featureTable table tbody [aria-hidden=true] .check {
        display: none
    }

    .featureTable table tbody [aria-hidden=true] .featureTable__columnText {
        width: 0
    }

.featureTable table tbody .comparison-virtual-label {
    padding-left: 16px
}

.featureTable table tbody .comparison-virtual-data {
    padding-right: 16px;
    padding-left: 16px
}

@media only screen and (min-width: 1056px) {
    .featureTable--change.featureTable table {
        --table-column-width: 340px
    }
}

.featureTable--change.featureTable table.table--columnAdded {
    --table-column-width: 25%
}

@media only screen and (min-width: 1056px) {
    .featureTable--change.featureTable table.table--columnAdded {
        --table-column-width: 256px
    }
}

.featureTable .options {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

@media only screen and (min-width: 768px) {
    .featureTable .options {
        flex-direction: row;
        margin-left: 16px
    }
}

@media only screen and (max-width: 767px) {
    .featureTable .options .button {
        margin-bottom: 16px
    }
}

@media only screen and (min-width: 768px) {
    .featureTable .options .button {
        margin-right: 16px
    }
}

@media only screen and (min-width: 768px) {
    .featureTable--trial table thead .highlightedColumn {
        min-width: 370px
    }
}

.comparison-virtual {
    width: 100%
}

@media only screen and (max-width: 767px) {
    .featureTable__tableContainer {
        width: 100%
    }

        .featureTable__tableContainer table:not(:last-child) {
            margin-bottom: 24px
        }
}

.featureTable__content {
    display: flex;
    flex-direction: row
}

@media only screen and (max-width: 767px) {
    .featureTable__content table [data-comparison-table] {
        display: none
    }
}

.featureTable__testimonialsStatic {
    display: flex;
    flex-direction: column;
    margin-top: 186px;
    margin-left: 32px;
    justify-content: space-between;
    flex: 1 0 232px
}

.featureTable__testimonials {
    align-items: stretch;
    background-color: transparent;
    display: none;
    flex: 1 1 20%;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 32px;
    margin-top: 125px;
    min-width: 232px
}

@media only screen and (min-width: 768px) {
    .featureTable__testimonials {
        display: flex
    }
}

.featureTable__testimonials > * {
    margin-bottom: 40px
}

.featureTable__testimonials .media__image img {
    height: 45px;
    max-width: 100px;
    width: auto
}

.featureTable__testimonials .media__body {
    padding-top: 5px
}

.featureTable__strikeOut {
    position: relative
}

    .featureTable__strikeOut:after {
        border: solid 3px transparent;
        border-color: var(--accent-03) transparent transparent transparent;
        border-radius: 50% 100% 0 0;
        content: "";
        height: 40%;
        position: absolute;
        right: 0;
        top: 5px;
        transform: rotate(330deg);
        transform-origin: 100% 0;
        width: 100%
    }

.featureModal__content {
    line-height: 1.8;
    padding: 0
}

    .featureModal__content .auto-height {
        height: auto !important
    }

.featureTable__testimonialImage {
    width: 80px
}

.featureModal__certificate {
    max-width: 100%;
    width: 480px
}

.featureModal__bookCover {
    height: 144px;
    object-fit: cover
}

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

.legend {
    display: block;
    font-weight: 700;
    margin-bottom: 1em;
    white-space: nowrap
}

.infoBox {
    background-color: var(--contrast-section-background-color);
    border-radius: var(--border-radius-large);
    padding: 16px
}

.infoBox--noBorderRadius {
    border-radius: 0
}

.joinBar {
    align-items: center;
    background-color: var(--neutral-06);
    box-shadow: 0 -1px 5px #fff;
    color: var(--neutral-01);
    display: flex;
    flex-direction: row;
    justify-content: center;
    transition: all .5s ease-in-out
}

@media only screen and (min-width: 768px) {
    .joinBar {
        padding-bottom: 8px;
        padding-top: 8px
    }
}

.joinBar__item {
    margin: 0 16px
}

@media only screen and (min-width: 1056px) {
    .joinBar__item:last-child {
        margin-right: 0
    }

    .joinBar__item:first-child {
        margin-left: 0
    }
}

.joinBar__button {
    opacity: 1;
    transition: opacity .23s linear
}

@media only screen and (max-width: 767px) {
    .joinBar__button.cta {
        border-radius: 0;
        margin: 0;
        padding: 20px 0;
        transform: none;
        transition: none;
        width: 45%
    }

        .joinBar__button.cta:before {
            content: none
        }
}

@media only screen and (min-width: 768px) {
    .joinBar__button.cta {
        margin-right: 0
    }
}

.joinBar__button.cta:after {
    content: attr(data-message)
}

@media only screen and (min-width: 768px) {
    .joinBar__button.cta:after {
        content: attr(data-message-medium)
    }
}

.joinBar__button.contact {
    display: none
}

@media only screen and (min-width: 768px) {
    .joinBar__button.contact {
        display: block
    }
}

.joinBar__message {
    padding: 8px 0;
    width: 60%
}

@media only screen and (min-width: 768px) {
    .joinBar__message {
        width: auto
    }
}

.offCanvasWrapper {
    bottom: 0;
    contain: strict;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 64px;
    width: 100%;
    z-index: calc(var(--depth__headingComponents) + 1)
}

    .offCanvasWrapper:not(.menu-open) {
        pointer-events: none
    }

        .offCanvasWrapper:not(.menu-open):before {
            opacity: 0
        }

        .offCanvasWrapper:not(.menu-open) .offCanvasMenu {
            transform: translateY(-100%);
            visibility: hidden
        }

@media only screen and (min-width: 768px) {
    .offCanvasWrapper {
        display: none
    }
}

.offCanvasMenu {
    font-family: var(--font-sans-serif);
    background-color: var(--neutral-06);
    color: var(--neutral-01);
    left: 0;
    min-height: 100%;
    min-width: 320px;
    padding: 16px;
    position: absolute;
    top: 0;
    transition: transform .37s var(--easeOutQuint),visibility .37s var(--easeOutQuint);
    width: 100vw
}

.offCanvasMenu__list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0
}

    .offCanvasMenu__list .navigationHeader__listItem {
        border-bottom: solid 1px var(--neutral-05);
        margin-bottom: 0;
        padding: 0
    }

    .offCanvasMenu__list .navigationHeader__link {
        color: var(--neutral-01);
        display: block;
        font-size: 16px;
        line-height: 1.2;
        padding: 16px 0
    }

.offCanvasMenu__list--links {
    font-size: var(--font-size-centi);
    margin: 24px 0
}

    .offCanvasMenu__list--links .inlineList__item:not(:last-of-type) {
        margin: 0 0 16px
    }

    .offCanvasMenu__list--links a {
        color: inherit;
        text-decoration: none
    }

.offCanvas__loginButton {
    margin-top: 24px;
    text-align: center
}

.profile__contentContainer {
    margin-bottom: 64px;
    margin-top: 64px
}

@media only screen and (max-width: 767px) {
    .profile__contentContainer {
        flex-direction: column;
        margin-top: 24px
    }
}

.profile__distinctionBadge {
    color: var(--text-color);
    margin-top: 24px;
    text-decoration: none
}

.profile__rightColumn {
    margin-left: 32px
}

@media only screen and (max-width: 767px) {
    .profile__rightColumn {
        margin-left: 0;
        margin-top: 32px;
        max-width: 100%;
        width: 100%
    }
}

.profile__badgeIcon {
    margin: auto 8px auto 0;
    max-width: 154px;
    width: 154px
}

.profilePublic__stickyFooter {
    flex-direction: row
}

@media only screen and (max-width: 767px) {
    .profilePublic__footerText {
        text-align: left
    }
}

@media only screen and (max-width: 767px) {
    .profilePublic__footerButton {
        min-width: unset
    }
}

.profileEdit__accountInfoInput {
    margin-right: 16px;
    max-width: 320px
}

@media only screen and (max-width: 767px) {
    .profileEdit__accountImage {
        flex: 0 0 120px;
        max-width: 120px
    }

        .profileEdit__accountImage img {
            height: auto;
            width: 120px !important
        }
}

.profileEdit__phoneField {
    margin-right: 32px;
    width: 232px
}

@media only screen and (max-width: 767px) {
    .profileEdit__phoneField {
        width: 100%
    }

        .profileEdit__phoneField:not(:last-child) {
            margin: 0 0 20px
        }
}

@media only screen and (max-width: 767px) {
    .profileEdit__inputButton {
        margin-top: 8px
    }
}

@media only screen and (min-width: 768px) {
    .profilePassword__gridColumn {
        grid-column: 4 / span 6
    }
}

@media only screen and (max-width: 767px) {
    .profileCancel__thumbnailContainer {
        flex-direction: column
    }

        .profileCancel__thumbnailContainer .media__body {
            padding-left: 0
        }
}

.profileCancel__thumbnailBackground {
    background: var(--neutral-01);
    display: flex;
    height: 120px;
    justify-content: center;
    width: 120px
}

@media only screen and (max-width: 767px) {
    .profileCancel__thumbnailBackground {
        margin-bottom: 8px
    }
}

.profileCancel__thumbnailBackground img {
    display: block;
    width: 95px !important
}

@media only screen and (min-width: 1056px) {
    .profileChangeEmail__gridColumn {
        grid-column: 4 / span 6
    }
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .profileChangeEmail__gridColumn {
        grid-column: 3 / span 8
    }
}

@media only screen and (max-width: 767px) {
    .roadblock__productImage {
        width: 50%
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3) translateZ(0)
    }

    50% {
        opacity: .9;
        transform: scale(1.1)
    }

    80% {
        opacity: 1;
        transform: scale(.89)
    }

    to {
        opacity: 1;
        transform: scale(1) translateZ(0)
    }
}

@keyframes verticalScaleOut {
    to {
        height: 0;
        margin-bottom: 0;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 0
    }
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes slideOutToBottom {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(100%)
    }
}

@keyframes slideOutToLeft {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes slideOutToRight {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(0)
    }
}

.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.center-contents {
    text-align: center
}

    .center-contents > * {
        margin-left: auto;
        margin-right: auto
    }

.text-center {
    text-align: center
}

@media only screen and (min-width: 768px) {
    .md\:text-center {
        text-align: center
    }
}

.text-left {
    text-align: left
}

@media only screen and (max-width: 767px) {
    .sm\:text-left {
        text-align: left
    }
}

.text-right {
    text-align: right
}

.align-vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.align-top {
    vertical-align: top
}

.align-middle {
    vertical-align: middle
}

@media only screen and (max-width: 767px) {
    .sm\:block {
        display: block
    }
}

.flex-col {
    flex-direction: column
}

@media only screen and (max-width: 767px) {
    .sm\:flex-col {
        flex-direction: column
    }
}

.items-center {
    align-items: center
}

.items-stretch {
    align-items: stretch
}

.items-start {
    align-items: flex-start
}

.flex-1 {
    flex: 1 1 0
}

.flex-auto {
    flex: 1 1 auto
}

.not-flexible {
    flex: 0 0 auto
}

.self-start {
    align-self: flex-start
}

.self-end {
    align-self: flex-end
}

.self-center {
    align-self: center
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-no-wrap {
    flex-wrap: nowrap
}

.flex-grow {
    flex-grow: 1
}

.flex-shrink-0 {
    flex-shrink: 0
}

.justify-start {
    justify-content: flex-start
}

.justify-center {
    justify-content: center
}

.justify-end {
    justify-content: flex-end
}

.justify-between {
    justify-content: space-between
}

.justify-around {
    justify-content: space-around
}

.flex-break {
    flex-basis: 100%;
    height: 0
}

@media only screen and (max-width: 767px) {
    .sm\:order-last {
        order: 9999
    }
}

@media only screen and (max-width: 767px) {
    .sm\:justify-center {
        justify-content: center
    }

        .sm\:justify-center > * {
            margin: 0 10px 20px
        }

            .sm\:justify-center > *:last-child {
                margin-bottom: 0
            }
}

@media only screen and (max-width: 767px) {
    .sm\:center {
        align-items: center;
        justify-content: center;
        text-align: center
    }
}

.radius-regular {
    border-radius: var(--border-radius)
}

.radius-small {
    border-radius: var(--border-radius-small)
}

.radius-medium {
    border-radius: var(--border-radius-medium)
}

.radius-large {
    border-radius: var(--border-radius-large)
}

.radius-round {
    border-radius: 50%
}

picture.radius-round {
    overflow: hidden
}

.border-all {
    border-style: solid;
    border-width: 1px
}

.border-top {
    border-top-style: solid;
    border-top-width: 1px
}

.border-left {
    border-left-style: solid;
    border-left-width: 1px
}

.border-bottom {
    border-bottom-style: solid;
    border-bottom-width: 1px
}

.border-none {
    border: none
}

.elevation-tropo {
    box-shadow: 0 1px 4px #6a6a6a7f
}

.elevation-strato {
    box-shadow: 0 2px 8px #6a6a6a66
}

.elevation-meso {
    box-shadow: 0 4px 12px #6a6a6a66
}

.elevation-thermo {
    box-shadow: 0 8px 16px #6a6a6a1a
}

.elevation-exo {
    box-shadow: 0 12px 20px #6a6a6a1a
}

.inline-block {
    display: inline-block
}

.block {
    display: block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

@supports (-webkit-line-clamp: 2) {
    .truncate, .truncate-1, .truncate-2, .truncate-3, .truncate-4, .truncate-6, .truncate-8 {
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .truncate, .truncate-1 {
        -webkit-line-clamp: 1
    }

    .truncate-2 {
        -webkit-line-clamp: 2
    }

    .truncate-3 {
        -webkit-line-clamp: 3
    }

    .truncate-4 {
        -webkit-line-clamp: 4
    }

    .truncate-6 {
        -webkit-line-clamp: 6
    }

    .truncate-8 {
        -webkit-line-clamp: 8
    }
}

@supports not (-webkit-line-clamp: 2) {
    .truncate, .truncate-1, .truncate-2, .truncate-3, .truncate-4, .truncate-6, .truncate-8 {
        --line-height: 1.35em;
        overflow: hidden;
        position: relative
    }

        .truncate:after, .truncate-1:after, .truncate-2:after, .truncate-3:after, .truncate-4:after, .truncate-6:after, .truncate-8:after {
            background: linear-gradient(to right,#fff0,#fff 70%);
            bottom: 0;
            content: "Â ";
            max-width: 100px;
            position: absolute;
            right: 0;
            width: 70%
        }

    .truncate-4 {
        max-height: calc(var(--line-height) * 4)
    }

    .truncate-6 {
        max-height: calc(var(--line-height) * 6)
    }

    .truncate-8 {
        max-height: calc(var(--line-height) * 8)
    }
}

.text-small {
    font-size: var(--font-size-centi)
}

.text-sans-serif {
    font-family: var(--font-sans-serif)
}

.text-serif {
    font-family: var(--font-serif)
}

.text-monospace {
    font-family: var(--font-monospace)
}

.font-bold {
    font-weight: 700
}

.font-normal {
    font-weight: 400
}

.no-underline, .hover\:no-underline:hover {
    text-decoration-line: none
}

.underline {
    text-decoration: underline
}

.line-through {
    text-decoration: line-through
}

.italic {
    font-style: italic
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.break-words {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    white-space: inherit;
    word-wrap: break-word
}

.break-all {
    word-break: break-all
}

.whitespace-no-wrap {
    white-space: nowrap
}

.whitespace-normal {
    white-space: normal
}

.text-force-full-width p {
    max-width: 100% !important
}

.imitateMonospace {
    display: inline-block;
    position: relative
}

    .imitateMonospace:before {
        content: attr(data-monospaced-content);
        font-family: var(--font-monospace);
        visibility: hidden
    }

.imitateMonospace__container {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%
}

.text-color-secondary {
    color: var(--neutral-05)
}

.h-auto {
    height: auto
}

.h-full {
    height: 100%
}

.max-h-full {
    max-height: 100%
}

.max-w-full {
    max-width: 100%
}

.w-auto {
    width: auto
}

.w-full {
    width: 100%
}

.static {
    position: static
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.sticky {
    position: sticky
}

.overflow-hidden {
    overflow: hidden
}

.hidden {
    display: none !important
}

@supports (selector(:is(div))) and ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    .hidden-on-supported-browsers {
        display: none
    }
}

.invisible {
    visibility: hidden !important
}

@media only screen and (max-width: 767px) {
    .sm\:hide {
        display: none
    }
}

@media only screen and (min-width: 768px) {
    .sm\:show {
        display: none
    }
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .md\:hide {
        display: none
    }
}

@media only screen and (max-width: 767px) {
    .md\:show {
        display: none
    }
}

@media only screen and (min-width: 1056px) {
    .md\:show {
        display: none
    }
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
    .md\:hideLastChild > :last-child {
        display: none
    }
}

@media only screen and (min-width: 1056px) {
    .lg\:hide {
        display: none
    }
}

@media only screen and (max-width: 1055px) {
    .lg\:show {
        display: none
    }
}

@media print {
    .hide-print {
        display: none
    }
}

.visually-hidden {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(100%) !important;
    contain: strict !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important
}

[hidden] {
    display: none !important
}

.pointer-events-auto {
    pointer-events: auto
}

.pointer-events-none {
    pointer-events: none
}

.scroll-margin-top {
    scroll-margin-top: var(--nav-mainbar-height)
}

.cursor-pointer {
    cursor: pointer
}

.object-contain {
    object-fit: contain
}

.object-cover {
    object-fit: cover
}

.object-fill {
    object-fit: fill
}

.object-position-top {
    object-position: center 30%
}

:root {
    --color-always-black: rgb(0 0 0);
    --color-always-white: rgb(255 255 255)
}

.body-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

@media print {
    .body-wrap {
        min-height: initial
    }
}

a.disabled {
    pointer-events: none !important
}

    a.disabled.button {
        background-color: var(--neutral-03) !important;
        color: var(--neutral-05) !important
    }

.securityCodeInfo h2, .securityCodeInfo h4 {
    display: block;
    text-transform: capitalize
}

.securityCodeInfo__imageContainer {
    margin: 48px 0
}

@media only screen and (min-width: 768px) {
    .securityCodeInfo__image {
        max-width: 45%
    }
}

a.footnote {
    color: var(--neutral-06);
    display: block;
    font-size: .75em;
    margin-bottom: 28px;
    margin-top: 28px
}

    a.footnote:hover {
        color: var(--brand-01)
    }

    a.footnote span {
        text-decoration: underline
    }

.img-caption {
    font-size: var(--font-size-milli)
}

code[class*=language-], pre[class*=language-] {
    font-size: var(--font-size-centi);
    overflow-y: scroll
}

header nav.small .inlineList {
    display: none
}

.background-neutral-03 .steps__item:before {
    background-color: var(--color-light-gray)
}

.u-no-resize {
    resize: none
}

.hide-last-bottom-border > :last-child {
    border-bottom: 0
}

    .hide-last-bottom-border > :last-child a {
        border-bottom: 0
    }

.icon-sprite-container :where(path) {
    stroke: none
}

.change-bg-on-hover:hover {
    background-color: var(--neutral-02)
}