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

body{margin:0; border-top:5px solid #2482c0;}
*{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{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2482c0+48,4f92bc+48 */
background: #2482c0; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #2482c0 48%, #4f92bc 48%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #2482c0 48%,#4f92bc 48%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #2482c0 48%,#4f92bc 48%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2482c0', endColorstr='#4f92bc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.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:#2482c0; 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:230px; margin:40px auto;}

#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:#349fe5; height:5px; top:0; width:0; }

#acessoRapido{width:100%; padding:50px 0; border-bottom:5px solid #2482c0; 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:#349fe5; 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:#2482c0;}
#conteudo .blocos .txt p{color:rgb(51, 51, 51);}
#conteudo .blocos .txt a{color:#349fe5;}
#conteudo .blocos .txt a:hover{color:#2482c0;}
#conteudo .number{width:100px; height:100px; font:60px/100px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); text-align:center; border:2px solid #2482c0; 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;}
#textos p a{color:rgb(51, 51, 51);}
#textos p a:hover{color:rgb(117, 120, 150);}
#textos .imagem{width: 100%; max-width: 600px; margin: 20px auto;}
#textos ul{width:100%; margin:0 20px; padding:0; list-style:none; font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51);}
#textos li:before{content: "\f24d"; font: 12px 'FontAwesome'; color:#333333; margin-right: 10px; }
#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}

#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:#349fe5; display:block; text-align:center; margin:0 auto;}
#utilitarios .quadros a:hover{background:#2482c0;}
#utilitarios .quadros:hover .icons{color:rgb(255, 255, 255); background:#2482c0;}

#programacoes{flex-wrap:wrap; padding:50px 0; margin:0 auto;}
#programacoes h2{font-size:30px; color:#349fe5; 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:#349fe5; border:0;}
#programacoes form button:last-child{margin-right:0;}
#programacoes form button:hover{background:#2482c0;}
#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 #2482c0; 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:100%; height:50px; font-size:20px; line-height:50px; text-align:center; color:rgb(255, 255, 255); background:rgb(99, 105, 127);}
.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%;}
}