/*aqui, o css principal do site*/

/*import das variaveis e cores*/
 @import "cores-coral.css"; 


/*fonts*/
@font-face {font-family: 'padrao';src: url("../fonts/futura.ttf");}
@font-face {font-family: Gloss And Bloom; src: url('../fonts/Gloss_And_Bloom.ttf');}
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@font-face {font-family: 'neutra'; src: url('../css/font/NeutraDisplay-Medium.otf');}

*{font-family: 'Roboto', sans-serif;}

a[data-step-zero]{text-decoration:none!important; background: #B82037;color: white;padding:10px;border-radius:10px;width:140px;font-size: 16px;}
a[data-step-up]{text-decoration:none!important; background:#B82037 ;color: white;padding:10px;border-radius:10px;width:115px;font-size: 16px;}
a[data-step-down]{background: none; color: #B82037;cursor: pointer;}
a[data-step-down]:hover{text-decoration: underline!important;}
.links:hover {color: #535760!important;}
u:hover {color: #535760;}



/*cabecalho*/
header {display: flex;background: #ffffff;justify-content: center}
header h3 {font-family: 'Roboto', sans-serif;color: #AA1E0D;}
header h4 {font-weight: bold;color:#AA1E0D;margin-bottom: 0 !important;}
header h6 {font-weight: 100;color: #AA1E0D;}
header h4 span {font-weight: normal;}
header ul {margin-bottom: 0;}
.social{float: right;}
.social li {padding: 0px 10px;}
nav {background-color: #fff;}
nav li {padding: 0px 10px;}
.navbar-light .navbar-nav .nav-link{color: #fff;}
.social ul {justify-content: center;padding-left: 0px;}
.topo {display: flex;flex-direction: column;}
  
/*Logo*/
.logo{width: 38%;margin-bottom: 0px;display: flex;align-items: center;justify-content: flex-end;}
.logo img {width: 130px;margin-right: 40px;}
/* Formulário */
.form-progress {display: flex;padding: 10px;justify-content: space-around;}
.form-progress .step {border: 3px solid #A51D0D;padding: 7px 15px;border-radius: 27px;font-weight: bold;margin-right: -2px;background-color: #fff;}
.form-progress .line {height: 15px;width: 100%;margin-top: 14px;border: 3px solid #fff;border-left: none;border-right: none;margin-right: -1px;}
.form {display: flex;flex-direction: column; align-items: center;text-align:center;}
.form-group{max-width:90%;}
.step.done, .step.step.done + .line{color: #fff;background-color: #A51D0D;}
.box-step{display: none;}
#step0{display: block;}
.big {color: #fff;font-weight: bold;font-size: 60px;}
.box-step h2 {font-size: 19px;color: #535760;font-family: 'Roboto', sans-serif;} 
label {color: #AA1E0D;}
.textoPrincipal {text-align: center;color: #535760;font-family: 'Roboto', sans-serif;}
.links {color: #535760;}


/*Checkbox*/
.interesse{display:flex;flex-wrap:wrap;text-align: justify;margin-top:1rem;}
.check{margin:0 5px;width: auto;}
select {width:180px!important;}
input{margin-bottom:1rem;}


/*corpo*/
main {margin-top: 2rem;}

/*mobile*/

@media screen and (max-width: 2400px) {
  .textoPrincipal .txt2 {
    max-width: 100%!important;
  }
  .navbar-nav {
    margin-left: 24%!important;
  }
  .cabecalho1 {
    margin: 0px 38%!important;
  }
}

@media screen and (max-width: 1500px) {
  .textoPrincipal .txt2 {
    max-width: 100%!important;
  }
  .navbar-nav {
    margin-left: 40px!important;
  }
  .cabecalho1 {
    margin: 0px 29%!important;
  }
}

@media screen and (max-width: 1024px){
  span.cabecalho1{margin: 0px 24%!important;}
  .logo{width: 50%!important;}
  .navbar-expand-lg .navbar-nav .nav-link{margin: 0px;padding: 0px;}
  nav li{padding: 0px 6px;}
  .navbar-nav{margin-left: 25px!important;}
}

@media screen and (max-width: 770px){
  #step0 {margin-top: 0px!important;}
  .textoTopo {font-size: 20px;color: #27b636;text-align: center;}
  #step1 h2 {margin-top: 0px!important;}
  header img {width: 100%;}
  .container {margin-top: 1rem;}
}

@media screen and (max-width: 768px){
  header {padding: 5px;}
  .img-marca {display: flex;justify-content: center;}
  .img-marca a img{display: block; width:230px;}
  .big {font-size: 35px;}
  .form {margin-bottom: 2rem;}
  .cabecalho{margin: 0px!important;}
  .col-12{display: block;text-align: center;}
  .social li{padding: 0px 15px;}
  .logo{width:100%!important;margin-bottom: 0px;height: auto!important;margin-bottom: 30px;justify-content: center;}
  .interesse{display: block;}
  .txt1 {margin-top: 20px;}
  .txt2 {max-width: none!important;margin: 0px 8%!important;}
  .col-md-8 img {width: 300px!important;height: 100px!important;}
  header {display: grid;text-align: center;}
  header img {width: 100%;}
  #celular {width: 100%!important;}
  .check {display: flex;align-items: baseline;}
  .logo img {margin: 0px;}
  .topo :nth-child(2) {margin-top: 0px!important}
  #marca {width: 60%!important;}
}

@media screen and (max-width:425px) {
  img.logo2 {margin: 20px 70px!important;}
  .topo :nth-child(1) { order: 0; }
  .topo :nth-child(2) { order: 1; } 
  .box-step h2 {max-width: 416px;margin-left: 6px;} 
}

@media screen and (max-width:375px) {
  img.logo2 {margin: 20px 40px!important;}
  .topo :nth-child(1) { order: 0; }
  .topo :nth-child(2) { order: 1; }
  .box-step h2 {max-width: 373px;}
}

@media screen and (max-width:320px) {
  img.logo2 {margin: 20px 11px!important;}
  .topo :nth-child(1) { order: 0; }
  .topo :nth-child(2) { order: 1; }  
  .box-step h2 {max-width: 318px;}
}

@media screen and (max-width:300px) {
  .textoTopo {text-align: center;color: #27b636;font-size: 19px;margin: 10px 10px 0px 10px;}
  .form-control {padding: 0px!important;margin: 5px 0px;text-align: center;}
  .termos {display: inline-block!important;font-size: 12px;}
  .interesse {margin-top: 0px;}
  .form {margin-bottom: 0px;}
  .big {font-size:25px}
  .box-step h2 {font-size: 14px;}
  body {height: auto;}
  .links u:hover{color: #27b636;}
}
