.overlay-menu {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: flex-start;
     z-index: 2;
}

menu {
     background-color: #fff;
     box-shadow: 0rem 0.4rem 1.4rem rgba(0, 0, 0, 0.09);
     padding-bottom: 2.1rem;
     z-index: 1;
     list-style-type: unset;
     margin-block-start: 0;
     margin-block-end: 0;
     margin-inline-start: 0;
     margin-inline-end: 0;
     padding-inline-start: 0;
     min-height: 69vh;
}

.menu-nav {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
     grid-column-start: 1;
     grid-column-end: 101;
}

.menu-nav--main {
     display: flex;
     flex-direction: row;
     align-content: center;
     justify-content: center;
     align-items: center;
     text-align: center;
     cursor: pointer;
     background-color: #fff;
}

.menu-nav--wrap {
     display: none;
     position: relative;
     width: 100%;
     min-height: 56vh;
     padding: 2rem 3rem;
     border-radius: 0.5rem;
     grid-column-start: 4;
     grid-column-end: 98;
     overflow-y: auto;
     overflow-x: hidden;
}

.menu-nav--wrap.active { display: grid; }

.lavel-one {
     width: 39.5rem;
     border-radius: 0.5rem;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     grid-column-start: 1;
     grid-column-end: 41;
     list-style: none;
}

.menu-li {
     position: relative;
     width: 100%;
     padding: 0.7rem 1rem;
     border-radius: 0.5rem;
}

.menu-li--link {
     width: 100%;
     height: 4rem;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     grid-column-start: 2;
     grid-column-end: 41;
     cursor: pointer;
}

.multi > .menu-li--link:after {
     content: '';
     align-self: center;
     width: 1.2rem;
     height: 1.4rem;
     background-image: url(/local/templates/ventluki/img/menu-icon--next.svg);
     z-index: 1;
}

.menu-li--name {
     display: flex;
     height: 100%;
     text-align: left;
     flex-direction: row;
     align-content: center;
     justify-content: flex-start;
     align-items: center;
     color: #131313;
     font-family: Inter;
     font-weight: 400;
     font-size: 1.7rem;
     line-height: 2.4rem;
     margin-left: 0.7rem;
}

menu a { text-decoration: none; }

.lavel-one--icon {
     width: 4rem;
     height: 4rem;
}

.lavel-two, .lavel-three {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     position: absolute;
     width: 25rem;
     border-radius: 0.5rem;
     grid-column-start: 43;
     grid-column-end: 68;
     list-style: none;
     opacity: 0;
     z-index: -1;
}

.lavel-three {
     grid-column-start: 70;
     grid-column-end: 95;
}

.lavel-two--item {
     margin-left: 3rem;
}

.lavel-three--item {
     margin-left: 6rem;
}

@media (min-width: 600px) {
     .overlay-menu {
          transform: translateY(-100vw);
     }
     
     .menu-close, .menu-title, .catalog-nav--close, .menu-search--wrap { display: none; }
     
     .menu-nav {
          justify-content: start;
          width: 100%;
     }
     
     .menu-nav--main {
          width: 49.5rem;
          padding: 2rem;
          font-family: InterBold;
          font-weight: 700;
          font-size: 2rem;
          line-height: 2.4rem;
          color: #131313;
     }
     
     .menu-nav--main.active {
          background-color: #131313;
          color: #fff;
     }
     
     .menu-nav--main:hover {
          background-color: #FA601A;
          color: #fff;
     }
     
     .menu-nav--main.active:hover {
          background-color: #131313;
          color: #fff;
     }
     .menu-li--name {
          width: 100%;
     }
     
     .menu-li:hover {
          background-color: #F6F6F6;
     }
     
     li:hover > ul, ul:hover {
          opacity: 1;
          z-index: 2;
     }
     
     .lavel-two, .lavel-three {
          top: 0rem;
          left: 35.5rem;
     }
     
     .lavel-three {
          top: 0;
          left: 20rem;
          width: 28rem;
     }
     
     .lavel-two--item {
          margin-left: 3rem;
     }
     
     .lavel-three--item {
          margin-left: 6rem;
     }
}

@media (max-width: 599px) {
     .overlay-menu {
          transform: translateY(-100vh);
     }
     
     .catalog-nav--close {
          position: absolute;
          top: 2.6rem;
          right: 2rem;
          width: 1.5rem;
          height: 1.5rem;
          background-image: url('/local/templates/ventluki/img/close.svg');
          z-index: 1;
     }
     
     .menu-title {
          display: inline-block;
          width: 36rem;
          margin-top: 2rem;
          margin-left: calc((100% - 39rem) / 2);
          font-family: InterMedium;
          font-weight: 500;
          color: #131313;
          text-transform: uppercase;
          font-size: 2.2rem;
          text-align: left;
          line-height: 2.6rem;
     }
     
     .menu-search--wrap {
          width: 39rem;
          margin-top: 1.3rem;
          margin-left: calc((100% - 39rem) / 2);
          border-radius: 0.5rem;
          border: 0.1rem solid #9b9a9a;
     }
     
     .menu-search--wrap:before {
          content: '';
          position: absolute;
          top: 0.5rem;
          left: 0.8rem;
          width: 2.5rem;
          height: 2.5rem;
          background-color: #fff;
          background-size: 1.3rem;
          background-image: url('/local/templates/ventluki/img/search.svg');
          z-index: 1;
     }
     
     .menu-search--wrap.focused {
          border-color: #FA601A;
          background-color: #FA601A;
     }
     
     .menu-search--wrap:before {
          content: '';
          position: absolute;
          top: 0.6rem;
          left: 2.5rem;
          width: 2rem;
          height: 2rem;
          background-image: url('/local/templates/ventluki/img/search.svg');
          z-index: 1;
          cursor: pointer;
          background-color: transparent;
     }
     
     .menu-search--wrap.focused:before {
          left: 0.85rem;
          background-image: url('/local/templates/ventluki/img/search_active.svg');
     }
     
     .menu-search {
          width: 34.8rem;
          height: 3.5rem;
          font-family: Inter;
          font-weight: 400;
          padding: 1rem;
          grid-column-start: 5;
          grid-column-end: 41;
          border-radius: 0.5rem;
     }
     
     .menu-nav {
          width: 39rem;
          margin-top: 1.7rem;
          margin-left: calc((100% - 39rem) / 2);
          justify-content: space-evenly;
     }
     
     .menu-nav--main {
          padding-bottom: 0.1rem;
          font-family: InterSemiBold;
          font-weight: 700;
          font-size: 1.8rem;
          line-height: 2rem;
          color: #9B9A9A;
     }
     
     .menu-nav--main.active {
          color: #131313;
          border-bottom: 0.1rem solid #131313;
     }
     
     .multi > .menu-li--link:after {
          position: absolute;
          right: 0;
     }
     
     .menu-li.active {
          background-color: #F6F6F6;
     }
     
     li.active > ul {
          position: relative;
          opacity: 1;
          z-index: 2;
     }
     
     .lavel-two--item, .lavel-three--item {
          margin-left: 3rem;
     }
}