@charset "utf-8";

header { position: fixed; float: left; width: 100%; z-index: 200;}
header .linha1 { display: flex; align-items: center; justify-content: space-between; position: relative; float: left; width: 90%; padding: 0 5%; background-color: #0F2242;}
header .chave { display: none;}

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

header .busca { display: flex; position: relative; float: left; width: 200px; 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 { position: relative; z-index: 1; float: left; width: 50px; height: 50px; background-color: transparent; cursor: pointer; outline: 0; border: 0;}
header .busca .lupa { display: flex; align-items: center; justify-content: center; position: absolute; width: 50px; height: 50px; top: 0; right: 0;}
header .busca .lupa i { font-size: 25px; color: #100E10;}

header .links { display: flex; align-items: center; float: left;}
header .links .um { float: left; padding: 26px 14px 24px; margin: 0 2px; background-color: #FFF041; text-transform: uppercase; line-height: 0; box-sizing: border-box;}
header .links .um.ativo { background-color: #00C9FC;}
header .links .um:hover { background-color: #00C9FC;}
header .links .dois { position: relative; float: left; padding: 10px 0; margin: 0 2px; box-sizing: border-box;}
header .links .dois .nome { position: relative; float: left; padding: 26px 34px 24px 14px; background-color: #FFF041; text-transform: uppercase; line-height: 0; box-sizing: border-box;}
header .links .dois .nome i { position: absolute; top: 17px; right: 10px;}
header .links .dois .nome i.down { display: none;}
header .links .dois .nome:hover { background-color: #00C9FC;}
header .links .dois .subs { display: none; position: absolute; width: 200px; top: 68px; left: 50%; padding: 10px; margin: 0 0 0 -100px; background-color: #FFFFFF; border-radius: 10px; box-sizing: border-box;}
header .links .dois .subs a { float: left; width: 100%; padding: 12px 10px 8px; margin: 3px 0; outline: 1px solid rgb(5 5 5 / 30%); text-align: center; box-sizing: border-box; border-radius: 10px;}
header .links .dois .subs a:hover { background-color: rgb(90 90 90 / 10%);}

header .sociais { display: flex; gap: 5px; float: left;}
header .sociais a { display: flex; align-items: center; justify-content: center; float: left; width: 45px; height: 45px; background-color: #FFFFFF; border-radius: 10px;}
header .sociais a i { font-size: 27px; color: #100E10;}


/* desktop */
@media only screen and (min-width: 1001px){
  header .links .dois:hover .subs { display: block;}
	header .links .dois:hover .nome i.up { display: none;}
	header .links .dois:hover .nome i.down { display: block;}
}

/* normal */
@media only screen and (max-width: 1200px){
	header { position: relative;}
	header .linha1 { display: block; width: 100%; padding: 0;}

	header .chave { display: flex; align-items: center; justify-content: center; position: absolute; width: 40px; height: 40px; top: 28px; left: 2%;}
	header .chave .ico { font-size: 40px; color: #FFFFFF;}
	header .chave .ico.fechar { display: none;}

	header .links { display: none;}
	header .sociais { display: none;}

	header .logo { display: flex; justify-content: center; width: 100%;}
	header .logo a { margin: 0 0 0 20px;}
	header .busca { width: 100%; border-radius: 0;}
	header .links { width: 100%;}
	header .links .um { width: 100%; margin: 1px 0 0; border-radius: 0;}
	header .links .dois { width: 100%; padding: 0; margin: 1px 0 0;}
	header .links .dois .nome { width: 100%; border-radius: 0;}
	header .links .dois.aberto .subs { display: block; position: relative; float: left; width: 100%; top: 0; left: 0; margin: 0; border-radius: 0;}
}