@media screen and (max-width: 56.2188rem) {
  header.header ul.nav {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    margin-left: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
  }

  .check {
    top: 2.3rem;
    left: 20%;
  }

  .header ul li a.active {
    pointer-events: none;
    color: gray;
  }

  .section-intro h1 {
    font-size: 2.25rem;
  }

  .section-intro p {
    font-size: 1rem;
  }

  .benefit {
    width: calc(100% - 1.25rem);
  }

}

@media screen and (max-width: 30rem) {
  .section-intro h1 {
    font-size: 1.75rem;
  }

  .section-intro p {
    font-size: 0.875rem;
  }
}



@media screen and (max-width: 78.125rem) {
  body .sink .faucets {
    left: 46vw !important;
  }
}

@media screen and (max-width: 18.75rem) {

  .sink-div {
    height: 0;
    width: 0;
    padding: 0 !important;
  }

  body.dark-mode .sink .faucets {
    opacity: 0;
    height: 0rem;
    width: 0rem;
  }

  body.dark-mode .sink {
    opacity: 0;
    height: 0rem !important;
    width: 0rem !important;
  }

  .sink .faucets div.sinks {
    height: 0rem;
    width: 0rem;
  }

  a.benefit {
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }

}



@media screen and (min-width: 84.375rem) {
  body .sink .faucets {
    left: 49vw !important;
  }
}

@media screen and (min-width: 212.5rem) {
  body .sink .faucets {
    left: 50vw !important;
  }
}

@media screen and (max-width: 40.625rem) {
  header div.main {
    margin-top: 3.4375rem;
  }

  .agrinho-info {
    top: 10rem !important;
  }


  .header .mobile-btn:checked~.mobile-icon .hamburguer:before {
    transform: translateX(-2.4375rem) translateY(11.875rem);
    width: 3.125rem;
    pointer-events: none;
  }

  .header .mobile-btn:checked~.mobile-icon .hamburguer2:before {
    transform: translateX(-0.5rem) translateY(8.75rem);
    width: 1.5625rem;
    pointer-events: none;
  }



  .header .mobile-btn:checked~.mobile-icon .hamburguer:after {
    transform: translateX(-3.75rem) translateY(15rem);
    width: 4.25rem;
    pointer-events: none;
  }

  .header .mobile-btn:checked~div.agrinho-info {
    display: block;
    position: absolute;
    top: 8.125rem;
    border-right: 0.0625rem solid white;
  }

}

@media screen and (max-width: 25rem) {
  .footer-menu {
    display: none;
  }

  div p span.hide {
    display: none;
  }

  .modal_item p {
    margin-bottom: 2.5rem;
  }

}

.logo img {
  width: 3.75rem;
  height: 3.75rem;
}

@media only screen and (max-width: 22.5rem) {
  .logo img {
    width: 1.875rem;
    height: 1.875rem;
  }

  .logo {
    width: 1.875rem !important;
    height: 1.875rem !important;
  }

}

@media only screen and (max-width: 68.75rem) {

  .logo h1 {
    font-size: 1.25rem;
  }

  .menu {
    flex-direction: column;
  }

  .menu-item {
    margin-right: 0;
    margin-bottom: 0.625rem;
    background-color: black;
  }

}

@media (max-width: 46.875rem) {
  .modal_item {
    width: 100%;
    max-height: 70vh;
    overflow: auto;
  }

  .hide_img {
    width: 100%;
    height: 15.625rem;
  }



  .hide_img .slides {
    width: 100%;
    height: 15.625rem;
  }

  .hide_img .slides .slide {
    width: 100%;
    height: 15.625rem;
  }

}

@media screen and (max-width: 12.5rem) {
  .hide_img {
    display: none;
  }

}

@media screen and (max-width: 37.8125rem) {

  div.description p.mobileText2 {
    display: none;
  }
}


@media screen and (max-width: 25rem) {

  div.description p.mobileText {
    display: none;
  }

  .septic-tank .label.inlet-label {
    left: -0.6125rem;
  }

  .septic-tank .inlet-pipe {
    left: 0rem;
  }

  .septic-tank .label.outlet-label {
    right: -0.3125rem;
  }

  .septic-tank div.label {
    padding-right: 0rem;
    padding-left: 0rem;
  }

  .septic-tank .outlet-pipe {
    right: 0rem;
  }

  div.septic-tank {
    width: 90%;
    height: 32.75rem;
    border: 0rem !important;
  }

  .septic-tank:after,
  .septic-tank:before {
    border: 0rem !important;
    display: none;
  }
}

@media screen and (max-width: 18.125rem) {
  div div.pipe1 {
    left: 21vw;
  }

  div div.pipe2 {
    left: -9vw;
  }
}

@media screen and (max-width: 13.75rem) {
  .septic-tank {
    display: none;
  }
}