@media screen and (min-width: 392px) {
	#resultado .campos .renavam-container { display: flex; align-content: center; align-items: center }
	#resultado .campos .renavam-container input { max-width: 200px; }
	#resultado .campos .renavam-container button { margin: 0; margin-left: 15px }

	#resultado .campos .renavam-container:not(.mensagem) .veiculo-nao-encontrado { display: none }
	#resultado .campos .renavam-container:not(.mensagem) > p { display: none }

	#resultado .campos .renavam-container.mensagem { display: block }
}

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

	/* topo */
	header figure a { width:auto; /*height:95px;*/ margin:0 10px }
	header figure a:first-child { border-right:#e1e1e1 1px solid; padding-right:20px }
	header figure img { max-width: 196px; max-height:100%; vertical-align:middle; width: auto; }

	header.reduzido figure a { height:60px }

	/* postos de pagamento */
	#postos-pagamento .lista > div { display:inline-block; width:50%; height:auto; margin-bottom:20px; vertical-align:top }

	#resultado .qtd-valor .creditos-adicionais md-radio-group { flex-direction: row }
	#resultado .qtd-valor .creditos-adicionais md-radio-button { width: auto }
	#resultado .qtd-valor .creditos-adicionais md-radio-button:first-child { margin-right: 24px }
	#resultado .qtd-valor .creditos-adicionais md-radio-button:last-child { margin-left: 24px }
	#resultado .qtd-valor .input-container { flex-direction: row }

	#resultado .container-datas-creditos-adicionais { flex-direction: row; align-items: flex-start; }
	#resultado .container-datas-creditos-adicionais .container-datas-selecionadas-creditos-adicionais { margin-left: 30px }
}
@media screen and (min-width : 640px) {

	/* topo */
	header { padding:20px 0 }
	header nav { margin-top:20px }
	header nav .mobile { display:none }
	header nav .desktop { display:block; width:100%; height:auto; text-align:center }
	header nav .desktop a { display:inline-block; font-size:16px; color:#636466; line-height:16px; text-decoration:none; text-transform:uppercase; margin:0 8px }
	header nav .desktop a:hover,
	header nav .desktop a.ativo { text-decoration:underline }
	header .login { top: -20px; right: -24px }

	/* tarifa */
	#tarifa .valores .cabecalho { display:block; width:100%; margin-bottom:1px; overflow:hidden }
	#tarifa .valores .cabecalho span { display:block; width:auto; height:auto; font-weight:bold; text-transform:uppercase; padding:8px; background:#fff; margin-right:1px; float:left }
	#tarifa .valores .cabecalho span.veiculo { width:63.6%; font-size:18px; line-height:20px; font-weight:bold }
	#tarifa .valores .cabecalho span.ufrm { width:11%; font-size:18px; line-height:20px }
	#tarifa .valores .cabecalho span.valor { width:25%; font-size:18px; line-height:20px; margin-right:0 }

	#tarifa .valores .miolo > div span { padding:8px; margin-right:1px; float:left }
	#tarifa .valores .miolo > div span.veiculo { width:63.6% }
	#tarifa .valores .miolo > div span.ufrm { width:11%; padding:8px }
	#tarifa .valores .miolo > div span.ufrm::before { content:'' }
	#tarifa .valores .miolo > div span.valor { width:25%; margin-right:0 }

	/* contato */
	#form-contato input[name=nome] { width:49.2%; margin-right:10px; float:left }
	#form-contato input[name=email] { width:49%; float:right }

	#resultado .consulta label span { width:302px; margin:10px auto 0 auto }

	#resultado .isento h2 span { width:90px; margin:10px auto 0 auto }

	#resultado .classificacao h2 span { width:166px; margin:10px auto 0 auto }

	#resultado .valores h2 span {width:166px;margin:10px auto 0 auto;}

	#resultado .pagamento h2 span { width:260px; margin:10px auto 0 auto }

	#resultado .link-tpa { flex-direction: row }
}

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

	#resultado .header .consulta { width: 100%; display: flex; flex-direction: row }
	#resultado .header .consulta .placa { width: 30%; display: flex; align-items: center; justify-content: flex-start }
	#resultado .header .consulta .classificacao { width: 40%; display: flex; flex-direction: column; align-items: center }
	#resultado .header .consulta .isento { width: 30%; display: flex; align-items: center; justify-content: center }
	#resultado .header .consulta .isento h2 { display: none }
	#resultado .header .consulta .isento > span { font-size: 24px; line-height: 24px; margin-bottom: 20px }

	#resultado .qtd-valor.menor { width: 400px; margin-left: 36px }
	#resultado .qtd-valor h3 { width: 373px }

	#resultado .creditos { justify-content: start; align-items: start; max-width: 200px }
	#resultado .creditos h3 { font-size: 25px !important; line-height: 25px !important; }
	#resultado .creditos > div { margin-top: 4px }

	#resultado .campos .qtd-passagens { width: 100% }
	#resultado .campos .horario-maximo-saida { width: 50% }
	#resultado .campos .atencao { width: 100%; max-width: 100% }

	#resultado .campos .detalhes-taxas { max-width: 100%; display: flex; flex-direction: column; align-items: center;  }
	#resultado .tabela-taxas { margin-left: 0; margin-right: 0; max-width: 100%; align-items: center }
	#resultado .tabela-taxas .content { max-width: 500px; width: 100% }

	#resultado .data-saida .qtd-passagens { width: 50% }

	/* resultado */
	#resultado .topo .taxas { width:48.7%; min-height:120px; margin: 20px 0 0 auto }
}

@media only screen and (max-width: 730px) {
	#consulta h1 { font-size:30px; line-height:32px }
	#consulta form button[type=button].nacionalidade { flex-direction: row; height: 100px; text-align: left; font-size: 17px; max-width: 350px; }
	#consulta form button[type=button].nacionalidade img { display: inline; width: 35px; height: 35px; margin: 0px; margin-right: 8px; }
	#consulta form .container { height: auto }
	#consulta form .container.nacionalidade { flex-direction: column; align-items: center; }
}

@media only screen and (min-width: 730px) {
	#consulta form { width: 700px }
	#consulta form .cancelar { position: relative; top: 50px; left: -70px; margin: 0 !important; }
	#consulta form input[type=text] { float: left; margin-left: 50px }
	#consulta form input[type=submit] { float: right; margin-right: 50px; margin-top: 16px; height: 60px; }
	#consulta form .container.opcoes { display: flex; flex-direction: row; justify-content: center; align-items: center; }
	#consulta button[type=button].pagamento { margin: 0 }
}

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

	.central, #retorno { width: 740px }

	#resultado form .central { padding-left: 40px; padding-right: 40px }
}

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

	/* consulta */
	#consulta form label { margin-bottom:30px }
	#consulta p { line-height:20px }

	/* sobre */
	#sobre { padding:46px 0 }
	#sobre p { line-height:26px }
	#sobre a { padding:25px 50px }

	/* como funciona */
	#como-funciona { /*padding:75px 0*/ padding:58px 0 }
	#como-funciona h1 { margin-bottom:50px }

	#como-funciona .central { width: 100%; max-width: 1000px }

	#como-funciona .lista > div { display:inline-block; width:41.2%; height:auto; margin:0 40px; vertical-align:top }
	#como-funciona .lista > div h2 { margin-bottom:20px }
	#como-funciona .lista > div p { line-height:22px }
	#como-funciona a { margin-top:50px; padding:25px 50px }

	/* tarifa */
	#tarifa { padding:60px 0; background:url(../img/fundo-tarifa.gif) center no-repeat }
	#tarifa h1 { margin-bottom:30px }
	#tarifa p { line-height:24px }

	#tarifa .valores { /*margin-top:80px*/ margin-top:30px }
	#tarifa .valores .cabecalho span { padding:15px }
	#tarifa .valores .miolo > div span { padding:15px }
	#tarifa .valores .miolo > div span.ufrm { padding:15px }

	/* postos de pagamento */
	#postos-pagamento { padding:75px 0 }
	#postos-pagamento h1 { margin-bottom:60px }
	#postos-pagamento nav a { font-size:18px; line-height:18px; margin:0 5px }
	#postos-pagamento .lista { margin-top:40px }
	#postos-pagamento .lista > div { display:inline-block; width:28%; height:auto; margin:0 25px 40px 25px; vertical-align:top }
	#postos-pagamento .lista > div p.endereco { line-height:22px }
	#postos-pagamento .lista > div .pagamento { margin-top:10px }
	#postos-pagamento .lista > div .pagamento img { margin:0 3px }
	#postos-pagamento .aplicativos { flex-direction: row }
	#postos-pagamento .pagamentos-automatico { flex-direction: row }

	/* contato */
	#contato { padding:75px 0 100px 0 }
	#contato h1 { margin-bottom:25px }
	#contato .telefone { line-height:24px; margin:30px 0 }

	#form-contato { width:860px; margin:35px auto 0 auto }
	#form-contato input[name=nome],
	#form-contato input[name=email] { width:48.2%; margin:0 30px 30px 0 }
	#form-contato input[name=email] { margin-right:0 }
	#form-contato textarea { height:200px; margin-bottom:50px }
	#form-contato .retorno { margin:0 0 25px 0 }
	#form-contato input[type=submit] { padding:25px 50px }

	/* rodape */
	footer { padding:40px 0 }
	footer p { margin:5px 0; float:left }
	footer .telmesh { width:auto; margin:auto; float:right }

	#principal div.enviar-email>div { width:342px; margin:0 15px 15px 0; float:left }
	#principal div.enviar-email { display: flex; flex-direction: row; justify-content: center; align-items: center; }

}
@media screen and (min-width : 1200px) {
	#sobre .central,
	#como-funciona .central,
	#tarifa .central,
	#postos-pagamento .central,
	#contato .central { width: 100%; max-width: 1200px }

	/* sobre */
	#sobre p { width:910px }

	/* como funciona */
	#como-funciona { padding:70px 0 }
	#como-funciona .lista > div { width:43% }

	/* tarifa */
	#tarifa { padding:70px 0 }
	#tarifa p { max-width:960px; margin:0 auto }
	#tarifa .valores { max-width:960px; margin:30px auto 0 auto }
	#tarifa .valores .cabecalho span { padding:20px }

	#tarifa .valores .cabecalho span.veiculo,
	#tarifa .valores .miolo > div span.veiculo { width:61.7% }
	#tarifa .valores .cabecalho span.ufrm,
	#tarifa .valores .miolo > div span.ufrm { width:15% }
	#tarifa .valores .cabecalho span.valor,
	#tarifa .valores .miolo > div span.valor { width:23% }

	/* pagamentos */
	#postos-pagamento .lista > div { width:20% }

}

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

	header .central { width: 1200px }

	/* topo */
	header figure { width:35%; float:left }
	header figure a { margin:0 }
	header figure a:first-child { margin-right:10px; padding-right:10px }

	header nav { width:770px; margin:35px 0; float:right }
	header nav .desktop { text-align:right }
	header nav .desktop a { margin:0 35px 0 0; letter-spacing:-0.5px }
	header nav .desktop a:last-child { margin-right:0 }

	header.reduzido nav { width:750px; margin: 19px 0 }
	header.reduzido nav .desktop a { margin: 0 12px }

}