@media all and (max-width:1024px) {
  .menu li a {
      color: var(--color-white);
      font-size: 16px;
  }
}
@media all and (max-width:900px) {

/*    #navigation {
      position: fixed;
      top: 0;
      left: -320px;
      bottom: 0;
      height: 100vh;
      background-color: var(--bg-dark);
      width: 320px;
      padding: 20px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      overflow: auto;
    }
     
    .menu li {
      float: none;
      margin-left: 0px;
      margin-bottom: 20px;
   }*/
   .whywe-list li {
    height: 150px;
    max-width: 150px;
  }
   .header-bottom-content .right {
    display: none;
   }
    #navigation {
    position: fixed;
    top: -100vh;
    left:0;
    bottom: 0;
    height: 100vh;
    background-color: var(--bg-light-2);
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100vw;
    overflow: auto;
  }
  #navigation .menu li a {color:var(--color-black)}

  .header-bottom-content .btn {
    display: none;
  }
  
   #openmenu,
   #closemenu,
   #phonemenu {
      display: inline-block;
   }
   #openmenu-desk,#closemenu-desk {
    display: none;
   }
   #phonemenu {margin-right:.5em}
   #closemenu {
      float: right;
   }

  .menu {
    padding-top: 20px;
    overflow: hidden;
    clear: both;
  }

  .menu li {
    float: none;
    margin: 0px 0px;
    margin-bottom: 20px;
  }

   .aboutus-img,
   .aboutus-content,
   .wrapper-services aside,
   .services-content,
   .wrapper-contact, .wrapper-faq-list  {
      width: 100%;
  }

  .aboutus-img {
      margin-bottom: 50px;
  }

  .aboutus-content {
      padding-left: 0px;
  }
  
  .wrapp-experience {
      left: 0px;
  }
  
  .single-edge,
  .single-service {
      width: calc(50% - 20px);
  }
  
  .wrapper-services aside,
  .wrapper-contact {
      padding-right: 0px;
  }
  
  .wrapper-pricing {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
  }

  .single-pricing,.single-link {
      width: calc(50% - 40px);
      margin: 20px;
  }
  
  .wrapper-form {
      width: 100%;
  }

  .wrapper-contact {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  }

  .single-address {
      width: 50%;
      padding: 20px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
  }
  .water-price {
      width: 13em;
      height: 13em;
    }
  .price {
      font-size: 43px;    
  }
  }


  @media all and (max-width:650px) {

      .header-top-content {
        display: none;
      }

      .wrapper-header-content {
        height: 600px;
      }    
  
      .single-edge, .single-service {
          width: calc(100% - 20px);
      }

      .single-pricing,.single-link {
          width: calc(100% - 40px);
      }

      .single-address {
          width: 100%;
          margin-bottom: 20px;
          text-align: center;
      }

      .wrapper-contact {
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
      }

      .wrapper-input input {
          width:100%;
      }

      h1 {
          font-size: 60px;
      }
    .header-content h1 {
      font-size: 36px;
        margin-bottom: 175px;
        margin-top: 70px;
    }
    .header-content h1 span.small {
      font-size:16px;
    }
      h2 {
          font-size: 40px;
      }
      
  }