@charset "utf-8";

#header { position: fixed; top: 0; left: 0;}
#header .linha1 { padding: 15px 0;}

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

#header .logo { float: left; margin: 7px 0 0; font-size: 0;}

#header .links { float: left; margin: 4px 0 0;}
#header .links .um { float: left; padding: 5px 10px;}
#header .links .um:hover { background-color: rgb(90 90 90 / 20%);}
#header .links .dois { float: left; padding: 5px 10px;}
#header .links .csm { float: left;}
#header .links .csm .submenu { width: 180px; left: 50%; top: 0; padding: 35px 0 0; margin: 0 0 0 -90px;}
#header .links .csm .submenu .balao { padding: 5px 0;}
#header .links .csm .submenu .tres { padding: 10px;}
#header .links .csm .submenu .tres:hover { font-weight: bold;}

#header .sociais { float: right;}
#header .sociais .ico { float: left; width: 40px; height: 40px; margin: 0 0 0 3px; background-position: 50%; background-repeat: no-repeat;}
#header .sociais .ico.whatsapp { background-image: url('../imagens/sociais-whatsapp.png');}
#header .sociais .ico.instagram { background-image: url('../imagens/sociais-instagram.png');}

/* DESKTOP */
@media only screen and (min-width: 1001px){
  #header .auto { display: flex; justify-content: space-between;}
  #header .links .csm .submenu { display: none;}
  #header .links .csm .submenu .fechar { display: none;}
  #header .links .csm:hover .submenu { display: block;}
}
/* MOBILE */
@media only screen and (max-width: 1000px){
  #header .links .csm .submenu { display: none;}
  #header .links .csm .submenu .fechar { display: block; width: 30px; height: 30px; top: -15px; right: -15px;}
}

@media only screen and (max-width: 1000px){
  #header { position: absolute;}
  #header .linha1 { padding: 22px 0;}

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

  #header .logo { width: 100%; margin: 0; text-align: center;}
  #header .logo a { margin: 0 0 0 20px;}
  #header .links { width: 100%; margin: 21px 0 0;}
  #header .links .um { width: 100%; padding: 10px 0; text-align: center;}
  #header .links .dois { width: 100%; padding: 10px 0; text-align: center;}
  #header .links .csm { width: 100%;}
  #header .sociais { justify-content: center; width: 100%; margin: 11px 0 5px;}
}