@charset "utf-8";

header { float: left; width: 100%; position: relative; z-index: 50;}
header .logo { float: left; width: 160px; height: 80px; margin: 5px 0 5px 2%; position: relative; text-align: center; font-size: 0;}
header .logo img { position: absolute; max-width: 100%; max-height: 80px; top: 50%; left: 50%; overflow: hidden; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

header .chave { position: absolute; width: 42px; height: 42px; top: 19px; left: 2%; z-index: 1; opacity: 0.8; display: none;}
header .chave .ico { float: left; width: 42px; height: 42px; background-size: 42px; background-position: 50%; background-repeat: no-repeat; cursor: pointer;}
header .chave .ico.fechar { display: none;}

header .checkout { float: right; width: 40px; height: 40px; margin: 25px 2% 0 0; opacity: 0.8; background-repeat: no-repeat; background-position: 50%; cursor: pointer;}
header .checkout:hover { opacity: 1;}

header .buscar { float: left; margin: 28px 0 0 5%; position: relative; opacity: 0.8;}
header .buscar .nomecampo { position: absolute; top: 9px; left: 10px; z-index: 1;}
header .buscar .campo { float: left; width: 260px; height: 35px; padding: 0 10px; background-color: transparent; position: relative; z-index: 2;}
header .buscar .campo:focus { border: 1px solid !important;}
header .buscar .botao { float: right; width: 42px; height: 38px; background-color: transparent; background-size: 30px; background-repeat: no-repeat; background-position: 50%; cursor: pointer; font-size: 0;}

header .bemvindo { float: right; width: 230px; padding: 0 0 0 35px; margin: 26px 5px 0 0; opacity: 0.8; background-position: 0 50%; background-repeat: no-repeat; position: relative;}
header .bemvindo .mensagem { float: left; width: 100%; font-size: 0.9em;}
header .bemvindo .entrar { float: left; margin: 2px 0 0; font-size: 1.1em; font-weight: bold;}
header .bemvindo .entrar b { padding: 0 1px; margin: 2px 7px 0 5px;}
header .bemvindo .entrar a:hover { text-decoration: underline;}

footer { float: left; width: 100%; position: relative; background-color: rgb(255, 255, 255);}
footer .cartoes { float: left; width: 96%; padding: 8px 2% 3px; text-align: center;}
footer .cartoes .img { max-width: 100%;}
footer .copyright { float: left; width: 90%; padding: 15px 5% 10px; background-color: #010101;}
footer .copyright h3 { float: left; width: 100%; text-align: center; font-size: 0.9em;}
footer .copyright h4 { float: left; width: 100%; text-align: center; font-size: 0.9em;}
footer .copyright h4 a:hover { text-transform: uppercase;}

@media only screen and (max-width: 1000px){
  header .logo { width: 100%; margin: 0;}
  header .logo img { max-width: 50%; max-height: 70%;}

  header .chave { display: block;}
  header .checkout { position: absolute; top: 19px; right: 2%; margin: 0;}

  header .buscar { width: 90%; margin: 0 5%; display: none;}
  header .buscar .nomecampo { left: 2%;}
  header .buscar .campo { width: 96%; padding: 0 2%;}
  header .buscar .botao { position: absolute; top: 0; right: 0;}

  header .bemvindo { float: left; width: 100%; padding: 20px 0; margin: 0; background-position: 5% 52%; display: none;}
  header .bemvindo .mensagem { text-align: center; font-size: 1em;}
  header .bemvindo .entrar { width: 100%; text-align: center;}
  header .bemvindo .entrar b { margin: 2px 8px 0 5px;}
}