.cima {
  background-color: #fff; 
  width: 100vw; 
  max-width: 1040px; 
  position: absolute; 
  z-index: 999; 
  margin-top: 30px; 
  box-shadow: 1;
  left: 50%; 
  transform: translateX(-50%); 
  height: 75px;
  border-radius: 20px; 
  margin-right:0px; 
  margin-left:0px;
  border: 2px solid #62179A;
}

.logo {
  width: 180px; 
  float: left;
  margin-top: 10px;
}

.numero{
  text-align: right; 
  line-height: 75px; 
  font-family: arial;
}

.numero_atual{
  font-size: 44px; 
  color: #62179A;
}

.numero_total{
  font-size: 28px; 
  color: #62179A;
}

.roxo {
  width:100%; 
  height: 100vh; 
  margin:0px
}

.roxo_teste{
  background-color: #62179A;
  width:100%
}

.roxo_teste_texto {
  width: 100%; 
  margin-top:140px; 
  float:right; 
  max-width: 500px;
}

.roxo_teste_texto_pergunta {
  font-size: 25px; 
  line-height:25px; 
  color:white
}

.roxo_teste_texto_img {
  width: 100%; 
  margin-top:20px;
}

.cancelar{
  width: 160px;
  padding: 10px; 
  text-align:center; 
  border-radius: 25px; 
  margin-top: 50px; 
  border: solid 2px #62179A;
  font-size:16px;
  color: #62179A;
  background-color: #fff;
}

.cancelar:hover{
  width: 160px;
  padding: 10px; 
  text-align:center; 
  border-radius: 25px; 
  margin-top: 50px; 
  border: solid 2px #62179A;
  font-size:16px;
  color: #fff;
  background-color: #62179A;
}

.perguntas{
  width: 100%; 
  height: 100px; 
  margin-top:140px; 
  max-width: 500px;
}

.pergunta_primeira{
  font-size: 25px; 
  line-height:26px; 
  color:grey;
  margin-bottom: 40px;
}

.pergunta_outra{
  width: 100%; 
  background-color: #62179A; 
  padding: 10px; 
  text-align:center; 
  border-radius: 25px; 
  margin-top: 10px;
  color: #fff;
  font-size:20px;
  border: solid 2px #62179A;
}

.pergunta_outra:hover{
  width: 100%; 
  background-color: #fff; 
  padding: 10px; 
  text-align:center; 
  border-radius: 25px; 
  margin-top: 10px;
  color: #62179A;
  font-size:20px;
  border: solid 2px #62179A;
}

.voltar{
  margin-top: 20px; 
  border-radius: 20px; 
  background-color: #00A859; 
  color: #fff; 
  width: 200px;
}

.voltar:hover{
  margin-top: 20px; 
  border-radius: 20px; 
  background-color: #60BF89; 
  color: #fff; 
  width: 200px;
}

.cancelar_teste{
  margin-top: 20px; 
  border-radius: 20px; 
  background-color: #EA3464; 
  color: #fff; 
  width: 200px;
}

.cancelar_teste:hover{
  margin-top: 20px; 
  border-radius: 20px; 
  background-color: #EA5A7F; 
  color: #fff; 
  width: 200px;
}

.metade {
  width: 100%;
  background-color: #62169A;
  padding-bottom: 40px;
  padding-top: 60px;
}

.logo_metade {
  width: 220px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.titulo_metade {
  color: #fff;
}

.titulo_metade_baixo {
  color: #62169A;
  margin-top: 20px;
}


.form_titulo {
  margin-top: 20px;
  font-size: 18px;
  color: #62169A;
  margin-bottom: -5px;
}

.form_nome {
  text-align: center;
  font-size: 18px;
  color: #62169A;
  padding: 8px;
  width: 300px;
  border-radius: 50px;
  border: 4px solid #62169A;
  margin-top: -20px;
}

.form_idade {
  text-align: center;
  font-size: 18px;
  background-color: #62169A;
  color: #fff;
  padding: 8px;
  width: 100px;
  border-radius: 50px;
  border: 4px solid #62169A;
  margin-top: -20px;
}

.form_proximo {
  border: none;
  background-color: #62169A;
  font-size: 22px;
  color: #ffffff;
  width: 300px;
  border-radius: 50px;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
}

.form_proximo:hover {
  background-color: rgb(148, 62, 210);
  color:#fff;
}

.form_unidade {
  text-align: center;
  font-size: 18px;
  background-color: #62169A;
  color: #fff;
  padding: 8px;
  width: 300px;
  border-radius: 50px;
  border: 4px solid #62169A;
  margin-top: -20px;
}

.form_local {
  text-align: center;
  font-size: 18px;
  background-color: #62169A;
  color: #fff;
  padding: 8px;
  width: 200px;
  border-radius: 50px;
  border: 4px solid #62169A;
  margin-top: -20px;
}

.destaque {
  background-color: #62169A;
  color: #fff;
}

.form_outro {
  background-color: #00AFEF;
  font-size: 22px;
  color: #fff;
  width: 300px;
  border: none;
  border-radius: 50px;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
}

.form_outro:hover {
  background-color: #6CC9EB;
}

.form_site {
  background-color: #47B976;
  font-size: 22px;
  color: #fff;
  width: 300px;
  border: none;
  border-radius: 50px;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
}

.form_site:hover {
  background-color: #7DC89D;
}

@media(max-width: 480px) {

  .cima {
    background-color: #fff; 
    width: 100vw; 
    max-width: 1040px; 
    position: relative; 
    z-index: 999; 
    margin-top: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    height: 75px;
    box-shadow: 0px 0px 0px black;
    border-radius: 0px; 
    margin-right:0px; 
    margin-left:0px;
    margin-top: 10px;
    border: none;
  }

  .roxo {
    width:100%; 
    height: auto; 
    margin:0px;
  }

  .roxo_teste_texto {
    width: 100%; 
    margin-top:20px; 
    float:right; 
    max-width: 500px;
    margin-bottom: 20px;
  }

  .perguntas{
    width: 100%; 
    height: 100px; 
    margin-top:40px; 
    max-width: 500px;
  }

  .logo {
    width: 140px; 
    float: left;
    margin-top: 8px;
  }

  .titulo_metade {
    color: #fff;
    font-size: 22px;
    margin-bottom: -15px;
    margin-top: -10px;
  }

  .logo_metade {
    width: 180px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .titulo_metade_baixo {
    color: #62169A;
    margin-top: 20px;
    font-size: 18px;
  }

  .roxo_teste_texto_pergunta {
    font-size: 18px; 
    line-height:25px; 
    color:white
  }

  .pergunta_primeira{
    font-size: 18px; 
    line-height:26px; 
    color:grey;
    margin-bottom: 30px;
  }


}