* {
  box-sizing: border-box;
  max-width: 100%;
  
}

body{
    
    background-color: #dadada;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* estilização das divs do header */

.header-esq {
  width: 20%;
  height: 200px;
  float: left;
  padding: 15px;
  padding-left: 30px;
 /* border: 1px solid red; */
  background-color: rgb(255, 255, 255);
}

.header-dir {
    width: 23%;
    height: 200px;
    float: left;
    padding: 15px;
    padding-right: 30px;
  /* border: 1px solid red; */
    background-color: rgb(255, 255, 255);
  }

.header-meio {
  width: 57%;
  height: 200px;
  float: left;
  padding: 15px;
  padding-right: 45px;
  /* border: 1px solid red; */
  background-color: white;  
}

/* estilização das logos do header */

#logo-esq {
    display: block;
    width: min(18vw, 200px);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-right: auto;
    margin-left: auto;
    
  }

#logo-dir {
    display: block;
    width: min(18vw, 400px);
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
    margin-left: auto;
    margin-right: auto;
  }
  
.topo {
	width: 100%;
	position: relative;
}


 /* estilização dos textos do header */

#texto-header-1 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 4%;
    font-weight: bold;
    font-size: calc(16px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: 1.4;

}

#texto-header-2 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 1%;
    color: red;
    font-weight: bold;
    font-size: calc(16px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

 /* estilização do texto da página inicial */

#div-texto-pag-inicial{
	margin-top: 6vh;
	padding-top: 6vh;
	padding-left: 20px;
	padding-right: 20px;
	height: 200px;
	max-width: 100vw;
}

#texto-pag-inicial-h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(16px + (30 - 14) * ((100vw - 300px) / (1600 - 300)));
	font-weight: bold;
	text-align: center;
}

div.g-recaptcha {
  margin: 0 auto;
  width: 615px;
  margin-left: 11vh;
}


.wrap-captcha{
	background-color: red; 
	display:inline-block;
}
    
/* estilização do botão "Simulação" da página inicial */

#div-btn{
	align-items: center;
}

.ui-button {
    border: 1px solid #ac1c1c;
    margin-right: 5.5vw !important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #9e2424;
    border-color: #9e2424;
}

.ui-button .ui-button-text {
    background-color: #ac1c1c;
    text-shadow: initial;
    color: #000000;
    font-weight: bold !important;
    font-size: 20px; 
    border-radius: 3px !important;
    line-height: 1.6 !important;
    height: 50px;
    width: 250px;
    align-items: center;
    justify-content: center;
    border: 1px solid #9e2424;
}

.ui-button .ui-button-text:hover {
    background-color: #9e2424;
    border: 1px solid #9e2424;
}

/* ajusta a mensagem de erro no campo 1- valor da contribuição */


.duvida-tooltip, .erro-tooltip, .info-tooltip{
	width: 50vh;
	}

.div, .col-sm-1, .erro-tooltip{
	margin-right: 500px;
}



/* Ajusta a margem do formulário, para que tenham espaços entre a borda da tela e ele */

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

/* estilização do footer */

#footer{
	position: fixed;
  	bottom: 0;
  	width: 100%;
  	padding-left: 15px;
  	padding-top: 5px;
  	padding-right: 15px;
  	margin: 0;
  	height: 5vh;

}

/* div para criar espaço entre footer e conteúdo (página inicial) e entre o header e o form (página do cálculo  */
.push{
	height: 80px;
}

.push-form{
	height: 30px;
}


/* Para ajuste das mensagens de erro do formulário */


.ui-messages ui-widget {
	max-height: 20px !important;
}

.erro-tooltip{
	color: black !important;
	font-size: calc(7px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
	
}


/* Para responsividade */

@media screen and (max-width: 900px) {
	
  #texto-header-1 {
    font-size: calc(7px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    font-weight: bold;
  }
  
  #texto-header-2 {
    font-size: calc(10px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
    font-weight: bold;
  }
  
  .header-esq, .header-dir, .header-meio{
  max-height: 12vh;
  }
  
  .header-meio {
  padding-right: 15px;  
}
  
  #logo-esq, #logo-dir{
  width: min(14vw, 200px);
  }
  
  #div-texto-pag-inicial{
	margin-top: 80px;
}
  
  #texto-pag-inicial-h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(16px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

div.g-recaptcha {
  margin: 0 auto;
  width: 615px;
  margin-left: 0;
}

.ui-button {
    border: 1px solid #ac1c1c;
    margin-right: 0 !important;
}

.push-form{
	height: 100px; ;
}

#footer{
	position: fixed;
  	bottom: 0;
  	width: 100%;
  	padding-left: 15px;
  	padding-right: 15px;
  	padding-bottom: 5px;
  	margin: 0;
    height: auto;
    align-items: center;
}
}

@media screen and (min-width: 2560px) {

  #texto-header-1 { 
    padding-top: 2%;
    font-size: calc(28px + (30 - 28) * ((100vw - 300px) / (2560 - 300)));
    font-weight: bold;
}
  
  #texto-header-2 {
    font-size: calc(28px + (30 - 28) * ((100vw - 300px) / (2560 - 300)));
    font-weight: bold;
  }
}

@media screen and (min-width: 3840px) {

   #texto-header-1 { 
    padding-top: 0.8%;
    font-size: calc(30px + (32 - 30) * ((100vw - 300px) / (3840 - 300)));
    font-weight: bold;
}
  
  #texto-header-2 {
    font-size: calc(28px + (30 - 28) * ((100vw - 300px) / (3840 - 300)));
    font-weight: bold;
  }
}

@media screen and (min-width: 5120px) {

	#texto-header-1 { 
    padding-top: 0.6%; 
    font-size: calc(32px + (34 - 32) * ((100vw - 300px) / (5120 - 300)));
    font-weight: bold;
}
  
  #texto-header-2 {
    padding-top: 0.6%;
    font-size: calc(30px + (32 - 30) * ((100vw - 300px) / (5120 - 300)));
    font-weight: bold;
  }
}