@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

.formatted-text {
    & :root {
        --c-placeholder-dark: rgba(0, 11, 29, 0.4);
        --c-text-dark: #000B1D;
        --c-text-default: #262F3F;
        --c-text-moderated: rgba(38, 47, 63, 0.7);
        --c-text-muted: rgba(38, 47, 63, 0.5);
        --c-text-success: #00B4A8;
        --c-text-error: #BF3D66;
        --c-text-light: #ffffff;
        --c-text-light-moderated: rgba(255, 255, 255, 0.8);
        --c-text-light-muted: rgba(255, 255, 255, 0.5);
        --c-heading-default: #000B1D;
        --c-heading-moderated: rgba(0, 11, 29, 0.7);
        --c-heading-muted: rgba(0, 11, 29, 0.5);
        --c-heading-light: #ffffff;
        --c-heading-light-moderated: rgba(255, 255, 255, 0.8);
        --c-link-default-base: #0044C3;
        --c-link-default-hover: #BF3D66;
        --c-link-dark-base: #000B1D;
        --c-link-dark-hover: rgba(0, 11, 29, 0.6);
        --c-link-moderated-base: rgba(0, 11, 29, 0.7);
        --c-link-moderated-hover: #000B1D;
        --c-link-light-base: #ffffff;
        --c-link-light-hover: rgba(255, 255, 255, 0.6);
        --c-link-light-moderated-base: rgba(255, 255, 255, 0.7);
        --c-link-light-moderated-hover: #ffffff;
        --c-pre-background: #F5F5F6;
        --c-pre-text: #262F3F;
        --c-pre-border: transparent;
        --c-table-cell-border: rgba(217, 219, 221, 0.5);
        --c-form-label-text: #262F3F;
        --c-inline-var-text: rgba(0, 11, 29, 0.85);
        --c-inline-kbd-border: rgba(0, 11, 29, 0.15);
        --c-inline-kbd-text: rgba(0, 11, 29, 0.85);
        --c-inline-code-background: #F5F5F6;
        --c-inline-code-text: rgba(0, 11, 29, 0.85);
        --c-button-default-base-background: #ffffff;
        --c-button-default-base-border: #D9DBDD;
        --c-button-default-base-text: #262F3F;
        --c-button-default-hover-background: #F5F5F6;
        --c-button-default-hover-border: #D9DBDD;
        --c-button-default-hover-text: #000B1D;
        --c-button-default-disabled-background: #ffffff;
        --c-button-default-disabled-border: #D9DBDD;
        --c-button-default-disabled-text: rgba(0, 11, 29, 0.85);
        --c-button-primary-base-background: #0058FB;
        --c-button-primary-base-border: transparent;
        --c-button-primary-base-text: #EDF3FF;
        --c-button-primary-hover-background: #0044C3;
        --c-button-primary-hover-border: transparent;
        --c-button-primary-hover-text: #EDF3FF;
        --c-button-primary-disabled-background: #000B1D;
        --c-button-primary-disabled-border: transparent;
        --c-button-primary-disabled-text: rgba(237, 243, 255, 0.75);
        --c-button-secondary-base-background: #000B1D;
        --c-button-secondary-base-border: transparent;
        --c-button-secondary-base-text: #F5F5F6;
        --c-button-secondary-hover-background: #262F3F;
        --c-button-secondary-hover-border: transparent;
        --c-button-secondary-hover-text: #F5F5F6;
        --c-button-secondary-disabled-background: #000B1D;
        --c-button-secondary-disabled-border: transparent;
        --c-button-secondary-disabled-text: rgba(245, 245, 246, 0.75);
        --c-input-default-base-text: #262F3F;
        --c-input-default-base-border: #D9DBDD;
        --c-input-default-base-background: #ffffff;
        --c-input-default-focus-border: rgba(0, 88, 251, 0.5);
        --c-input-default-focus-shadow: rgba(0, 88, 251, 0.3);
        --c-input-error-base-text: #BF3D66;
        --c-input-error-base-border: rgba(255, 79, 127, 0.5);
        --c-input-error-base-shadow: rgba(255, 79, 127, 0.3);
        --c-input-error-focus-border: #FF4F7F;
        --c-hint-default: rgba(38, 47, 63, 0.55);
        --c-hint-success: #00B4A8;
        --c-hint-error: #BF3D66;
        --c-hint-required: #BF3D66;
        --c-line-default: rgba(217, 219, 221, 0.6);
        --c-shadow-neutral-100-1: rgba(0, 11, 29, 0.15);
        --c-shadow-neutral-100-2: rgba(0, 11, 29, 0.06);
        --c-shadow-neutral-200-1: rgba(0, 11, 29, 0.12);
        --c-shadow-neutral-200-2: rgba(0, 11, 29, 0.06);
        --c-shadow-neutral-300: rgba(0, 11, 29, 0.2);
        --c-background-light: #ffffff;
        --c-background-dark: #000B1D
    }

    & .container {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    & h2 {
        line-height: 1.5;
        font-weight: bold;
        margin-bottom: 32px;
        font-size: 40px;
    }

    & h3 {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    & h4 {
        font-size: 14px;
        line-height: 1.5
    }

    & p {
        font-size: 16px;
        line-height: 32px;
        font-weight: normal;
        font-family: "Rubik", sans-serif;
    }

    & hr {
        margin-top: 32px;
        margin-bottom: 64px;
        border-top: 1px solid #eee;
    }
    & p {
        margin-bottom: 30px;
    }

    & figure {
        margin-bottom: 30px;
    }

    & a {
        text-decoration: underline;
    }

    & ol, & ul {
        margin-left: 20px;
        list-style-type: disc;
    }

    & ol, & ul, & li {
        list-style-type: disc;
    }

    & li {
        line-height: 24px;
        margin-bottom: 15px;
    }

    & nav ol, & nav ul {
        margin-left: 0;
        list-style: none
    }

    & dt {
        font-weight: 700
    }

    & dd + dt {
        margin-top: .25em
    }

    & fieldset, & iframe, & img {
        border: 0;
    }

    & audio, & canvas, & iframe, & progress, & video {
        display: block;
        vertical-align: baseline;
    }
    & video {
        width: 100%;
    }

    & .embed-responsive {
        position: relative;
        margin: 0;
        padding: 25px 0 56.25%;
        height: 0;
    }

    & .embed-responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    & figure > div, & figure > iframe, & figure > img, & figure > pre {
        vertical-align: middle;
        border-radius: 10px;
    }

    & figure > iframe {
        margin-bottom: 32px;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}
.page-content .btn{
    margin-bottom: 24px;
}

.grid {
    display: grid;
    grid-template-columns:repeat(12, 1fr);
    grid-column-gap: 24px;
}

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

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

.grid-gapless + .grid {
    margin-top: 0
}

.grid-auto {
    grid-template-columns:repeat(auto-fit, minmax(0, 1fr))
}

.grid-1 {
    grid-template-columns:repeat(1, 1fr)
}

.grid-2 {
    grid-template-columns:repeat(2, 1fr)
}

.grid-3 {
    grid-template-columns:repeat(3, 1fr)
}

.grid-4 {
    grid-template-columns:repeat(4, 1fr)
}

.grid-5 {
    grid-template-columns:repeat(5, 1fr)
}

.grid-6 {
    grid-template-columns:repeat(6, 1fr)
}

.grid-7 {
    grid-template-columns:repeat(7, 1fr)
}

.grid-8 {
    grid-template-columns:repeat(8, 1fr)
}

.grid-9 {
    grid-template-columns:repeat(9, 1fr)
}

.grid-10 {
    grid-template-columns:repeat(10, 1fr)
}

.grid-11 {
    grid-template-columns:repeat(11, 1fr)
}

.grid-12 {
    grid-template-columns:repeat(12, 1fr)
}

.column-1 {
    grid-column-end: span 1
}

.column-2 {
    grid-column-end: span 2
}

.column-3 {
    grid-column-end: span 3
}

.column-4 {
    grid-column-end: span 4
}

.column-5 {
    grid-column-end: span 5
}

.column-6 {
    grid-column-end: span 6
}

.column-7 {
    grid-column-end: span 7
}

.column-8 {
    grid-column-end: span 8
}

.column-9 {
    grid-column-end: span 9
}

.column-10 {
    grid-column-end: span 10
}

.column-11 {
    grid-column-end: span 11
}

.column-12 {
    grid-column-end: span 12
}

@media only screen and (max-width: 1252px) {
    .formatted-text {
        & h2 {
            margin-bottom: 40px;
        }
    }
}
@media only screen and (max-width: 1023px) {
    .formatted-text {
        & h3 {
            font-size: 20px;
        }
    }

    .column {
        grid-column-end: span 1
    }

    .column:empty {
        display: none
    }

    .grid-reversed {
        grid-auto-flow: dense;
    }
    .grid-reversed .column:last-child {
        grid-row: 1;
    }

    .grid-1-md {
        grid-template-columns:repeat(1, 1fr)
    }

    .grid-2-md {
        grid-template-columns:repeat(2, 1fr)
    }

    .grid-3-md {
        grid-template-columns:repeat(3, 1fr)
    }

    .grid-4-md {
        grid-template-columns:repeat(4, 1fr)
    }

    .grid-5-md {
        grid-template-columns:repeat(5, 1fr)
    }

    .grid-6-md {
        grid-template-columns:repeat(6, 1fr)
    }

    .grid-7-md {
        grid-template-columns:repeat(7, 1fr)
    }

    .grid-8-md {
        grid-template-columns:repeat(8, 1fr)
    }

    .grid-9-md {
        grid-template-columns:repeat(9, 1fr)
    }

    .grid-10-md {
        grid-template-columns:repeat(10, 1fr)
    }

    .grid-11-md {
        grid-template-columns:repeat(11, 1fr)
    }

    .grid-12-md {
        grid-template-columns:repeat(12, 1fr)
    }

    .grid, .grid-auto {
        grid-template-columns:repeat(1, 1fr)
    }

}

@media only screen and (max-width: 767px) {
    .formatted-text {
        & h2 {
            font-size: 28px;
            margin-bottom: 32px;
        }

        & h3 {
            font-size: 20px;
        }

        & p {
            margin-bottom: 30px;
        }

        & figure {
            margin-bottom: 30px;
        }
        & hr {
            margin-top: 0;
            margin-bottom: 32px;
            border-top: 1px solid #eee;
        }
    }

    .grid-1-sm {
        grid-template-columns:repeat(1, 1fr)
    }

    .grid-2-sm {
        grid-template-columns:repeat(2, 1fr)
    }

    .grid-3-sm {
        grid-template-columns:repeat(3, 1fr)
    }

    .grid-4-sm {
        grid-template-columns:repeat(4, 1fr)
    }

    .grid-5-sm {
        grid-template-columns:repeat(5, 1fr)
    }

    .grid-6-sm {
        grid-template-columns:repeat(6, 1fr)
    }

    .grid-7-sm {
        grid-template-columns:repeat(7, 1fr)
    }

    .grid-8-sm {
        grid-template-columns:repeat(8, 1fr)
    }

    .grid-9-sm {
        grid-template-columns:repeat(9, 1fr)
    }

    .grid-10-sm {
        grid-template-columns:repeat(10, 1fr)
    }

    .grid-11-sm {
        grid-template-columns:repeat(11, 1fr)
    }

    .grid-12-sm {
        grid-template-columns:repeat(12, 1fr)
    }
}