@charset "utf-8";

header { position: fixed; width: 100%; top: 0; left: 0; z-index: 20;}
header .logo { float: left; margin: 10px 0 2px 5%; font-size: 0; position: relative; z-index: 10;}
header .topo { float: right; margin: 0 5% 0 0;}
header .menu { float: left; width: 100%; position: relative;}
header .bg { float: left; width: 100%; background-color: rgb(218, 218, 218);}

header .chave { position: absolute; width: 40px; height: 40px; top: 13px; left: 2%; z-index: 12; display: none;}
header .chave .ico { float: left; width: 40px; height: 40px; background-position: 50%; background-repeat: no-repeat;}
header .chave .ico.abre { background-image: url("../imagens/abre.png");}
header .chave .ico.fecha { background-image: url("../imagens/fecha.png"); display: none;}

header .grupotele { float: left; margin: 28px 0 0;}
header .grupotele em { float: left; width: 40px; height: 40px; background-color: rgb(70, 84, 91); background-image: url('../imagens/telegram.png'); background-position: 50%; background-repeat: no-repeat; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
header .grupotele b { float: left; padding: 12px 10px 9px; margin: 0 0 0 5px; background-color: rgb(70, 84, 91); text-transform: uppercase; font-weight: normal; font-size: 0.9em; color: rgb(255, 255, 255); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
header .grupotele:hover em { background-color: rgb(19, 26, 29)}
header .grupotele:hover b { background-color: rgb(19, 26, 29)}

header .redes { float: left; width: 114px; margin: 0 0 0 100px; position: relative;}
header .redes .tab { position: absolute; width: 40px; top: 0;}
header .redes .tab .barra { float: left; width: 3px; margin: 0 0 0 18px; background-color: rgb(70, 84, 91);}
header .redes .tab .ico { float: left; width: 40px; height: 40px; background-color: rgb(70, 84, 91); background-position: 50%; background-repeat: no-repeat;-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
header .redes .tab.telegram { left: 0; z-index: 1;}
header .redes .tab.instagram { left: 37px; z-index: 2;}
header .redes .tab.facebook { left: 74px; z-index: 2;}
header .redes .tab.telegram .barra { height: 48px;}
header .redes .tab.instagram .barra { height: 28px;}
header .redes .tab.facebook .barra { height: 8px;}
header .redes .tab.telegram .ico { background-image: url('../imagens/telegram.png');}
header .redes .tab.instagram .ico { background-image: url('../imagens/instagram.png');}
header .redes .tab.facebook .ico { background-image: url('../imagens/facebook.png');}
header .redes .tab .ico:hover { animation: redes 0.3s; animation-iteration-count: 2;}


header .login { float: right; padding: 5px 9px 5px 30px; margin: 32px 50px 0 0; outline: 1px solid rgb(70, 84, 91); background: rgb(228, 228, 228) url(../imagens/login.png?v7) no-repeat 9px 50%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
header .login:hover { background-color: rgb(241, 241, 241);}


header .velas-top { float: left; width: 100%; height: 30px; position: relative; z-index: 3; background-color: rgb(218, 218, 218); background-image: url('../imagens/velas-top.png'); background-position: 50%;}
header .velas-bottom { float: left; width: 100%; height: 30px; position: relative; z-index: 1; background-image: url('../imagens/velas-bottom.png'); background-position: 50%;}
header .velas-bottom-cinza { position: absolute; width: 100%; height: 30px; top: -10px; left: 0; display: none; position: relative; z-index: 1; background-image: url('../imagens/velas-bottom-cinza.png?v11'); background-position: 50%;}
header .velas-bottom-esconde { float: left; width: 100%;}

header .links { float: left; width: 100%; padding: 5px 0 0; position: relative; z-index: 2; background-color: rgb(255, 255, 255); text-align: center;}
header .links .um { padding: 9px 30px; position: relative; z-index: 1; border-right: 2px solid rgb(210, 210, 210); text-transform: uppercase; font-style: normal; font-size: 0.9em; color: rgb(70, 84, 91);}
header .links .um.contato { border-right: 0;}
header .links .um.ativo { font-weight: bold;}
header .links .um:hover { color: rgb(0, 0, 0);}
header .links .sublinks { position: relative; font-weight: normal;}
header .links .sublinks .um { position: relative; background-position: 50% 100%; background-repeat: no-repeat;}
header .links .sublinks .um i { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none;}
header .links .sublinks .opcoes { position: absolute; width: 200%; top: 0; left: -50%; padding: 30px 0 0; display: none;}
header .links .sublinks .opcoes .dois { float: left; width: 90%; padding: 17px 5%; background-color: rgb(32 41 46); border-bottom: 1px solid rgb(70, 84, 91); text-align: left; color: rgb(255, 255, 255); -webkit-border-top-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
header .links .sublinks .opcoes .tres { float: right; width: 85%; padding: 12px 5%; background-color: rgb(121, 132, 138); border-bottom: 1px solid rgb(32 41 46); text-align: left; color: rgb(255, 255, 255);}
header .links .sublinks .opcoes .dois:hover { background-color: rgb(19, 26, 29);}
header .links .sublinks .opcoes .tres:hover { background-color: rgb(89, 99, 105);}
header .links .sublinks .opcoes .dois.ativo { background-color: rgb(19, 26, 29);}
header .links .sublinks .opcoes .tres.ativo { background-color: rgb(89, 99, 105);}


footer { float: left; width: 100%; position: relative;}
footer .copyright { float: left; width: 90%; padding: 16px 5% 15px; background-color: rgb(32 41 46); position: relative; z-index: 1;}
footer .copyright h4 { float: left; width: 100%; text-transform: uppercase; text-align: center; color: rgb(121, 132, 138);}
footer .criacao { float: left; width: 100%; height: 35px; background-color: rgb(70, 84, 91); background-image: url("../imagens/d10web.png"); background-position: 50% 100%; background-repeat: no-repeat;}
footer .criacao:hover { background-position: 50% 0;}

@media only screen and (max-width: 1100px){
	header .redes { margin: 0 0 0 50px;}
}
@media only screen and (min-width: 1001px){
	header .velas-bottom.n { height: 0;}

	header .links.fixed { padding: 5px 0 15px; -webkit-box-shadow: 0 0 10px 0 rgb(0, 0, 0, 15%); -moz-box-shadow: 0 0 10px 0 rgb(0, 0, 0, 15%); box-shadow: 0 0 10px 0 rgb(0, 0, 0, 15%);}
	header .links .sublinks:hover .um { background-image: url('../imagens/seta-links.png');}
	header .links .sublinks:hover .opcoes { display: block;}
}
@media only screen and (max-width: 1000px){
	header { float: left; position: relative;}
	header .logo { width: 100%; margin: 9px 0 0; text-align: center;}
	header .logo img { height: 50px;}
	header .topo { width: 96%; padding: 0 2%; margin: 8px 0 0; border-top: 1px solid rgb(70 84 91 / 30%); display: none;}
	header .chave { display: block;}

	header .grupotele { margin: 30px 0 24px;}
	header .redes { float: right; margin: 0;}

	header .velas-top { display: none;}
	header .velas-bottom-cinza { display: block;}
	header .velas-bottom-esconde { display: none;}

	header .links { padding: 0; display: none;}
	header .links .um { float: left; width: 100%; padding: 20px 0 18px; border-right: 0; border-bottom: 1px solid rgb(218, 218, 218); font-size: 1.1em;}

	header .links .sublinks { float: left; width: 90%; margin: 0 5%; background-image: url('../imagens/seta-submenu.png'); background-position: 100% 50%; background-repeat: no-repeat;}
	header .links .sublinks .um i.abre { display: block;}
	header .links .sublinks .um:hover { color: rgb(70, 84, 91);}
	header .links .sublinks .opcoes { float: left; width: 100%; position: relative; top: 0; left: 0; padding: 0;}

	header .links .sublinks.ativo .um { border-bottom: 0; background-image: url('../imagens/seta-links.png');}
	header .links .sublinks.ativo .opcoes { display: block;}

	header .login { position: absolute; top: 15px; right: 2%; margin: 0; z-index: 15;}
}
@media only screen and (max-width: 500px){
	header .login { padding: 18px; background-position: 50%; font-size: 0;}
}
@media only screen and (max-width: 340px){
	header .logo { margin: 10px 0;}
	header .logo img { height: 40px;}
	header .grupotele b { padding: 12px 4px 8px;}
}