/*Importar font Lato - Campanha de Reposicionamento Propay somos pro - The Juju - 04/2021*/

@font-face {
    font-family: lg;
    src: url(../fonts/lg.eot?n1z373);
    src: url(../fonts/lg.eot?#iefixn1z373) format("embedded-opentype"), url(../fonts/lg.woff?n1z373) format("woff"), url(../fonts/lg.ttf?n1z373) format("truetype"), url(../fonts/lg.svg?n1z373#lg) format("svg");
    font-weight: 400;
    font-style: normal;
}

.page {
    position: relative;
    overflow: hidden;
    background-color: #F8FAFA;
    font-family: 'Qanelas', sans-serif;
}

[data-x-mode] .page {
    opacity: 1;
}

h2,
.footer h2 {
    font-family: 'Qanelas', sans-serif;
    color: #003C7A;
    font-weight: bold;
    line-height: 1.15;
    font-size: 28px;
}

p {
    font-size: 18px;
    color: #969696;
    font-weight: 400;
}

span {
    color: #ffff;
}

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

/*--------------banner--------------*/
.Topo {
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: url(https://www.propay.com.br/hubfs/_LP/LP_SaaS/imagens/bg_header.png) no-repeat right;
    flex-direction: column;
}

.ElementoTopo {}

.ElementoTopo h1 {
    font-family: 'Qanelas', sans-serif !important;
    font-weight: 300 !important;
    font-size: 38px !important;
    width: 750px;
    display: block !important;
    color: #fff !important;
    line-height: 48px !important;
    letter-spacing: 1px !important;
}

.ElementoTopo h1 span {
    background-color: #ffff;
    font-weight: 700;
    color: #F2A41C
}


strong {
    font-weight: 600 !important;
}

.ElementoTopo p {
    font-family: 'Qanelas', sans-serif;
    color: #fff;
    font-weight: 400;
    line-height: 30px;
    font-size: 21px;
}

/*--------------fim - banner--------------*/

/*-------------- botão CTA DESKTOP--------------*/
.btn-intro-mob,
.btn-reuniao-mob,
.btn-banner-mob button {
    display: none;
}

.btn-reuniao-desk button {
    font-family: 'Qanelas', sans-serif;
    font-size: 20px;
    /*margin: 2em 0;*/
    background-color: #1994ED;
    border-color: #1994ED;
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
}

.btn-banner-desk button {
    font-family: 'Qanelas', sans-serif;
    font-size: 17px;
    /* margin: 2em 0; */
    background-color: #1994ED;
    /* border-color: #A3D4F8; */
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    color: #ffff !important;
    /* text-transform: uppercase; */
    font-weight: 600;
    border: 1px solid #1994ED;
    /* box-shadow: 0px 10px 15px #2087a126; */
}

.btn-reuniao-desk button:hover {
    background-color: #003C7A !important;
}

.btn-banner-desk button:hover {
    background-color: #fff !important;
    color: #1994ED !important;
    border-color: #1994ED !important;
}


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

    .btn-banner-mob button {
        font-family: 'Qanelas', sans-serif;
        font-size: 14px;
        /*margin: 2em 0;*/
        background-color: #1994ED;
        border-color: #1994ED;
        border-radius: 8px;
        padding: 0.375rem 0.75rem;
        color: #fff;
        text-transform: uppercase;
        font-weight: 500;
        display: revert;
    }


    /*CTA MOBILE*/
    .btn-a-propay-desk,
    .btn-reuniao-desk,
    .btn-banner-desk button {
        display: none;
    }

    .btn-intro-mob,
    .btn-intro-mob button,
    .btn-reuniao-mob button,
    .btn-reuniao-mob {
        display: flex;
        justify-content: center;
        font-family: 'Qanelas', sans-serif;
        font-size: 18px;
        background-color: #f2a41a;
        border-color: #f2a41a;
        border-radius: 8px;
        /*padding: 0.375rem 0.75rem;
        margin: 1em 0;*/
        color: #fff;
        text-transform: uppercase;
        font-weight: 500;
    }

    .intro .cta-formulario,
    a.cta_formulario {
        text-decoration: none;
    }

}

/*--------------fim - botão CTA--------------*/

/*---------------Introduçao e Formulario--------------*/
.intro h2 {
    font-family: 'Qanelas', sans-serif;
    color: #1994ED;
    font-weight: bold;
    line-height: 38px;
    font-size: 28px;
    margin-bottom: 18px;
    text-align: center;
}

h2.TitleVantagens {
    font-family: 'Qanelas', sans-serif;
    color: #003C7A;
    font-weight: bold;
    line-height: 1.15;
    font-size: 38px;
}

.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    /*margin-bottom: 10px;*/
    flex-direction: column;
}

.card-title-vantagem {
    font-family: 'Qanelas', sans-serif;
    font-size: 1.35em;
    font-weight: bold;
    color: #1994ed;
    line-height: 1.3;
    margin-bottom: 0 !important;
}

.card-text-vantagem {
    color: #969696;
    font-family: Qanelas, sans-serif;
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: 8px;
    font-weight: 400;

}


/*--------------Formulário--------------*/
.form_intro {
    display: flex;
    align-items: center;
}

.formulario {
    height: auto;
    background-color: #1994ED;
    padding: 20px;
    border-radius: 20px;
}

.formulario p {
    color: #fff;
    font-size: 1.1em;
    margin: 0.2em 0 0 1em;
}

.actions {
    display: flex;
    align-items: center;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
    padding: 0px !important;
    width: 100%;
    justify-content: center;
}

button,
input[type="submit"],
input[type="button"],
.hs-button.primary {
    display: inline-block;
    max-width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 15px 25px;
    background: #1994ed;
    border-color: #1994ed;
    border: 0;
    border-radius: 8px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff !important;
    font-family: 'Qanelas', sans-serif;
    font-size: 1.1em;
    line-height: normal;
    font-weight: 400;
    text-transform: none;
    text-align: center;
    text-decoration: none !important;
    text-shadow: none;
    letter-spacing: .05em;
    vertical-align: middle;
    white-space: normal;
    cursor: pointer;
    -webkit-transition: all .4s ease, -webkit-transform .2s ease;
    transition: all .4s ease, transform .2s ease;
    -webkit-appearance: none;
}

.hs-form select,
.hs-form .hs-input {
    border-radius: 4px;
    height: 32px;
}

.hs-error-msg,
label {
    color: #fff;
}

.hbspt-form .form-columns-2 .hs-form-field {
    width: 100%;
}

.hbspt-form .form-columns-2 .hs-form-field .input,
.hbspt-form .form-columns-1 .hs-form-field .input {
    margin-right: 0;
}

.hbspt-form .form-columns-1 .hs-input {
    width: 100% !important;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    height: 34px;
    background: #E6E6E6 0% 0% no-repeat padding-box;
    border: 0.10000000149011612px solid #575756;
    border-radius: 7px;
    opacity: 1;
    font-family: 'Qanelas';
    font-weight: normal;
    font-size: 16px;
    color: #969696;
}


.hbspt-form .form-columns-2 .hs-form-field .input .hs-input {
    width: 96% !important;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    height: 34px;
    background: #E6E6E6 0% 0% no-repeat padding-box;
    border: 0.10000000149011612px solid #575756;
    border-radius: 7px;
    opacity: 1;
    font-family: 'Qanelas';
    font-weight: normal;
    font-size: 16px;
    color: #969696;
}


.hbspt-form .hs-error-msgs {
    list-style: none;
    padding: 0 0 0 0;
    margin: 10px 0 -10px 0;
}

.hbspt-form .hs-error-msgs li label {
    font-family: 'Qanelas';
    font-weight: normal;
    font-size: 12px;
    color: #fff;
}

.hbspt-form .form-columns-1 .inputs-list {
    padding-left: 0;
    padding: 0 0 0 0;
    list-style: none;
}

.hbspt-form .form-columns-1 .inputs-list li label {
    align-items: flex-start;
    display: flex;
    margin-top: 15px;
}

.hbspt-form .form-columns-1 .inputs-list li label input[type="checkbox"] {
    width: 18px !important;
    height: 18px;
}


.hbspt-form .form-columns-1 .inputs-list li label span {
    color: #fff;
    font-family: Qanelas;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
    text-align: left;
}


.hbspt-form .actions input[type="submit"] {
    width: 100%;
    height: 40px;
    /*margin-top: 20px;*/
    background: #F2A41A 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    border: none;
    font-family: 'Qanelas';
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    padding: 10px;
}

/*--------------Fim-Formulário--------------*/


.ContentDestaqueSaaS {
    background-color: #1994ed;
}

.card-title-saas {
    font-family: 'Qanelas', sans-serif;
    font-size: 1.3em;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 0 !important;
    font-weight: normal;
}

.media-destaque {
    display: flex;
    justify-content: center;
}

/*--------------Fim - Introduçao e Formulario--------------*/

/*FAQ ACCORDION*/

.faq{
    margin-top: 5rem;

}
.accordion .card {
    border: none;
    background-color: #F8FAFA;
}

.card-body {
    border: none;
}

.faq-header {
    background-color: #F8FAFA !important;
}

.card-header {
    border: none;
    border-bottom: 0px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
}

h2#panelsStayOpen-headingOne,
h2 .accordion-header,
.accordion-button {
    font-family: 'Qanelas', sans-serif;
    color: #003C7A !important;
    font-weight: 600;
    line-height: 20px;
    font-size: 22px !important;
}

.accordion-body .faq-body,
.accordion-body {
    color: #969696 !important;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    padding: 0 3.25rem;
    background-color: #fff;
    text-align: justify;
}

.accordion-item,
.accordion-item .item-faq {
    border: 0px !important;
}

/*FIM - FAQ ACCORDION*/

/*--------------A-Propay--------------------*/

.a-propay-row {
    display: flex;
    align-items: center;
}

.a-propay h4 {
    font-family: 'Qanelas', sans-serif;
    color: #003C7A;
    font-weight: bold;
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 18px;
    text-align: left;
}

.a-propay p {
    font-family: 'Qanelas', sans-serif;
    color: #969696;
    font-weight: 400;
    line-height: 32px;
    font-size: 20px text-align: left;
}

.a-propay p span {
    font-family: 'Qanelas', sans-serif;
    color: #fff;
    font-weight: 400;
    line-height: 32px;
    font-size: 20px;
    display: inline-block;
    background-color: #F2A41C;
    text-align: left;

}

section.NumerosPropay {
    margin-top: 50px !important;
    padding: 0 0 !important;
}


/*--------------A-Propay--------------------*/





/* Clientes */
.cliente h5 {
    width: 97%;
    margin-top: 50px;
    margin-bottom: 18px;
    color: #1D3C76;
    font-family: 'Qanelas';
    font-weight: bold;
    font-size: 32px;
    line-height: 46px;
}

.sliderClientes .slick-list {
    box-sizing: border-box;
    padding: 10px 0 30px 0px;
}

.sliderClientes .slick-list .slick-slide {
    padding: 10px;
    background-color: red;
    text-align: center;
    margin-right: 15px;
    margin-left: 15px;
}

.sliderClientes .slick-list .slick-slide {
    width: 600px;
    height: 300px;
    padding: 20px;
    text-align: left;
    box-sizing: border-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 10px 15px #02020226;
    border-radius: 12px;
    opacity: 1;
    font-family: 'Qanelas';
    font-size: 16px;
    line-height: 24px;
    color: #969696;
    font-weight: normal;
    display: flex;
    align-items: flex-start;
}

.sliderClientes .slick-list .slick-slide header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
}

.sliderClientes .slick-list .slick-slide header img {
    margin-right: 18px;
    width: 14%;
    border-radius: 50%;
}

.sliderClientes .slick-list .slick-slide header strong {
    font-family: 'Qanelas';
    font-weight: bold;
    font-size: 16px;
    color: #1D3C76;
}

.sliderClientes .slick-list .slick-slide header strong span {
    display: block;
    font-size: 16px;
    line-height: 32px;
    font-weight: normal;
    color: #969696;
}

.sliderClientes .slick-list .slick-slide header p,
.dep_cliente {
    font-style: italic;
    font-size: 16px;
    line-height: 32px;
    color: #969696;
}


.sliderClientes .slick-prev,
.sliderClientes .slick-next {
    position: absolute;
    top: -75px;
    width: 53.23px;
    height: 53.23px;
    border: none;
    border-radius: 100%;
    background-color: #fff;
    text-indent: -9999px;
    transition: 0.5s;
}

.sliderClientes .slick-prev:hover,
.sliderClientes .slick-next:hover {
    background-color: #A3D4F8;
    transition: 0.5s;
}

.sliderClientes .slick-prev {
    right: 80px;
    background: url('https://www.propay.com.br/hubfs/_Site/img/iconLeftBlue.png') no-repeat #fff center center;
}

.sliderClientes .slick-next {
    right: 0px;
    background: url('https://www.propay.com.br/hubfs/_Site/img/iconRightBlue.png') no-repeat #fff center center;
}

/* Fim Clientes */

/*--------------Footer--------------*/
.form_final {
    display: none;
}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer h3 {
    font-family: 'Qanelas', sans-serif;
    color: #1994ED;
    font-weight: 600;
    margin-top: 0.5em;
    line-height: 1.6;
    font-size: 26px;
}

.footer h3 span {
    font-size: 28px;
    margin-top: 10px;
    color: #F2A41A;
}

img.img_rh_sonhos {
    width: 550px;
}


/*--------------fim - Footer--------------*/



@media only screen and (max-width: 1024px) {
    .Topo {
        background: url(https://www.propay.com.br/hubfs/_LP/LP_SaaS/imagens/bg_header.png) no-repeat center;
        height: 360px;
        justify-content: flex-start;

    }

    .ElementoTopo {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        margin-left: 0;
        margin-top: 40px;
    }

    .ElementoTopo p {
        font-size: 18px;

    }

    .ElementoTopo p br {
        display: none;

    }



    .ElementoTopo h1 {
        font-size: 22px !important;
        line-height: 34px !important;
        width: 310px;
    }

    .intro h2 {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 18px;
    }

    h2.TitleVantagens {
        font-size: 1.4em;
        line-height: 32px;
    }


    .card-title-vantagem,
    .card-text-vantagem {
        font-size: 18px;

    }



    .form_intro {


        display: none;
    }

    .card-title-saas {
        font-size: 1em;
    }


    /*FAQ*/

    .faq{
        margin-top: 0;

    }
    h2#panelsStayOpen-headingOne,
    h2 .accordion-header,
    .accordion-button {
        line-height: 28px;
        font-size: 18px !important;
    }

    .accordion-body .faq-body,
    .accordion-body {
        font-size: 18px;
        line-height: 30px;
    }

    /*FAQ*/


    /*--------------A-Propay--------------------*/
    .a-propay h4 {
        text-align: center;
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 18px;
        width: 100%;
        margin-top: 0;
    }

    .a-propay h4 br {
        display: none;
    }

    .img-tecnologia-tablet {
        margin-bottom: 3rem;
    }

    .a-propay-row {
        flex-direction: column-reverse;
    }

    /*--------------FIM - A-Propay--------------------*/


    /*Clientes*/
    section.cliente {
        margin-top: 5rem;
    }
    .sliderClientes .slick-list .slick-slide {
        width: 350px;
        height: 360px;
    }

    .sliderClientes .slick-prev,
    .sliderClientes .slick-next {
        display: none !important;
    }

    .cliente h5 {
        text-align: center;
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 18px;
        width: 100%;
        margin-top: 0;
    }

    .sliderClientes .slick-list .slick-slide header strong {
        font-size: 18px;
    }

    .sliderClientes .slick-list .slick-slide header strong span {
        font-size: 18px;
        line-height: 32px;
    }

    .sliderClientes .slick-list .slick-slide header p,
    .dep_cliente {
        font-size: 16px;
        line-height: 30px;
    }

    .sliderClientes .slick-list .slick-slide header img {
        width: 18%;
    }

    /*Clientes*/


    /*--------------A-Propay--------------------*/
    .a-propay h4 {
        text-align: center;
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 18px;
        width: 100%;
        margin-top: 0;
    }

    /*--------------FIM - A-Propay--------------------*/

    /*--------------- FOOTER--------------*/

    h2,
    .footer h2 {
        font-family: 'Qanelas', sans-serif;
        color: #003C7A;
        font-weight: bold;
        line-height: 1.15;
        font-size: 22px;
    }

    .footer {
        margin-top: 20px;
    }

    .form_final {
        display: revert;
    }

    .footer h3 {
        font-size: 20px;
        font-weight: 500;
    }

    .footer h3 span {
        font-size: 20px;
        font-weight: 500;
    }

    .row.rh-dos-sonhos {
        flex-direction: column-reverse;
    }

    .footer .img_rh_sonhos,
    img.img_rh_sonhos {
        width: 300px;
    }

    /* --------------FIM - FOOTER-------------- */

}



@media (max-width: 400px),
(max-device-width: 480px) and (min-device-width: 320px) {

    form.hs-form-7f345cbb-272b-495d-b118-7cb53daeb504_10292e31-34d8-4763-bc3c-0ad589f2a4dc:not(.hs-video-form) .form-columns-2 .hs-form-field .hs-input,
    form.hs-form-7f345cbb-272b-495d-b118-7cb53daeb504_10292e31-34d8-4763-bc3c-0ad589f2a4dc:not(.hs-video-form) .form-columns-3 .hs-form-field .hs-input {
        width: 100% !important;
    }

    body form.hs-form .form-columns-2 .hs-form-field .hs-input,
    body form.hs-form .form-columns-3 .hs-form-field .hs-input {
        width: 100% !important;
    }

    .card-body {
        justify-content: initial;
    }

    .card.features.wow {
        min-height: 200px;
    }

    form.hs-form-65952110-8eed-46bd-8ce9-a34ab16d804c_9af9a1d9-9f92-46c8-bc64-cc4099a79733:not(.hs-video-form) .form-columns-2 .hs-form-field,
    form.hs-form-65952110-8eed-46bd-8ce9-a34ab16d804c_9af9a1d9-9f92-46c8-bc64-cc4099a79733:not(.hs-video-form) .form-columns-3 .hs-form-field {
        float: none;
        width: 100%;
    }

    body .hs-form fieldset[class*=form-columns] .field {
        margin-left: 0%;
    }

}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .ElementoTopo h1 {
        font-size: 42px !important;
        width: 650px;
        text-align: center !important;
        line-height: 52px !important;
    }

}


/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .Topo {
        background: url(https://www.propay.com.br/hubfs/_LP/LP_SaaS/imagens/bg_header.png) no-repeat right center;
        height: 360px;
        justify-content: center;

    }
}