@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, li, .home {transition: all 300ms;}

#faixa-topo{width: 100%; background: #023756; padding: 20px 0;}

#faixa-logo{width: 98%; max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap;}

#logo{width: 20%; text-align: center; padding: 10px 0;}
#logo img{max-width: 120px;}

#espaco-menu{width: 80%; display: flex;  align-self: center; flex-wrap: wrap; }

#menu{width: 100%; display: flex; flex-wrap: wrap; list-style: none; padding:0; margin:0;}
#menu li{flex-grow: 1; text-align: center; cursor: pointer; margin: 0 2px; position: relative;}
#menu li a{display: block; font: 14px/50px 'Arial', sans-serif; color: #222222; text-transform: uppercase; border-top: 3px solid #ffffff;}
#menu li a:hover{border-top: 3px solid #0E67AB;}

#menu li:hover .drop{display:block;}
.drop {width: 100%; display:none; position:absolute; z-index:999; padding:0;}
.drop li{display:block;}
.drop li a{font-size:12px !important; padding:2px 0 !important; border-top:none !important; background:#FFFFFF; }
.drop li a:hover{background: #0E67AB; color: #ffffff !important;}
.drop li:last-child{border-bottom:none;}

nav{width:100%;}
nav select{display:none; padding:5px; width:100%; margin: 10px 0; font: 20px/28px 'Arial', sans-serif; color:#222222; position:relative; border-radius: 3px; border: 1px solid #dddddd;}

#faixa-banner{width: 100%; padding: 10px 0;}
.faixa-banner{width: 98%; max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap;}
#banner{ width:100%; position:relative; height: 370px;}
/*.fx{width: 100%; background: rgba(0,45,95,0.2); position: relative; height: 80px; margin-top: -80px; z-index: -1;}*/
#banner .img01{background:url(banner/banner01.jpg) center; height:370px;}
#banner .img02{background:url(banner/banner02.jpg) center; height:370px;}
#banner .img03{background:url(banner/banner03.jpg) center; height:370px;}
#banner .img04{background:url(banner/banner04.jpg) center; height:370px;}
.owl-pagination{position:relative; z-index:100; bottom:50px; float:right;}
#banner .frases{width: 100%; padding: 20px; font:35px 'Passion One', cursive; color: #FFFFFF; text-shadow:2px 2px 2px #000000; bottom: 0; position: absolute; background: rgba(0,0,0,0.4);} 

#blocos{width: 98%; max-width: 1000px; margin: 20px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.blocos{width: 100%; text-align: center;}
.blocos img{max-width: 350px;}
.blocos h2{font:700 15px 'Open Sans', sans-serif; color:#0E67AB; margin-bottom: 20px; padding-top: 15px; text-align: center;}
.blocos p{font:400 13px 'Open Sans', sans-serif; color:#222222; margin: 0; padding: 15px 0;}
.blocos a{padding: 15px; margin: 15px 0; font:400 13px 'Open Sans', sans-serif; color:#0E67AB;}
.blocos a:hover{color: #333333;}

#paginas{width: 98%; max-width: 1000px; margin: 20px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
#paginas h2{width: 100%; font:400 24px 'Open Sans', sans-serif; color:#0e67ab; margin: 0; padding: 20px 0;}
#paginas p{width: 100%; font:400 13px 'Open Sans', sans-serif; color:#222222; text-align: justify;}
#paginas p a{color:#0e67ab; display: block;}
#paginas img{width: 82px;}

.divformulario{width:100%; font-family: sans-serif; }
.divformulario *:not(.fa) { font-family: inherit; }

#formcontato{width:100%; overflow:hidden;}
#formcontato input, #formcontato textarea {width: 100%; padding: 15px; margin: 5px 0; border-radius: 3px; border: 1px solid #dddddd; font:400 13px 'Open Sans', sans-serif; color:#222222;}
#formcontato input:focus, #formcontato textarea:focus{color: #333333;}

#formcontato button {width:150px; background:#2d2466; color:#FFFFFF; cursor:pointer; border-radius:3px; font:normal 14px 'Arial', sans-serif; text-transform:uppercase; margin:10px 2px; padding:14px 0; float:left;}
#formcontato button:hover {background:#87DAF8;}
#formcontato #loading {font:400 13px 'Open Sans', sans-serif; color:#222222;}

#rodape{width: 100%; background: #023756;}
.rodape{width: 98%; max-width: 1000px; margin: 0 auto; padding: 40px 0; display: flex; justify-content: space-between; flex-wrap: wrap; text-align: center;}
.blocos-rodape{width: 48%;}
#rodape h2{width: 100%; font:400 24px 'Open Sans', sans-serif; color:#0099cc; margin: 0; padding: 20px 0;}
#rodape p{font: 14px 'Arial', sans-serif; color:#FFFFFF; margin: 0; text-align: center; padding: 2px 0;}
#rodape p a {color: #FFFFFF;}
#rodape p a:hover {color: #0099CC;}
.redes{width: 100%; max-width: 250px; margin: 0 auto; display: flex; justify-content: space-between;}
.ic-redes i{color:#FFFFFF; font-size: 30px;}


@media screen and (max-width:830px){
	.home{display: block; text-align: center;} 
	.ic-home i{margin-right: 0; margin-bottom: 20px;}	
}

@media screen and (max-width:767px){
	#logo{width: 100%; padding: 20px 0;}
	#logo img{max-width: 150px;}
	#espaco-menu{width: 100%;}
	.endereco{text-align: center;}
	.blocos{width: 55%; margin: 20px auto; text-align: center;}
}


@media screen and (max-width:670px){
	.home{width: 50%;} 
	.home:last-child{width: 100%;} 
	.ic-home i{margin-right: 0; margin-bottom: 20px;}	
    .blocos-rodape{width: 98%;}
}

@media screen and (max-width:479px){
	#menu li{display: none;}
	nav select{display: block;}
	.home{width: 100%;}
	.blocos{width: 80%;}
}