/* Root */

:root {
    --grayscale: 40%;
    --fonte-principal: 'Nunito',' sans-serif';
    --shadow: 0px 4px 15px rgba(99, 86, 112, 0.25);

    --primary-500: #471f92;
    --secondary-500: #C4DF4E;
    --terciary-500: #DAD2E9;
    
    --white: #FFFFFF;
    --black: #000000;

    --gradient-light: #602ab2;
    --gradient-dark: #3A0147;

    --gray-100: #828282;
    --gray-200: #666666;
    --gray-300: #4F4F4F;

}

/* Reset */
* { 
    outline: none !important; 
}

html, body { 
    height: 100%; 
    font: normal 14px var(--fonte-principal), sans-serif; 
    position: relative; 
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body { 
    padding-bottom: 0 !important;
}

figure {
    margin: 0; 
}

a {
    color: var(--black);
}

a:hover { 
    text-decoration: none; 
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: orange;
}

/*Remove selector from input type num*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


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

.column{
    flex-direction: column;
}

.wrapper{
    padding: 5px;
    margin: 10px 0;
}

.img{
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
    Button Style Guide    

    - The "button-wrapper" class goes in a div that wrapps the button tag 
    and creates the dash effect for the CTA.
    - The "button" class define the style of the standard button

    - In order to dont't display a CTA button don't set "button-wrapper" class
    - In order to change the color also set a "button-X00" class with button class 
    (e.g: class="button button-200")
    - In order to change any other style set an style attribute in HTML (e.g: style="height: 100px"),
      except for media queries, then, refer to the button class it self
*/

.button-wrapper {
    padding: 10px; 
    color: orange;
    border-radius: 100px;
}

.button {
    width: 100%;
    height: 55px;
    border: none;
    border-radius: 30px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: orange;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s linear 0.2s;
    
}

a.button{
    display: flex ;
    align-items: center;
    justify-content: center;
}

.button:disabled { 
    background: lightgray; 
    filter: grayscale(var(--grayscale));
}

.button:hover,
.button:hover:enabled { 
    filter: none;
}

.button-wrapper.button-200{
    
}

.button.color-primary{
    color: orange;
}

.button.button-200 {
    background-color: var(--white);
    color: orange;
}

.button.button-200-green {
    background-color: orange;
    color: var(--primary-500);
}

.button.landing-page-button{    
    background-color: orange;
    color: var(--white);
    width: 100%;
    height: 40px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.button.landing-page-button:hover{
    background-color: rgb(12, 12, 12);
   
}


.button.landing-page-button-all{    
    background-color: var(--primary-500);
    color: var(--white);
    margin-bottom: 10px;
    width: 400px;
    height: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.button.landing-page-button-all:hover{
    background-color: var(--primary-500);
    opacity: 0.7;
}    


.container-opcoes{
    display: flex;
    justify-content: center;
    top: -50px;
    position: relative;
}

.container-landing-page-button{
    height: fit-content;
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    justify-content: space-between;
    border: none;
    border-radius: 30px;
    padding: 15px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);


}

.container-landing-page-button p{
    text-align: flex-start;
    color: black;
}

.container-landing-page-button img{
    display: flex;
    align-items: flex-start;
    padding: 15px;

    justify-items: flex-start;
}

.button-wrapper.button-300{
    border: 2px dashed var(--terciary-500); 
}

.button.button-300 {
    background-color: var(--terciary-500);
}

/*
    Input Style Guide    

    - The "input" class define the style of the standard input

    - In order to change the color also set a "input-X00" class with input class 
    (e.g: class="input input-200")
    - In order to change any other style set an style attribute in HTML (e.g; style="height: 100px")
      except for media queries, then, refer to the input class it self
*/

.input {
    width: 100%;
    height: 55px;
    border: none;
    border-radius: 30px;
    text-align: center;
    color: var(--primary-500);
    background-color: var(--white);
    font-size: 20px;
    font-weight: bold;
}

.input.input-200 {
    color: var(--secondary-500);
}

.input.input-300 {
    color: var(--terciary-500);
}

/* TODO => Change this shit */
.branco {color: var(--white);}
.branco-bold {color: var(--white); font-weight:bold;}
.none 								{ display: none; }
.nmbottom 							{ margin-bottom: 0px; }
.imgresponsiva 						{ max-width: 100%; height: auto !important; display: block; }
.bgCinza 							{ background-color: rgb(12, 12, 12); }
.bgCinzaInterno						{ background-color: rgb(12, 12, 12); }
.pBottom50 							{ padding-bottom: 50px; }
.ptop50								{ padding-top: 50px; }
.mb20								{ margin-bottom: 20px;}
.modal-content p {
    color: black;
}

/*Banner principal*/

.erro-buttons .valores { 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-500); 
    border-radius: 15px; 
    padding:13px 0 15px 0; 
    text-align:center; 
    color: var(--primary-500); 
    font-weight: bold; 
    font-size: 20px;
    height: 50px;
}

.erro-buttons .valores {
    font-size: 14px;
    padding: 15px;
    background-color: var(--primary-500);
    color: var(--white);
}

.erro-buttons a + a{ 
    margin-top: 30px;
}

.errorbutton { 
    display: flex;
    flex-direction: column;
    padding: 20px 0;

}


@media (max-width: 767px){
    .svg-position{
        display: flex;
        justify-content: center;
    }
    
}

.formulario-inss-agibank{
    margin: 5% 15%;
}

.passo-a-passo{
    color: rgb(12, 12, 12);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.passo-a-passo .circle {
    background-color: rgb(12, 12, 12);
    height: 70px;
    width: 70px;
    border-radius: 100%;
    display: grid;
}
.passo-a-passo .circle img {
    place-self: center;
    height: 45px;
}
.passo-a-passo h1 {
    font-size: 25px;
    color: var(--primary-500);
}
.passo-a-passo .linha-separacao{
    height:4px;
}
.modal-termos { padding-top: 170px; }

@media (max-width: 767px) {
    .passo-a-passo { text-align:center;}
    header nav.menuHeader #navbar 		{
                                            padding: 0;
                                            position: absolute;
                                            z-index: 999;
                                            width: 250px;
                                            right: 0px;
                                            border-radius: 10px;
                                        }
    header .navbar-header { position: relative; }

    .sub-text-mobile { 
        padding: 30px 0 5px 0
    }
    
    h4 {
        text-align: center;
    }

    .passo-a-passo .circle {
         margin-left: auto; 
         margin-right: auto; 
    }
        
    .modal-termos { 
        padding-top: 140px; 
        margin-top: -55px; 
    }

    .modal-termos-footer { 
        padding-top: 80px
    }
}

/* footer */
footer 									{ background: rgb(12, 12, 12); padding: 50px 0; font-weight: bold;}

footer .boxInfoFooter img{ 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin-bottom: 20px; 
    max-height: 70px; 
}
footer .boxInfoFooter p { 
    color: var(--white); 
    line-height: 20px; 
    font-size: 13px; 
}
footer .boxInfoFooter ul { 
    list-style-type: none; 
    padding: 0; 
}
footer .boxInfoFooter ul li { 
    margin-right: 10px; 
    float: left; 
}
footer .boxInfoFooter ul li a { 
    width: 30px; 
    height: 30px; 
    background: rgb(12, 12, 12); 
    display: block; 
    text-align: center; 
    color: var(--primary-500); 
    border-radius: 20px;
    transition: all 0.1s linear 0.1s; 
}
footer .boxInfoFooter ul li a:hover { 
    background: rgb(12, 12, 12); 
    transition: all 0.1s linear 0.1s; 
    color: var(--white);
}
footer .boxInfoFooter ul li a i { 
    font-size: 18px; 
    line-height: 30px; 
}

footer h3.titleFooter 					{ font-weight: bold; color: rgb(12, 12, 12); font-size: 16px; text-transform: uppercase; margin: 0 0 20px; }

footer .boxMenusFooter ul 				{ list-style-type: none; padding: 0; }
footer .boxMenusFooter ul li a			{ color: var(--white); display: block; line-height: 25px; text-transform: uppercase; }
footer .boxMenusFooter ul li a:hover 	{ color: var(--secondary-500); }
footer .boxMenusFooter p 				{ color: var(--white); text-transform: uppercase;  }
footer .boxMenusFooter p span 			{ display: block; font-weight: bold; font-size: 28px; }

footer form.formNews div 				{ margin-bottom: 20px; position: relative; }
footer form.formNews input 				{ border-width: 0 0 1px 0; border-color: var(--white); color: var(--white); border-style: solid; background: #231F20; width: 100%; height: 30px; }
footer form.formNews div label.error 	{ position: absolute; bottom: 0; right: 0; color: #ff0000; }
footer form.formNews button 			{ background: var(--primary-500); border: none; width: 150px; height: 40px; text-transform: uppercase; color: var(--white); font-size: 16px; font-weight: bold; float: right; }

.copyright {
    padding: 20px 0 50px; 
    background: rgb(12, 12, 12);
    color: var(--white);
}

.copyright  p {
    font-size: 12px; 
    line-height: 20px; 
    margin-bottom: 20px; 
    color: var(--white);
}

.copyright .objetivos-empresa {
    font-size: 10px;
    text-align: justify;
    margin-bottom: 15px;
    font-weight: normal;
}

.btn-simular-meu-credito{
    margin-top:-25px;
}
.btn-simular-meu-credito a{
    text-decoration: none;
    cursor: pointer;
    color: var(--white);
}

.btn-simular-meu-credito a:hover{
    text-decoration: none;
    cursor: pointer;
}
.btn-simular-meu-credito-estilo{
    font-weight: bold;
    width: 100%; 
    height: 50px;
    line-height: 50px;  text-align: center;
    background-color: var(--primary-500); 
    border-radius: 15px; 
    text-align:center; 
    color: var(--white); 
    font-weight: bold; 
    display: block;

    -webkit-box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.25);
}

@media (max-width: 767px) {
    footer {
        border-radius: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
}

/* barra */
.barraFixa 								{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; }
.barraFixa ul							{ background: var(--primary-500); width: 100%; height: 50px; list-style-type: none; padding: 0; margin: 0; }
.barraFixa ul li 						{ float: left; width: 33%; }
.barraFixa ul li a 						{ display: block; text-align: center; }
.barraFixa ul li a i 					{ color: var(--white); font-size: 30px; line-height: 50px; transition: all 0.2s linear 0.2s; }
.barraFixa ul li:hover a 				{ background: var(--primary-500); transition: all 0.2s linear 0.2s;}

/* etapas */
.etapas 								{ padding: 50px 0; }
@media (max-width: 767px) 				{ .etapas { padding: 15px 0; }}
.boxEtapa 								{ overflow: hidden; width: 25%; float: left; }
.boxEtapa p								{ color: var(--gray-200); text-align: center; text-transform: uppercase; }
.boxEtapa .img							{ background: url(../images/img-etapa.png) top center; height: 15px; margin: 10px 0; }

.boxEtapaAtiva							{ overflow: hidden; width: 50%; position: relative; left: 25%; right: 25%; }
.boxEtapaAtiva p						{ color: #04354a; text-align: center; text-transform: uppercase; }
.boxEtapaAtiva .img					    { background: url(../images/img-etapa-ativa.png) top center; height: 15px; margin: 10px 0; }
.boxEtapaAtiva p span					{ font-weight: bold; }

/* cadastro - etapa 01 */
.titleCadastro 	{ 
    background: var(--primary-500);
}

.titleCadastro h1 { 
    padding-left: 20px;
    margin: 5% 0 1%;
    color: var(--white);
    font-size: 30px;
    text-transform: uppercase;  
}

.pag-cadastro .icones h2 { color: var(--white); font-weight: bold; }

.formLogin 								{ font-size:14px; font-weight: bold; color: var(--white);}
.formLogin legend 						{ color: var(--white); text-align: left; font-size: 14px; font-weight: bold; border: none; }
.formLogin .form-group 					{ position: relative; }
.formLogin label 						{ display: block;  text-align: left; margin-top: 5px;}
.formLogin label.radio-inline 			{ line-height: 22px; }
.formLogin label.error 					{ position: absolute; top: 0; right: 0; color: #ff0000; font-size: 12px; padding-right: 15px; }
.formLogin span 						{ font-weight: bold; }
.formLogin select 						{ background: var(--white); border: 1px solid var(--primary-500); border-radius: 5px;  }
.formLogin input 						{ background: var(--white); border: 1px solid var(--primary-500); border-radius: 5px; }
#captcha-group                          {display: block; width: 100%;}

#margem-group label::before             { content: 'R$'; position: absolute; height: max-content; top: 2.5rem; width: max-content; padding-left: 12px; color: #555; z-index: 2; }

.obsForm 								{ text-align: center; font-style: italic; font-size: 12px; padding: 0 20px; }

.txtCadastro p 							{ line-height: 20px; }
.txtCadastro ul 						{ list-style-type: none; padding: 0; margin: 0 0 50px; }
.txtCadastro ul li						{ background: url(../images/icon-estrela.png) no-repeat top left; padding-left: 30px; line-height: 20px; margin-bottom: 10px; }

.rowDepoimentos .quem-indica 		{ padding-bottom: 20px; }

.boxComentario .balaoComentario 		{ background: var(--white); padding: 20px; margin-bottom: 20px; }
.boxComentario .balaoComentario span 	{ color: var(--terciary-500); font-size: 90px; font-weight: bold; float: left; margin-right: 20px; line-height: 70px; }
.boxComentario figure 					{ float: left; margin-right: 20px; }
.boxComentario figure img 				{ border-radius: 100px; }
.boxComentario p.nomeComentario 		{ float: left; margin-top: 30px; }
.boxComentario p.nomeComentario span 	{ color: var(--terciary-500); display: block; }

.boxTipoDisponivel 						{ border: 1px solid #ccc; background: var(--white); padding: 20px; }
.bgEscuro 								{ background: var(--terciary-500); }
.bgMedio1 								{ background: #195866 ; }
.bgMedio2 								{ background: #327C7F; }
.bgClaro 								{ background: #639E9E; }
.boxMargemLivre  h3 					{ margin-top: 0; font-weight: bold; font-size: 14px; text-transform: uppercase; }
.boxMargemLivre  p span				{ font-size: 28px; color: var(--primary-500); font-weight: bold; }

button.btGrande							{ background: var(--secondary-500); color: var(--white); text-transform: uppercase; font-size: 16px; width: 100%; height: 50px; border: none; border-radius: 5px; font-weight: bold; transition: all 0.2s linear 0.2s; margin-bottom: 10px; }
button.btGrande:hover 					{ background: var(--terciary-500); transition: all 0.2s linear 0.2s; }
a.btVoltar 								{ color: var(--gray-200); }

.rowFaqInt 								{ padding: 50px 0; }
.rowFaqInt h3 							{ text-align: center; font-weight: bold; font-size: 26px; text-transform: uppercase; margin: 0 0 30px; }

.boXAccordion .accordion 				{ background-color: var(--white); border: 1px solid #123D50; color: var(--gray-200); cursor: pointer; padding: 18px; width: 100%; text-align: left; outline: none; transition: 0.4s; margin-bottom: 10px; }
.boXAccordion .accordion:after 			{ content: '\002B'; color: #123D50; font-weight: bold; float: right; margin-left: 5px;}
.boXAccordion .active:after 			{ content: "\2212"; }
.boXAccordion .active 					{ margin-bottom: 0;  }
.boXAccordion .active, .accordion:hover { background-color: #EEEEEE; }
.boXAccordion .panel 					{ padding: 20px; border-radius: 0; margin-top: -1px; background-color: white; display: none; overflow: hidden; margin-bottom: 20px; border: 1px solid #123D50; background: no-repeat;  }


/* etapa 03 - resumo */
.etapaDocumentos .boxEtapaDoc 							{ background: var(--white); border: 1px solid #CED4DA; padding: 20px; border-radius: 5px; text-align: center; margin-bottom: 20px; }
.etapaDocumentos .boxEtapaDoc i 						{ font-size: 30px; margin-bottom: 10px; }
.etapaDocumentos .boxEtapaDoc p 						{ text-transform: uppercase; font-size: 16px; }
.etapaDocumentos .boxEtapaDoc.active 					{ background: var(--primary-500); border: 1px solid var(--primary-500); }
.etapaDocumentos .boxEtapaDoc.active i,
.etapaDocumentos .boxEtapaDoc.active p 					{ color: var(--white); }
.etapaDocumentos .check                                 { background: #C9C9C9; color: #9D9D9D; }

.boxResumo                                              { background: var(--white); border: 1px solid #CED4DA; padding: 20px; border-radius: 5px; text-align: center; margin-bottom: 20px; }
.boxResumo h3                                           { font-weight: bold; font-size: 16px; text-transform: uppercase; margin-bottom: 20px; }
.boxResumo ul                                           { padding: 0; margin: 0 0 10px 0; overflow: hidden; border: 1px solid #CED4DA; margin-bottom: 20px; border-radius: 5px; background: #E6E6E6; }
.boxResumo ul li                                        { list-style-type: none; float: left; width: 16.66%; }
.boxResumo ul li p                                      { border-bottom: 1px solid #CED4DA; text-transform: uppercase; line-height: 30px; }
.boxResumo ul li span                                   { font-weight: bold;  line-height: 20px; display:block; margin-bottom:10px; }
.boxResumo ul li span.status                            { background: #FFA508; color: var(--white); display: block; border-radius: 5px; }
.boxResumo ul li a                                      { background: var(--terciary-500); color: var(--white); width: 100%; display: block; height: 20px; line-height: 20px; text-align: center; border-radius: 5px; }

/* etapa 03 - documentos */
.boxPassosDocumentos 									{ background: var(--white); border: 1px solid #CED4DA; padding: 20px; border-radius: 5px; text-align: center; margin-bottom: 20px; overflow: hidden; }
.boxPassosDocumentos h3 								{ font-weight: bold;; text-align: center; text-transform: uppercase; font-size: 16px; margin-top: 0; }
.boxPassosDocumentos h3 i 								{ color: var(--terciary-500); }
.boxPassosDocumentos p 								    { line-height: 20px; }
.boxPassosDocumentos .escolhaTipoDoc button 			{ border: 1px solid var(--terciary-500); color: var(--gray-200); text-transform: uppercase; text-align: center; background: var(--white); width: 50%; float: left; height: 40px; margin-bottom: 10px; }
.boxPassosDocumentos .escolhaTipoDoc button.ative		{ color: var(--white); background: var(--terciary-500); }

.dropzone 												{ background: url(../images/selecionar-arquivo.jpg) no-repeat center center; border: solid 1px #CCC; text-align: center; height: 200px; vertical-align: middle; cursor: pointer; float: left; width: 100%; }
.dropzone.upload-rg 									{ width: 50%; }

/* etapa 03 - questionário */
.boxQuestionario 										{ background: #E6E6E6; border: 1px solid #CED4DA; margin-bottom: 20px;border-radius: 5px; }
.boxQuestionario h3 									{ text-transform: uppercase; padding: 20px; margin: 0; font-weight: bold; font-size: 20px; border-bottom: 1px solid #CED4DA; background: var(--white); }
.boxQuestionario ul 									{ background: #E6E6E6; padding: 20px; list-style: none; margin: 0; }
.boxQuestionario ul li 									{ margin-bottom: 10px; }
.boxQuestionario button.btPergutna						{ float: right; margin: 0 20px 20px 0; background: var(--primary-500); color: var(--white); font-size: 16px; color: var(--white); text-transform: uppercase; border-radius: 5px; border: none; height: 40px; padding: 0 10px; font-weight: bold; }

/* etapa 03 - ass */
.boxAss 												{ background: var(--white); border: 1px solid #CED4DA; margin-bottom: 20px; border-radius: 5px; padding: 20px; }
.boxAss img 											{ display: block; margin: 0 auto 20px; }
.boxAss p 												{ font-size: 16px; text-align: center; }
.boxAss p span 											{ font-weight: bold; font-size: 14px; }
.boxAss i 												{ color: #FFA300; text-align: center; font-size: 80px; margin-bottom: 20px; display: block; }

/* etapa 03 - ass */
.resumoFormulario 										{ background: #E6E6E6; padding: 20px 10px 10px; overflow: hidden; margin-bottom: 10px; }

/* login */
.esqSenha 												{ float: right; color: #ff0000; margin-bottom: 10px;  }
.esqSenha:hover 										{ color: #ff0000; text-decoration: underline; }

/* pedidos */
.boxResumoPedidos										{ background: var(--white); border: 1px solid #CED4DA; padding: 20px; border-radius: 5px; text-align: center; margin-bottom: 20px; }
.boxResumoPedidos h2 									{ font-weight: bold;; font-size: 16px; text-transform: uppercase; margin-bottom: 50px; }
.boxResumoPedidos ul 									{ padding: 10px; margin: 0; overflow: hidden; border: 1px solid #CED4DA; margin-bottom: 20px; border-radius: 5px; background: #F7F7F7; }
.boxResumoPedidos ul li									{ list-style-type: none; float: left; width: 16.66%; }
.boxResumoPedidos ul li p 								{ border-bottom: 1px solid #CED4DA; text-transform: uppercase; line-height: 30px; }
.boxResumoPedidos ul li span 							{ font-weight: bold;; line-height: 20px; }
.boxResumoPedidos ul li span.status 					{ background: #FFA508; color: var(--white); display: block; border-radius: 5px; }
.boxResumoPedidos ul li a 								{ background: var(--terciary-500); color: var(--white); width: 100%; display: block; height: 20px; line-height: 20px; text-align: center; border-radius: 5px; }

/* index */
.rowBanner { padding: 150px 0 50px; width: 100%; background-size: cover; background-position: center;}
.rowBanner .iconMouse { display: block; width: 27px; height: 50px; background: url(../images/icon-mouse.png); position: absolute; bottom: 15px; left: 50%; transform: translate(-50%, 0%); }
.destaque .container { display: flex; align-items: flex-end; height: 100%; }
.rowBanner .icones img {margin: 0px 0px 35px -15px;}
.bg-cadastro{margin: 10em 0px 35px 2em}
@media (max-width: 767px) {
    .rowBanner { padding: 100px 0 15px;}
    .rowBanner .container .texto h2 { margin: 0px 0 20px; }
    .rowBanner .icones { text-align: center; padding-top: 5px; margin-left: 0%;}
    .rowBanner .icones-pagina-cadastro { text-align: center; padding: 15px 0 10px; }
    .rowBanner .icones-pagina-principal { text-align: center; padding: 35px 0 35px; }
    .rowBanner .icones img { height:25px; margin: 0px 0px 5px -15px }
    .rowBanner .icones h2 { margin: 0px 0px 10px 0px; font-size: 24px}
    .rowBanner .icones h4 { margin: 2px 0px 10px 0px; font-size: 28px; font-family: var(--fonte-principal);}
    .bg-cadastro{margin: 0px;}
    .simule-gratuitamente-cadastro{color: black !important; font-size: 2.5vh; font-weight: bold;}
}

.icon-scroll, .icon-scroll:before { position: absolute; left: 50%; }
.icon-scroll { width: 30px; height: 50px; margin-left: -20px; bottom: 30px; margin-top: -35px; -webkit-box-shadow: inset 0 0 0 1px var(--white); box-shadow: inset 0 0 0 1px var(--white); border-radius: 25px; }
.icon-scroll:before { content: ''; width: 8px; height: 8px; background: var(--white); margin-left: -4px; top: 0; border-radius: 4px; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: scroll; animation-name: scroll; }
@-webkit-keyframes scroll {
  0% { opacity: 1; }
  100% { opacity: 0; -webkit-transform: translateY(46px); transform: translateY(46px); }
}
@keyframes scroll {
  0% { opacity: 1; }
  100% { opacity: 0; -webkit-transform: translateY(46px); transform: translateY(46px); }
}

.rowChamada { padding: 30px 0; background-color: var(--secondary-500); filter: grayscale(var(--grayscale));}
.rowChamada h4 { color: var(--primary-500); }

.rowSimulacao { background-color: var(--white); padding: 50px 0; }
.formSimulacao { border: 1px solid #CED4DA; background: var(--white); padding: 20px; }
.formSimulacao h2 { color: #003547; font-size: 16px; font-weight: bold; text-transform: uppercase; }
.formSimulacao .form-control { margin-top: 20px; }
.formSimulacao .simuladorHome { margin: 20px 0 0; }
.formSimulacao button { background: var(--terciary-500); color: var(--white); text-transform: uppercase; margin: 0 auto 20px; border: none; display: block; height: 40px; padding: 0 20px; font-weight: 18px; font-weight: bold; transition: all 0.2s linear 0.2s; }
.formSimulacao button:hover { background: var(--primary-500); transition: all 0.2s linear 0.2s; }
.formSimulacao small { font-size: 12px; text-align: center; display: block; }
.formSimulacao small a { color: #003547; text-decoration: underline; }
.formSimulacao ul.listParcelas { list-style: none; margin: 0 0 20px; padding: 0; overflow: hidden; text-align:center; }
.formSimulacao ul.listParcelas li { width:14%; margin:0 1%; display:inline-block; }
.formSimulacao ul.listParcelas li p { border: 1px solid #CED4DA; background: #E6E6E6; border-radius: 5px; margin-bottom: 10px; text-align: center; padding: 10px; }
.formSimulacao ul.listParcelas li span { display: block; }


.rowVantagens { 
    /* background: url(../images/senhora-simpatica.png) right no-repeat; 
    background-size: 1260px; 
    margin-right: -150px; 
    background-position: -26%; 
    padding: 40px 0; 
    min-height: 440px; 
    margin-top: 1%;
    */
    width: 100%; 
}
.rowVantagens h2 { text-align: center; font-size: 26px; text-transform: uppercase; margin-bottom: 30px; }

.rowVantagens h1 {
    font-size: 30px;
    color: var(--primary-500);
}
.rowVantagens .circle {
    background-color: var(--white);
    height: 70px;
    width: 70px;
    border-radius: 100%;
    padding: 0;
    display: grid;
    -webkit-box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.25);
}
.rowVantagens .circle img {
    place-self: center;
    height: 45px;
    max-width: 45px;
}
.rowVantagens .porque-descricao-icones{
    padding-top: 15px;
}
.rowVantagens .icone-porque{
    padding-bottom: 15px;
}
.rowVantagens .sessao-porque{
    padding-top: 45px;
}

.rowVantagens h2 span { font-weight: bold; }
.rowVantagens ul { margin: 0; padding: 0; list-style: none; }
.rowVantagens ul li { overflow: hidden; margin-bottom: 10px; }
.rowVantagens ul li img { float: left; }
.rowVantagens .right { float: right; width: 80%; }
.rowVantagens ul li h3 { text-transform: uppercase; color: var(--gray-200); font-weight: bold; margin-top: 0; }
@media (max-width: 767px) {
    .form-control{width: 100%;}
    .rowVantagens > div:first-child { margin-bottom: -35%; z-index: 1; }
    .rowVantagens div h1{ text-align: center; }
    .rowVantagens .right { float: none; width: 100%; }
    .rowVantagens .sessao-porque{ padding-top: 0px;}
    .rowVantagens .circle {
        background-color: var(--white);
        height: 50px;
        width: 50px;
        border-radius: 100%;
        padding: 9px;
        padding-left: 15px;
        -webkit-box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.25);
    }
    .rowVantagens .circle img {
        height: 25px;
    }
    .rowVantagens .icone-porque .icone-descanso {
       margin-left: -12px;
        height: 27px;
        padding-top: 0px;
    }
    .rowVantagens .porque-descricao-icones{
        margin-left: -15px;
        font-weight:bold;
        color: var(--primary-500);
    }
    footer h3.titleFooter { margin: 25px 0 20px; }

}


.rowDepoimentos { padding: 50px 0; background: var(--primary-500); text-align:center; font-weight: bold;}
.rowDepoimentos h2 { text-align: center; font-size: 26px; text-transform: uppercase; margin-bottom: 30px; }
.rowDepoimentos h2 span { font-weight: bold; }
.rowDepoimentos .owl-item { margin-bottom: 30px; }
.owl-dots { text-align: center; }
.owl-dots .owl-dot { display: inline-block; margin: 0 2px; border: 1px solid var(--terciary-500); background: var(--white); height: 5px; width: 30px; }
.owl-dots .owl-dot.active { background: var(--terciary-500); width: 50px; }

.rowCTA { background: url(../images/bg-row-cta.jpg) top center no-repeat; padding: 50px 0; }
.rowCTA h2 { font-size: 30px; color: var(--white); font-weight: bold; text-transform: uppercase; }
.rowCTA p { font-size: 16px; color: var(--white); margin-bottom: 50px; }
.rowCTA a { font-size: 18px; color: var(--white); font-weight: bold; background: var(--terciary-500); text-transform: uppercase; width: 400px; height: 50px; line-height: 50px; text-align: center; display: block; margin: 0 auto; transition: all 0.2s linear 0.2s; }
.rowCTA a:hover { background: var(--primary-500); transition: all 0.2s linear 0.2s;  }

.rowNoticias { background: var(--white); padding: 30px 0; }
.rowNoticias h1 { text-align: center; margin-bottom: 30px;  color:var(--primary-500);}
.rowNoticias h2 span { font-weight: bold;}
.listNoticias { margin: 0 0 30px 0; padding: 0; list-style: none; overflow-y: hidden; }
.listNoticias li { margin-bottom: 12px; }
.listNoticias li .boxImgData { position: relative; }
.listNoticias-pequeno li .boxImgData img {    width: 100% !important; max-height: 200px !important;min-height: 200px;  border-radius: 10px 10px 0px 0px; }
.listNoticias li .boxImgData img { width: 100%; max-height: 200px; display: block; }
.listNoticias li .boxImgData div { background: rgba(0,54,72, 0.8); padding: 10px 20px; position: absolute; top: 0; left: 0; }
.listNoticias li .boxImgData div p { color: var(--white); text-align: center; margin: 0; }
.listNoticias li .boxImgData div p.dia { font-size: 20px; }
.listNoticias li .boxImgData div p.mes { font-size: 24px; text-transform: uppercase; font-weight: bold; }
.listNoticias li .boxImgData div p.ano { font-size: 14px; }
.listNoticias li .boxInfoNoticia { background: var(--white); padding: 20px; background-color:var(--gray-100); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;  box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.25); }
.listNoticias li .boxInfoNoticia h3 { margin-top: 0; font-size: 16px; text-transform: uppercase; line-height: 20px; height: 40px; overflow: hidden; color: var(--gray-200); font-weight: bold; }
.listNoticias li .boxInfoNoticia p { line-height: 20px; height: 80px; overflow: hidden; color: var(--gray-300); margin-bottom: 20px; }
.listNoticias li .boxInfoNoticia .left { color: var(--terciary-500); }
.listNoticias li .boxInfoNoticia .right { float: right; color: var(--gray-200);}
.listNoticias li:hover .boxInfoNoticia h3 { color: var(--terciary-500); }
.listNoticias li:hover .boxInfoNoticia p { color: var(--gray-200); }


.btTodas { width: 80%; height: 50px; line-height: 50px;  text-align: center;  background-color: var(--primary-500); border-radius: 5px; text-align:center; color: var(--white); margin-bottom:15px; margin-right:15px;  font-weight: bold; display: block;  }
.btTodas:hover {color: var(--white); background-color: var(--primary-500);} /*Make a transition*/
.hrbtTodas hr{
    margin-top: -40px;
    border-top: 2px solid var(--primary-500);
    width: 200%;
    margin-left: -60%;

}

.rowContador { background: url(../images/bg-contador.jpg) top center; padding: 50px 0; }
.rowContador ul { margin: 0; padding: 0; list-style: none; overflow-y: hidden; }
.rowContador ul li p { text-align: center; color: var(--white); font-weight: bold; margin-bottom: 0; font-size: 30px; text-transform: uppercase; }
.rowContador ul li span { text-align: center; display: block; color: var(--white); font-size: 18px; }

.rowParceiros { padding: 50px 0; }
.rowParceiros h1 {
 text-align: center; font-size: 26px; text-transform: uppercase; margin-bottom: 30px;
    font-size: 25px;
    color: orange;
}
.rowParceiros h2 { text-align: center; font-size: 26px; text-transform: uppercase; margin-bottom: 30px; }
.rowParceiros h2 span { font-weight: bold; }
.rowParceiros ul { margin: 0; padding: 0; text-align: center; }
.rowParceiros ul li { display: inline-block; }
.rowParceiros ul li img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }
.rowParceiros ul li img:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); }

/* sobre nós*/
.rowBgInterna h2 {
    color: var(--white); font-size: 30px; font-weight: bold;
}
.rowBgInterna .h2 { text-align: left; font-size: 30px; font-weight: bold;
}

.compInterna { float: right; }
.compInterna p { float: left; line-height: 30px; margin: 0 10px 0; color: var(--white); font-weight: bold;}
.compInterna ul { float: left; margin: 0; padding: 0; list-style: none; }
.compInterna ul li { display: inline-block;  }
.compInterna ul li button, .compInterna ul li a { padding:0; border: none; background: none; }
.compInterna ul li i { 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    line-height: 30px; 
    background: var(--primary-500); 
    color: var(--white);
    border-radius: 20px; 
}
.compInterna ul li:hover i {
    background: var(--gradient-light); 
}

.texto p { color: var(--gray-200); }
.texto p b, .texto p strong { font-weight: bold; }
.texto p a { color: var(--terciary-500); text-decoration: underline !important; }
.texto h2 { text-transform: uppercase; color: var(--terciary-500); font-size: 18px; font-weight: bold; }

/* Bg's */
.rowBgSobre, 
.rowBgComo, 
.rowBgEmprestimo, 
.rowBgDuvida, 
.rowBgBlog, 
.rowBgContato{ 
    background: var(--primary-500);
    background-size: cover;
    background-position: center center;
}


/* contato */
.formContato { border: 1px solid #DED4DA; overflow: hidden; padding: 20px 0; border-radius: 5px; background: #e6e6e6; }
.formContato label { text-transform: uppercase; }
.formContato textarea { resize: none; }
.formContato button { 
    background: var(--secondary-500); 
    filter: grayscale(var(--grayscale));
    border: none; 
    border-radius: 5px; 
    width: 100%; 
    height: 40px; 
    text-transform: uppercase; 
    color: var(--white); 
    font-size: 16px; 
    font-weight: bold; 
    transition: all 0.2s linear 0.2s; 
}
.formContato button:hover {
    filter: none; 
    transition: all 0.2s linear 0.2s; 
}

.infoContato p { line-height: 30px; color: var(--terciary-500); margin-bottom: 20px; line-height: 50px; }
.infoContato p i { border: 1px solid #DED4DA; background: #e6e6e6; margin-right: 10px; color: var(--terciary-500); width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 30px; border-radius: 100px; }
.infoContato p.numTel { font-size: 30px; font-weight: bold; }
.infoContato a { 
    width: 48%; 
    height: 40px; 
    line-height: 40px; 
    font-size: 18px; 
    margin-bottom: 20px; 
    border-radius: 5px; 
    transition: all 0.2s linear 0.2s; 
    font-weight: bold; 
    background: var(--secondary-500); 
    filter: grayscale(var(--grayscale));
    color: var(--white); 
    text-align: center; 
    text-transform: uppercase; 
    display: inline-block; 
}
.infoContato a:hover {  
    transition: all 0.2s linear 0.2s;
    filter: none;
}
.infoContato address { color: var(--terciary-500); }
.infoContato address i {border: 1px solid #DED4DA; background: #e6e6e6; margin-right: 10px; color: var(--terciary-500); width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 30px; border-radius: 100px; }
.infoContato p.horaContato { font-weight: bold; line-height: 20px; }
.infoContato p.horaContato span { display: block; font-weight: 300; }
.infoContato p.emailContato { padding-top: 5px }

/* blog */
.formBusca { border: 1px solid #DED4DA; background: #e6e6e6; padding: 10px; margin-bottom: 20px; }
.formBusca .form-group { position: relative; margin: 0; }
.formBusca .form-group button { position: absolute; top: 7px; right: 10px; background: none; border: none; color: var(--terciary-500); }

.listCategorias { border: 1px solid #DED4DA; background: #e6e6e6; margin-bottom: 20px; }
.listCategorias h3 { margin: 0; padding: 10px; text-align: center; font-size: 18px; background: var(--terciary-500); color: var(--white); font-weight: bold; text-transform: uppercase; }
.listCategorias ul { margin: 0; padding: 10px; list-style: none; }
.listCategorias ul li { border-bottom: 1px solid #DED4DA; }
.listCategorias ul li:last-child { border: none; }
.listCategorias ul li a { line-height: 40px; color: var(--gray-200); display: block; }
.listCategorias ul li a:hover { background: var(--white); padding-left: 10px; }

.boxNews { border: 1px solid #DED4DA; background: #e6e6e6; margin-bottom: 20px; }
.boxNews h3 { margin: 0; padding: 10px; text-align: center; font-size: 18px; background: var(--terciary-500); color: var(--white); font-weight: bold; text-transform: uppercase; }
.boxNews .formNewsAside { padding: 10px; }
.boxNews .formNewsAside legend { font-size: 14px; }
.boxNews .formNewsAside button { text-transform: uppercase; font-size: 16px; font-weight: bold; background: var(--primary-500); color: var(--white); width: 100%; height: 40px; border: none; border-radius: 5px; transition: all 0.2s linear 0.2s; }
.boxNews .formNewsAside button:hover { background: var(--terciary-500); transition: all 0.2s linear 0.2s; }

.boxNoticia { border: 1px solid #DED4DA; background: #F7F7F7; padding: 20px; margin-bottom: 30px;font-family:Arial, Helvetica, sans-serif; color:black; text-transform: none; }
.tituloBox{font-size: 27px; font-weight: bold;}
.descricaoTitulo{font-size: 21px;}
.tituloConteudo{font-size: 19px; font-weight: bold;}
.blogConteudo{font-size: 16px;}

.boxRedes { border: 1px solid #DED4DA; background: #e6e6e6; margin-bottom: 20px; }
.boxRedes h3 { margin: 0; padding: 10px; text-align: center; font-size: 18px; background: var(--terciary-500); color: var(--white); font-weight: bold; text-transform: uppercase; }
.boxRedes .face { padding: 10px; text-align: center; }

.deucredito-highlight{
    color: #5d2aae;
}



/* Telefones em paisagem a tablet em retrato */
@media (max-width: 767px) {
	.navbar-toggle						{ margin: 0 auto; display: block; float: none; padding: 10px 30px; margin-bottom: 10px }
	.icon-bar							{ background-color: var(--white); }
	header nav.menuHeader ul			{ margin: 0; }
	header nav.menuHeader ul li a		{ background: var(--secondary-500); color: var(--white); text-align: center; }
	.boxResumoPedidos ul li				{ width: 100%; }
	.boxTipoDisponivel h3				{ Text-align: center; }
	.formRefinPorta .boxTipoDisponivel ul li { border-width: 0 0 1px 0; border-style: solid; border-color: #CED4DA; padding: 10px; }
    .boxResumo ul li { width: 100%; float: none; padding: 20px; }
    .boxResumo { margin-top: 20px }
    .boxFormulario { margin-top: 80px; }
    .rowContador ul li { margin-bottom: 20px; }
    .destaque .container .texto h3 { font-size: 20px; }
    .rowContador ul li, .destaque .container .texto h2 { font-size: 20px; }
    .destaque .container .texto .btn { font-size: 15px; }
    .destaque img { max-width: 100%; height: auto; display: block; }
    #destaques .carousel-control { display: none; }

    .rowCTA a { width: 100%; font-size: 15px; }

    .rowBgInterna .h2 { padding-top: 100px;}
    .rowBgInterna h2 { padding-top: 0px; font-size: 22px;}
    .formSimulacao ul.listParcelas li { width: 45%; }
    .icon-scroll { display: none; }
    .listNoticias li .boxInfoNoticia {margin-bottom: 15px;    margin-bottom: 15px;}
    .listNoticias-pequeno li .boxImgData img { height: 100% !important; width: 100% !important;  border-radius: 10px 10px 0px 0px; }
    .btTodas { width: 100%; }
}

/* Tablet em retrato a paisagem e desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .rowVantagens { grid-template-columns: 100%; }
    .rowVantagens  { max-width: 100%; width: auto; }
    .rowVantagens  { transform: translateX(-50px); }
    .boxInfoFooter, .boxMenusFooter		{ margin-bottom: 30px; }
    .listNoticias-pequeno li .boxImgData img { height: 100% !important; width: 100% !important;  border-radius: 10px 10px 0px 0px; }
    .boxFormulario { margin-top: 110px; }
    .white {text-align: center;margin-left: 5%;}
    .bg-cadastro{margin-top: 5%;}
    .icones-pagina-cadastro{ text-align: center; padding: 15px 0 10px;}
    .simule-gratuitamente-cadastro{color: white; font-weight: bold;font-size: 3.5vh;}
    header h1.logo a img {margin: 30% 25% 0px -15%;}
    .container::after{content: none;}
    .container::before{content: none;}  
   

}

@media (max-width: 500px) {
    .boxFormulario { margin-top: 20px; }
}

/* Tablet em retrato a paisagem e desktop */
@media (min-width: 1023px) and (max-width: 1026px) {
    body {width: 117%;}
    .boxInfoFooter, .boxMenusFooter		{ margin-bottom: 30px; }
    .formSimulacao ul.listParcelas li { width: 20%; }
    .mensagem-banner-primeira-linha{display: inline;}
    .mensagem-banner-segunda-linha{margin-top: 0px; margin-left: 0;}
}

.texto-banner {
    font-family: Lato, Ubuntu, sans-serif;
    font-size: 28px;
    color: white;
}

#clockdiv{
  font-family: sans-serif;
  color: var(--white);
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}

#clockdiv > div{
  padding: 10px;
  border-radius: 3px;
  background: #0c7ad1;
  display: inline-block;
}

#clockdiv div > span{
  padding: 15px;
  border-radius: 3px;
  background: #0b5bbc;
  display: inline-block;
}

#clockdiv .smalltext{
  padding-top: 5px;
  font-size: 16px;
}

.whats-barra-mobile {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #0a354b;
    }

.no-webp  {
  background-image: url(../images/banner-01.jpg);
}

.webp {
  background-image: url(../images/banner-01.webp);
}

.porque-descricao-icones {
    color: silver;
}

.icone-whats {
      position: fixed;
      right: 15px;
      bottom: 10px;
      width: 65px;
      height: 65px;
      background-image: url(../images/whats-icon.png);
      z-index: 100002;
    }

.link-whats-duvidas { color: var(--white); }
.link-whats-duvidas:hover { color: var(--secondary-500); }

.powerzap_open_button_iframe {display: none !important;}

.form-cadastro-contato                      { color: var(--terciary-500); }
.box-formulario-contato h3                  { padding-top: 5px }
.box-formulario-contato .legenda-contato    { font-size: 21px; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px }
.box-formulario-contato                     { margin-top: 0px; }

@media (min-width: 500px) {
    .form-cadastro-contato                     { margin-top: 100px; }
}
@media (min-width: 1000px) {
    .form-cadastro-contato                     { margin-top: 0px;}
}

.form-cadastro-contato .error               { color: red; font-weight: normal; }
.campo-obrigatorio                          { color: red; }


/*Ajuste Fino*/

@media (min-width: 980px) and (max-width: 991px) {
    header h1.logo a img{margin: 30% 25% 0px -15%;}
    .bg-cadastro{margin: 0; margin-left: 25%;}
}

@media (min-width: 1023px){
    .rowVantagens { grid-template-columns: 50% 50% !important; }
    .row::before{content: none;}
    .row::after{content: none;}
}


/*error message, passar depois para um custom file*/
.mensagem-pagina-error{color: black;}

.toast-background {
    backdrop-filter: blur(3px) saturate(130%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999994;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
}
.toast {
    max-width: 350px;
    overflow: hidden;
    background-color: rgba(255,255,255,.85);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* opacity: 0; */
    border-radius: .25rem;
}
.toast + .toast {
    margin-top: 0.8rem;
}

.toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem .75rem;
    color: #6c757d;
    background-color: rgba(255,255,255,.85);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.toast-body {
    padding: .75rem;
    word-break: break-word;
}

.toast-content {
    font-weight: bold;
}
.toast-content > p {
    margin: 16px 0 0 0;
}
.toast-button {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 6px;
}

.toast-button > .botao-adicionar {
    padding: 12px 12px;
    margin: 0;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-500);
    color: var(--white);
    font-weight: bold;
}