/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

/*@font-face {
  font-family: bariol;
  src: url(fonts/bariol_regular-webfont.ttf);
  font-weight: regular;
}

@font-face {
  font-family: bariol;
  src: url(fonts/bariol_bold-webfont.ttf);
  font-weight: bold;
}*/



/*CUSTOM*/
.w-95 {
    width: 95% !important;
}
/*CUSTOM*/

:root {
    --color-green-lemmon: #0Bf;
    /*--color-green: #06f;#4100F7*/
    --color-green: #4100F7;
    --color-green-darker: #04c;
    --color-green-darkest: #04C;
    --color-green-border: #0d66d0;
    --color-green-border-light: #00f;
    --color-green-seaeweed: #4100F7;
    --color-green-modal: #4100F7;
    --color-gray: #BCBRC0;
    --color-gray-light: #f2f2f2;
    --color-white-dark: #eeeff3;
}

body {
    padding-top: 2rem;
    color: #5a5a5a;
    font-family: CF Greycliff Bold,sans-serif;
}

footer {
    color: white;
}

    footer a {
        color: white;
    }


/* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}

.carousel-inner {
    margin-top: 60px !important;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 36rem;
    background-color: transparent;
}

    .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100vw;
        max-width: 100vw;
        height: 33rem;
        /*object-fit: cover;*/
        object-fit: contain;
    }


@media(min-width: 767.5px) {
    .carousel-item {
        height: 32rem;
        background-color: transparent;
    }

        .carousel-item > img {
            position: absolute;
            top: 0;
            left: 0;
            min-width: 100%;
            height: 32rem;
            object-fit: contain
        }

    .form-title {
        font-size: 1rem !important;
        font-weight: bold;
    }
}

/*@media(min-width: 999px) {
    .carousel-item {
        height: 32rem;
        background-color: transparent;
    }

        .carousel-item > img {
            position: absolute;
            top: 0;
            left: 0;
            min-width: 100%;
            height: 32rem;
            object-fit: cover
        }

    .form-title {
        font-size: 1.4rem !important;
        font-weight: bold;
    }
}*/

@media(min-width: 1482px) {
    .carousel-item {
        height: 32.5rem;
        max-height: 32.5rem;
    }

        .carousel-item > img {
            position: absolute;
            top: 0;
            left: 0;
            min-width: 100%;
            height: 32rem;
            object-fit: contain
        }
    /*  .carousel-alpha {
        background-color: rgba(0,96,254,1);
    }*/
    .carousel-img-beta {
        object-fit: cover !important;
        background-color: white;
        max-height:100%;
    }
}
/* MARKETING CONTENT
  -------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.marketing h2 {
    font-weight: 400;
}

.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}


/* Featurettes
  ------------------------- */

.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
}

/* RESPONSIVE CSS
  -------------------------------------------------- */

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

/* Colors */

.c-green {
    color: var(--color-green);
}


.navbar {
    background: var(--color-green) !important;
    box-shadow: 0 3px 1px var(--color-gray);
}

.nav-item {
    display: relative !important;
}

    .nav-item::before {
        content: "";
        display: absolute;
        width: 5px;
        height: 100%;
        left: 0;
    }

.nav-link {
    color: white !important;
    transition: .3s;
}

    .nav-link:hover {
        color: white !important;
        text-decoration: underline;
    }

.top-form {
    float: right !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn {
    background: var(--color-green-darker) !important;
    color: white;
    border-color: transparent;
    border-radius: 10px;
    padding-left: 25px;
    padding-right: 25px;
}

    .btn:hover {
        background-color: var(--color-green-darker) !important;
        color: white !important;
    }

.btn-alter {
    background: White !important;
    color: var(--color-green) !important;
    border-color: var(--color-green) !important;
    border-radius: 10px;
    padding-left: 25px;
    padding-right: 25px;
}

    .btn-alter:hover {
        background-color: var(--color-green-lemmon) !important;
        color: White !important;
    }

.btn-darker {
    background: var(--color-green-darker) !important;
}

    .btn-darker:hover {
        background: var(--color-green-darkest) !important;
    }

.separator {
    border: 0;
    border-right: 1px solid white;
}

.top-banner {
    margin-top: 2rem;
    display: relative;
    /*background-image: url("../assets/images/backbanner.png") !important;*/
    background-repeat: no-repeat;
    background-size: auto;
}

.modal .modal-option {
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

#cpfFoundModal p {
    font-size: 1.4rem;
    text-align: center;
}

#cpfFoundModal, #cpfYesNoModal, #cpfOptionsModal, #cpfConfirmModal {
    --color-green: var(--color-green-modal);
}

.title {
    /* font-size: 2.4rem !important; */
    font-weight: bold;
}

.title-green {
    color: var(--color-green);
}

.title-white {
    color: white;
}

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

.bg-dark-green {
    background: var(--color-green-darker);
}

.bg-lemmon {
    background: var(--color-green-lemmon);
}

.border-tl {
    border-top-left-radius: 15px;
}

.border-br {
    border-bottom-right-radius: 15px;
}

.mserrat {
    font-family: CF Greycliff Bold,sans-serif;
    font-weight: bold;
    position: relative !important;
}

#videoArea {
    display: grid;
    grid-template-areas:
        'vid pic'
        'vid pay';
}

    #videoArea .vid {
        grid-area: vid;
    }

    #videoArea .pic {
        grid-area: pic;
    }

    #videoArea .pay {
        grid-area: pay;
    }

input {
    color: black /*var(--color-green)*/ !important;
    border: 1px solid black /*var(--color-green)*/ !important;
    background: transparent !important;
    border-radius: 10px !important;
}

    input::placeholder, textarea::placeholder {
        color: black /*var(--color-green)*/ !important;
        text-align: center;
    }

textarea::placeholder {
    text-align: left;
}

textarea {
    color: black /*var(--color-green)*/ !important;
    border: 1px solid black !important;
    border-radius: 0.8rem !important;
}

img {
    object-fit: cover;
}

#about {
    /*background: linear-gradient(to bottom right, var(--color-white-dark), var(--color-gray));*/
    background: white;
}

.stp-item {
    background: white;
    transition: .3s;
}

    .stp-item img {
        transition: .3s;
    }

    .stp-item:hover {
        background-color: var(--color-gray);
    }

        .stp-item:hover img {
            transform: scale(1.1);
        }

.wpp {
    color: var(--color-green);
    text-align: center;
}

footer a {
    margin: .5rem;
}

    footer a:hover {
        color: var(--color-gray);
    }

.form-title {
    text-align: center;
}

.stp-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green-border);
    background-color: white; /*var(--color-green-border);*/
    border-radius: 50%;
    border-color: var(--color-green-border);
    border: 1.5px solid;
    font-size: 1.0rem;
    font-weight: 100;
}

.step-content::after {
    content: "";
    position: absolute;
    background-color: white;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    right: 0;
    top: 50%;
    z-index: 101;
}

.step-content, .step-content::after {
    transition: .3s;
}

    .step-content:hover, .step-content:hover::after {
        background: transparent /*var(--color-gray)*/ !important;
    }

    .step-content > * {
        transition: .3s;
    }

    .step-content:hover > * {
        transform: scale(1.1);
    }

.step::before {
    content: "";
    z-index: 100;
    position: absolute;
    background-color: transparent /*var(--color-green-border-light)*/;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    left: -3px;
    top: 50%;
}

.step i {
    font-size: 3rem;
}

.step span {
    color: var(--color-green-darker);
    text-align: center;
}

.step-last .step-content::after {
    display: none;
}

.step-first::before {
    display: none;
}

.form-title {
    font-size: 1.4rem;
    font-weight: bold;
}

.form-container {
    z-index: 90;
    position: absolute;
}

.cool-opacity {
    /* background:linear-gradient(to top, rgba(255,255,255,1),rgba(255,255,255,0));border-radius: 10px; */
    background: rgba(255,255,255,0.65);
    border-radius: 10px;
}

.fa-bars {
    color: var(--color-green);
}

.parthner img {
    width: 6rem;
}

#video {
    border: 5px solid var(--color-green);
    border-radius: 15px;
    border: 0;
}

.modal .modal-dialog {
    /*background-image: url('../assets/images/bg-modal.png');*/
    background-color: rgba(255,255,255,0.9);
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#cpfFoundModal i {
    font-size: 4rem;
}

#cpfFoundModal .company-logo {
    background: white;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.video-container {
    position: absolute;
}

#notFoundModal {
    color: var(--color-green-darkest);
}

.modal span {
    font-weight: bold;
}

.modal img.cpf-company {
    max-width: 60px !important;
}

#cpfDealModal {
    --color-green: var(--color-green-seaeweed);
    --color-green-darker: var(--color-green-darkest);
}

#loadingModal {
    color: var(--color-green-darkest);
}

    #loadingModal .modal-dialog {
        min-height: 300px;
    }

    #loadingModal .loader {
        position: relative;
        text-align: center;
        margin: 15px auto 35px auto;
        z-index: 100;
        display: block;
        width: 80px;
        height: 80px;
        border: 10px solid var(--color-green);
        border-radius: 50%;
        border-top-color: var(--color-green-lemmon);
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
    }

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

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

@media (max-width: 799.5px) {

    #parthnerText .title {
        font-size: 1.6rem !important;
    }
}

@media (max-width: 767.5px) {

    /* #videoArea {
      display: grid;
      grid-template-areas:
        "vid"
        "pic"
        "pay"
      ;
    } */

    .video-container {
        position: relative;
    }

    .step-content::after {
        left: 50%;
        top: 90%;
    }

    .step::before {
        left: 50%;
        top: -3px;
    }

    .about-content {
        flex-direction: column-reverse !important;
        align-items: center;
    }

        .about-content img {
            display: none;
        }

    /* .about-content span {
      margin: 0 auto;
    } */

    .form-container {
        bottom: 10%;
    }

        .form-container .container > div {
            width: 100%;
        }

    #video {
        position: relative !important;
        margin-top: 1rem;
    }

    #whiteRow > div {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Services Page */

.services-description {
    background: var(--color-green-seaeweed);
    color: white;
}

.services-main {
    background: var(--color-gray-light);
}

.services-solutions .card-horizontal {
    background: white;
    border-radius: 15px;
}

.card-horizontal {
    max-width: 100%;
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
}

.card-horizontal-header {
    width: 25%;
}



/*MODAIS*/

.modal-dialog {
    width: 945px;
    max-width: 945px;
}



@media(max-width:945px) {
    .modal-dialog {
        max-width: 95vw;
    }
}