@charset "utf-8";
/* CSS Document */

*{border:none; resize:none; box-sizing:border-box; outline:none;}
a{text-decoration:none;}
body{margin:0; padding:0;}
button, a, .prog{transition: all 300ms;}

#faixa{width:100%; background:#333333; padding:18px 0;}
.faixa{width:98%; max-width:1000px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap;}
#data{font:300 16px 'Oswald', sans-serif; color:#FFFFFF;}
#endereco{font:300 16px 'Oswald', sans-serif; color:#FFF400; text-align:right;}

#topo{width:100%; background:url(../imagem/fundo.jpg);}
.topo{width:98%; max-width:1000px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center;}
#logo {width:50%; padding:20px 0;}
#logo img{max-width:350px;}
#fone{width:50%; text-align:right;}
#fone span{font:300 26px 'Oswald', sans-serif; color:#615d5c; border-bottom:2px solid #615d5c;}
#fone span{font:300 26px 'Oswald', sans-serif; color:#615d5c; border-bottom:2px solid #615d5c;}

#espaco-menu{width:100%; background:#FFFFFF; display:flex; align-items:center; flex-wrap:wrap;}
#menu{width:100%; list-style:none; padding:0; margin:0; display:flex; }
#menu li{flex-grow:1; text-align:center; cursor:pointer; border-right:1px solid #CCCCCC;}
#menu li a{display:block; font:16px/60px 'Archivo Narrow', sans-serif; color:#333333;}
#menu li a:hover{background:#333333; color:#FFF400;}

nav{width:70%;}
nav select{display:none; border-radius:3px; padding:5px; width:100%; margin: 10px 0; font: 20px/28px 'Archivo Narrow', sans-serif; color:#333333; background:#FFFFFF; position:relative;}

#busca {width:30%;}
#busca form{padding:0 10px; margin:0;}
#busca input{width:calc(100% - 60px); padding:10px; border:#F4F4F4 solid 2px; border-radius:2px; background:#FFFFFF;}
#busca button {width:40px; height:40px; border-radius:5px; cursor:pointer; background:-webkit-linear-gradient(top, #FFF400 0%, #ebd03b 100%); color:#333333;}

#banner { width:100%; overflow:hidden; }

#links-uteis{width:100%; background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );}
.links-uteis{width:100%; max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap; text-align:center; padding:20px 0;}
.quadro01{width:25%; padding:60px 5px;}
.quadro02{width:75%; display:flex; flex-wrap:wrap;}
.blocos{width:calc(100% / 3); padding:20px 5px;}
.icone-blocos{font:36px 'FontAwesome'; color:#666666;}
.ic-blA:before{content:"\f1ec";}
.ic-blB:before{content:"\f059";}
.ic-blC:before{content:"\f046";}
#links-uteis h1{font:300 30px 'Oswald', sans-serif; color:#333333; margin:0;}
#links-uteis h2{font:300 20px 'Oswald', sans-serif; color:#666666; margin:0;}
#links-uteis h3{font:20px 'Archivo Narrow', sans-serif; color:#333333;}
#links-uteis p{font:16px 'Archivo Narrow', sans-serif; color:#333333;}
#links-uteis a{font:16px 'Archivo Narrow', sans-serif; color:#000000;}
#links-uteis a:hover{color:#666666; transition: all 300ms;}

#conteudo{width:98%; max-width:1000px; margin:20px auto; display:flex; justify-content:space-between; flex-wrap:wrap;}
.conteudo{width:48%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.colunamaior{width:98%;}
.coluna{width:48%;}
.links-gov{color:#333333 !important;}
.links-gov:hover{color:#999999 !important; margin-left:5px;}
.links-gov:before{font:12px 'FontAwesome'; color:#333333; content:"\f101"; margin-right:10px;}
#conteudo h1, #conteudo h2{width:100%; font:300 20px 'Oswald', sans-serif; color:#333333; margin:0;}
#conteudo h2{margin-bottom:15px;}
#conteudo h3{margin:0;}
#conteudo p, #conteudo h3{font:16px 'Archivo Narrow', sans-serif; color:#333333; text-align:justify;}
#conteudo a{font:16px 'Archivo Narrow', sans-serif; color:#999999; display:inline-block; margin-top:10px;}
#conteudo a:hover{color:#000000;}
#conteudo ul{padding-left:0; list-style:none;}

#ms form{width:98%; margin:10px 0; display:flex; flex-wrap:wrap; justify-content:space-between;}
#ms input{width:100%; border-radius: 3px; border: 1px solid rgba(204,204,204,0.5); padding:15px; font: 16px/20px 'Archivo Narrow', sans-serif; color:#333333; margin:5px 0;}
#ms button{width:calc(100% / 3 - 0.5%); background:#333333; color:#FFFFFF; cursor:pointer; border-radius:3px; font: 14px 'Archivo Narrow', sans-serif; text-transform:uppercase; margin:5px 0 5px 0.5%; padding:15px;}
#ms button:hover{background:#999999;}
#ms a{width:calc(100% / 3 - 0.5%); background:#FFF400; color:#333333; cursor:pointer; border-radius:3px; font: 14px 'Archivo Narrow', sans-serif; text-transform:uppercase; margin:5px 0 5px 0.5%; padding:15px;}
#ms a:hover{background:#333333; color:#FFFFFF;}
#ms a:before{ font: 14px 'FontAwesome'; content:"\f13e"; margin-right:5px; }

#utilitarios-rodape{ width:100%; padding:10px 0; background:#EEEEEE; }
#utilitarios{ width:98%; max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap; }
#utilitarios h1{font:300 20px 'Oswald', sans-serif; background:#333333; color:#FFF400; text-transform:uppercase; text-align:center;  padding: 15px 0; margin: 10px 0; border-radius:3px; }
#utilitarios .util{ width:calc(100% / 4 - 40px); margin: 0 20px; float:left; text-align:center; }
#mn-util{margin:0; padding:0; list-style:none;	width:100%;}
#mn-util li{border-top: 1px dotted rgba(0,0,0,0.2); }
#mn-util li:first-child {border-top: none;}
#mn-util li a {display:block; padding:10px 0; font:300 16px 'Oswald', sans-serif; color:#333333;}
#mn-util li a:hover {background:rgba(0,0,0,0.1);}

#itens-rodape{width:100%; background:#333333;}
.itens-rodape{width:100%; max-width:1000px; margin:0 auto; padding:20px 0; display:flex; flex-wrap:wrap;}
.rodape{width:calc(100% / 3 - 20px); margin:0 10px; }
.programacao{text-align:center; display:flex; flex-wrap:wrap; justify-content:space-between; align-content:center;}
.prog{width:100%; background:rgba(255,255,255,0.1); border-radius:3px; margin:5px 0; cursor:pointer;}
.prog:hover{background:rgba(255,255,255,0.2);}
.icon-prog:before{font:35px 'FontAwesome'; color:#FFF400;}
.icon-progA:before{content:"\f108";}
.icon-progB:before{content:"\f115";}
.icon-progC:before{content:"\f115";}
#itens-rodape h1{font:300 26px 'Oswald', sans-serif; color:#FFFFFF; text-transform:uppercase;}
#itens-rodape h2{font:300 22px 'Oswald', sans-serif; color:#FFFFFF; text-transform:uppercase;margin:8px 0;}
#itens-rodape p{font: 16px 'Archivo Narrow', sans-serif; color:#FFFFFF;}

#formContato{width:100%; display:flex; flex-wrap:wrap;}
#formContato input{width:100%; background:rgba(255,255,255,0.2); padding:10px; font:16px 'Archivo Narrow', sans-serif; color:#FFFFFF; border-radius:3px; margin-bottom:12px;}
#formContato textarea{width:100%; background:rgba(255,255,255,0.2); padding:10px; font:16px 'Archivo Narrow', sans-serif; color:#FFFFFF; border-radius:3px; margin-bottom:5px;}

#formContato button{width:calc(100% / 2 - 1%); background:#999999; color:#FFFFFF; cursor:pointer; border-radius:3px; font: 16px 'Archivo Narrow', sans-serif; text-transform:uppercase; margin:5px 0.5%; padding:10px;}
#formContato button:hover{background:#666666;}

#rodape{width:100%; background:#111111; padding:20px 0; text-align:center;}
#rodape p{font:300 16px 'Oswald', sans-serif; color:#FFFFFF;}


@media screen and (max-width:899px){
	#data{width:100%; text-align:center; margin:10px 0;}
	#endereco{width:100%; text-align:center;}
	nav{width:100%;}
	#espaco-menu{margin-bottom:30px;}
	#menu li:last-child{border-right:none;}
	#logo{width:100%;  text-align:center; margin:0 auto;}
	#fone{width:100%; text-align:center; padding-bottom:25px;}
	#busca {width:100%; padding:20px 0; background:#F4F4F4;}
	.coluna{width:100%;}
	#conteudo img{margin-bottom:15px;}
	#conteudo h1{margin:20px 0;}
	.quadro01{width:100%; padding:0;}
	.quadro02{width:100%;}
	#ms button{width:calc(100% / 2 - 0.5%); margin:5px 0 5px 0.5%;}
	#ms a{width:calc(100% - 0.5%); margin:5px 0 5px 0.5%;}	
	#utilitarios .util{ width:calc(100% /2 - 40px);}
	.rodape{width:calc(100% / 2 - 20px);}
	.rodape:last-child{width:100%; }
}


@media screen and (max-width:600px){
	.blocos{width:100%;}
	.conteudo{width:100%;}
	.rodape{width:100%; }
}


@media screen and (max-width:479px){
	#menu{display:none;}
	nav select{display:block;}
	#busca {display:none;}
	#utilitarios .util{ width:calc(100% - 40px);}
}