@charset "utf-8";

header { position: fixed; width: 100%; padding: 22px 0 20px; background-color: rgb(255, 255, 255); z-index: 50;}
header.fixed { padding: 12px 0 10px;}

header .logo { float: left; margin: 0 0 0 2%; font-size: 0;}
header .logo img { float: left;}

header .chave { position: absolute; width: 35px; height: 35px; top: 13px; left: 2%; z-index: 1; display: none;}
header .chave .ico { float: left; width: 35px; height: 35px; background-position: 50%; background-size: 30px; background-repeat: no-repeat; cursor: pointer;}
header .chave .ico.abre { background-image: url('../imagens/abre.png');}
header .chave .ico.fecha { background-image: url('../imagens/fecha.png'); display: none;}

header .redes { float: right; margin: 0 2% 0 0;}
header .redes .ico { float: left; width: 45px; height: 45px; margin: 0 0 0 5px; background-size: 45px; background-position: 50%; background-repeat: no-repeat;}
header .redes .ico.instagram { background-image: url('../imagens/instagram.png');}
header .redes .ico.facebook { background-image: url('../imagens/facebook.png');}
header .redes .ico:hover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1.2) rotate(-720deg); -webkit-transform: scale(1.2) rotate(-720deg); -o-transform: scale(1.2) rotate(-720deg); -ms-transform: scale(1.2) rotate(-720deg); transform: scale(1.2) rotate(-720deg);}

header .links { float: right; margin: 5px 10px 0 0;}
header .links a { float: left; padding: 11px 8px 9px; line-height: 1em; font-size: 1em; color: rgb(80, 80, 80); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
header .links a:hover { background-color: rgb(127, 193, 51) !important; color: #FFFFFF !important;}
header .links a.ativo { background-color: rgb(127, 193, 51); color: rgb(255, 255, 255);}
header .links a.doacao { display: none;}
header .links b { float: left; width: 2px; height: 15px; margin: 13px 15px 0; background-color: rgb(127, 193, 51);}
header .links:hover a.ativo { background-color: rgb(235, 235, 235); color: rgb(80, 80, 80);}
header .links .submenu { float: left; margin: 0 0 0 3px; position: relative; z-index: 300;}
header .links .submenu a.primario { position: relative; background-color: rgb(0, 171, 199); color: rgb(255, 255, 255); z-index: 2;}
header .links .submenu .sub { position: absolute; width: 150px; padding: 40px 0 0; display: none; z-index: 1;}
header .links .submenu .sub .separa { float: left; width: 100%; height: 1px; background-color: #047284;}
header .links .submenu .sub a.secundario { float: left; width: 90%; padding: 13px 5% 10px; background-color: rgb(0, 171, 199); font-size: 1em;  color: rgb(255, 255, 255);}
header .links .submenu .sub a.secundario:hover { background-color: #00859B !important;}
header .links .submenu:hover .sub { display: block;}


footer { float: left; width: 100%; background-color: rgb(200, 200, 200); position: relative;}
footer .detalhe { float: left; width: 100%;}
footer .rodape { float: left; width: 100%; padding: 30px 0 0;}
footer .rodape .logo { float: left; width: 40%; text-align: right;}
footer .rodape .logo img { max-width: 100%;}
footer .rodape .texto { float: left; width: 50%; margin: 0 0 0 5%;}
footer .rodape .texto h2 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 2em; color: rgb(255, 255, 255);}
footer .rodape .texto h3 { float: left; width: 100%; font-weight: bold; font-size: 1.5em; color: rgb(255, 255, 255);}
footer .rodape .texto h4 { float: left; width: 100%; margin: 20px 0 20px; font-size: 1.1em; color: rgb(255, 255, 255);}
footer .rodape .texto h4 strong { text-transform: uppercase; font-weight: normal;}
footer .copyright  { float: left; width: 100%; padding: 16px 0 15px; text-align: center; font-size: 0.9em; color: rgb(65, 65, 65);}
footer .copyright a { color: rgb(65, 65, 65);}
footer .copyright a:hover { text-decoration: underline;}

@media only screen and (max-width: 1000px){
	header { float: left; position: relative; padding: 0;}
	header.fixed { padding: 0;}

	header .chave { display: block;}

	header .logo { width: 100%; margin: 10px 0 5px; text-align: center;}
	header .logo img { float: none;}

	header .redes { position: absolute; top: 14px; right: 2%; margin: 0;}
	header .redes .ico { width: 35px; height: 35px; background-size: 35px; margin: 0;}

	header .links { float: left; width: 100%; margin: 0; display: none;}
	header .links a { float: left; width: 90%; padding: 15px 5% 12px; margin: 0 0 2px; background-color: rgb(235, 235, 235);  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
	header .links b { display: none;}
	header .links a.doacao { display: block;}
	header .links .submenu { width: 100%; margin: 0;}
	header .links .submenu:hover .sub { display: none;}
	header .links .submenu a.primario.m0 { margin: 0;}
}
@media only screen and (max-width: 700px){
	footer .rodape .logo { width: 100%; text-align: center; margin: 0}
	footer .rodape .texto { width: 100%; margin: 20px 0 0;}
}
@media only screen and (max-width: 350px){
	footer .rodape .texto h3 { font-size: 1em;}
	footer .rodape .texto h2 { font-size: 1.5em;}
}