

.container-top-header{
    width: 100%;
    display: flex;
    align-items: center;
}



/**********************************************
**          Menu
** ********************************************/
header{
  width: 100%;
  height: 122px;
  position: fixed;
  z-index: 999;
  top: 0;
  background: white;
  align-items: center;
  display: flex;
  transition: all 0.5s ease;
}

.headerHome .container{
  height: 100%;
}



nav {position: relative;margin: 0 auto;}
.flexmenu{
  display: grid;
  grid-template-columns: 30% 50% 20%;
  align-items: center;
  height: 100%;
}

.logo {
  z-index: 123;
  width: 240px;
}

.logo__pic{width: 100%;height: 100%;object-fit: contain;object-position: center left;}
#main-menu{
  flex-grow: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  justify-content: space-between;
}

.main-menu__item{border: 0;list-style: none;display: inline-block;position: relative;}
.main-menu__link{position: relative;padding: 13px 12.5px;font-size: .88rem;font-weight: 700;letter-spacing: 0px;text-decoration: none;text-transform: uppercase;color: #4A4A4A;min-height: 0px;vertical-align: middle;overflow: hidden;display: block;}

a:hover .buttonSnake:nth-child(1),
a:hover .buttonSnake:nth-child(2),
a:hover .buttonSnake:nth-child(3),
a:hover .buttonSnake:nth-child(4){opacity: 1;}
.main-menu__item::before{content: '';width:100%;height:2px;/* background: #50afc1; */position: absolute;left:0;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;}
.main-menu__item.active::before{width: calc(100% - 12.5px);height: 5px;top: -31px;left: 50%;transform: translateX(-50%);}
.main-menu__item.active a{font-weight: 800;/* color: red; */}

.iconesMenu{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.iconeMenu{color: #4A4A4A;display: inline-block;font-size:20px;vertical-align: middle;text-align: center;margin-left: 24px;}
.iconeMenu:hover i{color: #48351b;}
.logo.logo2{display:block;}

.iconesMenu .button{
  margin-left:24px;
}

.itens-menu{
  width: 80%;
  padding: 0 24px;
  display: flex;
}

.itens-menu a{
  color: black;
}

.menu-title{
  text-align: left;
  letter-spacing: 0;
  color: #54462B;
  display: flex;
  align-items: center;
}



@media (min-width: 993px){
  .active, .menu-title:active{
    border-top: solid 5px #54462B;
    font-weight: bolder;
  }

  .menu-title:hover{
    font-weight: bolder;
  }

  .menu-title{
    height: 100%;
  }

  .main-menu__item {
      height: 100%;
  }
}


.headerHome .main-menu__link{color:#fff;}
/* .headerHome .logo__pic{ filter: invert(1) brightness(200%);} */
.headerHome .logo { display: block;}

/** menu "ativo" */
header.active {padding: 4
    px 0;}
header.active .logo{display: block}
header.active .main-menu__link {color: #fff;}
header.active .fab{color: #fff;}
header.active .main-menu__item.active::before{top: -24px;}


/** esconde o cabeçalho no topo da página ao rolar,
 ** colocar o tamanho do cabeçalho ou um pouco menos */
header.headerHidden{top: -125px;}




/** mobile -> tablets maiores, celulares em landscape, ... */
@media (max-width: 992px) {
  
  .form-contato .inputs {
      grid-template-columns: 1fr !important;
  }

  .bannerHome__form-input {
    width: 100% !important;
  }
  

    #main-menu{position: fixed;display: flex;flex-direction: column;background: white;right: -100%;top: 0px;width: 300px;bottom: 0;z-index: 999;justify-content: flex-start;align-items: flex-start;padding: 50px 1rem 1rem;transition: all 1s ease;min-height: 100vh;overflow-y: scroll;}
    #fechar-menu{color: #54462B;text-transform: lowercase;font-size: 25px;font-weight: lighter;display: flex!important;align-items:center;justify-content: center;width: 50px;text-align: center;height: 50px;position: absolute;top: 0;right: 0;}
    
    #mobile-toggle{
      width: 28px;
      height: 12px;
      position: absolute;
      right: 0;
      top: 50px;
      display: block !important;
    }

    .hidden-deskto{
      display: block !important;
    }

    #mobile-toggle .fa-bars{
      font-size: 30px;
    }

    .menu-title{
    margin: 14px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    color: black;
    }

    .headerHome .iconeMenu {
        margin-left: 24px;
    }

    #fechar-menu::before{content: "";position: fixed;height: 100vh;width: 0; left: 0;top: 0;z-index: -1;transition:all 1s ease;}
    #fechar-menu.active::before{background: rgba(0,0,0,0.5);width: calc(100% - 300px);}
    .flexmenu{padding: 15px 0;}
    .main-menu__item{width:100%;margin: 10px auto;margin: 0;color: #fff;padding: 0;}
    .main-menu__link{width:100%;padding: 15px 0;color: #fff;display: block;line-height: 1.25em;/* border-bottom: 1px solid #f0f0f0; */}
    .main-menu__link.active{border-bottom-color: #058ACB;}
    .main-menu__link::before{content:unset;}
    .submenuItem{padding: 20px 0;}
    .submenuItem::before{background: transparent;}
    .main-menu__item .btn-blue{ padding: 15px 0; margin-bottom: 30px;}

    .iconesMenu{text-align: center;/* margin: 10px auto 0 0; */}
    .iconeMenu{margin: 14px 0 0 10px;}

}