:root {
    --brand-font-family: 'Obviously', -apple-system, BlinkMacSystemFont, 'Arial Narrow', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --brand-primary: 0, 99, 170; /* #0063AA */
    --brand-primary--light: 11, 29, 177; /* #0B1DB1 */
    --brand-primary--dark: 3, 70, 121; /* #034679 */
    --brand-secondary: 0,99,172; /* #0063AC */
    --brand-secondary--light: 255, 89, 156; /* #FF599C */
    --brand-secondary--dark: 198, 0, 79; /* #C6004F */
    --brand-tertiary: 254, 197, 59; /* #FEC53B */
    --brand-grey: 103, 103, 103; /* #676767 */

    --brand-plan--one: 237, 48, 36; /* #5E0620 */
    --brand-plan--two: 0, 99, 170; /* #0063AA */
    --brand-plan--three: 254, 197, 59; /* #FEC53B */
    --brand-plan--four: 3, 70, 121; /* #034679 */

    --brand-radius: 100px;
    --brand-spacing: -0.035em;
    --brand-transition: .125s ease-out;
    --size-x1: 0.688rem; /* 11px */
    --size-x2: 0.875rem; /* 14px */
    --size-x3: 0.938rem; /* 15px */
    --size-x4: 1.000rem; /* 16px */
    --size-x5: 1.250rem; /* 20px */
    --size-x6: 1.500rem; /* 24px */
    --size-x7: 2.062rem; /* 33px */
    --size-x8: 2.500rem; /* 40px */
    --size-x9: 3.000rem; /* 48px */
}

/* GENERALS */
@font-face {
    font-family: "Obviously";
    src: url('../fontes/Obviously/Obviously-Regular.otf');
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "Obviously";
    src: url('../fontes/Obviously/Obviously-Semibold.otf');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "Obviously";
    src: url('../fontes/Obviously/Obviously-Bold.otf');
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: "Obviously";
    src: url('../fontes/Obviously/Obviously-Black.otf');
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: "Obviously";
    src: url('../fontes/Obviously/Obviously-Light.otf');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "Obviously Narrow";
    src: url('../fontes/obviouslyNarrow/ObviouslyNarrow-Light.otf');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "Obviously Narrow";
    src: url('../fontes/obviouslyNarrow/ObviouslyNarrow-Regular.otf');
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "Obviously Narrow";
    src: url('../fontes/obviouslyNarrow/ObviouslyNarrow-SemiBold.otf');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "Obviously Narrow";
    src: url('../fontes/obviouslyNarrow/ObviouslyNarrow-Bold.otf');
    font-weight: 800;
    font-style: normal
}

a {
    text-decoration: none;
    color: #0069d9;
}

*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    font-family: var(--brand-font-family) !important;
    scroll-behavior: smooth;
    color: rgb(var(--brand-grey));
    font-weight: 300;
    background-color: #F4F5F8;
    font-size: 15px;
}

.btn-reset {
    all: unset;
    text-align: inherit;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .btn-reset:hover,
    .btn-reset:focus,
    .btn-reset:active {
        background: none;
        box-shadow: none;
        outline: none;
        text-decoration: none;
    }

    .btn-reset::-moz-focus-inner {
        border: 0;
    }

    .btn-reset::before,
    .btn-reset::after {
        content: none !important;
    }

@media (max-width: 768px) {
    body {
        padding-top: 5.5rem;
    }
}

.header h1 {
    position: absolute;
    text-indent: -99999px;
}

.modal-body {
    padding: 1rem 2rem !important;
    max-height: 500px;
    overflow: auto;
}

.btn-warning {
    background-color: #da251d !important;
    color: white !important;
    border-color: transparent !important;
    border-radius: 50px !important;
}

.alert-warning {
    padding: 1.4rem 2.25rem;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    display: block !important;
}

@media (min-width: 576px) {
    .modal-dialog {
        margin: 3.75rem auto !important;
        max-width: 800px !important;
    }
}


/* HEADER */

.restartAnimation {
    animation: hideLogo .1s ease-in forwards !important;
}

@keyframes appearLogo {
    0% {
        fill: transparent
    }

    80% {
        fill: #fff;
    }

    100% {
        fill: rgb(var(--brand-secondary))
    }
}

@keyframes hideLogo {
    from {
        fill: rgb(var(--brand-secondary))
    }

    to {
        fill: transparent
    }
}


@keyframes growLogo {
    0% {
        fill: transparent;
        transform: scale(.5);
        transform-origin: center;
    }

    100% {
        fill: rgb(255,0,102);
        transform: scale(1);
        transform-origin: center;
    }
}

.logo-frb-1 {
    animation: growLogo 0.3s cubic-bezier(0.47,0,0.745,0.715) 1.35s both;
    transform-origin: center;
}

.logo-frb-2 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.225s both
}

.logo-frb-3 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.3s both
}

.logo-frb-4 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.375s both
}

.logo-frb-5 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.45s both
}

.logo-frb-6 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.525s both
}

.logo-frb-7 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.6s both
}

.logo-frb-8 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.675s both
}

.logo-frb-9 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.75s both
}

.logo-frb-10 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.825s both
}

.logo-frb-11 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.9s both
}

.logo-frb-12 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 0.975s both
}

.logo-frb-13 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 1.05s both
}

.logo-frb-14 {
    animation: appearLogo 0.05s cubic-bezier(0.47,0,0.745,0.715) 1.125s both
}

.logo-frb-15 {
    animation: appearLogo 0.5s cubic-bezier(0.47,0,0.745,0.715) 1.2s both
}

.header .nav-item {
    margin: 0 0.5rem;
}

@media (max-width: 768px) {
    .header .header__nav a {
        font-size: var(--size-x5) !important;
    }
}

.header.homepage {
    background-image: url('https://d15e00djwv994.cloudfront.net/Portal/Banner/bg-banner.jpg');
    background-size: cover;
    min-height: 100vh;
    align-items: center;
    padding-top: 2rem;
}

.header__brand {
    position: absolute;
    left: 0;
    top: .5rem;
}

.header .header__content {
    background-color: #da251d;
}

.header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem 0;
}

.header .header__nav {
    background-color: #b81e16;
}

    .header .header__nav a {
        color: #fff;
        display: block;
        font-size: var(--size-x3);
        padding: .75rem 0;
        font-weight: 500;
    }

        .header .header__nav a:hover {
            color: #FEC53B;
        }

    .header .header__nav ul {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-x6);
    }

    .header .header__nav li {
        display: block;
    }

.header__social {
    display: flex;
    text-align: center;
    align-items: center;
    gap: var(--size-x1);
    margin-bottom: 0;
}

    .header__social li {
        display: block;
    }

    .header__social a {
        background: #fff;
        color: #034679;
        font-size: 1.25rem;
        width: 1.8125rem;
        height: 1.8125rem;
        border-radius: 5rem;
        display: block;
        transition: all var(--brand-transition);
    }

        .header__social a:hover {
            background-color: #FEC53B;
            color: #fff;
        }


.whatsapp-button i {
    font-size: 1.333rem;
    vertical-align: -2px;
}

.whatsapp-button a {
    padding: 0 .75rem;
    width: auto;
    font-size: var(--size-x4)
}


    /* MOBILE */

    @media screen and (max-width: 768px) {
        .header__logo {
            max-height: 130px;
        }
        .header {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            box-shadow: 0 4px 12px rgba(var(--brand-primary), 0.2);
            top: 0;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            height: 100vh;
            max-height: 7.2rem;
            overflow: hidden;
            transition: max-height var(--brand-transition);
        }

        .nav__opened {
            max-height: 100% !important;
        }

        .header__brand .menu-mobile {
            display: block !important;
            cursor: pointer;
        }

            .header__brand .menu-mobile i {
                display: block;
                color: white;
                padding: .75rem 0 0 1rem;
                font-size: var(--size-x5);
            }

        .header__brand {
            position: static;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .75rem .75rem;
        }

            .header__brand svg {
                max-height: 4rem;
                width: auto;
            }

        .header__actions {
            flex-direction: column;
        }

        .buttons__header {
            display: flex;
            flex-direction:column;
            gap: 0.8rem;
            align-items: center;
            align-content: center;
            margin-left: 0 !important;
            padding: 10px 0;
        }

        .header__nav {
            flex: 1;
        }

            .header__nav ul {
                padding-top: 1rem;
                flex-direction: column;
                align-items: center;
                gap: 0.125rem !important;
            }

        .restartAnimation {
            animation: 0 !important;
        }
    }

    /* FOOTER */
    .footer {
        padding-top: 4rem;
        background: url(https://d2edseb6111m90.cloudfront.net/Portal/Home/Footer/bg-footer.png);
        color: #fff;
    }

        .footer a {
            color: #fff;
        }

    .footer__contact i {
        font-size: var(--size-x5);
        vertical-align: middle;
        margin-right: var(--size-x2);
    }

    .footer__contact p {
        display: flex;
        margin-bottom: var(--size-x1);
    }

    .footer .footer__menus {
        display: flex;
        gap:0.8rem;
        justify-content: space-evenly;
        flex-wrap: wrap;
        line-height: 130%;
    }

    .footer__menus > div {
        flex: 1;
    }

    .footer__title {
        margin-bottom: var(--size-x5);
    }

        .footer__title span {
            font-size: var(--size-x4);
            color: rgb(var( --brand-tertiary));
            font-weight: 400;
        }

        .footer__title h2 {
            font-weight: 700;
            font-size: var(--size-x5);
        }

    .footer__social li {
        display: inline-block;
        font-size: 1.625rem;
        margin-right: 1rem;
        margin-top: 1.25rem;
    }

    .footer li {
        transition: opacity var(--brand-transition);
        line-height: 1rem;
        margin-bottom: 1rem;
    }

        .footer li a {
            color: #fff;
            opacity: .75;
        }

    .footer ul:hover li {
        opacity: .4;
    }

        .footer ul:hover li:hover,
        .footer li a:hover {
            color: #fff;
            opacity: 1;
        }

    .footer__details {
        text-align: center;
        padding: var(--size-x4);
        border-top: 1px solid rgba(217,217,217,.2);
    }

    @media (max-width: 768px) {

        .footer__logo {
            max-height: 160px;
            margin-bottom: 3rem;
        }

        .footer__menus {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .footer__contact > p {
            justify-content: center;
        }
    }


    /* REPLACEMENTS */
    .bg-primary {
        background-color: #7E7E7E !important
    }

    a.bg-primary:focus,
    a.bg-primary:hover,
    button.bg-primary:focus,
    button.bg-primary:hover {
        background-color: #505050 !important
    }

    .border-primary {
        border-color: #7E7E7E !important
    }

    .text-primary {
        color: #7E7E7E !important
    }

    a.text-primary:focus,
    a.text-primary:hover {
        color: #0056b3 !important
    }

    .alert-info {
        color: #616161;
        background-color: #e8e8e8;
        border-color: #e3e3e3;
    }

    .text-info {
        color: #6c6c6c;
    }

    .btn-link {
        color: #686868;
        font-weight: 500;
    }

        .btn-link:hover {
            color: #333;
        }

    .btn:active, .btn:focus, .btn:focus-visible {
        box-shadow: 0 0 0 3px rgba(0,0,0,.1);
    }

    .rounded {
        border-radius: 0.25rem !important;
    }

    .modal-open .modal {
        background: rgba(0,0,0,.5) !important;
    }

    .modal.fade .modal-dialog {
        transform: translate(0,0) !important;
    }

    @media (max-width: 768px) {
        .modal.fade .modal-dialog {
            transform: translate(0,5.33rem) !important;
        }
    }

    .h1, .h2, .h3, .h4, .h5, .h6,
    h1, h2, h3, h4, h5, h6 {
        font-weight: 500;
    }

    .table-condensed {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: table !important;
    }

    @media (max-width: 768px) {
        .table-condensed {
            display: block !important;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    }

    .navbar-dark .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-nav .nav-link:hover {
        color: rgba(255, 255, 255, 1);
    }

    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.75);
        font-weight: 500;
    }

    .op-0 {
        opacity: 0 !important;
    }

    .op-1 {
        opacity: 0.1 !important;
    }

    .op-2 {
        opacity: 0.2 !important;
    }

    .op-3 {
        opacity: 0.3 !important;
    }

    .op-4 {
        opacity: 0.4 !important;
    }

    .op-5 {
        opacity: 0.5 !important;
    }

    .op-6 {
        opacity: 0.6 !important;
    }

    .op-7 {
        opacity: 0.7 !important;
    }

    .op-8 {
        opacity: 0.8 !important;
    }

    .op-9 {
        opacity: 0.9 !important;
    }

    .op-10 {
        opacity: 1 !important;
    }

    .pt-6 {
        padding-top: 4.5em;
    }

    .pb-6 {
        padding-bottom: 4.5rem;
    }

    .py-6 {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .my-6 {
        margin-top: 4.5rem;
        margin-bottom: 4.5rem;
    }

    /* GENERALS */
    a {
        cursor: pointer;
        transition: all var(--brand-transition);
    }

        a:hover {
            text-decoration: none;
        }

    ::selection {
        color: #fff;
        background: rgb(var(--brand-tertiary));
    }

    .tooltip {
        pointer-events: none;
    }

    .collapse.in {
        display: block !important;
    }

    .box-header[data-toggle="collapse"]::before {
        content: "\f078";
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        right: 2.25rem;
        line-height: 1.625rem;
        font-weight: 900;
        font-size: 1rem;
    }

    [data-toggle="dropdown"]::after {
        content: "\f078";
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        right: .5rem;
        line-height: 1.6rem;
        font-weight: 900;
        font-size: .75rem;
    }

    .fade.in {
        opacity: 1;
        background: unset;
    }

    .progress {
        background-color: #fff !important;
        border: 1px solid rgba(0,0,0, .13) !important;
    }

    .open .dropdown-menu {
        display: block !important;
    }

    .sticky-content {
        position: sticky;
        top: .5rem;
        padding-bottom: .5rem;
    }

    .fa-spinner {
        animation: spin .8s forwards infinite;
    }

    .blockUI.blockOverlay {
        background-color: #f4f5f8 !important;
        opacity: 0.75 !important;
    }

    .blockUI.blockMsg.blockElement {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        top: 3rem !important;
        left: 0px !important;
        right: 0px !important;
    }

        .blockUI.blockMsg.blockElement::after {
            content: "\f1ce";
            display: block;
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            font-size: 2.5rem;
            animation: spin .8s forwards infinite;
        }

        .blockUI.blockMsg.blockElement #screenloadertext {
            display: none;
        }

    .blockPage {
        background: none !important;
        border: none !important;
    }

        .blockPage path {
            transform-origin: center;
            fill: var(--brand-highlight) !important;
        }

    #html_element > div {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    @media (max-width: 992px) {
        .toggle-mobile {
            display: none !important;
        }

        #btnOpenMenu, #btnCloseMenu {
            font-size: 1.5rem;
            padding: .5rem;
            cursor: pointer;
        }

        html.menuOpened .toggle-mobile {
            display: block !important;
        }

        html.menuOpened .header__contacts.toggle-mobile {
            display: block !important;
            position: fixed;
            z-index: 999999;
            bottom: 0;
            padding: 1rem;
            left: 0;
            right: 0;
        }

        html.menuOpened .toggle-mobile .text-right {
            text-align: center !important;
            display: flex;
            flex-direction: column;
            font-size: 1rem;
        }

            html.menuOpened .toggle-mobile .text-right span + span {
                font-size: 1.3rem;
                display: flex !important;
                flex-wrap: wrap;
                gap: .5rem;
                margin: 0 auto;
            }

            html.menuOpened .toggle-mobile .text-right span + span, html.menuOpened .toggle-mobile .text-right span a {
                margin-top: .5em;
                display: inline-block;
            }

        html.menuOpened .navbar-collapse.toggle-mobile {
            position: fixed;
            height: 100vh;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 999998;
            background-color: rgba(0,0,0,.96);
            animation: appear .15s ease-in-out running both;
        }

            html.menuOpened .navbar-collapse.toggle-mobile .navbar-nav {
                display: grid;
                place-content: center;
                height: 100%;
                margin-top: -3rem;
            }


        html.menuOpened #btnCloseMenu {
            display: block !important;
            position: fixed;
            top: 1.5rem;
            right: 1.5rem;
            z-index: 9999999;
        }

        html:not(.menuOpened) #btnOpenMenu {
            display: block !important;
        }

        html:not(.menuOpened) #btnCloseMenu {
            display: none !important;
        }
    }

    /*  BACKGROUNDS */
    .bg-brand--primary {
        background: rgb(var(--brand-primary));
    }

    .bg-brand--secondary {
        background: rgb(var(--brand-secondary));
    }

    .bg-grey--brand {
        background: rgb(var(--brand-grey--light));
    }

    .bg-plan--one {
        background-color: rgb(var(--brand-plan--one));
    }

    .bg-plan--two {
        background-color: rgb(var(--brand-plan--two));
    }

    .bg-plan--three {
        background-color: rgb(var(--brand-plan--three));
    }

    .bg-plan--four {
        background-color: rgb(var(--brand-plan--four));
    }

    /* COLORS */
    .text-brand--primary {
        color: rgb(var(--brand-primary));
    }

    .text-brand--secondary {
        color: rgb(var(--brand-secondary));
    }

    .text-brand--tertiary {
        color: #FFC300;
        font-weight: 700;
    }

    .text-brand--grey {
        color: rgb(var(--brand-grey));
    }

    .text-plan--one {
        color: rgb(var(--brand-plan--one));
    }

    .text-plan--two {
        color: rgb(var(--brand-plan--two));
    }

    .text-plan--three {
        color: rgb(var(--brand-plan--three));
    }

    .text-plan--four {
        color: rgb(var(--brand-plan--four));
    }

    /* BORDERS */

    /* TEXT */
    .brand-title {
        margin-bottom: 3.625rem;
    }

        .brand-title h2 {
            text-transform: uppercase;
            font-size: var(--size-x7);
            font-weight: 800;
            color: rgb(var(--brand-secondary)) !important;
            padding-left: 15px;
            padding-top: 5px;
            border-left: 10px solid rgb(var(--brand-secondary));
        }

    #beneficios .brand-title h2 {
        text-transform: uppercase;
        font-size: var(--size-x7);
        font-weight: 800;
        color: #fff;
        padding-left: 15px;
        padding-top: 5px;
        border-left: 10px solid #FFC300;
    }

    .brand-title p {
        margin-bottom: 0;
        font-size: var(--size-x4);
        color: rgb(var(--brand-secondary));
        padding-left: 25px;
    }

    #beneficios .brand-title p {
        margin-bottom: 0;
        font-size: var(--size-x4);
        color: #FFC300;
        padding-left: 25px;
    }

    .brand-title hr {
        border-width: 2px;
        margin: 2px 0 0;
        border-color: rgb(var(--brand-secondary));
        width: 3.5rem;
    }

    #beneficios .brand-title hr {
        border-width: 2px;
        margin: 2px 0 0;
        border-color: rgb(var(--brand-tertiary));
        width: 3.5rem;
    }

    .btn-outline-secondary:hover {
        background: #0069d9 !important;
        border-color: #0069d9 !important;
        color: #fff !important;
    }

@media (max-width: 768px) {
    .btn-resgate-senha {
        width: 80vw;
        margin-top: 20px;
    }

    .btn-header {
        height: 60px !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: large !important;
        width: 80vw;
    }

        .btn-header > i {
            margin-bottom: 5px !important;
        }

    .brand-title {
        margin-bottom: 2rem;
        flex-direction: column;
        gap: 25px;
    }

        .brand-title h2 {
            margin-left: 0;
            font-size: var(--size-x6) !important;            
        }

        .brand-title hr {
            margin: .6125rem 0;
        }

        .brand-title p {
            margin-left: 0;
            font-size: var(--size-x2) !important;
            padding-left: 0;
        }

    .benefits__description {
        font-size: var(--size-x2) !important;
    }

    #beneficios .benefits__grid h2 {
        font-size: var(--size-x4) !important;
    }

    #beneficios .benefits__grid li {
        font-size: var(--size-x2) !important;
        font-weight: 400 !important;
    }

    .benefits__grid ul {
        margin-bottom: 3rem !important;
    }

    .others__wrapper span {
        font-size: var(--size-x4) !important;
    }
}

    span strong {
        font-weight: 500;
    }

    .text-lh-none {
        line-height: 1;
    }

    p.text-hover:hover,
    span.text-hover:hover,
    .text-hover p:hover,
    .text-hover span:hover,
    .link-hover a:hover {
        opacity: 1 !important;
    }

    p.text-hover,
    span.text-hover,
    .text-hover p,
    .text-hover span,
    .link-hover a {
        opacity: 0.75;
    }

    .font-weight-medium {
        font-weight: 500;
    }

    .text-x1 { /* 11px */
        font-size: var(--size-x1) !important;
    }

    .text-x2 { /* 13px */
        font-size: var(--size-x2) !important;
    }

    .text-x3 { /* 16px */
        font-size: var(--size-x3) !important;
    }

    .text-x4 { /* 19px */
        font-size: var(--size-x4) !important;
    }

    .text-x5 { /* 23px */
        font-size: var(--size-x5) !important;
    }

    .text-x6 { /* 28px */
        font-size: var(--size-x6) !important;
    }

    .text-x7 { /* 33px */
        font-size: var(--size-x7) !important;
    }

    .text-x8 { /* 40px */
        font-size: var(--size-x8) !important;
    }

    .text-x9 { /* 48px */
        font-size: var(--size-x9) !important;
    }

    /* BUTTONS */
    .btn {
        border-radius: 50px !important;
        padding: .5rem 1.25rem 0.4rem;
        font-size: var(--size-x3);
        font-weight: 700;
    }

    .btn-primary {
        padding: .5rem 1.25rem 0.4rem;
        background: #0069d9;
        display: inline-block;
        border-radius: var(--brand-radius) !important;
        color: #fff;
        border: 1px solid rgb(var(--brand-secondary)) !important;
    }

    .btn-default {
        border-color: rgb(var(--brand-secondary)) !important;
        background: none;
        color: rgb(var(--brand-secondary)) !important;
        border-radius: var(--brand-radius) !important;
    }

    .btn-primary:hover {
        border-color: #15347d !important;
        background: #15347d;
    }

    .btn-primary:active, .btn-primary:focus {
        background: #ED3024 !important;
        border-color: #ED3024 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        background-color: rgb(var(--brand-secondary));
    }

    .btn-outline-secondary {
        border-color: #0069d9;
        background: none;
        color: #0069d9;
        border-radius: var(--brand-radius) !important;
    }

    .btn-outline-secondary-header {
        border-color: #fff;
        background: none;
        color: #fff;
        border-radius: var(--brand-radius) !important;
    }

    .btn-outline-secondary-header:hover {
        border-color: #0069d9;
        background: #0069d9;
        color: #fff;
        border-radius: var(--brand-radius) !important;
    }

    .btn-grey--primary {
        background: rgb(var(--brand-grey), .2);
        color: rgb(var(--brand-grey));
        font-weight: 500;
        padding: .75rem 1.125rem 0.65rem;
        background-color: rgba(var(--brand-primary--dark), .1);
        border-bottom: 2px solid rgba(var(--brand-primary--dark), .2);
        margin-bottom: .5rem;
        transition: all var(--brand-transition);
        border-radius: 30px !important;
    }

        .active > .btn-grey--primary, .btn-grey--primary.active, .btn-grey--primary:hover {
            background: #0069d9;
            color: #fff;
            border-bottom-color: rgba(var(--brand-primary--dark));
            box-shadow: none;
            border-radius:30px !important;
        }

    /* GRIDS */
    .grid-columns--two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 1%;
        grid-row-gap: .75rem;
        place-content: flex-start;
    }

    .grid-columns--three {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1%;
        grid-row-gap: .75rem;
        place-content: flex-start;
    }

    .inline-boxes {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        grid-gap: 1rem;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

        .inline-boxes > div {
            flex: 1 0 90%;
        }

    @media (max-width: 768px) {
        .grid-columns--three, .grid-columns--two {
            grid-template-columns: 1fr;
        }

        .content-mobile {
            margin-top: 2rem;
            padding: 2rem;
        }

            .content-mobile > div > h1 > small {
                font-size: 1.5rem;
                line-height: 0;
            }

        .inline-grid {
            display: flex !important;
            margin-left: -15px !important;
            margin-right: -15px !important;
            padding-right: 15px !important;
            padding-left: 15px !important;
            overflow: auto !important;
            gap: 1rem !important;
        }

            .inline-grid > div {
                flex: 1 0 85% !important;
            }

        .container-lg.inline-grid {
            margin-left: 0 !important;
        }
    }

    /* FORMS */
    .form-control {
        height: calc(1.5em + 1.5rem + 2px) !important;
        padding-top: 10px;
        font-size: var(--size-x2)
    }
    .form-control::placeholder {
        opacity:0.8;
        font-weight:300;
    }

    .form-group i[class*="fa-eye"] {
        position: absolute;
        z-index: 10;
        right: 1.8em !important;
        cursor: pointer;
        font-weight: 300 !important;
        opacity: .8;
        bottom: 33px;
    }

    .form-group label.error {
        position: absolute;
        bottom: 2.2rem !important;
        z-index: 10;
        right: 1.5em !important;
        color: #ed4747;
        font-weight: 500;
        width: 100%;
        text-align: right;
        font-size: 0.9rem;
    }

    label#MainDocument-error {
        right: 1.5rem;
        top: 0.3rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #ed4747;
        position: absolute;
    }

    input.error, select.error {
        border-color: #ed4747;
    }

    label.error {
        color: #ed4747;
        font-weight: 500;
        width: 100%;
        text-align: right;
        font-size: 0.9rem;
    }

    span.field-validation-error {
        color: #ed4747;
        font-weight: 500;
        width: 100%;
        text-align: right;
        font-size: 0.9rem;
    }

    /* PANELS */
    .box-panel {
        border: 1px solid rgba(35, 30, 19, 0.15);
        border-radius: 0.175rem;
        background-color: #fff;
        overflow: hidden;
    }

    .box-header {
        padding: var(--size-x5) var(--size-x6);
        border-radius: 0.175rem 0.175rem 0 0;
        font-size: var(--size-x5);
        font-weight: 500;
        border-bottom: 2px solid rgba(var(--brand-secondary));
        color: rgba(var(--brand-primary--dark),.9);
    }

    .box-panel .box-panel .box-header {
        border-bottom: 3px solid rgba(var(--brand-grey--light));
    }

    .box-content {
        padding: var(--size-x5) var(--size-x7);
        font-size: var(--size-x4);
        color: rgba(0,0,0,.75);
    }

    ul.dropdown-menu li {
        background: #fff;
        color: #000 !important;
    }

        ul.dropdown-menu li:hover {
            background: linear-gradient(180deg, #393939 0%, #120f08 100%) !important;
            color: #fff !important;
        }

        ul.dropdown-menu li a {
            color: #000 !important;
            padding: 0.5rem;
            display: block
        }

            ul.dropdown-menu li a:hover {
                display: block;
                padding: 0.5rem;
                color: #fff !important;
            }

    .table-overflow {
        overflow: visible !important;
    }

    @media (max-width: 768px) {
        .table-overflow {
            overflow: auto !important;
        }
    }

    .table td, .table th {
        vertical-align: middle;
    }


    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes slideLeft {
        0% {
            opacity: 0;
            transform: translate3d(110%, 0, 0)
        }

        50% {
            opacity: 1;
            transform: translate3d(-1.5rem, 0rem, 0)
        }

        100% {
            opacity: 1;
            transform: translate3d(0rem, 0rem, 0)
        }
    }

    @keyframes slideRightFadeOut {
        0% {
            opacity: 1;
            transform: translate3d(0, 0, 0)
        }

        60% {
            opacity: 1;
            transform: translate3d(-1.5rem, 0rem, 0)
        }

        100% {
            opacity: 0;
            transform: translate3d(110%, 0rem, 0)
        }
    }

    @media (min-width: 576px) {
        #ctnMainContent .alert-warning {
            text-align: center;
        }
    }

    #ctnMainContent .alert-warning p {
        text-align: center;
        margin-bottom: 0 !important;
    }

    #scbAffiliationBenefitsByPartner .row {
        align-items: end;
    }

    @media (min-width: 576px) {
        .searchGroup.col-sm-2 {
            flex: 0 0 25% !important;
            max-width: 25% !important;
        }
    }

    input.searchBarButton:hover, input.searchBarButton:focus {
        background: #EE3024 !important;
        border-color: #EE3024 !important;
    }

    .association-stuck {
        position: absolute;
        z-index: 3;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        color: #fff;
        font-weight: 700;
        font-size: 2rem;
        text-align: center;
        display: grid;
        place-items: center;
    }

        .association-stuck > p {
            font-size: 1.5rem;
            transform: rotate(-3.5deg) scale(1.5);
            margin-bottom: 5rem;
        }

    @media (max-width: 300px) {
        .association-stuck > p {
            font-size: 1rem;
        }
    }

    .card-disabled::before {
        content: "";
        font-weight: 700;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        color: #fff;
        font-size: 1.0em;
        filter: blur(1px);
    }

    .title-family {
        text-transform: uppercase;
        font-size: var(--size-x3);
        font-weight: 700;
        color: rgb(var(--brand-primary));
        margin-bottom: 0;
    }

    .footer__menus p{
        font-size: var(--size-x2)
    }


    /*Avatar*/

.sidebar__avatar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .sidebar__avatar {
        justify-content: center;
    }
    .box-content {
        padding: var(--size-x5) var(--size-x5) !important;
    }
}

.avatar__profile-image .avatar__change {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    height: 100%;
    background: rgba(64,7,95,.75);
    opacity: 0;
    transform: scale(1.333);
    transition: all .15s ease-in-out;
}

.avatar__profile-image:hover .avatar__change {
    transform: scale(1);
    opacity: 1;
}

.avatar__change i {
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    left: 0;
    color: white;
    font-size: 1.4rem;
    right: 0;
}

.avatar__profile-image {
    max-width: 100%;
    width: 5rem !important;
    height: 5rem !important;
    z-index: 10;
    border-radius: 50rem !important;
    overflow: hidden;
    border: 3px solid var(--brand-black);
    margin: 0 .75rem .5rem;
    position: relative;
    box-shadow: inset 0 0 0 12px black;
    cursor: pointer;
}

    .avatar__profile-image img {
        background: none;
        height: 110%;
        padding: 0;
        object-fit: cover;
        object-position: center;
        width: 100%;
        border: none !important;
        border-radius: 0;
    }

.avatar__profile-info {
    line-height: 1;
    text-align: right;
}

.avatar__status {
    padding: 0.125rem 0.5rem;
    display: inline-block !important;
    border-radius: 20rem;
    font-size: .75rem;
}

/* BENEFITS */
.benefits {
    position: relative;
}

    .benefits .squared-cards {
        display: grid;
        place-content: center;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 4.3rem;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        column-gap: 0;
        width: 85%;
    }

        .benefits .squared-cards .card-item {
            text-align: center;
            position: relative;
        }

        .benefits .squared-cards .card-front {
            height: 10.625rem;
            aspect-ratio: 1/1;
            margin: 0 auto;
            background-image: radial-gradient( 65.06% 100% at 50% 0%, rgb(var(--brand-silver--light)) 0%, rgb(var(--brand-silver--dark)) 100% );
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transform: scale(1);
            transition: all .1s ease-in-out;
            opacity: 1;
            border-radius: var(--brand-radius);
        }

        .benefits .squared-cards .card-item:hover .card-front {
            transform: scale(.5);
            opacity: 0;
            pointer-events: none;
        }

        .benefits .squared-cards .card-back {
            background: #fff;
            border-radius: 0.25rem;
            height: 15rem;
            aspect-ratio: 1 / 1;
            left: 0;
            right: 0;
            margin: 0 auto;
            padding: 1.5rem;
            position: absolute;
            bottom: 50%;
            transform: translateY(50%) scale(.7);
            transition: all .2s ease-in-out .005s;
            opacity: 0;
            pointer-events: none;
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .benefits .squared-cards .card-item:hover .card-back {
            opacity: 1;
            gap: 2rem;
            transform: translateY(50%) scale(1);
            pointer-events: auto;
            z-index: 5;
        }

        .benefits .squared-cards .card-back p {
            font-weight: 500;
            margin-bottom: 0;
            letter-spacing: var(--brand-spacing);
            line-height: 1.2;
        }

@media (max-width: 768px) {
    .benefits .squared-cards {
        place-content: unset !important;
        max-width: max-content;
        width: 105%;
    }

        .benefits .squared-cards .card-item {
            flex: 0 1 48%;
            display: flex;
            flex-direction: column;
            background-image: radial-gradient( 65.06% 100% at 50% 0%, rgb(var(--brand-silver--light)) 0%, rgb(var(--brand-silver--dark)) 100% );
        }

        .benefits .squared-cards .card-front {
            aspect-ratio: auto;
            background-image: none;
            padding: 0;
            transform: none !important;
            opacity: 1 !important;
        }

        .benefits .squared-cards .card-back {
            opacity: 1;
            gap: 2rem;
            transform: none !important;
            position: static;
            flex: 1;
            border-radius: 0 0 .25rem .25rem;
            height: auto !important;
            aspect-ratio: auto !important;
            width: 100%;
        }

    .padding_top-benefits {
        padding-top: 16rem
    }
}