@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Yantramanav:400,900');

@font-face {
	font-family: 'aller_displayregular';
	src: url('../fonts/allerdisplay-webfont.woff2') format('woff2'), url('../fonts/allerdisplay-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body { margin: 0 auto; background-color: #390077; font-family: 'Yantramanav', sans-serif; font-size: 16px;}
body a:link { text-decoration: none; color: #000000;}
body a:visited { color: #000000;}
body a:hover { color: #000000;}
body a:active { color: #000000;}
body h1, h2, h3, h4, h5, h6 {font-weight: normal; margin: 0;} 
body img { border: 0;}

body .center { margin: 0 auto; width: 90%;}
body .sombra1 { -webkit-box-shadow: 0 5px 10px -5px rgba(0,0,0,0.4); -moz-box-shadow: 0 5px 10px -5px rgba(0,0,0,0.4); box-shadow: 0 5px 10px -5px rgba(0,0,0,0.4);}
body .sombra2 { -webkit-box-shadow: 0 0 0 1px #CCCCCC; -moz-box-shadow: 0 0 0 1px #CCCCCC; box-shadow: 0 0 0 1px #CCCCCC;}
body .sombra3 { -webkit-box-shadow: 0 0 13px -5px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 13px -5px rgba(0,0,0,0.4); box-shadow: 0 0 13px -5px rgba(0,0,0,0.4);}
body .border4 { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
body .border8 { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
body .border100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
body .fundobranco { float: left; width: 90%; padding: 20px 5%; position: relative; z-index: 100;}
body .t4 {-webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
body .t7 {-webkit-transition: 0.7s ease-in; -moz-transition: 0.7s ease-in; -o-transition: 0.7s ease-in; transition: 0.7s ease-in;}
body .n { display: none;}

@media only screen and (max-width: 1000px){
	body .center { width: 96%;}
}

header { position: fixed; float: left; width: 100%; z-index: 200;}
header .linha1 { position: relative; float: left; width: 90%; padding: 12px 5% 5px; background-color: #5f0086;}
header .linha2 { position: relative; float: left; width: 90%; padding: 0 5%; background-color: #ff751f;}

header .chave { display: none; position: absolute; width: 40px; height: 40px; top: 28px; left: 2%; font-size: 0;}
header .chave.abrir { background: url('../imagens/header-chave-abrir.png?v1') 50% no-repeat;}
header .chave.fechar { background: url('../imagens/header-chave-fechar.png?v1') 50% no-repeat;}

header .logo { float: left; font-size: 0;}

header .busca { display: flex; float: left; width: 35%; margin: 14px 0 0 4%; background-color: #FFFFFF;}
header .busca .campo { float: left; width: 100%; height: 50px; padding: 10px; border: 0; outline: 0; box-sizing: border-box; font-size: 1.1em;}
header .busca .botao { float: left; width: 50px; height: 50px; background-color: transparent; background-image: url('../imagens/icoBusca.png'); background-repeat: no-repeat; background-position: 50%; cursor: pointer; outline: 0; border: 0;}

header .links { float: right; margin: 16px 0 0;}
header .links a { float: left; padding: 22px 10px 18px; margin: 0 2px; outline: 1px solid #ffffff54; outline-offset: -1px; text-transform: uppercase; font-weight: bold; font-size: 1em; line-height: 0; color: #FFFFFF;}
header .links a.ativo { background-color: rgba(0, 0, 0, 0.15);}
header .links a:hover { background-color: rgba(0, 0, 0, 0.15);}

header .categorias { float: left;}
header .categorias a { float: left; padding: 27px 20px 23px; border-left: 1px solid #090909; font-weight: bold; font-size: 1em; line-height: 0; color: #090909;}
header .categorias a:hover { background-color: #a7f205;}
header .categorias a.ativo { background-color: #a7f205;}
header .categorias a.ultimo { border-right: 1px solid #090909;}

header .sociais { position: absolute; top: 0; right: 5%;}
header .sociais .ico { float: left; width: 50px; height: 50px; background-size: 80%; background-position: 50%; background-repeat: no-repeat; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;}
header .sociais .ico.instagram { background-image: url('../imagens/icoInst.png?v1');}
header .sociais .ico.youtube { background-image: url('../imagens/icoYou.png?v1');}
header .sociais .ico.facebook { background-image: url('../imagens/icoFace.png?v1');}

@media only screen and (max-width: 1000px){
	header { position: relative;}
	header .linha1 { width: 96%; padding: 0 2%;}
	header .linha2 { width: 96%; padding: 0 2%;}

	header .chave { display: block;}
	header .links { display: none;}
	header .linha2 { display: none;}

	header .logo { width: 100%; padding: 5px 0; text-align: center;}
	header .logo a { margin: 0 0 0 5%;}
	header .busca { width: 100%; margin: 0 0 10px;}
	header .links { width: 100%; margin: 0 0 12px;}
	header .links a { width: 100%; padding: 27px 0 23px; margin: 2px 0; text-align: center;}
	
	header .categorias { width: 100%; margin: 0;}
	header .categorias a { width: 100%; padding: 32px 0 28px; border-left: 0; border-bottom: 1px solid #090909;}
	header .categorias a.ultimo { border-right: 0;}

	header .sociais { display: flex; justify-content: center; position: relative; float: left; width: 100%;}
}



footer { float: left; width: 100%;}
footer .whatsapp { float: left; width: 100%; padding: 25px 0 20px; margin: 20px 0 0; background-color: #8dcf00; text-align: center;}
footer .whatsapp b { padding: 15px 0 10px 45px; background-image: url('../imagens/whatsapp.png'); background-position: 0 50%; background-repeat: no-repeat; font-size: 1.5em; color: #FFFFFF;}
footer .whatsapp:hover { background-color: #39884e;}
footer .sociais { float: left; width: 100%; background-color: #222222; padding: 40px 0 30px; -webkit-box-shadow: 0 0px 15px -5px rgba(0,0,0,0.4); -moz-box-shadow: 0 0px 15px -5px rgba(0,0,0,0.4); box-shadow: 0 0px 15px -5px rgba(0,0,0,0.4);}
footer .sociais .tab { width: 28%;}
footer .sociais .tab.ta1 { float: left; margin-left: 10%}
footer .sociais .tab.ta2 { float: left; margin-left: 5%;}
footer .sociais .tab.ta3 { float: left; margin-left: 1%;}
footer .sociais .tab .ico { float: left; width: 50px; height: 50px; background-color: #FFFFFF; background-size: 50px; margin: 0 7px 0 0;}
footer .sociais .tab .ico.facebook { background-image: url(../imagens/icoFace.png);}
footer .sociais .tab .ico.youtube { background-image: url(../imagens/icoYou.png);}
footer .sociais .tab .ico.instagram { background-image: url(../imagens/icoInst.png);}
footer .sociais .tab .nome { margin: 0 0 5px; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #FFFFFF;}
footer .sociais .tab .link { float: left; padding: 4px 10px 3px; font-weight: bold; font-size: 1em; color: #FFFFFF;}
footer .sociais .tab .link.youtube { background-color: #EE0000;}
footer .sociais .tab .link.instagram { background-color: #333333;}
footer .sociais .tab .link.youtube:hover { background-color: #AA0000;}
footer .sociais .tab .link.instagram:hover { background-color: #000000;}
footer .rodape { float: left; width: 100%; padding: 20px 0 15px; background-color: #111111;}
footer .rodape .copyright { float: left; margin: 9px 0 0; font-weight: bold; font-size: 1em; color: #AAAAAA;}
footer .rodape .divulgue { float: right; padding: 10px 10px 8px; background-color: #333333; font-weight: bold; font-size: 1em; color: #FFFFFF;}
footer .rodape .divulgue:hover { background-color: #AAAAAA;}

@media only screen and (max-width: 1000px) {
	footer .sociais .tab { width: 25%;}
	footer .sociais .tab.ta1 { float: left; width: 40%; margin-left: 0}
	footer .sociais .tab.ta2 { float: left; margin-left: 5%;}
	footer .sociais .tab.ta3 { float: right; margin-left: 0;}
	footer .rodape .copyright { width: 100%; margin: 9px 0 0; text-align: center;}
	footer .rodape .divulgue { float: left; width: 96%; padding: 10px 2% 8px; text-align: center;}
}
@media only screen and (max-width: 700px) {
	footer .sociais .tab { width: 48%;}
	footer .sociais .tab.ta1 { float: left; width: 100%; margin-left: 0; margin-bottom: 20px;}
	footer .sociais .tab.ta2 { float: left; margin-left: 0;}
	footer .sociais .tab.ta3 { float: right; margin-left: 0;}
}
@media only screen and (max-width: 380px) {
	footer .sociais .tab { width: 100%;}
	footer .sociais .tab.ta2 { margin-bottom: 20px;}
}