.lazyload {
    max-width: 100%;
    aspect-ratio: 16 / 9;
}


:where(body) {
    margin: 0
}

body {
    padding: 0;
}

:root {
    --dir: ltr;
    --dir-opposite: rtl;
    --dir-start: left;
    --dir-end: right;
    --dir-transform: 1;
    --fa-arrow-start: "";
    --fa-arrow-end: "";
    --fa-arrow-circle-start: "";
    --fa-arrow-circle-end: "";
    --fa-chevron-start: "";
    --fa-chevron-end: "";
    --fa-chevron-circle-start: "";
    --fa-chevron-circle-end: "";
    --fa-long-arrow-start: "";
    --fa-long-arrow-end: ""
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 300;
    font-display: swap
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 800;
    font-display: swap
}

@font-face {
    font-family: "Proxima Soft";
    font-style: normal;
    font-weight: 300;
    font-display: swap
}

@font-face {
    font-family: "Proxima Soft";
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: "Proxima Soft";
    font-style: normal;
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: "Proxima Soft";
    font-style: normal;
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: block;
    font-weight: 400
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 900
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 400
}

@font-face {
    font-family: "FontAwesome";
    font-display: block
}

@font-face {
    font-family: "FontAwesome";
    font-display: block
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    unicode-range: U+F003, U+F006, U+F014, U+F016-F017, U+F01A-F01B, U+F01D, U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E, U+F070, U+F087-F088, U+F08A, U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5, U+F0C7, U+F0E5-F0E6, U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A, U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152, U+F185-F186, U+F18E, U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7, U+F1F9, U+F20A, U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D, U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5, U+F2B7, U+F2BA, U+F2BC, U+F2BE, U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    unicode-range: U+F041, U+F047, U+F065-F066, U+F07D-F07E, U+F080, U+F08B, U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0, U+F0D6, U+F0E4, U+F0EC, U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E, U+F160-F161, U+F163, U+F175-F178, U+F195, U+F1F8, U+F219, U+F27A
}

html {
    font-size: 100%;
    transition: color .25s ease-in, background .25s ease-in
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-style: normal;
    font-weight: var(--fw-400);
    font-size: 1rem;
    line-height: 1.375rem;
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: var(--dir-start);
    color: var(--font-color);
    direction: var(--dir-start);
    background-color: var(--bg-body);
    overflow-x: hidden
}

h1, h2, h3, h4, h5, h6, p, li, sup, th, td, label, input, select, textarea {
    color: var(--font-color)
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 8px;
    font-weight: var(--fw-600);
    color: var(--font-color-dark)
}

h1 {
    font-style: var(--h1-font-style);
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-family: var(--h1-font-family);
    color: var(--h1-color)
}

h2 {
    font-style: var(--h2-font-style);
    font-weight: var(--h2-font-weight);
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-family: var(--h2-font-family);
    color: var(--h2-color)
}

h3 {
    font-style: var(--h3-font-style);
    font-weight: var(--h3-font-weight);
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-family: var(--h3-font-family);
    color: var(--h3-color)
}

h5 {
    font-style: var(--h5-font-style);
    font-weight: var(--h5-font-weight);
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    font-family: var(--h5-font-family);
    color: var(--h5-color)
}

h6 {
    font-style: var(--h6-font-style);
    font-weight: var(--h6-font-weight);
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    font-family: var(--h6-font-family);
    color: var(--h6-color)
}

p {
    margin: 0 0 8px;
    font-style: var(--p-font-style);
    font-weight: var(--p-font-weight);
    font-size: var(--p-font-size);
    line-height: var(--p-line-height);
    font-family: var(--p-font-family);
    color: var(--p-color)
}

ul, ol {
    margin: 10px 0;
    padding: 0
}

ul li, ol li {
    margin: 0 0 10px;
    margin-left: 30px;
    padding: 0;
    padding-left: 10px;
    font-style: var(--li-font-style);
    font-weight: var(--li-font-weight);
    font-size: var(--li-font-size);
    line-height: var(--li-line-height);
    font-family: var(--li-font-family);
    color: var(--li-color)
}

th {
    padding: var(--th-pt) var(--th-pe) var(--th-pb) var(--th-ps);
    font-style: var(--th-font-style);
    font-weight: var(--th-font-weight);
    font-size: var(--th-font-size);
    line-height: var(--th-line-height);
    font-family: var(--th-font-family);
    color: var(--th-color);
    background-color: var(--th-bg-color)
}

a, a:link, a:visited, a:hover, a:active, a:focus {
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

a > svg, a:link > svg, a:visited > svg, a:hover > svg, a:active > svg, a:focus > svg {
    color: initial !important
}

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

a:active {
    color: var(--link-color-active)
}

a:focus, button:focus {
    box-shadow: none;
    outline: none
}

button, button:link, button:visited, button:hover, button:active, button:focus {
    -webkit-user-drag: none
}

label {
    font-style: var(--label-font-style);
    font-weight: var(--label-font-weight);
    font-size: var(--label-font-size);
    line-height: var(--label-line-height);
    font-family: var(--label-font-family);
    color: var(--label-color)
}

input {
    margin: 0;
    padding: var(--input-pt) var(--input-pe) var(--input-pb) var(--input-ps);
    width: auto;
    height: auto;
    font-style: var(--input-font-style);
    font-weight: var(--input-font-weight);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    font-family: var(--input-font-family);
    color: var(--input-color);
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius)
}

input::-webkit-input-placeholder {
    color: var(--gray-90);
    opacity: 1
}

input::-moz-placeholder {
    color: var(--gray-90);
    opacity: 1
}

input:-ms-input-placeholder {
    color: var(--gray-90);
    opacity: 1
}

input::-ms-input-placeholder {
    color: var(--gray-90);
    opacity: 1
}

input::placeholder {
    color: var(--gray-90);
    opacity: 1
}

input:hover {
    color: var(--input-color-focus);
    background-color: var(--input-bg-color-focus);
    border-color: var(--input-border-color-focus);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

input:focus {
    color: var(--input-color-focus);
    background-color: var(--input-bg-color-focus);
    border-color: var(--input-border-color-focus);
    outline: none;
    box-shadow: var(--box-shadow)
}

input[type=radio], input[type=checkbox] {
    padding: 0
}

img {
    max-width: 100%;
    width: 100%;
    height: auto;
    vertical-align: initial
}

hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--border-color);
    opacity: 1
}

strong {
    font-weight: var(--fw-600)
}

section {
    position: relative;
    margin: 0;
    padding: 20px 0
}

section:before, section:after {
    position: absolute;
    content: "";
    pointer-events: none
}

input::-ms-clear {
    display: none
}

@media (max-width: 575.98px) {
    h1 {
        font-size: var(--h1-font-size-mobile);
        line-height: var(--h1-line-height-mobile)
    }

    h2 {
        font-size: var(--h2-font-size-mobile);
        line-height: var(--h2-line-height-mobile)
    }

    h3 {
        font-size: var(--h3-font-size-mobile);
        line-height: var(--h3-line-height-mobile)
    }

    h4 {
        font-size: var(--h4-font-size-mobile);
        line-height: var(--h4-line-height-mobile)
    }

    h5 {
        font-size: var(--h5-font-size-mobile);
        line-height: var(--h5-line-height-mobile)
    }

    h6 {
        font-size: var(--h6-font-size-mobile);
        line-height: var(--h6-line-height-mobile)
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    h1 {
        font-size: var(--h1-font-size-mobile);
        line-height: var(--h1-line-height-mobile)
    }

    h2 {
        font-size: var(--h2-font-size-mobile);
        line-height: var(--h2-line-height-mobile)
    }

    h3 {
        font-size: var(--h3-font-size-mobile);
        line-height: var(--h3-line-height-mobile)
    }

    h4 {
        font-size: var(--h4-font-size-mobile);
        line-height: var(--h4-line-height-mobile)
    }

    h5 {
        font-size: var(--h5-font-size-mobile);
        line-height: var(--h5-line-height-mobile)
    }

    h6 {
        font-size: var(--h6-font-size-mobile);
        line-height: var(--h6-line-height-mobile)
    }

}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 400;
    src: local("proxima-nova-regular"), local("proxima nova regular"), url(./fonts/Proxima-Nova-Regular.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 600;
    src: local("proxima-nova-semibold"), local("proxima nova semibold"), url(./fonts/Proxima-Nova-Semibold.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 800;
    src: local("proxima-nova-extrabold"), local("proxima nova extrabold"), url(./fonts/proximanova-extrabold.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(./fonts/fa-solid-900.woff2) format("woff2")
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: block;
    font-weight: 400;
    src: url(./fonts/fa-brands-400.woff2) format("woff2")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 900;
    src: url(./fonts/fa-solid-900.woff2) format("woff2")
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url(./fonts/fa-solid-900.woff2) format("woff2")
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url(./fonts/fa-brands-400.woff2) format("woff2")
}

:root {
    --primary-3: hsla(355, 85%, 46%, .03);
    --primary-5: hsla(355, 85%, 46%, .05);
    --primary-10: hsla(355, 85%, 46%, .1);
    --primary-20: hsla(355, 85%, 46%, .2);
    --primary-30: hsla(355, 85%, 46%, .3);
    --primary-40: hsla(355, 85%, 46%, .4);
    --primary-50: hsla(355, 85%, 46%, .5);
    --primary-60: hsla(355, 85%, 46%, .6);
    --primary-70: hsla(355, 85%, 46%, .7);
    --primary-80: hsla(355, 85%, 46%, .8);
    --primary-90: hsla(355, 85%, 46%, .9);
    --primary: hsla(355, 85%, 46%, 1);
    --primary-dark-10: hsla(355, 85%, 41%, 1);
    --primary-dark-20: hsla(355, 85%, 36%, 1);
    --primary-dark-30: hsla(355, 85%, 31%, 1);
    --primary-dark-40: hsla(355, 85%, 26%, 1);
    --primary-dark-50: hsla(355, 85%, 21%, 1);
    --secondary-3: hsla(0, 0%, 13%, .03);
    --secondary-5: hsla(0, 0%, 13%, .05);
    --secondary-10: hsla(0, 0%, 13%, .1);
    --secondary-20: hsla(0, 0%, 13%, .2);
    --secondary-30: hsla(0, 0%, 13%, .3);
    --secondary-40: hsla(0, 0%, 13%, .4);
    --secondary-50: hsla(0, 0%, 13%, .5);
    --secondary-60: hsla(0, 0%, 13%, .6);
    --secondary-70: hsla(0, 0%, 13%, .7);
    --secondary-80: hsla(0, 0%, 13%, .8);
    --secondary-90: hsla(0, 0%, 13%, .9);
    --secondary: hsla(0, 0%, 13%, 1);
    --secondary-dark-10: hsla(0, 0%, 10%, 1);
    --secondary-dark-20: hsla(0, 0%, 7%, 1);
    --secondary-dark-30: hsla(0, 0%, 4%, 1);
    --secondary-dark-40: hsla(0, 0%, 1%, 1);
    --secondary-dark-50: hsla(0, 0%, 0%, 1);
    --tertiary-3: hsla(202, 76%, 19%, .03);
    --tertiary-5: hsla(202, 76%, 19%, .05);
    --tertiary-10: hsla(202, 76%, 19%, .1);
    --tertiary-20: hsla(202, 76%, 19%, .2);
    --tertiary-30: hsla(202, 76%, 19%, .3);
    --tertiary-40: hsla(202, 76%, 19%, .4);
    --tertiary-50: hsla(202, 76%, 19%, .5);
    --tertiary-60: hsla(202, 76%, 19%, .6);
    --tertiary-70: hsla(202, 76%, 19%, .7);
    --tertiary-80: hsla(202, 76%, 19%, .8);
    --tertiary-90: hsla(202, 76%, 19%, .9);
    --tertiary: hsla(202, 76%, 19%, 1);
    --tertiary-dark-10: hsla(202, 76%, 14%, 1);
    --tertiary-dark-20: hsla(202, 76%, 9%, 1);
    --tertiary-dark-30: hsla(202, 76%, 4%, 1);
    --tertiary-dark-40: hsla(202, 76%, 0%, 1);
    --tertiary-dark-50: hsla(202, 76%, 0%, 1);
    --info-3: hsla(216, 83%, 41%, .03);
    --info-5: hsla(216, 83%, 41%, .05);
    --info-10: hsla(216, 83%, 41%, .1);
    --info-20: hsla(216, 83%, 41%, .2);
    --info-30: hsla(216, 83%, 41%, .3);
    --info-40: hsla(216, 83%, 41%, .4);
    --info-50: hsla(216, 83%, 41%, .5);
    --info-60: hsla(216, 83%, 41%, .6);
    --info-70: hsla(216, 83%, 41%, .7);
    --info-80: hsla(216, 83%, 41%, .8);
    --info-90: hsla(216, 83%, 41%, .9);
    --info: hsla(216, 83%, 41%, 1);
    --info-dark-10: hsla(215, 89%, 32%, 1);
    --info-dark-20: hsla(214, 75%, 25%, 1);
    --info-dark-30: hsla(214, 69%, 22%, 1);
    --info-dark-40: hsla(214, 63%, 19%, 1);
    --info-dark-50: hsla(216, 51%, 16%, 1);
    --success-3: hsla(148, 96%, 27%, .03);
    --success-5: hsla(148, 96%, 27%, .05);
    --success-10: hsla(148, 96%, 27%, .1);
    --success-20: hsla(148, 96%, 27%, .2);
    --success-30: hsla(148, 96%, 27%, .3);
    --success-40: hsla(148, 96%, 27%, .4);
    --success-50: hsla(148, 96%, 27%, .5);
    --success-60: hsla(148, 96%, 27%, .6);
    --success-70: hsla(148, 96%, 27%, .7);
    --success-80: hsla(148, 96%, 27%, .8);
    --success-90: hsla(148, 96%, 27%, .9);
    --success: hsla(148, 96%, 27%, 1);
    --success-dark-10: hsla(143, 93%, 22%, 1);
    --success-dark-20: hsla(145, 82%, 18%, 1);
    --success-dark-30: hsla(145, 86%, 14%, 1);
    --success-dark-40: hsla(145, 85%, 10%, 1);
    --success-dark-50: hsla(144, 90%, 8%, 1);
    --warning-3: hsla(42, 100%, 50%, .03);
    --warning-5: hsla(42, 100%, 50%, .05);
    --warning-10: hsla(42, 100%, 50%, .1);
    --warning-20: hsla(42, 100%, 50%, .2);
    --warning-30: hsla(42, 100%, 50%, .3);
    --warning-40: hsla(42, 100%, 50%, .4);
    --warning-50: hsla(42, 100%, 50%, .5);
    --warning-60: hsla(42, 100%, 50%, .6);
    --warning-70: hsla(42, 100%, 50%, .7);
    --warning-80: hsla(42, 100%, 50%, .8);
    --warning-90: hsla(42, 100%, 50%, .9);
    --warning: hsla(42, 100%, 50%, 1);
    --warning-dark-10: hsla(37, 96%, 43%, 1);
    --warning-dark-20: hsla(33, 69%, 38%, 1);
    --warning-dark-30: hsla(33, 71%, 30%, 1);
    --warning-dark-40: hsla(33, 73%, 22%, 1);
    --warning-dark-50: hsla(34, 79%, 17%, 1);
    --danger-3: hsla(355, 85%, 46%, .03);
    --danger-5: hsla(355, 85%, 46%, .05);
    --danger-10: hsla(355, 85%, 46%, .1);
    --danger-20: hsla(355, 85%, 46%, .2);
    --danger-30: hsla(355, 85%, 46%, .3);
    --danger-40: hsla(355, 85%, 46%, .4);
    --danger-50: hsla(355, 85%, 46%, .5);
    --danger-60: hsla(355, 85%, 46%, .6);
    --danger-70: hsla(355, 85%, 46%, .7);
    --danger-80: hsla(355, 85%, 46%, .8);
    --danger-90: hsla(355, 85%, 46%, .9);
    --danger: hsla(355, 85%, 46%, 1);
    --danger-dark-10: hsla(355, 93%, 37%, 1);
    --danger-dark-20: hsla(357, 81%, 29%, 1);
    --danger-dark-30: hsla(356, 83%, 23%, 1);
    --danger-dark-40: hsla(356, 86%, 17%, 1);
    --danger-dark-50: hsla(356, 88%, 13%, 1);
    --default-3: hsla(0, 0%, 99%, .03);
    --default-5: hsla(0, 0%, 99%, .05);
    --default-10: hsla(0, 0%, 99%, .1);
    --default-20: hsla(0, 0%, 99%, .1);
    --default-30: hsla(0, 0%, 99%, .1);
    --default-40: hsla(0, 0%, 99%, .1);
    --default-50: hsla(0, 0%, 99%, .1);
    --default-60: hsla(0, 0%, 99%, .1);
    --default-70: hsla(0, 0%, 99%, .1);
    --default-80: hsla(0, 0%, 99%, .1);
    --default-90: hsla(0, 0%, 99%, .1);
    --default: hsla(0, 0%, 99%, 1);
    --default-dark-10: hsla(0, 0%, 97%, .1);
    --default-dark-20: hsla(0, 0%, 95%, 1);
    --default-dark-30: hsla(0, 0%, 93%, 1);
    --default-dark-40: hsla(0, 0%, 91%, 1);
    --default-dark-50: hsla(0, 0%, 89%, 1);
    --neutral-0: hsla(0, 0%, 100%, 1);
    --neutral-3: hsla(0, 0%, 97%, 1);
    --neutral-5: hsla(0, 0%, 95%, 1);
    --neutral-10: hsla(180, 3%, 93%, 1);
    --neutral-20: hsla(240, 1%, 86%, 1);
    --neutral-30: hsla(220, 1%, 76%, 1);
    --neutral-40: hsla(210, 2%, 64%, 1);
    --neutral-50: hsla(210, 2%, 58%, 1);
    --neutral-60: hsla(216, 2%, 46%, 1);
    --neutral-70: hsla(215, 3%, 36%, 1);
    --neutral-80: hsla(214, 5%, 28%, 1);
    --neutral-90: hsla(218, 11%, 16%, 1);
    --neutral: hsla(220, 17%, 10%, 1);
    --dark-3: hsla(0, 0%, 0%, .03);
    --dark-5: hsla(0, 0%, 0%, .05);
    --dark-10: hsla(0, 0%, 0%, .1);
    --dark-20: hsla(0, 0%, 0%, .2);
    --dark-30: hsla(0, 0%, 0%, .3);
    --dark-40: hsla(0, 0%, 0%, .4);
    --dark-50: hsla(0, 0%, 0%, .5);
    --dark-60: hsla(0, 0%, 0%, .6);
    --dark-70: hsla(0, 0%, 0%, .7);
    --dark-80: hsla(0, 0%, 0%, .8);
    --dark-90: hsla(0, 0%, 0%, .9);
    --dark: hsla(0, 0%, 0%, 1);
    --light-3: hsla(0, 0%, 100%, .03);
    --light-5: hsla(0, 0%, 100%, .05);
    --light-10: hsla(0, 0%, 100%, .1);
    --light-20: hsla(0, 0%, 100%, .2);
    --light-30: hsla(0, 0%, 100%, .3);
    --light-40: hsla(0, 0%, 100%, .4);
    --light-50: hsla(0, 0%, 100%, .5);
    --light-60: hsla(0, 0%, 100%, .6);
    --light-70: hsla(0, 0%, 100%, .7);
    --light-80: hsla(0, 0%, 100%, .8);
    --light-90: hsla(0, 0%, 100%, .9);
    --light: hsla(0, 0%, 100%, 1);
    --bg-body: hsla(0, 0%, 100%, 1);
    --bg-body-light: hsla(0, 0%, 100%, 1);
    --bg-body-dark: hsla(0, 0%, 0%, 1);
    --shadow-color: hsla(0, 0%, 0%, .2);
    --box-shadow: 0px 1px 2px hsla(0, 0%, 0%, .2);
    --overlay-color: hsla(0, 0%, 0%, .5);
    --border-color: hsla(0, 0%, 0%, .12);
    --border-radius: 0px;
    --border-radius-xl: 0px;

    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;
    --fs-1: 2.5rem;
    --fs-2: 2.25rem;
    --fs-3: 2rem;
    --fs-4: 1.75rem;
    --fs-5: 1.5rem;
    --fs-6: 1.25rem;
    --fs-7: 1rem;
    --fs-8: .875rem;
    --fs-9: .75rem;
    --lh-1: 2.75rem;
    --lh-2: 2.625rem;
    --lh-3: 2.5rem;
    --lh-4: 2.25rem;
    --lh-5: 2.25rem;
    --lh-6: 1.75rem;
    --lh-7: 1.375rem;
    --lh-8: 1.125rem;
    --lh-9: 1rem;
    --font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --font-color: hsla(0, 0%, 27%, 1);
    --font-color-dark: hsla(0, 0%, 0%, 1);
    --font-color-light: hsla(0, 0%, 40%, 1);
    --h1-font-style: normal;
    --h1-font-weight: 400;
    --h1-font-size: 2.5rem;
    --h1-font-size-mobile: 2.25rem;
    --h1-line-height: 2.75rem;
    --h1-line-height-mobile: 2.625rem;
    --h1-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --h1-color: hsla(0, 0%, 0%, 1);
    --h2-font-style: normal;
    --h2-font-weight: 400;
    --h2-font-size: 2.25rem;
    --h2-font-size-mobile: 2rem;
    --h2-line-height: 2.625rem;
    --h2-line-height-mobile: 2.5rem;
    --h2-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --h2-color: hsla(0, 0%, 0%, 1);
    --h3-font-style: normal;
    --h3-font-weight: 400;
    --h3-font-size: 2rem;
    --h3-font-size-mobile: 1.75rem;
    --h3-line-height: 2.5rem;
    --h3-line-height-mobile: 2.25rem;
    --h3-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --h3-color: hsla(0, 0%, 0%, 1);
    --h4-font-style: normal;
    --h4-font-weight: 400;
    --h4-font-size: 1.75rem;
    --h4-font-size-mobile: 1.5rem;
    --h4-line-height: 2.25rem;
    --h4-line-height-mobile: 2rem;
    --h4-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --h4-color: hsla(0, 0%, 0%, 1);
    --h5-font-style: normal;
    --h5-font-weight: 400;
    --h5-font-size: 1.5rem;
    --h5-font-size-mobile: 1.25rem;
    --h5-line-height: 2rem;
    --h5-line-height-mobile: 1.75rem;
    --h5-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --h5-color: hsla(0, 0%, 0%, 1);
    --h6-font-style: normal;
    --h6-font-weight: 600;
    --h6-font-size: 1.25rem;
    --h6-font-size-mobile: 1rem;
    --h6-line-height: 1.75rem;
    --h6-line-height-mobile: 1.375rem;
    --h6-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --h6-color: hsla(0, 0%, 0%, 1);
    --p-font-style: normal;
    --p-font-weight: 400;
    --p-font-size: 1rem;
    --p-line-height: 1.375rem;
    --p-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --p-color: hsla(0, 0%, 27%, 1);
    --li-font-style: normal;
    --li-font-weight: 400;
    --li-font-size: 1rem;
    --li-line-height: 1.375rem;
    --li-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --li-color: hsla(0, 0%, 27%, 1);
    --th-pt: 5px;
    --th-pe: 8px;
    --th-pb: 5px;
    --th-ps: 8px;
    --th-font-style: normal;
    --th-font-weight: 400;
    --th-font-size: .8125rem;
    --th-line-height: 1.125rem;
    --th-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --th-color: hsla(208, 7%, 46%, .9);
    --th-bg-color: hsla(0, 0%, 100%, 0);
    --td-pt: 5px;
    --td-pe: 8px;
    --td-pb: 5px;
    --td-ps: 8px;
    --td-font-style: normal;
    --td-font-weight: 400;
    --td-font-size: .875rem;
    --td-line-height: 1.125rem;
    --td-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --td-color: hsla(0, 0%, 27%, 1);
    --td-bg-color: hsla(0, 0%, 100%, 0);
    --link-color: hsla(355, 85%, 46%, 1);
    --link-color-hover: hsla(355, 85%, 41%, 1);
    --link-color-active: hsla(355, 85%, 36%, 1);
    --label-font-style: normal;
    --label-font-weight: 400;
    --label-font-size: 1rem;
    --label-line-height: 1.375rem;
    --label-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --label-color: hsla(0, 0%, 0%, 1);
    --input-pt: 6px;
    --input-pe: 12px;
    --input-pb: 6px;
    --input-ps: 12px;
    --input-font-style: normal;
    --input-font-weight: 400;
    --input-font-size: 1rem;
    --input-line-height: 1.375rem;
    --input-font-family: "Proxima Nova", Arial, Verdana, sans-serif;
    --input-color: hsla(0, 0%, 27%, 1);
    --input-color-focus: hsla(0, 0%, 0%, 1);
    --input-bg-color: hsla(0, 0%, 100%, 1);
    --input-bg-color-focus: hsla(0, 0%, 100%, 1);
    --input-border-color: hsla(0, 0%, 0%, .12);
    --input-border-color-focus: hsla(355, 85%, 46%, 1);

    --am-nav-top-bg-color: hsla(0, 0%, 0%, 1);
    --am-nav-top-font-color: hsla(0, 0%, 100%, .8);
    --am-nav-top-font-color-hover: hsla(0, 0%, 100%, 1);
    --am-nav-top-font-color-active: hsla(0, 0%, 100%, 1);
    --am-nav-top-link-bg-color: hsla(0, 0%, 100%, 0);
    --am-nav-top-link-bg-color-hover: hsla(0, 0%, 100%, 0);
    --am-nav-top-link-bg-color-active: hsla(0, 0%, 100%, 0);

    --am-nav-bottom-bg-color: hsla(0, 0%, 100%, 1);
    --am-nav-bottom-font-color: hsla(0, 0%, 27%, 1);
    --am-nav-bottom-font-color-hover: hsla(0, 0%, 0%, 1);
    --am-nav-bottom-font-color-active: hsla(0, 0%, 0%, 1);
    --am-nav-bottom-link-bg-color: hsla(0, 0%, 100%, 0);
    --am-nav-bottom-link-bg-color-hover: hsla(0, 0%, 100%, 0);
    --am-nav-bottom-link-bg-color-active: hsla(0, 0%, 100%, 0);

    --am-footer-bg-color: hsla(0, 0%, 100%, 1);
    --am-footer-font-color: hsla(0, 0%, 0%, .8);
    --am-footer-font-color-dark: hsla(0, 0%, 0%, 1);
    --am-footer-font-color-light: hsla(0, 0%, 0%, .6);
    --am-footer-link-color: hsla(0, 0%, 0%, .8);
    --am-footer-link-color-hover: hsla(355, 85%, 46%, 1);
    --am-footer-link-color-active: hsla(355, 85%, 46%, 1);
    --am-login-bg-color: hsla(208, 7%, 46%, .1);
    --am-panel-bg-color: hsla(0, 0%, 100%, 1);
    --am-panel-heading-bg-color: hsla(0, 0%, 100%, 1);
    --am-panel-body-bg-color: hsla(0, 0%, 100%, 1);

    --reg-nav-top-bg-color: hsla(215, 96%, 9%, 1);
    --reg-nav-top-font-color: hsla(0, 0%, 100%, .8);
    --reg-nav-top-font-color-hover: hsla(0, 0%, 100%, 1);

    --reg-footer-bg-color: hsla(0, 0%, 100%, 1);
    --reg-footer-font-color: hsla(0, 0%, 27%, 1);
    --reg-start-left-bg-color: hsla(215, 89%, 20%, 1);
    --reg-start-left-font-color: hsla(0, 0%, 100%, 1);
    --reg-start-right-bg-color: hsla(0, 0%, 100%, 1);
    --reg-start-right-font-color: hsla(0, 0%, 27%, 1);
    --nav-top-bg-color: hsla(0, 0%, 0%, 1);
    --nav-top-link-color: hsla(0, 0%, 100%, .8);
    --nav-top-link-color-hover: hsla(0, 0%, 100%, 1);
    --nav-top-link-color-active: hsla(0, 0%, 100%, 1);
    --nav-top-link-bg-color: hsla(0, 0%, 100%, 0);
    --nav-top-link-bg-color-hover: hsla(0, 0%, 100%, 0);
    --nav-top-link-bg-color-active: hsla(0, 0%, 100%, 0);

    --nav-bottom-bg-color: hsla(0, 0%, 100%, 1);
    --nav-bottom-link-color: hsla(0, 0%, 0%, .8);
    --nav-bottom-link-color-hover: hsla(355, 85%, 46%, 1);
    --nav-bottom-link-color-active: hsla(355, 85%, 46%, 1);
    --nav-bottom-link-bg-color: hsla(0, 0%, 100%, 0);
    --nav-bottom-link-bg-color-hover: hsla(0, 0%, 100%, 0);
    --nav-bottom-link-bg-color-active: hsla(0, 0%, 100%, 0);

    --footer-bg-color: hsla(208, 7%, 46%, .1);
    --footer-font-color-dark: hsla(0, 0%, 0%, 1);
    --footer-font-color: hsla(0, 0%, 0%, .8);
    --footer-font-color-light: hsla(0, 0%, 0%, .6);
    --footer-link-color: hsla(0, 0%, 0%, .8);
    --footer-link-color-hover: hsla(355, 85%, 46%, 1);
    --footer-link-color-active: hsla(355, 85%, 46%, 1)
}

.scroll-lock {
    overflow-y: hidden
}

@media screen and (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1380px !important
    }
}

:root {
    --svg-dark: hsla(240, 17%, 10%, 1);
    --bg-body: #fff;
    --bg-body-light: #fff;
    --bg-body-dark: #fafafa;
    --ibkr-black: #000;
    --ibkr-white: #fff;
    --ibkr-blue: var(--info-90);
    --ibkr-blue-ltlt: #e9f4ff;
    --ibkr-gray-xlt: #fafafa;
    --ibkr-gray-lt: #e9e9ec;
    --ibkr-gray-md-lt: #d6d6dc;
    --ibkr-gray-md: #717184;
    --ibkr-gray-md-dk: #474752;
    --ibkr-gray-dk: #1b1b22;
    --ibkr-md-md-lt: #f2f2f2;
    --ibkr-green-lt: #d8f1c1
}

.text-red {
    color: #db1222 !important
}

.background-dark {
    background-color: #1b1b22
}

.background-dark p, .background-dark ul li, .background-dark ol li, .background-dark .page-content p, .background-dark .page-content ul li {
    color: #fff !important
}

p {
    color: var(--p-color)
}

p a {
    color: var(--info-90)
}

h1, h2, h3, h4, h5, h6 {
    color: var(--h1-color);
    font-weight: 600;
    line-height: 1.2em
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    font-weight: 400
}

h1.text-regular, h2.text-regular, h3.text-regular, h4.text-regular, h5.text-regular, h6.text-regular {
    font-weight: 400
}

h1.text-red, h2.text-red, h3.text-red, h4.text-red, h5.text-red, h6.text-red, p.text-red {
    color: #db1222 !important
}

h1.tl-dash, h2.tl-dash, h3.tl-dash, h4.tl-dash, h5.tl-dash, h6.tl-dash, p.tl-dash {
    border-left: 6px solid #db1222;
    margin-left: 0;
    padding-left: 10px;
    font-weight: bold;
    margin-bottom: 20px;
}

h2 {
    font-size: 1.8rem
}

h3 {
    font-size: 1.4rem
}

h4 {
    font-size: 1.1rem
}

h5 {
    font-size: 1.05rem
}


h6 {
    font-size: .9rem
}

h6.text-small {
    font-size: .6rem
}

.sub-title {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ibkr-gray-md)
}

.sub-date {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    font-size: .8rem;
    color: var(--ibkr-gray-md)
}

.sub-title span {
    font-weight: 400
}

sup {
    font-size: .7em;
    display: inline;
    margin: .8rem 0 0 2px
}

sub {
    font-size: .8em;
    line-height: 1.2em;
    display: inline-block
}

code {
    color: var(--success-90);
    font-weight: 600
}

code a {
    color: var(--info-90) !important
}


.page-content p a, .page-content p a:link, .page-content p a:visited, .page-content p a:hover, .page-content p a:active, .page-content p a:focus, .page-content ul li a, .page-content ul li a:link, .page-content ul li a:visited, .page-content ul li a:hover, .page-content ul li a:active, .page-content ul li a:focus, .page-content ol li a, .page-content ol li a:link, .page-content ol li a:visited, .page-content ol li a:hover, .page-content ol li a:active, .page-content ol li a:focus {
    color: var(--ibkr-blue);
    font-weight: 600
}

.page-content ul {
    margin: 0 0 20px !important
}

.page-content ul li {
    list-style: none;
    padding-left: 20px;
    position: relative;
    margin: 0 0 10px;
    color: var(--p-color)
}

.page-content ul li:before {
    content: " ";
    display: block;
    position: absolute;
    top: 7px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #db1222
}

.page-content ul.list-checks li:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "";
    background: 0 0;
    width: auto;
    height: auto;
    border-radius: 0;
    top: 2px;
    color: #db1222;
    display: inline-block
}

.page-content ol {
    list-style: none;
    counter-reset: ol-counter
}

.page-content ol > li {
    padding-left: 40px;
    counter-increment: ol-counter;
    position: relative;
    color: var(--p-color)
}

.page-content ol > li:before {
    content: counter(ol-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 2px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    font-weight: 600;
    background: #b8b8c3;
    color: #fff;
    font-size: .8rem
}

.page-content li ul li {
    padding-left: 20px
}

.page-content li ul li:before {
    top: 7px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #db1222;
    background-color: transparent
}

.page-content li ol li {
    padding-left: 20px
}

.page-content li ol li:before {
    top: 4px;
    left: -3px;
    width: 15px;
    height: 15px;
    font-size: 1rem;
    color: #db1222;
    background: 0 0;
    border: none
}

.page-content li ol li ul li:before {
    top: 8px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ibkr-gray-md-lt)
}

.page-content li ul li ul li:before, .page-content li ol li ul li:before {
    top: 8px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #717184;
    border: none
}

.page-content li ul li ul li ul li:before, .page-content li ol li ul li ul li:before {
    top: 8px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid #717184;
    background-color: transparent
}

.page-content li ul li ul li ul li ul li:before, .page-content li ol li ul li ul li ul li:before {
    top: 9px;
    left: 2px;
    width: 7px;
    height: 3px;
    border-radius: 0;
    background: #717184;
    border: none
}

.page-content li ul li ul li ul li ul li ul li:before, .page-content li ol li ul li ul li ul li ul li:before {
    top: 9px;
    left: 2px;
    width: 7px;
    min-width: 4px;
    height: 3px;
    border-radius: 0;
    border: 1px solid #717184;
    background-color: transparent
}

::selection {
    background: var(--ibkr-gray-md-lt)
}

::-moz-selection {
    background: var(--ibkr-gray-md-lt)
}

textarea, input[type=text], input[type=tel], input[type=email], select {
    background-color: #fff
}

textarea:hover, textarea:focus, input[type=text]:hover, input[type=text]:focus, input[type=tel]:hover, input[type=tel]:focus, input[type=email]:hover, input[type=email]:focus, select:hover, select:focus {
    background-color: #fafafa;
    border-color: #e9e9ec
}

.btn-chevron, a.btn-chevron {
    color: var(--h1-color) !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
}

.btn-chevron:after, a.btn-chevron:after {
    color: #db1222;
    font-family: "Font Awesome 6 Free";
    font-size: 100%;
    vertical-align: middle;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -webkit-user-drag: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin: 0;
    margin-left: 4px;
    content: ""
}

.btn-chevron:hover:after, .btn-chevron.active:after, a.btn-chevron:hover:after, a.btn-chevron.active:after {
    translate: 4px 0
}

.btn-chevron:hover:before, .btn-chevron.active:before, a.btn-chevron:hover:before, a.btn-chevron.active:before {
    translate: -4px 0
}

.btn-chevron.sm, a.btn-chevron.sm {
    font-size: .9rem
}

.btn-chevron.xs, a.btn-chevron.xs {
    font-size: .8rem
}

header.global {
    position: fixed;
    background: var(--ibkr-white);
    width: 100%;
    z-index: 100;
    box-shadow: var(--box-shadow)
}

@media screen and (min-width: 768px) {
    header.global .container {
        padding-top: 4px;
        padding-bottom: 4px
    }
}

@media screen and (min-width: 992px) {
    header.global .container {
        padding-top: 6px;
        padding-bottom: 0;
        transition: padding-top .2s
    }
}

@media screen and (min-width: 992px) {
    header.global .container.header-primary {
        padding-top: 10px
    }
}

header.global .logo {
    display: inline-block;
    margin: 10px 0
}

header.global .logo a {
    display: flex;
    flex-direction: column
}

header.global .logo a svg {
    max-width: 150px;
    width: 100%;
    margin-right: 12px
}

@media screen and (min-width: 768px) {
    header.global .logo a svg {
        margin: 0 12px 0 0
    }
}

@media screen and (min-width: 992px) {
    header.global .logo a svg {
        transition: max-width .2s
    }
}

header.global .logo a p {
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.1em;
    margin: 0
}

@media screen and (min-width: 768px) {
    header.global .logo a p {
        line-height: 1.4em
    }
}

@media screen and (min-width: 768px) {
    header.global .logo a {
        flex-direction: row;
        align-items: end
    }
}

.main-nav {
    gap: 2rem;
    padding: 10px 0;
}

.main-nav a {
    color: var(--p-color);
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}

header.global .nav-right {
    display: flex;
    align-items: center;
    height: 100%;
    transition: padding-top .2s
}

header.global .nav-right svg path, header.global .nav-right svg rect {
    fill: #717184
}

header.global .nav-right .search-form {
    display: inline-block;
    margin-right: 12px
}

header.global .nav-right .search-form form {
    position: relative
}

header.global .nav-right .search-form form label {
    margin-bottom: 0
}

header.global .nav-right .search-form form label input {
    display: none
}

header.global .nav-right .search-form form svg {
    max-width: 30px;
    padding: 0 3px;
    cursor: pointer
}

header.global .nav-right .search-form form .search-input {
    position: absolute;
    top: -2px;
    left: -2px;
    border: 0;
    border-bottom: 1px solid var(--ibkr-gray-md-lt);
    background: 0 0;
    opacity: 0;
    z-index: -1;
    transform: translateX(0);
    transition: transform .2s, opacity .2s
}

header.global .nav-right .search-form form .search-input:focus {
    box-shadow: none
}

header.global .nav-right .search-form form.active .search-input {
    opacity: 1;
    z-index: 1;
    transform: translateX(-100%)
}

header.global .nav-right .mobile-nav-open, .search-icon {
    max-width: 30px;
    display: flex;
    width: 100%;
    cursor: pointer;
    margin-left: 10px;
}

header.global .nav-right .mobile-nav-open img, .search-icon svg {
    width: 100%
}

@media screen and (min-width: 992px) {
    header.global .nav-right {
        height: unset;
        padding-top: 5px
    }
}

.section-signup > div {
    width: 25%
}

.section-signup > div a.newsletter-box {
    display: block
}

.section-signup > div a.newsletter-box svg {
    height: 30px;
    width: auto
}

.section-signup > div a.newsletter-box .btn-chevron {
    color: #fff !important
}

.section-signup > div a.newsletter-box:hover button {
    background-color: var(--btn-primary-bg-color-hover) !important;
    border-color: var(--btn-primary-border-color-hover) !important
}

@media screen and (max-width: 992px) {
    .section-signup > div {
        width: 33.333%
    }
}

@media screen and (max-width: 768px) {
    .section-signup > div {
        width: 50%
    }
}

@media screen and (max-width: 576px) {
    .section-signup > div {
        width: 100%
    }
}

footer#main-footer {
    background-color: #111118;
    padding-bottom: 30px
}

footer#main-footer svg {
    max-width: 180px;
    width: 100%
}

footer#main-footer #footer-nav ul#menu-footer-menu {
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 15px
}

footer#main-footer #footer-nav ul#menu-footer-menu li {
    margin: 5px 0;
    padding: 5px 0
}

footer#main-footer #footer-nav ul#menu-footer-menu li span {
    cursor: pointer
}

@media screen and (min-width: 768px) {
    footer#main-footer #footer-nav ul#menu-footer-menu {
        margin-top: 0;
        text-align: right
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    footer#main-footer #footer-nav ul#menu-footer-menu li:first-child {
        padding-top: 0;
        margin-top: 0
    }

    footer#main-footer #footer-nav ul#menu-footer-menu li:last-child {
        padding-bottom: 0;
        margin-bottom: 0
    }
}

@media screen and (min-width: 992px) {
    footer#main-footer #footer-nav ul#menu-footer-menu {
        display: flex;
        justify-content: space-between
    }

    footer#main-footer #footer-nav ul#menu-footer-menu li {
        font-size: 14px
    }
}

@media screen and (min-width: 1200px) {
    footer#main-footer #footer-nav ul#menu-footer-menu {
        max-width: 736px;
        margin-left: auto
    }

    footer#main-footer #footer-nav ul#menu-footer-menu li {
        font-size: 16px
    }
}

footer#main-footer p {
    font-size: .8125rem
}


footer#main-footer hr {
    border-top: 1px solid rgba(233, 233, 236, .5);
    margin-top: 0
}

footer#main-footer h5, footer#main-footer h6, footer#main-footer p, footer#main-footer a, footer#main-footer span {
    color: #fff !important
}

.nav-right a.btn-primary svg {
    height: 15px !important;
    width: auto
}

.nav-right a.btn-primary svg rect {
    fill: none !important
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: 100%;
    height: 100vh;
    width: 100%
}

.mobile-nav .mobile-nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: var(--bg-body);
    overflow-y: scroll;
    z-index: 2;
    transition: right .2s, width .2s
}

.mobile-nav .mobile-nav-menu ul {
    list-style-type: none;
    padding-left: 0
}

.mobile-nav .mobile-nav-menu .dark-mode-toggle {
    position: absolute;
    top: 22px;
    right: 46px
}

.mobile-nav .mobile-nav-menu .dark-mode-toggle:before {
    padding: 22px
}

.mobile-nav .mobile-nav-menu .nav-header {
    height: 56px;
    display: flex;
    border-bottom: 1px solid rgba(233, 233, 236, .5);
    position: relative
}

.mobile-nav .mobile-nav-menu .nav-header.first-result {
    height: 65px
}

.mobile-nav .mobile-nav-menu .nav-header div.section-title, .mobile-nav .mobile-nav-menu .nav-header.first-result a {
    display: flex;
    width: 100%;
    height: 100%;
    font-weight: bold;
    padding-left: 20px;
    border-left: 0 solid #db1222;
    align-items: center;
    transition: none;
    cursor: pointer
}

.mobile-nav .mobile-nav-menu .nav-header svg {
    width: auto;
    height: 30px;
    margin-bottom: 5px
}

.mobile-nav .mobile-nav-menu .nav-header svg path.text-fill {
    fill: var(--ibkr-black) !important
}

.mobile-nav .mobile-nav-menu .nav-header p.brand-text-header {
    margin-bottom: 0;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--ibkr-black)
}

.mobile-nav .mobile-nav-menu .nav-header div.section-title:hover, .mobile-nav .mobile-nav-menu .nav-header.first-result a:hover, .mobile-nav .mobile-nav-menu .nav-header div.section-title.active, .mobile-nav .mobile-nav-menu .nav-header.first-result a.active {
    padding-left: 15px;
    border-left: 5px solid #db1222
}

.mobile-nav .mobile-nav-menu .nav-search {
    background: var(--ibkr-gray-xlt);
    padding: 6px 19px;
    border-bottom: 1px solid rgba(var(--ibkr-gray-lt), .5);
    position: relative
}

.mobile-nav .mobile-nav-menu .nav-search form {
    position: relative
}

.mobile-nav .mobile-nav-menu .nav-search form input {
    width: 100%
}

.mobile-nav .mobile-nav-menu .nav-search form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 36px;
    background: 0 0;
    border: none
}

.mobile-nav .mobile-nav-menu .nav-search form button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 20px;
    font-family: "Font Awesome 6 Free";
    color: rgba(var(--ibkr-gray-lt), .5)
}

.mobile-nav .mobile-nav-menu .mobile-nav-close {
    position: fixed;
    top: 0;
    right: -100px;
    padding: 21px 15px 10px 10px;
    cursor: pointer;
    background: var(--bg-body);
    z-index: 10
}

.mobile-nav .mobile-nav-menu .mobile-nav-close svg {
    max-width: 24px;
    max-height: 24px
}

.mobile-nav .mobile-nav-menu .mobile-nav-close svg path {
    fill: var(--ibkr-gray-dk);
    transition: transform .2s;
    transform-origin: center
}

.mobile-nav .mobile-nav-menu .mobile-nav-close svg path:first-child {
    transform: rotateZ(45deg)
}

.mobile-nav .mobile-nav-menu .mobile-nav-close svg path:last-child {
    transform: rotateZ(-45deg)
}

@media screen and (min-width: 576px) {
    .mobile-nav .mobile-nav-menu {
        right: -80%;
        width: 80%
    }
}

.mobile-nav .mobile-nav-menu::-webkit-scrollbar {
    width: 6px
}

.mobile-nav .mobile-nav-menu::-webkit-scrollbar-track-piece {
    background-color: var(--bg-body-light)
}

.mobile-nav .mobile-nav-menu::-webkit-scrollbar-thumb {
    background-color: #cbcbcb;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: .1px solid #b7b7b7
}

.mobile-nav .mobile-nav-menu::-webkit-scrollbar-thumb:hover {
    background-color: #909090
}

.mobile-nav .mobile-nav-fade {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .2s
}

.mobile-nav.active {
    right: 0
}

.mobile-nav.active .mobile-nav-menu {
    right: 0
}

.mobile-nav.active .mobile-nav-menu .mobile-nav-close {
    right: 0
}

.mobile-nav.active .mobile-nav-menu .mobile-nav-close svg path {
    transform: rotateZ(0deg)
}

.mobile-nav.active .mobile-nav-fade {
    height: 100%;
    background: rgba(0, 0, 0, .3)
}

@media screen and (min-width: 992px) {
    .mobile-nav {
        display: none
    }
}

.menu-item-wrap ul.sub-menu {
    list-style-type: none;
    flex-wrap: wrap;
    text-align: center;
    justify-content: flex-start;
    max-width: none;
    width: 100%
}

.menu-item-wrap ul.sub-menu li {
    width: 25%;
    text-align: center
}

.menu-item-wrap ul.sub-menu li a {
    padding: 6px 0 !important;
    text-align: center;
    min-width: 20px
}

@media (min-width: 992px) {
    .menu-item-wrap ul.sub-menu {
        max-width: 500px
    }

    .menu-item-wrap:hover ul.sub-menu {
        display: flex !important
    }
}

@media not all and (min-width: 992px) {
    .menu-item-wrap ul.sub-menu {
        display: flex !important
    }
}

.nav-spacer {
    height: 56px;
    width: 100%;
    display: block
}

@media screen and (min-width: 768px) {
    .nav-spacer {
        height: 90px
    }
}

@media screen and (min-width: 992px) {
    .nav-spacer {
        height: 128px
    }
}


#page-title {
    padding: 15px 0;
    background-color: var(--bg-body-dark)
}

#page-title .container {
    position: relative
}

#page-title .title-text h1 {
    margin: 10px 0;
}

.featured-group {
    padding: 0 0 0 15px;
    border-left: 3px solid #db1222
}

.featured-group header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.featured-group header h2 {
    font-weight: 700;
    font-size: 1.5rem;
    color: #db1222;
    margin: 0
}

.featured-group header .btn-chevron {
    flex-shrink: 0
}

.featured-group .fg-lg-content h3 {
    font-weight: 600;
    font-size: 1.5rem
}

@media (max-width: 1200px) {
    .featured-group .fg-lg-content h3 {
        font-size: 1.3rem
    }
}

.featured-group .fg-lg-content p {
    margin: 0 0 10px
}

.featured-group .fg-lg-content p small {
    font-size: .8em
}

.featured-group .fg-lg-content span {
    font-size: .8em
}

.featured-group .fg-lg-content span img {
    max-width: 100px;
    height: auto
}

.featured-group .fg-lg-content a {
    color: var(--p-color)
}

.featured-group .fg-sm-content h4 {
    font-weight: 600;
    font-size: 1.05em;
    margin: 0
}

.featured-group .fg-sm-content .date-str {
    font-size: .7em;
    color: var(--p-color);
}

.featured-group .fg-sm-content .cate-str {
    font-size: .9em;
    font-weight: 600;
    color: var(--p-color);
}

.featured-group .fg-lg-thumbnail img, .featured-group .fg-sm-thumbnail img {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    max-width: 500px
}

.fg-sm-thumbnail {
    flex: 1;
    width: 35%;
}

.fg-sm-item .fg-sm-content {
    width: 65%;
}

.featured-group.fg-slider .carousel-item {
    transition: transform .6s ease-in-out
}

.featured-group.fg-slider .carousel-inner .fg-lg-thumbnail {
    margin-bottom: 10px
}

.featured-group.fg-slider .carousel-inner .fg-lg-content div {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.featured-group.fg-slider .carousel-inner .fg-lg-content div > span {
    font-size: .8em;
    display: flex;
    align-items: center;
    color: var(--p-color, #333)
}

.featured-group.fg-slider .carousel-inner .fg-lg-content div > span em {
    color: var(--p-color, #333);
    font-style: italic
}

.featured-group.fg-slider .carousel-inner .fg-lg-content div > span span {
    font-size: .8em;
    font-weight: 600;
    display: flex;
    align-items: center
}

.featured-group.fg-slider .carousel-inner .fg-lg-content div > span span img {
    max-width: 90px;
    max-height: 40px;
    display: block
}

.featured-group.fg-slider .fg-slider-nav {
    display: flex;
    gap: 10px;
    padding: 10px;
    margin-bottom: 2px;
    background-color: var(--ibkr-gray-xlt, #f5f5f5);
    transition: all .3s ease-in-out;
    border-radius: 4px;
    position: relative
}

.featured-group.fg-slider .fg-slider-nav:before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid var(--ibkr-gray-lt, #ddd);
    transition: all .3s ease-in-out;
    opacity: 0
}

@media (max-width: 1200px) {
    .featured-group.fg-slider .fg-slider-nav:before {
        display: none
    }
}

.featured-group.fg-slider .fg-slider-nav:hover {
    cursor: pointer;
    background-color: var(--ibkr-gray-lt, #ddd)
}

.featured-group.fg-slider .fg-slider-nav:focus-visible {
    outline: 2px solid #c00;
    outline-offset: 2px
}

.featured-group.fg-slider .fg-slider-nav.active:before {
    opacity: 1
}

.featured-group.fg-slider .fg-slider-nav .fg-sm-thumbnail {
    width: 50px;
    min-width: 50px;
    padding: 4px 0;
    overflow: hidden;
    display: flex;
    align-items: center
}

.featured-group.fg-slider .fg-slider-nav.active {
    background-color: var(--ibkr-gray-lt, #ddd)
}

.featured-group#featured_group_podcasts .fg-lg-content p {
    margin: 0
}

.featured-group#featured_group_podcasts .fg-lg-content p small {
    font-size: .6rem
}

.featured-group#featured_group_podcasts .fg-lg-content h4 {
    font-weight: 600;
    font-size: 1rem
}

@media (max-width: 1200px) {
    .featured-group#featured_group_podcasts .fg-lg-content h4 {
        font-size: 1.2rem
    }
}

.featured-group#featured_group_podcasts .fg-sm-content {
    padding: 15px 0;
    border-top: 1px solid var(--ibkr-gray-lt, #ddd);
    position: relative
}

.featured-group#featured_group_podcasts .fg-sm-content p {
    margin: 0
}

.fg-lg-content .cate-str {
    color: var(--p-color);
    font-size: .7rem;
    font-weight: 600;
}

.featured-group#featured_group_podcasts .fg-sm-content h4 {
    margin: 0
}

.fg-sm-item {
    display: flex;
    gap: 15px
}

.featured-group#featured_group_webinars .fg-sm-item .fg-sm-thumbnail {
    max-width: 100px
}


@media (max-width: 1199px) {
    .home section .col-xl-4 {
        margin-top: 20px
    }
}

.featured-sm > a {
    display: flex
}

.featured-sm > a .featured-sm-thumbnail {
    height: 84px;
    aspect-ratio: 1.7777777778;
    flex-grow: 0;
    flex-shrink: 0;
    line-height: 0;
    margin-right: 20px;
    transition: box-shadow .2s
}

.featured-sm > a .featured-sm-thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.featured-sm > a .featured-sm-body h5 {
    font-weight: 600;
    transition: color .2s
}

.featured-sm > a .featured-sm-body h6 {
    font-size: .6rem
}

.featured-sm > a:hover .btn-chevron:after {
    translate: 4px 0
}

.featured-sm > a:hover .featured-sm-thumbnail {
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, .35)
}

.featured-sm > a:hover h5 {
    color: var(--ibkr-gray-md)
}

.callout-ltblue {
    padding: 20px 10px;
    margin-bottom: 30px;
    background-color: var(--ibkr-blue-ltlt)
}

.list-article a {
    display: block;
    margin-bottom: 25px
}

.newsletter {
    background-color: #1b1b22
}

.carousel-item {
    height: 100%
}

.carousel-item iframe {
    object-fit: cover;
    height: 100%;
    width: 100%
}

.carousel-inner {
    overflow: hidden
}

.carousel-item {
    transition: transform .5s ease-in-out
}

.carousel-item iframe {
    aspect-ratio: .5625
}

.card {
    border-radius: 0;
    border: none;
    height: 100%;
    -webkit-user-drag: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.card > a {
    display: flex;
    flex-direction: column;
    height: 100%
}

.card .card-thumbnail {
    overflow: hidden;
    aspect-ratio: 1.7777777778;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.card .card-thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.card.card-featured {
    background-color: transparent
}

.card.card-featured h3 {
    transition: color .2s
}

.card.card-featured:hover .card-thumbnail {
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, .35)
}

.card.card-featured:hover .btn-chevron:after {
    translate: 4px 0
}

.card.card-featured:hover h3 {
    color: #717184
}

.max-line-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.line-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.max-line-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.max-line-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.page-size {
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}

.page-size a {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    float: left;
    background: transparent;
    border: solid 1px #ececec;
    color: #111;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-decoration: auto;
    /*border-radius: 99px;*/
    padding: 0 10px;
}

.page-size a.is-current {
    background: #d31818;
    border: solid 1px #d31818;
    color: #fff;
}

.page-size span {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    float: left;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    background: #d31818;
    border: solid 1px #d31818;
    color: #fff;
    /*border-radius: 99px;*/
}

.page-size a:hover, .page-size span:hover {
    background: #d31818;
    border-color: #d31818;
    color: #fff;
}

.page-size ul {
    display: flex;
    gap: 1.5rem;
    justify-content: start;
    align-items: center;
}

.page-size ul, .page-size li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.padding-0-10 {
    padding: 0 10px;
}

.article-info p, .article-info li {
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.article-info ul, .article-info li {
    list-style: disc;
}

.article-info ul {
    padding-left: 2rem;
}

.article-info table {
    width: 100%;
    font-size: 10px;
}

.article-info h1, .article-info h2, .article-info h3, .article-info h4, .article-info h5, .article-info h6 {
    font-weight: 700;
    margin: 10px 0;
    color: #000;
    line-height: 1.3;
}

.article-info h1 {
    font-size: 30px;
}

.article-info h2 {
    font-size: 28px;
}

.article-info h3 {
    font-size: 25px;
}

.article-info h4 {
    font-size: 22px;
}

.article-info h5, .article-info h6 {
    font-size: 19px;
}

.article-info a {
    color: #d31818;
    text-decoration: underline;
}

.article-info img {
    max-width: 450px;
    width: 100%;
}

.page-content img, .article-info img {
    max-width: 500px;
    width: 100%;
}

.to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: #d31818;
    font-size: 2rem;
    color: #fff;
    z-index: 50;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    border: none;
}

.to-top img {
    font-size: 1rem;
    height: 1rem;
    width: 1rem;
}

.to-top.show {
    opacity: 1;
    visibility: visible
}

.to-top:hover {
    opacity: .9;
    background: #5bf54f;
}

.logo-img {
    max-width: 180px;
    height: 40px;
}

.article-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.position-relative {
    position: relative;
}

.ft-banner {
    position: sticky;
    top: 9rem;
    max-height: 720px;
}


.ft-banner-container {
    padding: 0 20px;
    color: #fff
}

.ft-banner .contract-container {
    background: #15181e;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 0;
    display: flex;
    gap: .5rem;
    align-items: center;
}

.ft-banner-container {
    max-width: 600px;
    margin: 0 auto
}

.ft-banner .contract-icon img {
    width: 100%;
    aspect-ratio: 16/9;
}

.contract-icon {
    flex: 1;
    max-width: 35%;
}

.contract-info {
    flex: 1;
    max-width: 65%;
}

.ft-banner .forecast-headline {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 20px 0;
    text-align: center;
    color: #fff
}

.ft-banner .btn-primary {
    background: #0070c0;
    color: #fff;
    padding: .65rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    margin: 0 auto;
    display: block;
    width: fit-content
}

.ft-banner .contract-title {
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 400;
    margin: 0 0 .5rem;
}

.ft-banner .contract-volume {
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
    white-space: nowrap;
}

#page-title .sub-title {
    font-size: 1rem;
}

@media screen and (max-width: 768px) {

    #page-title .title-text h1 {
        margin: 10px 0;
        font-size: 1.5rem;
    }
}

.newsletter h3 {
    color: #fff;
}