@charset "utf-8";

#exibipesquisa { float: left; width: 100%; padding: 40px 0;}
#exibipesquisa .centro { margin: 0 auto; max-width: 100%;}

#exibipesquisa .capa { float: left; width: 100%; margin: 0 0 20px;}
#exibipesquisa .capa .centro { width: 700px;}
#exibipesquisa .capa .imagem { float: left; width: 100%;}
#exibipesquisa .capa .imagem img { float: left; width: 96%; padding: 2%;}

#exibipesquisa .titulo { float: left; width: 100%; margin: 0 0 20px;}
#exibipesquisa .titulo .centro { width: 700px;}
#exibipesquisa .titulo .centro h1 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 2em; line-height: 1.3;}

#exibipesquisa .descricao { float: left; width: 100%; margin: 0 0 20px;}
#exibipesquisa .descricao .centro { width: 500px;}
#exibipesquisa .descricao .borda { float: left; width: 92%; padding: 10px 4%; font-size: 1.1em; line-height: 1.4;}

#exibipesquisa .conteudo { float: left; width: 100%; min-height: 300px; padding: 0 0 20px; position: relative;}
#exibipesquisa .conteudo .centro { width: 500px;}
#exibipesquisa .conteudo .ajax { float: left; width: 100%;}

#exibipesquisa .conteudo .introducao { float: left; width: 100%;}
#exibipesquisa .conteudo .introducao h3 { float: left; width: 100%; margin: 10px 0; text-align: center;}

#exibipesquisa .conteudo .participacao { float: left; width: 100%;}
#exibipesquisa .conteudo .participacao .c1 { float: left; width: 100%; margin: 20px 0 0;}
#exibipesquisa .conteudo .participacao .c100 { float: left; width: 100%; margin: 20px 0 0; text-align: center;}
#exibipesquisa .conteudo .participacao .nomecampo { float: left; width: 100%; margin: 0 0 2px; font-size: 1.2em; color: (100 100 100);}
#exibipesquisa .conteudo .participacao .nomecampo em { font-style: normal; color: rgb(151 28 28);}
#exibipesquisa .conteudo .participacao .campo { float: left; width: 96%; height: 50px; padding: 0 2%; outline: 1px solid rgb(100 100 100 / 60%); font-size: 1.2em;}
#exibipesquisa .conteudo .participacao .submit { padding: 20px 30px; background-color: rgb(10 138 27); text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: rgb(255 255 255); cursor: pointer;}
#exibipesquisa .conteudo .participacao .submit:hover { background-color: rgb(10 100 27);}

#exibipesquisa .conteudo .quiz { float: left; width: 100%; padding: 30px 0;}
#exibipesquisa .conteudo .quiz .pergunta { float: left; width: 100%; position: relative;}
#exibipesquisa .conteudo .quiz .pergunta .ordem { position: absolute; width: 50px; top: 5px; left: 0; padding: 25px 0; background-color: rgb(63 70 100); text-align: center; font-weight: bold; font-size: 1.1em; color: rgb(255 255 255); line-height: 0;}
#exibipesquisa .conteudo .quiz .pergunta .nome { float: left; width: 100%;}
#exibipesquisa .conteudo .quiz .pergunta .nome h3 { float: left; margin: 0 0 0 60px; font-size: 1.2em; line-height: 1.3;}

#exibipesquisa .conteudo .quiz .alternativas { float: left; width: 100%; margin: 20px 0;}
#exibipesquisa .conteudo .quiz .alternativas .item { float: left; position: relative;}
#exibipesquisa .conteudo .quiz .alternativas .item .nome { float: left; width: 100%;}
#exibipesquisa .conteudo .quiz .alternativas .item .nome h3 { float: left; font-size: 1.2em; line-height: 1.3;}
#exibipesquisa .conteudo .quiz .alternativas .item .textarea { float: left; width: 96%; height: 80px; padding: 10px 2%; outline: 1px solid rgb(100 100 100 / 60%);}
#exibipesquisa .conteudo .quiz .alternativas .item .textarea:focus { outline: 1px solid rgb(55 171 200); -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}
#exibipesquisa .conteudo .quiz .alternativas .item .botao { float: left; padding: 10px 20px; margin: 10px 0 0; background-color: rgb(10 138 27); color: rgb(255 255 255); cursor: pointer;}
#exibipesquisa .conteudo .quiz .alternativas .item .botao:hover { background-color: rgb(10 100 27);}

#exibipesquisa .conteudo .quiz .alternativas .discursiva { width: 90%; margin: 10px 5%;}

#exibipesquisa .conteudo .quiz .alternativas .objetiva { width: 86%; padding: 10px 2% 12px; margin: 5px 5%; outline: 1px solid rgb(100 100 100 / 30%); cursor: pointer;}
#exibipesquisa .conteudo .quiz .alternativas .objetiva .ordem { position: absolute; width: 30px; top: 9px; left: 5px; padding: 15px 0; background-color: rgb(200 200 200); text-align: center; font-weight: bold; color: rgb(100 100 100); line-height: 0;}
#exibipesquisa .conteudo .quiz .alternativas .objetiva .nome h3 { margin: 0 0 0 45px;}
#exibipesquisa .conteudo .quiz .alternativas .objetiva:hover { background-color: rgb(0 0 0 / 5%);}
#exibipesquisa .conteudo .quiz .alternativas .objetiva.ativo { background-color: rgb(0 0 0 / 15%);}

#exibipesquisa .conteudo .quiz .finalizar { float: left; width: 100%; padding: 20px 0; margin: 20px 0; background-color: rgb(10 138 27); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(255 255 255); cursor: pointer;}
#exibipesquisa .conteudo .quiz .finalizar:hover { background-color: rgb(10 100 27);}

#exibipesquisa .informacao { float: left; width: 100%; margin: 50px 0;}
#exibipesquisa .informacao h3 { float: left; width: 100%; text-align: center; font-size: 1.1em;}

#exibipesquisa .obrigado { float: left; width: 100%; margin: 50px 0;}
#exibipesquisa .obrigado h2 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 1.3em;}
#exibipesquisa .obrigado h3 { float: left; width: 100%; margin: 10px 0; text-align: center; font-size: 1.1em;}

#exibipesquisa .loader { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 50; background-color: rgb(0 0 0 / 50%);}
#exibipesquisa .loader .ico { position: absolute; width: 50px; height: 50px; top: 50%; left: 50%; margin: -45px 0 0 -45px; -webkit-animation: loader 1s infinite; -moz-animation: loader 1s infinite; animation: loader 1s infinite; border: 20px solid rgb(255 255 255); border-top-color: rgb(55 171 200);}

#exibipesquisa .aviso { display: none; position: fixed; width: 90%; bottom: 0; left: 0; z-index: 50; padding: 40px 5%; text-align: center; font-size: 1.2em; color: rgb(255 255 255);}
#exibipesquisa .aviso.erro { background-color: rgb(151 28 28);}
#exibipesquisa .aviso.sucesso { background-color: rgb(15 122 113);}
#exibipesquisa .aviso .msg { float: left; width: 90%; margin: 0 5%;}
#exibipesquisa .aviso .x { position: absolute; width: 30px; top: 50%; right: 2%; padding: 15px 0; margin: -15px 0 0; background-color: rgb(0 0 0 / 50%); text-align: center; font-weight: bold; font-size: 0.8em; color: rgb(255 255 255); line-height: 0; cursor: pointer;}
#exibipesquisa .aviso .x:hover { background-color: rgb(0 0 0 / 70%);}

@media only screen and (max-width: 600px){
  #exibipesquisa { padding: 25px 0;}
  #exibipesquisa .titulo .centro h1 { font-size: 1.5em;}
}
@media only screen and (max-width: 500px){
  #exibipesquisa .aviso { padding: 15px 5%;}
}
@keyframes loader {
  to{
    transform: rotate(1turn);
  }
}