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

body{margin:0; border-top:5px solid rgb(11, 92, 132);}
*{box-sizing:border-box; outline:none; resize:none;}
a{text-decoration:none;}
h1, h2{font:25px 'Josefin Sans', sans-serif;}
p, a{font:16px 'Archivo Narrow', sans-serif;}

.container{width:95%; max-width:1000px; display:flex; justify-content:space-between;}
.left{text-align:left !important;}
.gradiente{background: rgb(11,92,132); background: -moz-linear-gradient(-45deg,  rgb(11,92,132) 47%, rgb(11,92,132) 48%, rgb(11,92,132) 48%, rgb(11,92,132) 49%, rgb(32,124,202) 49%, rgb(31,112,150) 49%); background: -webkit-linear-gradient(-45deg,  rgb(11,92,132) 47%,rgb(11,92,132) 48%,rgb(11,92,132) 48%,rgb(11,92,132) 49%,rgb(32,124,202) 49%,rgb(31,112,150) 49%); background: linear-gradient(135deg,  rgb(11,92,132) 47%,rgb(11,92,132) 48%,rgb(11,92,132) 48%,rgb(11,92,132) 49%,rgb(32,124,202) 49%,rgb(31,112,150) 49%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b5c84', endColorstr='#1f7096',GradientType=1 );}
.margin{margin:0 auto;}

#mainmenu{width:95%; max-width:750px; display:flex;  margin:0 auto; padding:0; list-style:none;}
#mainmenu li{position:relative; flex-grow:1; text-align:center; overflow:hidden;}
#mainmenu li a{font:20px/55px 'Oswald', sans-serif; color:rgb(51, 51, 51); position:relative; display:block; transition:all ease-out 150ms; -webkit-transition:all ease-out 150ms;}
#mainmenu li:hover .over{height:100%;}
#mainmenu li a:hover{color:rgb(255, 255, 255);}
.over{width:100%; height:0;  background:rgb(11, 92, 132); transition:all ease-out 300ms; -webkit-transition:all ease-out 300ms; position:absolute;}
nav select{display:none; border:0; border-radius:3px; padding:15px 5px; width:90%; font:18px/50px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); margin:10px auto; background:rgb(122,130,158);}

#logo{max-width:320px; margin:0 auto;}

#frase{text-align: center; max-width: 1000px; margin: 0 auto;}
#frase big{font-size: 25px;}

#banner{width:100%; overflow:hidden;}
#sloganH{width:100%; position:absolute; background:rgba(51, 51, 51, .5); font:30px 'Josefin Sans', sans-serif; color:rgb(255, 255, 255); z-index:9999; bottom:5%; padding:20px; text-align:right;}
#progress{position:absolute; z-index:1000; background:rgba(99, 105, 127, .8); height:5px; top:0; width:0; }

#acessoRapido{width:100%; padding:50px 0; border-bottom:5px solid rgb(11, 92, 132); display:flex; justify-content:center;}
.box{width:33%; padding:20px 10px; display:flex;}
.box:hover{background:rgba(255, 255, 255, .3)}
.box .icone{font-size:30px; line-height:40px; margin-right:5px; padding:10px; background:rgb(245, 245, 245); color:rgb(11, 92, 132); border-radius:2px;}
.box h2{margin:0; color:rgb(255, 255, 255);}
.box h2 span{font:15px 'Archivo Narrow', sans-serif; display:block;}

#conteudo{margin:0 auto; flex-wrap:wrap; padding:50px 0;}
#conteudo>h2{font:30px/55px 'Oswald', sans-serif; color:rgb(51, 51, 51); text-align:center; width:100%;}
#conteudo .blocos{width:49%; display:flex; flex-wrap:wrap; justify-content:space-between;}
#conteudo .blocos .txt{text-align:right; width:75%;}
#conteudo .blocos .txt h2{font-size:30px; margin:0; color:rgb(11, 92, 132);}
#conteudo .blocos .txt p{color:rgb(51, 51, 51);}
#conteudo .blocos .txt a{color:rgb(11, 92, 132);}
#conteudo .blocos .txt a:hover{color:rgb(11, 92, 132);}
#conteudo .number{width:100px; height:100px; font:60px/100px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); text-align:center; border:2px solid rgb(11, 92, 132); border-radius:50%; margin-top:20px;}

#textos{width:95%; max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap;}
#textos h1{width:100%;}
#textos p{text-align:justify; width: 100%;}
#textos p a{color:rgb(51, 51, 51);}
#textos p a:hover{color:rgb(11, 92, 132);}
#textos ul{width:100%; margin:0 20px; padding:0; list-style:none; font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51);}
#textos .contato{width:50%; margin-bottom:30px;}
#textos .contato form input, textarea{width:100%; font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); padding:15px 10px; margin-bottom:5px;}
#textos .contato form button{font:16px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); border:0; border-radius:2px; padding:20px; cursor:pointer}

#textos .diretores{max-width: 300px; margin: 20px;}

#utilitarios{margin:0 auto; padding:50px 0;}
#utilitarios .quadros{width:24%; border:1px solid rgb(200, 200, 200); padding:20px 10px; text-align:center;}
#utilitarios .quadros .icons{font-size:40px; line-height:90px; width:90px; height:90px; border:1px solid rgb(200, 200, 200); border-radius:50%; color:rgb(150, 150, 150); transition:all ease-out 300ms; -webkit-transition:all ease-out 300ms;}
#utilitarios .quadros h2{color:rgb(51, 51, 51);}
#utilitarios .quadros a{width:80px; height:50px; font:16px/50px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); background:rgb(11, 92, 132); display:block; text-align:center; margin:0 auto;}
#utilitarios .quadros a:hover{background:rgb(11, 92, 132);}
#utilitarios .quadros:hover .icons{color:rgb(255, 255, 255); background:rgb(11, 92, 132);}

#programacoes{flex-wrap:wrap; padding:50px 0; margin:0 auto;}
#programacoes h2{font-size:30px; color:rgb(11, 92, 132); width:100%; text-align:center;}
#programacoes form{width:100%; display:flex;}
#programacoes form input{width:calc(70% / 3 - 5px); padding:20px; margin-right:5px; font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 5,1, 51); border:1px solid rgb(200, 200, 200); border-bottom:4px solid rgb(117, 120, 150);}
#programacoes form button{width:calc(30% / 3); padding:20px 0; margin-right:5px; font:16px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); cursor:pointer; background:rgb(11, 92, 132); border:0;}
#programacoes form button:last-child{margin-right:0;}
#programacoes form button:hover{background:rgb(11, 92, 132);}
#programacoes .prog{width:48%; margin-top:20px; transition:all ease-out 300ms; -webkit-transition:all ease-out 300ms; text-align:center; padding:0 10px;}
#programacoes .prog h2, #programacoes .prog p{color:rgb(255, 255, 255);}
#programacoes .prog p{margin:10px 0;}
#programacoes .prog:hover{transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1);}

#rodape{width:100%; border-top:5px solid rgb(11, 92, 132); padding:20px 0;}
#caixa{width:24%;}
#rodape h2{color:rgb(255, 255, 255); margin:0; margin-bottom:20px;}
#rodape h2 span{font:16px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); display:block;}
#links{width:70%; display:flex; justify-content:space-between; flex-wrap:wrap; align-content:flex-start;}
#links h2{width:100%;}
#links .links{width:calc(100% / 3); list-style:none; margin:0; padding:0;}
#links .links li a{color:rgb(255, 255, 255); line-height:25px;}
#links .links li a:hover{color:rgb(224, 224, 224);}
#links .links li::before{font:14px 'FontAwesome'; color:rgb(255, 255, 255); content:"\f00c"; margin-right:5px;}

#redes{width:240px; margin:0 auto; display:flex; justify-content:space-between;}
#redes .sociais{width:50px; height:50px; font-size:20px; line-height:50px; text-align:center; color:rgb(255, 255, 255); background:rgb(11, 92, 132)}
.fa-facebook:hover{background:rgb(60, 88, 153)  !important;}
.fa-twitter:hover{background:rgb(42, 169, 224)  !important;}
.fa-google-plus:hover{background:rgb(222, 82, 69)  !important;}
.fa-instagram:hover{background:rgb(50, 92, 134)  !important;}

@media screen and (max-width:990px){
	.box h2{font-size:24px !important;}
}
@media screen and (max-width:960px){
	.box{flex-direction:column; text-align:center;}
	.icone{text-align:center;}
}
@media screen and (max-width:900px){
	#utilitarios{flex-wrap:wrap;}
	#utilitarios .quadros{width:49%; margin-bottom:10px;}
	#programacoes form{flex-wrap:wrap;}
	#programacoes form input{margin-bottom:5px;}
	#programacoes form input, #programacoes form button{width:calc(100% / 3 - 5px) !important;}
	#programacoes .prog{width:100%;}
	#rodape .container{flex-wrap:wrap-reverse;}
	#links, #caixa{width:100% !important;}
	#caixa{display:flex; justify-content:space-between; margin-top:30px;}
}
@media screen and (max-width:840px){
	#conteudo .number{display:none;}
	#conteudo .blocos .txt{text-align:right; width:100%;}
}
@media screen and (max-width:690px){
	#programacoes form input{width:100% !important; margin-right:0;}
}
@media screen and (max-width:660px){
	#acessoRapido .container{flex-wrap:wrap;}
	#conteudo .blocos{width:100%}
	#conteudo .blocos .txt{text-align:center !important; margin-bottom:10px;}
	.box{width:100%;}
	.icone{margin-bottom:10px;}
}
@media screen and (max-width:630px){
	#sloganH{display:none !important;}
}
@media screen and (max-width:510px){
	#textos .contato{width:100%;}
	#links .links{width:50%; margin-bottom:10px;}
	#caixa{flex-wrap:wrap;}
	#caixa h2{width:100%; text-align:center;}
	#mainmenu{display:none;}
	nav select{display:block;}
}
@media screen and (max-width:320px){
	#links .links{width:100%;}
	#utilitarios .quadros{width:100%;}
}