@charset "utf-8";

/* ************************************************************************************************************************************
				CONTATO
************************************************************************************************************************************ */

/* RESET DOS ESPAÇAMENTOS */
#ctt_conteudo, #ctt_conteudo *, #ctt_conteudo *:before, #ctt_conteudo *:after { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
#ctt_conteudo .ctt_area_contato_interna { padding-top: 1.5%; }

/* TÍTULO E DESCRIÇÃO */
#ctt_conteudo .ctt_titulo_contato { font-size: 19px; color: #47474b; margin-bottom: 15px; }
#ctt_conteudo .ctt_descricao_contato { font-size: 15px; color: #56565b; line-height: 1.75em; }

/* INFORMAÇÃO CONTATO */
#ctt_conteudo .ctt_area_informacao { max-width: 800px; margin: 20px auto; text-align: center; }

/* CONTEÚDO */
#ctt_conteudo .ctt_conteudo_contato { display: -webkit-flex; gap: 40px; margin-top: 3.5%; }

/* FORMULÁRIO */
#ctt_conteudo .ctt_formulario_contato { flex: 40%; background: #f2f3f5; position: relative; border-radius: 0 3px 3px 0; padding: 25px; padding: max(20px, 3.5%); }
#ctt_conteudo .ctt_formulario_contato:before { content: ""; width: 50vw; height: 100%; position: absolute; top: 0; right: 100%; background: inherit; }
#ctt_conteudo .ctt_formulario_contato .ctt_titulo_contato { font-size: 22px; margin-bottom: 10px; }
#ctt_conteudo .ctt_formulario_contato .fa-asterisk { font-size: 8px; vertical-align: text-top; margin-top: 2px; color: #c90000; }
#ctt_conteudo .ctt_formulario_contato form { margin-top: 15px; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio { max-height: 160px; position: relative; margin-bottom: 10px; font-size: 0; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio .ctt_campo_formulaio { width: 100%; height: 55px; padding: 5px 15px; padding-top: 22px; font-size: 13px; color: #56565b; border: 0; border-radius: 4px; cursor: pointer; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio textarea.ctt_campo_formulaio { height: 160px; resize: none; padding-top: 28px; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio select.ctt_campo_formulaio:invalid { font-size: 0; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio select.ctt_campo_formulaio:invalid option { font-size: 13px; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio label:before,
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio label:after { content: ""; width: 100%; height: 2px; border-radius: 0 0 4px 4px; position: absolute; bottom: 0; left: 0; z-index: 10; background: #e2e6e9; transition: .15s ease; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio label:hover:before { background: #d7dbde; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio label:after { background: inherit; transform: scalex(.5); opacity: 0; visibility: hidden; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio .ativo ~ label:after,
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio :focus~ label:after { transform: scalex(1); opacity: 1; visibility: visible; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio label { display: block; cursor: pointer; font-size: 15px; color: #35353b; position: static; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio label .ctt_txt_campo_contato { position: absolute; top: 15px; left: 15px; transform-origin: left; transition: .15s ease; }
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio .ativo ~ label .ctt_txt_campo_contato,
#ctt_conteudo .ctt_formulario_contato .ctt_area_campo_formulaio :focus~ label .ctt_txt_campo_contato { top: 5px; font-weight: 900; transform: scale(.85); }
#ctt_conteudo .ctt_formulario_contato button { width: 100%; height: 55px; border: 0; border-radius: 4px; color: #fff; margin-top: 15px; cursor: pointer; transition: .1s ease; }
#ctt_conteudo .ctt_formulario_contato button:hover { filter: brightness(.95) contrast(1.2); }
#ctt_conteudo .ctt_formulario_contato button:active { transform: scale(.975); transition: 0s; }

/* INFO PREFEITURA */
#ctt_conteudo .ctt_area_info_prefeitura { flex: 40%; display: flex; flex-direction: column; gap: 20px; }
#ctt_conteudo .ctt_area_info_prefeitura .ctt_info_prefeitura { display: flex; align-items: center; font-size: 14px; color: #56565b; gap: 15px; cursor: default; transition: .15s ease; }
#ctt_conteudo .ctt_area_info_prefeitura .ctt_info_prefeitura .swfa { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 18px; border-radius: 100%; flex-shrink: 0; transition: .15s ease; }
#ctt_conteudo .ctt_area_info_prefeitura .ctt_localizacao .swfa { background: #f9bdc3; color: #e03e4e; }
#ctt_conteudo .ctt_area_info_prefeitura .ctt_contato .swfa { background: #a9e3c5; color: #28b16a; }
#ctt_conteudo .ctt_area_info_prefeitura .ctt_email .swfa { background: #ffe5a8; color: #f7b516; }
#ctt_conteudo .ctt_area_info_prefeitura .ctt_atendimento .swfa { background: #bfd5f7; color: #3874cd; }
#ctt_conteudo .ctt_area_info_prefeitura a:hover .ctt_info_prefeitura { transform: translateX(10px); cursor: pointer; }
#ctt_conteudo .ctt_area_info_prefeitura a:hover .ctt_info_prefeitura .swfa { filter: brightness(.78) contrast(1.75); }

/* MAPA */
#ctt_conteudo .ctt_area_info_prefeitura .ctt_mapa_contato { height: 100%; position: relative; border-radius: 4px; overflow: hidden; margin-top: 15px; }
#ctt_conteudo .ctt_area_info_prefeitura .ctt_mapa_contato iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; }

/* TELEFONES */
#ctt_conteudo .ctt_area_telefones { margin-top: 4%; margin-top: max(4%, 20px); }
#ctt_conteudo .ctt_area_telefones .sw_area_listagem,
#ctt_conteudo .ctt_area_telefones .tel_cont_listagem_telefones_uteis { padding-top: 0; }

@media (max-width: 800px) {
	/* CONTEÚDO */
	#ctt_conteudo .ctt_conteudo_contato { flex-direction: column; gap: 20px; }

	/* MAPA */
	#ctt_conteudo .ctt_area_info_prefeitura .ctt_mapa_contato { padding-top: 100%; margin-top: auto; }
}