@font-face {
    font-family: 'ProximaNovaLight';
    src: url('fontes/ProximaNovaAltLight.otf');
}      

@font-face {
    font-family: 'ProximaNovaSemibold';
    src: url('fontes/ProximaNovaSemibold.otf');
    font-weight: bold;
}      

@font-face {
    font-family: 'TrajanusRoman';
    src: url('fontes/TrajanusRoman-6aEq.ttf') format('truetype');
}      

/*
@font-face {
    font-family: 'AppleGaramond';
    src: url('fontes/AppleGaramond-Light.ttf');
}      

@font-face {
    font-family: 'AppleGaramond';
    src: url('fontes/AppleGaramond-LightItalic.ttf');
    font-style: italic;
}      
*/

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

body { background: white; padding: 0; margin: 0; font-family: 'ProximaNovaLight'; }

/* Cabeçalho */
.tamanho-menu-hamburger { width: 30px; height: 30px;  }

.hamburger-menu-line { height: 2px; margin: 5px 0; background: #999; cursor: pointer; }

.campo-busca { background: white; width: 100%; height: 35px; }

.botão-lupa {display: inline-block; border: 1px none green; width: 2.2rem; height: 100%; }

#SearchText {
   height: 35px; display: inline-block; position: absolute;
   border: none; padding-left: 5px;
}

#SearchText::placeholder { font-family: Arial; color: #aaa; font-size: 1rem; }

.logo-cabeçalho { height: 34px; }

#Menu {
   position: absolute; border: 1px none #ddd; width: 100%; height: 100%;
   overflow-y: scroll;
   top: 55px; background: white; z-index: 1; left: 100%; width: 0;
   transition-property: left, width; transition-duration: .2s;
}

.item-menu {
   height: 50px; padding-left: 20px; color: #000; border-bottom: 1px solid #ddd;
   line-height: 50px; font-size: .85rem;
}

.cabeçalho-menu { background: #f6f3eb; font-size: 1rem; }

.cabeçalho-principal {
   display: grid;
   grid-template-columns: 1fr 1.5fr 1fr ;
   grid-template-rows: 1fr 1fr;
   grid-template-areas:
      "logo logo menu"
      "search search search";
   grid-gap: 5px;
   padding: 14px;
   background-color: #222;
   color: white;
   font-size: 0.9rem;
}

.logo { grid-area: logo; }
.search { grid-area: search; padding-left: 0; }
.menu { grid-area: menu; text-align: right; }
.categ { display: none; }
.contact { display: none; }
/* Fim cabeçalho */

@media screen and (min-width: 920px) {
   .cabeçalho-principal {
      grid-template-areas:
         "logo search menu"
         "categ categ contact";
      padding: 16px 35px 5px 35px;
   }

   .menu { grid-area: initial; display: none; }
   .search { grid-area: search; padding-left: 2rem; }
   .categ { grid-area: categ; display: flex; align-items: center;  }
   .contact { grid-area: contact; display: flex; align-items: center; justify-content: flex-end; }


}

.botão {
   font-family: 'ProximaNovaLight'; text-transform: uppercase;
   font-size: 1rem; padding: .8rem 2.3rem; border: 2px solid black; color: #555;
   background-color: transparent;
}

.link-menu-principal {
   text-decoration: none; color: white; cursor: pointer; text-transform:uppercase;
}

.link-menu-celular {
   text-decoration: none; color: black; cursor: pointer; display: block; width: 100%; height: 100%;
}

.título { font-family: 'TrajanusRoman'; }