:root {
    --brand-black: #0a0a0a;
    --brand-light: #fbfbfb;
    --brand-grey: #efefef;
    --brand-highlight: #015244;
    --brand-text-green: 0, 50, 24;
    --brand-border-grey: #dcdcdc;
    --plan-high: #BF904F;
    --plan-mid: #dddddd;
    --plan-entry: #5f5f5f;
    --plan-sec: #734690;
    --plan-ter: #8dac59;
    --brand-black--dark: 18, 15, 8;
    --brand-primary: #015244;
    --brand-secondary: #BF904F;
    --brand-third: #BF904F;
    --brand-quaternary: #BABABA;
    --text-color-primary: #015244;
    --text-color-secondary: #BF904F;
}

/* GENERALS */
@font-face {
    font-family: "Square";
    src: url('../fontes/square/Square721 BT Roman.ttf');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "SquareGame";
    src: url('../fontes/square_game/Square Game.otf');
    font-weight: normal;
    font-style: normal
}



body,
html {
    color: rgba(var(--brand-text-green), 0.75);
    font-family: Square;
    font-size: 16px;
}

    body h2 {
        color: var(--brand-secondary);
    }

    body p {
        color: var(--text-color-primary);
    }

h1, h2, h3, h4, h5, header {
    font-family: SquareGame;
    text-transform: uppercase;
    font-weight: 100 !important;
}


a, button {
    cursor: pointer;
    transition: .2s cubic-bezier(0.53,0.67,0.07,1.12);
}

::selection {
    background: #BF904F !important;
    color: #fff !important;
}

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

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

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

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

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

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

.blockUI.blockOverlay {
    background-color: #fff !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: "\f110";
        display: block;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 3.25rem;
        color: var(--brand-primary);
        animation: spin .8s steps(8) 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;
    }


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

table th a {
    color: var(--text-color-primary);
}

    table th a:hover {
        color: var(--text-color-secondary);
    }

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

@keyframes blink {
    0%, 25% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.1);
        opacity: .5;
    }
}

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

@keyframes sonar {
    from {
        background: none;
        color: var(--brand-primary);
        box-shadow: 0 0 0 0 rgb(1 82 68 / 50%);
        border: none
    }


    to {
        background: none;
        border: none;
        color: #fff;
        box-shadow: 0 0 0 .8125rem rgb(255 255 255 / 0%);
    }
}

@keyframes sonaractive {
    from {
        background: #fff;
        border: none;
        box-shadow: 0 0 0 1rem rgb(255 255 255 / 50%);
    }


    to {
        background-color: #fff;
        color: #fff;
        box-shadow: 0 0 0 .8125rem rgb(255 255 255 / 0%);
    }
}

/* 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;
}

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

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

/* HEADER NAVBAR */

header .nav-item + .nav-item .nav-link {
    display: inline-block;
    vertical-align: middle;
}

header.navbar {
    border: none !important;
    margin-bottom: 0px !important;
}

header .nav-item.active a {
    opacity: 1;
    font-weight: 600 !important;
}

/* LEAD */
.lead-section {
    background-size: cover;
    min-height: 640px;
    padding: 0;
}

.lead-wrapper {
    background: rgba(9, 2, 13, 0.5);
    backdrop-filter: blur(8px);
    width: 634px;
    max-width: 100%;
    box-shadow: 0 1rem 1.5rem 0.5rem rgba(17, 0, 27, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 0;
    transition: all .3s cubic-bezier(0.53,0.67,0.07,1.12);
}

    .lead-wrapper:hover {
        background: rgba(9, 2, 13, 0.666);
        box-shadow: 0 0rem 1.5rem 0 rgba(17, 0, 27, 0.666);
    }

.lead-form label {
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.125rem;
}

    .lead-form label i {
        font-size: 1.25rem;
        opacity: 0.75;
        width: 1.5rem;
        text-align: center;
    }

    .lead-form label input {
        flex: 1;
        background-color: rgba(0, 0, 0, 0.33);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.75rem 1.125rem;
        color: #fff;
        font-weight: 400;
    }

        .lead-form label input::placeholder {
            color: #fff;
            opacity: 0.5;
        }

/* TEXTS */
.navbar-brand h1 {
    position: absolute;
    text-indent: -99999px;
}

a,
a:hover {
    text-decoration: none;
}

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

p strong {
    font-weight: 600 !important;
}

.section-intro {
    font-weight: 300;
    font-size: 1.25rem;
    color: rgba(var(--brand-text-green), 0.525);
    line-height: 125%;
}

.text-lh-none {
    line-height: 100%;
}

.text-small {
    font-size: 0.8rem;
}

.text-primary {
    color: var(--text-color-primary) !important;
}

.text-secondary {
    color: var(--text-color-secondary) !important;
}

}

/* BACKGROUNDS */
.bg-black {
    background-color: var(--brand-black) !important;
}

.bg-hover-black:hover {
    background-color: var(--brand-secondary) !important;
}

.bg-light {
    background-color: var(--brand-light) !important;
}

.bg-hover-light:hover {
    background-color: var(--brand-light) !important;
}

.bg-hover-white:hover {
    background-color: #fff !important;
}

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

.bg-highlight {
    background-color: var(--brand-highlight) !important;
}

.bg-hover-highlight:hover {
    background-color: var(--brand-primary) !important;
}

.bg-plan-high {
    background-color: var(--plan-high);
}

.bg-plan-mid {
    background-color: var(--plan-mid);
}

.bg-plan-entry {
    background-color: var(--plan-entry);
}

.bg-quaternary {
    background-color: var(--brand-quaternary);
}

.bg-plan-sec {
    background-color: var(--plan-sec);
}

.bg-plan-ter {
    background-color: var(--plan-ter);
}

.bg-primary {
    background-color: var(--brand-primary) !important;
}

.bg-secondary {
    background-color: var(--brand-secondary) !important;
}

.bg-quaternary {
    background-color: var(--brand-quaternary) !important;
}
/* COLORS */
.text-light {
    color: var(--brand-light) !important;
}

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

.text-highlight {
    color: var(--brand-primary) !important;
}

.text-green {
    color: rgba(var(--brand-text-green), 0.75) !important;
}

.text-white a, .text-white {
    color: #fff !important;
}

a.link-op-hover,
.link-op-hover a {
    opacity: 0.75;
}

    a.link-op-hover:hover,
    .link-op-hover a:hover {
        opacity: 1;
    }

/* BORDERS */
.border-grey {
    border-color: var(--brand-border-grey) !important;
}

/* ALERTS */
.alert-highlight {
    background: rgb(7 95 10 / 11%);
    border-radius: 0.25rem;
    border: 1px solid rgba(64,7,95,.15);
}

/* BOXES */
.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%;
    }

.box-header {
    background-color: var(--brand-primary);
    color: #fff;
    text-transform: uppercase;
    padding: 1rem 1.333rem;
    font-weight: 600;
    border-radius: 0.25rem 0.25rem 0 0;
    position: relative;
}

    .box-header i {
        margin-right: .33rem;
    }

    .box-header[data-toggle="collapse"] {
        cursor: pointer;
    }

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

.box-content {
    background-color: var(--brand-grey);
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid #e2e2e2;
    color: rgba(var(--brand-text-green), .8);
}

    .box-content small, .box-content .small {
        display: block;
        font-weight: 600;
    }

    .box-content span, .box-content label {
        line-height: 100%;
        font-size: 1.125rem;
    }

    .box-content label {
        font-size: 80%;
        margin-bottom: 0;
        font-weight: 600 !important;
    }

    .box-content.box-content--grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        grid-gap: .75rem;
    }

        .box-content.box-content--grid > div {
            flex: 1 1 14.125rem;
        }


/* BUTTONS */
.btn-primary {
    padding: 0.425rem 1.5rem !important;
    background-color: transparent !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    border-radius: 4px;
}

    .btn-primary:hover {
        background-color: #fff !important;
        border: 1px solid var(--brand-primary) !important;
        color: var(--brand-primary) !important;
    }

.modal-footer > .btn-primary {
    padding: 0.425rem 1.5rem !important;
    background-color: var(--brand-primary) !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    border-radius: 4px;
    transition: transform .2s;
}

    .modal-footer > .btn-primary:hover {
        padding: 0.425rem 1.5rem !important;
        background-color: var(--brand-primary) !important;
        border: 1px solid #fff !important;
        color: #fff !important;
        border-radius: 4px;
        transition: transform .2s;
    }


.btn-secondary {
    padding: 0.425rem 1.5rem !important;
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #fff !important;
    border-radius: 4px;
    transition: transform .2s;
}

    .btn-secondary:hover {
        transform: scale(1.1);
    }

.btn-footer {
    padding: 0.425rem 1.5rem !important;
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #fff !important;
    border-radius: 4px;
}

.btn-default {
    padding: 0.425rem 1.5rem !important;
    border-color: rgba(var(--brand-text-green), .2) !important;
}


.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,.1) !important;
}

.btn-brand-lg {
    padding: 1rem 2rem;
}

.btn-circle {
    background-color: transparent;
    color: var(--brand-primary);
    display: inline-block;
    height: 2rem;
    width: 2rem;
    border: 1px solid #fff;
    border-radius: 4px;
    text-align: center;
    line-height: 2rem;
    font-size: 1.3125rem;
}

.btn-outline.btn-quaternary {
    color: var(--brand-quaternary);
    border-color: var(--brand-quaternary);
}

    .btn-outline.btn-quaternary:hover {
        color: #fff;
        background-color: var(--brand-quaternary);
        border-color: var(--brand-quaternary);
    }

.btn-outline.btn-sul {
    background: transparent;
    color: var(--text-color-primary);
    border-color: var(--brand-quaternary);
}

    .btn-outline.btn-sul:hover {
        background: transparent;
        color: var(--text-color-secondary);
        border-color: var(--brand-secondary);
    }


.btn-circle:hover {
    background-color: #fff;
    color: var(--brand-primary);
    display: inline-block;
    height: 2rem;
    width: 2rem;
    border: 1px solid var(--brand-primary);
    border-radius: 4px;
    text-align: center;
    line-height: 2rem;
    font-size: 1.3125rem;
}

.btn-circle-lg {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1.75rem;
}

.btn-icon {
    background-color: transparent;
    color: #fff;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    border: 1px solid #fff;
    border-radius: 4px;
    text-align: center;
    line-height: 2rem;
    font-size: 1.3125rem;
}

    .btn-icon:hover {
        background-color: #fff;
        color: var(--brand-primary);
        display: inline-block;
        height: 2rem;
        width: 2rem;
        border: 1px solid var(--brand-primary);
        border-radius: 4px;
        text-align: center;
        line-height: 2rem;
        font-size: 1.3125rem;
    }

.btn-outline {
    color: #000;
    border: 1px solid currentColor;
    background: transparent;
    padding: 0.7rem;
    text-align: center;
    transition: all 0.15s cubic-bezier(0.53,0.67,0.07,1.12);
    border-radius: 4px;
    display: inline-block;
}

.btn-outline {
    color: var(--brand-primary);
}

    .btn-outline:hover {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

    .btn-outline.bg-plan-high {
        color: var(--plan-high);
    }

        .btn-outline.bg-plan-high:hover {
            background: var(--plan-high);
            color: #fff;
            border-color: var(--plan-high);
        }

    .btn-outline.bg-plan-entry {
        color: var(--plan-entry);
    }

        .btn-outline.bg-plan-entry:hover {
            background: var(--plan-entry);
            color: #fff;
            border-color: var(--plan-entry);
        }

    .btn-outline.bg-plan-sec {
        color: var(--plan-sec);
    }

        .btn-outline.bg-plan-sec:hover {
            background: var(--plan-sec);
            color: #fff;
            border-color: var(--plan-sec);
        }

    .btn-outline.bg-plan-ter {
        color: var(--plan-ter);
    }

        .btn-outline.bg-plan-ter:hover {
            background: var(--plan-ter);
            color: #fff;
            border-color: var(--plan-ter);
        }

    .btn-outline.btn-plans {
        background: #0DA560;
        color: #fff;
        border-color: #0DA560;
        transition: transform .2s;
    }

        .btn-outline.btn-plans:hover {
            transform: scale(1.1);
        }

    .btn-outline.btn-plans_saber-mais {
        background: #015244;
        color: #fff;
        border-color: #015244;
        transition: transform .2s;
    }

        .btn-outline.btn-plans_saber-mais:hover {
            transform: scale(1.1);
        }

#startbutton.btn-primary {
    padding: 0.425rem 1.5rem !important;
    margin-top: 1rem;
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #fff !important;
    border-radius: 4px;
    transition: transform .2s;
}

    #startbutton.btn-primary:hover {
        transform: scale(1.1);
    }

a.bg-hover-highlight:hover, button.bg-hover-highlight:hover {
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

a.bg-hover-black:hover, button.bg-hover-black {
    color: var(--brand-primary) !important;
}

    a.bg-hover-black:hover, button.bg-hover-black:hover {
        border-color: var(--brand-secondary) !important;
        color: #fff !important;
    }

    a.bg-hover-black:hover, button.bg-hover-black:hover {
        border-color: var(--brand-secondary) !important;
        color: #fff !important;
    }

a.bg-hover-light:hover {
    border-color: var(--brand-light) !important;
    color: rgb(var(--brand-text-green)) !important;
}

a.bg-hover-white:hover {
    border-color: #fff !important;
    color: rgb(var(--brand-text-green)) !important;
}

a[class*='bg-hover'],
a[class*='bg-hover'] i,
button[class*='bg-hover'],
button[class*='bg-hover'] i {
    transition: all 0.15s cubic-bezier(0.53,0.67,0.07,1.12);
}

    a[class*='bg-hover']:hover i, button[class*='bg-hover']:hover i {
        color: #fff !important;
    }


@media (max-width: 768px) {
    .btn-group {
        flex-direction: column;
        grid-gap: .25rem;
    }

        .btn-group .btn, ul.btn-group li.nav-item a.nav-link.btn {
            border-radius: 20rem !important;
        }
}

/* FOOTER */
footer h2 {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--brand-primary);
}

.contact-infos p {
    color: rgb(var(--brand-text-green));
    margin-bottom: 0.125rem;
}

.contact-list div {
    margin: 0.25rem 0;
}

.contact-list a {
    color: rgba(var(--brand-text-green), 0.5);
    transition: all 0.15s cubic-bezier(0.53,0.67,0.07,1.12);
}

    .contact-list a span {
        font-weight: 600;
    }

.contact-list i {
    vertical-align: middle;
    width: 20px;
    margin-right: 0.125rem;
    text-align: center;
    color: #fff;
}

/* FORMS */
.input-icon {
    position: relative;
}

    .input-icon input {
        padding-left: 2.5rem !important;
        margin-bottom: 0 !important;
    }

    .input-icon i {
        position: absolute;
        margin-left: 0.875rem;
    }

        .input-icon i + input:focus {
            color: var(--brand-black) !important;
        }

.form-group i[class*="fa-eye"] {
    position: absolute;
    bottom: 1.5rem;
    z-index: 10;
    right: 1rem;
    cursor: pointer;
}

.input-icon + .message {
    max-height: 0 !important;
    width: 100%;
    margin: 0;
}

input.valid, select.valid, textarea.valid {
    border: 1px solid var(--brand-primary) !important;
}

span.field-validation-error, label.error {
    position: absolute !important;
    pointer-events: none;
    padding: unset !important;
    margin-top: unset !important;
    display: block;
    background-color: unset !important;
    border: none !important;
    outline: none !important;
    font-size: .75rem !important;
    font-weight: 600;
    color: #ed4747 !important;
    position: absolute;
    pointer-events: none;
}

.field-validation-error > span {
    font-size: .8125rem !important;
}

.input-validation-error, input.error, select.error, textarea.error {
    border: 1px solid #ed4747;
}

.form-control:focus {
    box-shadow: 0 0 0 0.125rem rgba(0,0,0,0.15) !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.required {
    background-color: #fff !important;
}

/* HOME GENERALS */
.home-section {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}

.title-brand svg {
    opacity: .425;
    transition: opacity .15s cubic-bezier(0.53,0.67,0.07,1.12);
}

section:hover .title-brand svg {
    opacity: 1;
}

.title-brand {
    display: flex;
}

    .title-brand h2 {
        font-weight: normal;
        color: rgb(var(--brand-text-green));
        line-height: 81%;
        margin-left: 1rem;
        margin-bottom: 2.375rem;
        text-align: left;
        text-transform: uppercase;
    }

        .title-brand h2 strong {
            display: block;
            font-weight: 900;
            color: var(--brand-primary);
        }

body > section {
    padding-top: 5.125rem;
    padding-bottom: 5.125rem;
}

/* HOME VOU PRO JOGO */
.proximo-jogo__infos {
    flex: 1 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.5rem 1rem 1.5rem;
}

.proximo-jogo__teams {
    padding: 1rem 0.8rem;
    flex: 1 0 300px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12) !important;
}

/* PLANS  */
.plans {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 1%;
}


.buy-store {
    display: grid;
    grid-template-columns: 270px 270px 270px 270px;
    grid-gap: 1%;
}


.plan__card {
    background: #fff;
    box-shadow: 0 0.5rem 0.5rem -0.125rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.15s cubic-bezier(0.53,0.67,0.07,1.12);
}

.plan__card--push {
    transition: all 0.15s cubic-bezier(0.53,0.67,0.07,1.12);
}

.card__header {
    height: 4.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 0.75rem;
}

    .card__header h3 {
        text-align: center;
        font-weight: 700 !important;
        color: #fff;
        margin-bottom: 0;
        text-transform: uppercase;
        font-size: 1.5rem;
    }

.card__content ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

.card__content li {
    display: block;
    flex: 1;
    width: 100%;
    text-align: center;
    padding: 1.375rem 1rem;
    margin: 0 !important;
    line-height: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

    .card__content li > p {
        font-size: 18px;
        margin-bottom: 0;
        color: var(--brand-primary);
    }

    .card__content li > small {
        font-size: .8rem !important;
        color: rgba(var(--brand-text-green), 0.5);
    }

.card__price {
    text-align: center;
    padding: 1.375rem 1rem 0.625rem;
}

    .card__price p {
        font-weight: 600;
        font-size: 1.75rem;
        color: var(--text-color-primary);
        margin-bottom: 0;
    }

        .card__price p > strong {
            font-weight: 900 !important;
        }

    .card__price span, small {
        font-size: 0.9375em;
        display: block;
        color: var(--text-color-primary);
    }

.card__button {
    padding: 1.375em 1rem;
}

    .card__button .btn-outline {
        display: block;
    }

.section-intro .price {
    margin: 1.875rem 0 0;
    font-size: 1.875rem;
    color: var(--brand-highlight);
    font-weight: 400;
    font-style: normal;
}

    .section-intro .price strong,
    .section-intro .aditional strong {
        font-weight: 800 !important;
    }

    .section-intro .price small {
        font-size: 1.0625rem;
    }

.section-intro .aditional {
    font-style: normal;
}

/* STATISTIC */
.statistics {
    overflow: hidden;
}

    .statistics .col-sm-4 {
        display: flex;
        justify-content: center;
    }

        .statistics .col-sm-4:hover .icon-bg i {
            transform: scale(2);
            opacity: 0;
        }

        .statistics .col-sm-4:hover p {
            transform: translateX(-.75rem) !important;
        }

    .statistics p {
        font-size: 1.75rem;
        line-height: 90.5%;
        margin-bottom: 0;
        position: relative;
        z-index: 1;
        transition: all 0.15s cubic-bezier(0.53,0.67,0.07,1.12);
    }

        .statistics p strong {
            font-size: 2.125rem;
            font-weight: 900 !important;
            display: block;
        }

    .statistics .icon-bg {
        font-size: 6.75rem;
        line-height: 125%;
        position: absolute;
        top: 0;
        left: -2%;
        z-index: 0;
    }

    .statistics i {
        color: #66397f;
        opacity: 0.5;
        vertical-align: middle;
        transition: all 0.15s cubic-bezier(0.53,0.67,0.07,1.12);
    }

@keyframes pulse {
    15% {
        transform: scale(1.1);
        opacity: 0.88;
    }

    25% {
        transform: scale(1);
        opacity: 0.4;
    }

    37% {
        transform: scale(1.15);
        opacity: 0.73;
    }

    to {
        transform: scale(1);
    }
}

/* MEDIA-QUERIES */
@media (max-width: 768px) {
    body, html {
        font-size: 15px;
    }

    header {
        border-bottom: 1px solid var(--brand-border-grey);
    }

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

        header .flex-grow-1.d-flex.align-items-center {
            flex-wrap: wrap;
        }

    .navbar--action {
        flex: 1 0 100%;
    }

        .navbar--action > .d-flex.align-items-center {
            justify-content: center;
            margin-bottom: 1rem;
        }

        .navbar--action > .ml-auto {
            text-align: center;
        }

    .navbar-nav {
        padding: 2.5rem 1rem;
    }

        .navbar-nav .nav-item::before {
            content: unset !important;
        }

    .plans {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        margin: 0 -1rem -1rem -1rem;
        padding: 0 1rem 1rem;
    }

    .buy-store {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        margin: 0 -1rem -1rem -1rem;
        padding: 0 1rem 1rem;
    }

    .plan__card {
        width: 90%;
        flex: 1 0 90%;
    }

    .title-brand {
        display: block !important;
        text-align: center;
    }

        .title-brand svg {
            max-height: 36px;
            margin-bottom: 1rem;
        }

        .title-brand h2 {
            text-align: center;
            margin-right: auto !important;
            margin-left: auto !important;
        }

    .overflow-edge {
        position: relative;
    }

        .overflow-edge::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            background-image: linear-gradient(to right, transparent, #fbfbfb 75%);
            display: block;
            width: 2.4rem;
        }

    .statistics .icon-bg {
        font-size: 2.8rem;
        line-height: 80%;
        position: static;
        margin-right: .8rem;
    }

    .statistics .col-sm-4 {
        align-items: center;
        border-bottom: 1px solid rgba(255,255,255,.075);
    }

    .statistics p {
        font-size: .8rem;
        line-height: 100%;
        width: 128px;
    }

        .statistics p strong {
            font-size: 1.7rem;
            line-height: 100%;
        }

    .lead-form label i {
        flex: 0 0 1.5rem;
    }

    .lead-form label input {
        width: 100%;
        flex: 1;
    }

    .credits .container {
        flex-direction: column;
    }

    .credits .ml-auto {
        margin: .5rem auto;
    }
}

@media (max-width: 500px) {
    header .flex-grow-1.d-flex.align-items-center {
        display: block;
    }
}

@media (min-width: 768px) {
    .plans:hover .plan__card:not(:hover) {
        opacity: 0.5;
        transform: scale(0.9666);
        box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
    }

    .buy-store:hover .plan__card:not(:hover) {
        opacity: 0.5;
        transform: scale(0.9666);
        box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
    }

    .plan__card:hover {
        box-shadow: 0 16px 16px rgba(0, 0, 0, 0.16);
    }

    .plan__card--push:hover {
        transform: translate3d(0px, -10px, 0px);
    }
}

@media (max-width: 1200px) {
    .buy-store {
        flex-wrap: nowrap;
        overflow: auto;
    }
}



/* CONTROL */
.control-panel {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.control-panel__sidebar {
    border-right: 1px solid rgba(var(--brand-text-green), .10);
    padding-right: 0;
    padding-top: .5rem;
}

.sidebar__avatar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.avatar__profile-image .avatar__change {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    height: 100%;
    background: var(--brand-primary);
    opacity: 0;
    transform: scale(1.333);
    transition: all .15s cubic-bezier(0.53,0.67,0.07,1.12);
}

.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: 4px !important;
    overflow: hidden;
    border: 3px solid var(--brand-primary);
    margin: 0 .75rem .5rem;
    position: relative;
    box-shadow: inset 0 0 0 12px #044534;
    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 {
    display: inline-block !important;
    border-radius: 4px;
    font-size: .75rem;
    padding: 0.2rem;
    margin-top: 0.3rem;
    color: #fff !important;
}

    .avatar__status small {
        display: inline-block !important;
        border-radius: 4px;
        font-size: .75rem;
        padding: 0.2rem;
        margin-top: 0.3rem;
        color: #015244 !important;
    }

.control-panel__sidebar .nav {
    position: sticky;
    top: .5rem;
    padding-bottom: .5rem;
}

    .control-panel__sidebar .nav .nav-link {
        transition: all .15s ease;
        background-color: #fff;
        border-radius: 4px 0 0 4px;
        margin: 0 0 0.333rem 0;
        border: 1px solid rgba(var(--brand-text-green), .15);
        border-right: none;
        color: #012e1c;
        opacity: .9;
        text-align: right;
    }

.control-panel__sidebar .nav-item.active a {
    color: #fff;
    background-color: var(--brand-primary) !important;
    opacity: 1;
}

.control-panel__sidebar .nav-item.active i, .control-panel__sidebar .nav-link:hover i {
    opacity: 1;
}

.control-panel__sidebar .nav-link:hover {
    color: #fff;
    background-color: var(--brand-secondary);
    opacity: 1;
}


.control-panel__sidebar .nav-link i {
    width: 1.5rem;
    text-align: center;
    opacity: .333;
}

.control-panel__content {
    padding-left: 2rem;
    padding-bottom: 2.125rem;
}

@media (max-width: 768px) {
    .control-panel__content {
        padding-left: 1rem;
        padding-bottom: 2.125rem;
    }
}

.nav-pills .nav-item.active .nav-link.bg-hover-black {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    font-weight: 400 !important;
    border-color: var(--brand-primary) !important;
}

/* CHECKINS */
.checkin__item + .checkin__item {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: .3rem dotted rgba(0,0,0,.2);
}

.checkin__infos {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.checkin__user {
    line-height: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
}

    .checkin__user + .checkin__user {
        margin-top: 1rem;
        border-top: 1px solid rgba(0,0,0,.1);
        padding-top: 1rem;
    }

    .checkin__user .user__photo {
        margin: 0 auto 1rem auto;
        width: 4.5rem;
        min-width: 4.5rem;
        height: 4.5rem;
        min-height: 4.5rem;
        overflow: hidden;
        border-radius: 4px;
        border: .1875rem solid var(--brand-highlight);
    }

        .checkin__user .user__photo img {
            object-fit: cover;
            object-position: center;
            height: 100%;
            width: 100%;
        }


    .checkin__user .user__infos {
        flex: 1;
    }

    .checkin__user .user__infos--grid {
        align-items: center;
    }

    .checkin__user .user__infos > div + div > span {
        margin-top: .5rem;
    }

    .checkin__user .user__infos--grid span {
        font-size: .9125rem;
        margin: 0.125rem 0;
    }

    .checkin__user .user__infos--grid strong {
        display: block;
        margin-right: .25rem;
    }

@media (max-width: 768px) {
    .checkin__options .box-content {
        overflow: auto;
        opacity: 1;
        transition: all .25s cubic-bezier(0.53,0.67,0.07,1.12) !important;
    }

    .checkin__options .collapse:not(.show) {
        display: none;
    }

    .chekin__options .box-content.collapse:not(.in) {
        display: none !important;
        padding-top: 0rem;
        opacity: 0 !important;
    }

    .checkin__user {
        flex: 1 0 90%;
        background: white !important;
        border-radius: 0.5rem;
        border: 1px solid var(--brand-border-grey) !important;
        border: none !important;
        padding: 1rem;
    }

        .checkin__user .user__infos {
            margin-bottom: .5rem;
        }

            .checkin__user .user__infos span {
                display: flex;
                align-items: center;
                margin-left: 0px !important;
            }

                .checkin__user .user__infos span i {
                    margin: .5rem .5rem .5rem 0;
                }

        .checkin__user .user__infos--grid {
            grid-template-columns: 1fr;
        }
}




/* CUSTOMIZAÇÕES DE ESTILO DO TEMPLATE */
section {
    padding-top: 20px;
    padding-bottom: 20px;
}

div.clearHeader {
    margin-bottom: 75px !important;
}

.datepicker {
    padding: 0 12px;
}

/* Remoção da margem superior*/
.countTo .boxed {
    margin-top: 0px;
}


/* Primary Button */
.btn-dark {
    border-color: #4f4f4f;
    background-color: #4f4f4f;
    color: white;
}

.btn-gold {
    border-color: gold;
    background-color: gold;
    color: black;
}

.btn-black {
    border-color: #000;
    background-color: #000;
    color: white;
}

    .btn-dark:active, .btn-dark:hover, .btn-black:active, .btn-black:hover {
        border-color: #666;
        color: #ddd;
    }

    .btn-dark:focus, .btn-black:focus {
        color: gold;
    }

.btn-gold:active, .btn-gold:hover {
    border-color: goldenrod;
    color: #666;
}

.btn-gold:focus {
    color: goldenrod;
}

.btn-rounded {
    -moz-border-radius: 7px;
    ;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}


/****** Club de Vantagens ******/
.club-vantagens {
    margin-top: 20px;
}

    .club-vantagens h1 {
        margin-bottom: 0px !important;
    }

.banner {
    display: flex;
    align-items: center;
    padding-bottom: 0;
}

    .banner img {
        width: 100%;
        position: relative;
    }

    .banner p {
        position: absolute;
        right: 0;
        padding-right: 70px;
        width: 500px;
        flex-wrap: wrap;
        font-size: 30px;
        line-height: 35px;
        font-weight: 700;
        text-align: end;
        color: #1f1d1d;
    }

        .banner p b {
            background-color: #000;
            color: #fff;
            padding: 0px 25px;
            font-weight: 400;
        }

@media only screen and (max-width: 768px) {
    .banner {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

        .banner img {
            position: initial;
        }

        .banner p {
            position: initial;
            padding: 10px 5px;
            margin-top: 20px;
            width: 90%;
            flex-wrap: wrap;
            font-size: 30px;
            line-height: 35px;
            font-weight: 700;
            text-align: center;
            color: #1f1d1d;
            display: flex;
            justify-content: flex-end;
        }

            .banner p a {
                display: flex;
                margin: 10px auto;
                text-align: center;
                background-color: #000;
                color: #fff;
                padding: 0px 25px;
                font-weight: 400;
            }

    .login .container {
        display: block !important;
        align-items: normal !important;
    }
}


.message {
    display: flex;
    justify-content: center;
    margin: 35px 0 0;
    padding-bottom: 0;
}

    .message p {
        width: 650px;
        flex-wrap: wrap;
        line-height: 42px;
        text-align: center;
        font-size: 35px;
    }

        .message p strong {
            font-size: 40px;
            font-weight: 800
        }




.login {
    background-color: #4f4f4f;
    padding: 50px 0;
    text-align: center;
}

    .login .container {
        display: flex;
        align-items: center;
    }

        .login .container .access {
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .login .container .access .btn {
                margin-bottom: 0;
            }


        .login .container p {
            text-align: start;
            display: flex;
            justify-content: center;
            flex-direction: column;
            line-height: 36px;
            font-size: 35px;
            margin-bottom: 5px;
            color: #ffffff !important;
        }

            .login .container p strong {
                font-size: 20px;
            }

@media only screen and (max-width: 1024px) {
    .login .container .text {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .login .container p {
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        line-height: 36px;
        font-size: 35px;
        margin-bottom: 5px;
        color: #ffffff !important;
    }

    .login .container .access .btn {
        margin-top: 15px;
    }

    .modal:not([style*="display: none"]) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.img-vozao {
    display: flex;
    padding-top: 0px;
    margin-bottom: 35px;
}

    .img-vozao img {
        width: 150px;
        margin: 0 auto;
    }

.modal {
    text-align: center;
    padding: 0 !important;
    overflow: hidden !important;
}

    .modal:not([style*="display: none"]) {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .modal:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.modal-content {
    overflow: auto;
}

@media (min-width: 760px) {

    .modal-content {
        overflow-y: auto;
        max-height: 650px;
        margin-top: 10vh
    }
}

    .modal-header {
        background-color: var(--brand-primary);
        color: #fff;
        padding: 1rem 1.333rem;
        border-radius: 0.25rem 0.25rem 0 0;
        position: relative;
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        justify-content: center;
    }

        .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6, .modal-header span, .modal-header p {
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            color: #fff !important;
        }

    .modal .modal-body {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .modal .modal-xl {
        width: 70%;
    }

    .modal-lg {
        width: 90%;
        max-width: 660px;
    }

    .modal.fade.in {
        background: rgba(0,0,0,.75) !important;
    }


    .modal .modal-body h3 {
        color: #4f4f4f !important;
    }

    .modal .modal-body b {
        color: var(--brand-secondary);
    }



    .callout {
        z-index: 10;
        padding: 50px 0;
    }


    /* COOKIES MODAL */
    #in-cookie {
        width: 100%;
        height: 100%;
        display: none;
        position: relative;
    }

        #in-cookie .in-cookie-overlay {
            left: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            position: fixed;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.5);
        }

        #in-cookie .in-cookie-modal {
            left: 0;
            right: 0;
            top: 10%;
            width: 100%;
            z-index: 999;
            padding: 2rem;
            max-width: 60%;
            margin: 0 auto;
            position: fixed;
            font-size: 1rem;
            max-height: 90%;
            max-width: 40%;
            overflow-y: auto;
            overflow-x: hidden;
            background: white;
            border-radius: 1rem;
            box-shadow: 0 0 1.5rem -.5rem black;
        }

    @media (max-width: 1600px) {
        #in-cookie .in-cookie-modal {
            max-width: 50%;
        }
    }

    @media (max-width: 1200px) {
        #in-cookie .in-cookie-modal {
            max-width: 60%;
        }
    }

    @media (max-width: 992px) {
        #in-cookie .in-cookie-modal {
            max-width: 70%;
        }
    }

    @media (max-width: 768px) {
        #in-cookie .in-cookie-modal {
            max-width: 90%;
        }
    }

    #in-cookie .in-cookie-modal .in-cookie-modal-grid {
        gap: 2.5rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, auto);
    }

        #in-cookie .in-cookie-modal .in-cookie-modal-grid > div:nth-child(1) > p {
            font-size: 1.75rem;
            line-height: 2.75rem;
            color: rgba(2, 28, 62, 0.8);
            font-family: FuturaCom-Medium, sans-serif;
        }

        #in-cookie .in-cookie-modal .in-cookie-modal-grid > div:nth-child(2) {
            gap: 1.5rem;
            display: grid;
            align-items: center;
            justify-content: flex-end;
            grid-template-rows: auto;
            grid-template-columns: repeat(2, auto);
        }

    @media (max-width: 576px) {
        #in-cookie .in-cookie-modal .in-cookie-modal-grid > div:nth-child(2) {
            grid-template-columns: 1fr;
        }
    }

    #in-cookie .in-cookie-modal .in-cookie-modal-grid > div:nth-child(2) > button:nth-child(1) {
        color: black;
        padding: .5rem;
        border: inherit;
        font-size: 1.1rem;
        font-weight: bold;
        padding: 1rem 1.5rem;
        border-radius: .5rem;
        /*background: #efeeea;*/
    }

    #in-cookie .in-cookie-modal .in-cookie-modal-grid > div:nth-child(2) > button:nth-child(2) {
        color: black;
        padding: .5rem;
        border: inherit;
        font-size: 1.1rem;
        font-weight: bold;
        padding: 1rem 1.5rem;
        border-radius: .5rem;
        background: #ffd700;
    }

        #in-cookie .in-cookie-modal .in-cookie-modal-grid > div:nth-child(2) > button:nth-child(2):hover {
            opacity: .9;
            transition: all 0.25s ease-out;
        }

    #in-cookie.in-open {
        display: block !important;
    }


    ul.dropdown-menu li {
        background: #fff;
        color: var(--text-color-primary) !important;
    }

        ul.dropdown-menu li:hover {
            background-color: var(--brand-primary);
            color: #fff !important;
        }

        ul.dropdown-menu li a {
            color: var(--text-color-primary) !important;
            padding: 0.5rem;
            display: block
        }

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




    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 19rem !important;
        padding: 0;
        margin: 0.125rem 0 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 0.25rem;
    }

    fieldset .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    @media (max-width: 580px) {
        fieldset .row {
            display: -ms-flexbox;
            display: block;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }
    }

    /* ICONS SOCIAL MIDIA */

    .wrapper .button {
        display: inline-block;
        height: 60px;
        width: 60px;
        float: left;
        margin: 0 5px;
        overflow: hidden;
        background: #fff;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease-out;
    }

        .wrapper .button .icon {
            display: inline-block;
            color: var(--text-color-primary) !important;
            height: 60px;
            width: 60px;
            text-align: center;
            border-radius: 50px;
            box-sizing: border-box;
            line-height: 60px;
            transition: all 0.3s ease-out;
        }

            .wrapper .button .icon:hover {
                background: var(--brand-primary) !important;
                color: #fff !important;
            }


            .wrapper .button .icon i {
                font-size: 25px;
                line-height: 60px;
                transition: all 0.3s ease-out;
            }

        .wrapper .button:hover .icon a i {
            color: #fff;
        }

        .wrapper .button:hover .icon a i {
            color: #fff !important;
        }


    .partner_sponsors {
        justify-content: center;
        align-items: center;
        gap: 2rem;
        display: flex;
        flex-wrap: wrap;
    }


        .partner_sponsors img {
            opacity: 0.5;
        }

            .partner_sponsors img:hover {
                opacity: 1;
            }

    .navbar-light .navbar-toggler {
        color: #fff !important;
        border-color: #fff !important;
    }


    @media (min-width: 986px) {
        .logo-campeao_header {
            position: absolute;
            top: 0;
        }
    }


    .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
        color: var(--text-color-primary);
    }

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: var(--text-color-secondary);
    }

    .table-responsive {
        display: inline-table;
        width: 100%;
        overflow-x: auto;
    }

    @media (max-width: 1000px) {
        .table-responsive {
            display: block;
            width: 100%;
            overflow-x: auto;
        }
    }

    .table {
        width: 100%;
        margin-bottom: 1rem;
        color: var(--text-color-primary);
    }

    #progresstext {
        color: var(--text-color-primary);
    }

    .btn-success {
        color: #fff;
        background-color: var(--brand-primary) !important;
        border-color: var(--brand-primary) !important;
    }


        .btn-success:hover {
            color: #fff;
            background-color: var(--brand-secondary) !important;
            border-color: var(--brand-secondary) !important;
        }

        .btn-success:active {
            color: #fff;
            background-color: var(--brand-secondary) !important;
            border-color: var(--brand-secondary) !important;
        }


    .d-grid {
        display: grid !important;
    }

    .scroll-grid {
        overflow: visible !important;
    }

    .invoice-header {
        margin: 0 -20px;
        background: #f0f3f4;
        padding: 20px;
        overflow-x: auto;
    }

    .nav-checkin .fa-check:before {
        content: "\f00c";
        animation: sonar .9s forwards infinite;
        border-radius: 20rem;
    }

        .nav-checkin .fa-check:before:active {
            content: "\f00c";
            animation: sonaractive .9s forwards infinite;
            border-radius: 20rem;
        }


    .control-panel__sidebar .nav-checkin i.fa-check {
        opacity: 1 !important;
    }

    .navbar-collapse {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -ms-flex-positive: 1;
        flex-grow: 0 !important;
        -ms-flex-align: center;
        align-items: center;
    }

    .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;
    }