html, body { overflow-x: none }

.navbar-toggler { 
  border: 0;
  width: 48px;
  height: 48px;
  display: flex;
  gap: .375rem;
  flex-direction: column;
  justify-content: center;
  font-size: 100%;
  padding: .75rem .5rem }

@media(max-width:1199.98px){
    header .navbar-brand img {
      max-width: 60vw;
      max-height: calc(2.5rem + 1.75vw) }
}
  
@media(max-width:991.98px){
    header [class*="container"] { padding-right: 1rem  !important }
  
    header .navbar-collapse { 
      background: var(--flex-dark);
      width: 100%;
      position: fixed;
      z-index: 100000;
      top: 0;
      left: 0  }
  
    header .navbar-nav {
      justify-content: center;
      width: 100%;
      height: 100vh }  
  
    header .nav-link { 
      text-align: center;
      color: var(--flex-primary);
      opacity:.5;
      padding: .75rem 3rem !important; 
      width: 100%;
      font-size: 120% }
  
    header .nav-link.active,
    header .nav-link:hover,
    header .nav-link:active,
    header .nav-link:focus { 
      opacity:1;
      color: var(--flex-primary) !important }
  
    header .nav-item .btn { font-size: 120% }
}

/* 
#hero .carousel-inner {
  filter: grayscale(1);
  mix-blend-mode: overlay } */

#hero img {
  opacity:.4;
  height: 100%;
  width: 100%;
  object-fit: cover }

#produtos article .ratio { transition: all 300ms }  
#produtos article:hover .ratio { 
  transform:scale(1.15) translate(0,-5%) }  

  
/* 
#produtos img {
  filter: grayscale(1);
  mix-blend-mode: overlay;
  height: 100%;
  width: 100%;
  object-fit: cover }

#produtos article .bg-dark,
#produtos article .bg-dark h2,
#produtos article .bg-dark p,
#produtos article .bg-dark a { transition: all 300ms }

#produtos article .bg-dark h2 { transform: translate(0,150%) }

#produtos article .bg-dark p,
#produtos article .bg-dark a { 
  opacity:0;
  transform: translate(0,100%) }

#produtos article:hover img { opacity:.25 }

#produtos article:hover .bg-dark h2 { transform: translate(0,0) }

#produtos article:hover .bg-dark p, 
#produtos article:hover .bg-dark a { 
  opacity: 1;
  transform:translate(0,0) } */

#btnWhatsapp {
    z-index: 1000;
    transition: all 200ms ease-in-out;
    position: fixed;
    right: -1em }

#btnWhatsapp:hover { right: 1em }