.current-menu-item a{
      color: #fff;
}
.overlay {
      /*position: -webkit-sticky;
      position: sticky;*/
      position: fixed;
      width: 100%;
      height:auto; 
      top: 0;
      overflow: hidden;
      background-color: var(--primary);
      z-index: 7;
      border-bottom: 1px solid #cca351;
     opacity: 0;
/*
     transform: translateY(-100px);
     animation: animate_menu .5s forwards;
*/
    transform: translateY(-100px);
    animation: animate_menu 0.5s forwards;
}
@keyframes animate_menu{
      to{
        opacity: 1;
        transform: initial;
      }
}

    
.overlay .top ul li a{
color: #fff;
}
/* .slider{
  display: grid;
  position: relative;
  margin-top: -140px;
  z-index: -1;
}
.slider img{
  width: 100%;
  min-height: 300px;
  padding-right: 0;
  padding-bottom: 0;
  z-index: 0;
  border-top: 1px solid var(--sub-title);
} */
.mobile{
    display: none;
    position: fixed;
    width: 0;
    z-index: 99999;
    top: 0;
    left: auto;
    right: 0;
     background-color:var(--primary);
    padding: 0;
   justify-content: center;
    height: 0;
    flex-grow:1;
    border-left: 1px solid #cca351;
    transition: width 2s, height 4s;
    animation: animate_mobile_webbh 0.5s forwards;

}
@keyframes animate_mobile_webbh{
  to{
    width: 300px;
    height: 100vh;
  }
}

.mobile section{
  margin-left: 20px;
  margin-right: 20px;
}
#menu-menu-top-1{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin-top: 15px;
}
#menu-menu-top-1 li{
  text-align: left;
}
#menu-menu-top-1 li a{
  text-decoration: none;
  color: inherit;
  position: relative;
  display: block;
  padding: .75rem 0 .75rem 2.5rem;
  font-size: .875rem;
  line-height: 1;
  color: #fff;
  border-bottom:1px solid #ffffff;
}
@media(max-width: 900px){
  header .top{
    align-items: center;
   }
/*  #top{
    display: none;
  }*/
  .current_page_item a::after {
    margin-top: 2px;
    width: 10%;
    background-color: #fff;
  }
  .top{
    
    margin-right: 15px;
    margin-left: 15px;
  }
  .webbh-mobile{
    display: flex;
  }
    /* [data-menu="button"]{
      display:flex;
      align-items: center;
      background-color:var(--primary);
      border: none;
      padding: .5rem 1rem;
      border-radius: 4px;
      text-transform: uppercase;
      font-family: Oswald, sans-serif;
      font-weight: bold;
      font-size: 1rem;
      color: white;
      cursor: pointer;
      margin: 10px;
      width: 100px;
      height: 50px;
      position: fixed;
      z-index: 15;
      right: 0;
    }

    [data-menu="button"]::before{
      content: '';
      display: inline-block;
      height: 2px;
      width: 15px;
      background-color: #fff;
      box-shadow: 0 4px #fff , 0 -4px #fff;
      /**tracinhos**
      box-shadow: 0 4px #fff ,0 -4px #fff;
      transition: transform .3s;
      margin-right: 10px;
      transition: transform .3s;

    }

    [data-menu="button"].active-btn::before{
       transform: rotate(90deg);
    } */
    .active{
      display: flex !important;
      flex-direction: column;
      /*
      transition: transform .3s linear;
      animation: animate_menu 9s forwards;
      */
      
    
    }
    .active .logo {
      width: 200px;
      height: 150px;
      margin: 0 auto;
    }
    .active-btn{
      display: flex !important;
    }
    #menu-menu-top{
      display: none;
       /*position: absolute;*/
     position: fixed;
      background-color: #555;
      width: 160px;
      z-index: 13;
      /*top: 120px;*/
      padding: 10 0 20 0;
      box-shadow:  2px 2px 2px rgba(0, 0, 0, .2);
      right: 50px;
    }
    #menu-menu-top li{
      padding: 5px 15px;
    }
    #menu-menu-top li a{
      color: white;
        text-align: center;
    }
}
.main section{
  display: flex;
}
.main section #about,#about-img{
  margin: 1rem;
}
  /*Begin animação*/
  .general{
    opacity: 0;
    transform: translate3d(0,70px,0);
    transition: .9s;
  }
  .webbh-animation{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  /*End animação*/

/**/
.products .product_{

display: flex;
flex-wrap: wrap;
/*
display: grid;
grid-column: calc(3*1fr);*/
}
.products .product_ #product{
color: var(--txtcolor);
width: 33%;
}
@media (max-width: 900px){
  .products .product_{
    justify-content: center;
    max-width: 299px;
    margin: 0 auto;
    }
  .products .product_ #product{
    width: 100%;
    }

}
/* 
  .container-contact{
    grid-column: 1/-1;

    background-color: rgb(255, 255, 255);
    background-size: cover;
    background-position: center top;
    background-image: url(http://sapientiacordis.org/wp-content/uploads/2019/10/cópia-de-trees-1572409025166-4111.jpg);
  } 
*/
  .container-contact h1{
    margin-top: 50px;
    text-align: center;
    color: #fff;
  }

.page-contato,.page-servicos{
  grid-column: 2/3;
  width: 100%;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 100px;
}
.page-contato #contact-icon_{
  display: flex;
  flex-wrap: wrap;
}
.page-contato #contact-icon_ li{
  display: flex;
  align-items: center;
  padding-right: 10px;
 }
.page-contato #contact-icon_ li a::after{
 content: '';
 margin-right: 5px;
}
.page-contato #contact-icon_ .phone,.whtasapp,.email_contact,.maps{
  fill: #fff;
  width:14px; 
  height:14px;
}
.page-contato #contact-icon_ li .phone{
  fill: #000;
}
.page-contato #contact-icon_ li .whtasapp{
  fill: #000;
}
.page-contato #contact-icon_ li .email_contact{
  fill: #000;
}
.page-contato #contact-icon_ li .maps{
  fill: #000;
}
.page-contato #contact-icon_ li i{
  font-size: 18px;
color: #000;
}

/*end contact*/
/**/
.components-product_{
  display: flex;
  flex-wrap: wrap;
  
}
.components-product_ #product{
  max-width: calc(33%);
  max-height: auto;
  padding: 10px;
}
@media (max-width: 900px) {
  .components-product_ #product{
    width: 100%;
    margin: 10px;
  }
}
.components-product_ #product .tytle-webbh_2{
  color: #333;
}
/*btn-whatsapp*/

  
  #btnfooter{
  display: flex;
  justify-content: center;
  border-radius: 30px;
  position: fixed;
  justify-content: center;
  bottom: 50px;
  width: 280px;
  height: 50px;
  line-height: 51px;
  border: 1px solid #fff;
  padding: 1px;
  background-color:#5baa04;
  z-index: 999;
  right:1rem;
  }
  #btnfooter a .network-webbh {
  width: 32px;
  height: 32px;
  fill: #fff;
  padding-right: 10px;
}
#btnfooter a .phone {
  -webkit-animation: hour_batteries 2s ease infinite;
  animation: hour_batteries 2s ease infinite;
  transform-origin-x: 50%;
  transform-origin-y: 0px;
  transform-origin-z: initial;
}
  #btnfooter a{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto,Helvetica Neue,sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin-left: 5px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  
  }
  
  .webbh-phone-footer{
  color: #fff;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right:5px;
  }
  #webbh-phone-footer{
      fill: #fff;
      padding-right: 10px;
  }
  @media(max-width: 900px) {
    .btnfooter{
    position: relative;
    display: flex;
    justify-content:center;
    }
    #btnfooter {
      bottom: 50px;
    }
  }
  .webbh-phone-footer{
      -webkit-animation: hour_batteries 2s ease infinite;
              animation: hour_batteries 2s ease infinite;
      transform-origin-x: 50%;
      transform-origin-y: 0px;
      transform-origin-z: initial;
  }
  @keyframes hour_batteries {
      0% {margin-left: 0;}
      25% {margin-left: 7px;}
      50% {margin-left: 0;}
      75% {margin-left: -7px;}
      100% {margin-left: 0;}
  }
  @keyframes hour_batteries {
   0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  2% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  4% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }
  6% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }
  8% {
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }
  10% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }
  12% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }
  14% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }
  16% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }
  18% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }
  20% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  2% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  4% {
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }
  6% {
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
  }
  8% {
    -webkit-transform: rotate(-22deg);
    -ms-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }
  10% {
    -webkit-transform: rotate(22deg);
    -ms-transform: rotate(22deg);
    transform: rotate(22deg);
  }
  12% {
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }
  14% {
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
  }
  16% {
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }
  18% {
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
  }
  20% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
      }
}
  
  
/*footer*/
/*Logo-footer*/
@font-face {
  font-family:"Arial Black";
  font-variant:normal;
  font-style:normal;
  font-weight:900;src:url("#FontID0") format(svg)
  }
  .str1 {
    stroke-width:4.37;
    stroke-miterlimit:22.9256
  }
  .str2 {
    stroke:#70A89D;
    stroke-width:0.9;
    stroke-miterlimit:22.9256;
  }
  .str0 {
    stroke:#70A89D;
    stroke-width:25;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:22.9256;
  }
  .fil0 {fill:none}
  .fil1 {fill:#70A89D;}
  .fnt2 {
    font-weight:900;
    font-size:205.82px;
    font-family:'Arial Black';
  }
  .fnt1 {
    font-weight:900;
    font-size:209.74px;
    font-family:'Arial Black';
  }
  .fnt0 {
    
    font-weight:900;
    font-size:228.96px;
    font-family:'Arial Black';
  }
  .header-logo-svg,.footer-logo-svg{
  margin-top: -0px;
  }

  @media(max-width:900px){

    .footer-logo-svg{
      max-width:300px;
    }
  }
  /**/
  .content{
    width: auto;
  }
  .title-webbh_1{
    margin: 1rem;
    font-family: Oswald, sans-serif;
    color: #555;
    line-height: 1.3em;
    font-size: 30px;
    text-transform: uppercase;
  }
  #footer_container  #footer_contact h1,ul{
    /* margin-left: 15px;
    margin-right: 15px; */
  }
 #footer_container  #footer_contact,
 #end{
 /*   display: flex;
    flex-direction: column;
    color:#fff;
    margin: 0 auto;*/
  }
  #footer_contact ul li ._emails,._phone,.wts{
    margin-top: 5px;
    fill: #f5f5f5;
    width:28px; 
    height:22px;
    margin-right: 10px;
}

.control-size{
  display: flex;
justify-content: center;


}
 .footer_interno{
  fill:#fff;
     /*border e cor
     stroke:#fefefe;
     stroke-width:7.62;
     */
  }
 .footer_txt{
    fill:#fff;
    font-weight:900;
    font-size:20rem;
    font-family:'Arial Black'; 
  }
  .footer_interno:hover,.footer_txt:hover{
    margin-left: 50px;
    font-size:20rem;
    fill:#666;
  }
  @media(max-width: 900px){
    .footer #footer_container div:nth-child(2n+1) {
      border: none;
    }
    .footer_control-size{
      width: 250px;
      margin: 0 auto;
      padding-top: 20px;
    }
    body{
      grid-template-columns:  1fr;
    }
    header{
      grid-column: auto;
    }
    .content{
      /*height: 80vh;*/
      grid-column: auto;
    }
    .footer {
      height: auto;
    }
    .footer #footer_container{
      grid-template-columns:  1fr;
    }
    .footer #footer_container div{
      margin-top: auto;
      margin-bottom: auto;
      border-right: none;
      height: auto;
    }
  }