@charset "utf-8";

header .fundo { position: absolute; top: 0; left: 0; padding: 10px 0; background-color: rgb(70 70 65 / 95%)}

header .chave { display: none; top: 28px; left: 10px;}
header .chave.abrir { background: url('../../imagens/site/header-chave-abrir.png?v5') 50% no-repeat;}
header .chave.fechar { background: url('../../imagens/site/header-chave-fechar.png?v5') 50% no-repeat;}

header .logo { float: left;}

header .lado { float: right; padding: 12px 0 8px;}

header .links { float: left; margin: 0 70px 0 0;}
header .links .um { float: left; padding: 20px 15px; text-transform: uppercase; font-size: 1em;}
header .links .um i { display: none; bottom: 0; left: 50%; margin: 0 0 0 -20px; background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);}
header .links .um.ativo i { display: block;}
header .links .um:hover i { display: block !important;}
header .links:hover .um.ativo i { display: none;}

header .sociais { float: left; margin: 8px 0 0;}
header .sociais .um { float: left; width: 40px; height: 40px; margin: 0 0 0 5px;}
header .sociais .um.instagram { background: rgb(220 227 219) url('../../imagens/site/sociais-instagram.png?v1') 50% no-repeat;}
header .sociais .um.whatsapp { background: rgb(220 227 219) url('../../imagens/site/sociais-whatsapp.png?v1') 50% no-repeat;}
header .sociais .um:hover { transform: rotate(360deg);}

#header.fixed .fundo { position: fixed;}

@media only screen and (max-width: 1000px){
  header .fundo { padding: 0;}

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

  header .logo { width: 100%; padding: 10px 0 10px 50px; text-align: center;}
  header .lado { width: 100%; padding: 0;}
  header .links { width: 100%; margin: 5px 0 0; background-color: rgb(5 5 5 / 98%); -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
  header .links .um { width: 100%; padding: 18px 0; text-align: center;}
  header .sociais { justify-content: center; width: 100%; padding: 10px 0; margin: 0 0 11px; background-color: rgb(255 255 255); -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}

  #header.fixed .fundo { padding: 0;}
}
@media only screen and (max-width: 500px){
  header .chave { top: 20px;}
  header .logo { padding: 10px 0 10px 30px;}
  header .logo img { height: 60px;}
}