:root {
  /*--lsm-w: 320px;*/
  --lsm-w: 420px;
  --lsm-bg: #0f0f10;
  --lsm-bg-2: #151517;
  --lsm-fg: #fff;
  --lsm-fg-dim: #c9c9cf;
  --lsm-border: #26262a;
  --lsm-speed: 240ms;
}

#lsm-open {
  position: relative;
  z-index: 10001;
  background: transparent;
  color: inherit;
  border: 0;
  font: inherit;
  padding: .5rem .75rem;
  cursor: pointer;
}

.lsm-panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lsm-w);
  background: var(--lsm-bg);
  color: var(--lsm-fg);
  z-index: 10000;
  transform: translateX(-100%);
  transition: transform var(--lsm-speed) ease;
  overflow: visible;
  border-right: 1px solid var(--lsm-border);
}

.lsm-panel.is-open { transform: translateX(0); }
.lsm-panel:not(.is-open) .lsm-menu ul {
  transform: translateX(-10px);
  opacity: 0;
  pointer-events: none;
}


#lsm-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: transparent;
  color: var(--lsm-fg);
  border: 0;
  font-size: 1.25rem;
  padding: .25rem .5rem;
  cursor: pointer;
}

.lsm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--lsm-speed) ease;
}

.lsm-backdrop.is-open { opacity: 1; }

body.lsm-locked { overflow: hidden; }

.lsm-nav-logo-container {
    /* try to animate the logo when the nav menu opens - this is too complicated
    min-height: 130px; */
    padding: 20px;
}

.lsm-nav-logo {
  max-height: 65px;
  /* max-height: 105px; */
}

#lsm-panel .lsm-nav-logo {
  max-width: 240px;
}

/* try to animate the logo when the nav menu opens - this is too complicated
#lsm-panel:not(.is-open) .lsm-nav-logo-container .lsm-nav-logo {
    position: absolute;
    left: 100px;
    top: 50px;
} */

.lsm-nav { display: block; height: 100%; }

.lsm-menu,
.lsm-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lsm-menu > li {
  position: relative;
  border-bottom: 1px solid var(--lsm-border);
}

.lsm-menu a {
  display: block;
  padding: .9rem 1rem;
  text-decoration: none;
  color: var(--lsm-fg);
}

.lsm-menu .menu-item-has-children > a::after {
  content: "›";
  float: right;
  opacity: .8;
}

.lsm-menu li { position: relative; }

/*
.lsm-menu ul {
  position: absolute;
  top: 0;
  left: 100%;
  width: var(--lsm-w);
  height: 100%;
  background: var(--lsm-bg-2);
  border-left: 1px solid var(--lsm-border);
  transform: translateX(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--lsm-speed) ease, opacity var(--lsm-speed) ease;
}*/
.lsm-menu ul {
  position: fixed;
  top: 0;
  left: var(--lsm-w);
  width: var(--lsm-w);
  height: 100vh;
  background: var(--lsm-bg-2);
  border-left: 1px solid var(--lsm-border);
  transform: translateX(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--lsm-speed) ease, opacity var(--lsm-speed) ease;
  z-index: 10002;
}

.lsm-menu li.submenu-open > ul {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.lsm-menu ul li a { 
  /*color: var(--lsm-fg-dim);*/
   color: var(--lsm-fg);
}
.lsm-menu ul li a:hover { color: var(--color-header-middle-text-hover) !important; }

.lsm-menu li.zng-large-menu-item a {
    font-family: var(--h1-font-family,inherit);
    /*font-size: 32px;*/
    font-size: 24px;
    font-weight: 400;
    /*color: var(--color-header-middle-text-hover);*/
}
.lsm-menu li.zng-large-menu-item a:hover {
    color: var(--color-header-middle-text-hover) !important;
}

.lsm-menu li.zng-medium-menu-item a {
    font-family: var(--h1-font-family,inherit);
    font-size: 24px;
    font-weight: 400;
    /*color: var(--color-header-middle-text-hover);*/
}

.lsm-menu li.zng-medium-menu-item a:hover {
  color: var(--color-header-middle-text-hover) !important;
}

.lsm-menu li.zng-large-menu-item ul a {
  /*font-size: 28px;*/
  font-size: 22px;
}

.lsm-menu ul.sub-menu {
    padding-top: 152px;
}

ul.lsm-menu li ul {
    background-image: url('https://development-website.online/wp-content/themes/impreza-child/assets/Bongo-Jct-box_angle-nav-bg-crop.webp');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
}

ul.lsm-menu li:nth-child(1) ul {
    background-image:url('https://development-website.online/wp-content/themes/impreza-child/assets/Bongo-Jct-box_angle-nav-bg-fade2-dark1.webp');
}

ul.lsm-menu li:nth-child(2) ul {
    background-image:url('https://development-website.online/wp-content/themes/impreza-child/assets/Elevator-Phone-blog-fade2-dark1.webp');
}

ul.lsm-menu  li:nth-child(3) ul {
    background-image:url('https://development-website.online/wp-content/themes/impreza-child/assets/upgrading-elevator-fade2-dark1.webp');
}

.lsm-menu li > a:focus,
.lsm-menu li > a:hover { background: rgba(255,255,255,.06); }

.lsm-btn {
  background: transparent;
  border: 0;
  padding: .5rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lsm-bars { display: inline-block; width: 26px; height: 20px; position: relative; }
.lsm-bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transform-origin: center; }
.lsm-bars span:nth-child(1) { top: 0; }
.lsm-bars span:nth-child(2) { top: 9px; }
.lsm-bars span:nth-child(3) { bottom: 0; }
.lsm-btn:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* columns for deeper levels */
.lsm-menu ul ul { left: calc(var(--lsm-w) * 2); }
.lsm-menu ul ul ul { left: calc(var(--lsm-w) * 3); }

@media (max-width: 380px) {
  :root { --lsm-w: 86vw; }
}

@media (max-width: 1024px) {
  .lsm-panel {
    width: 100vw;
    overflow: auto;
  }

  /* Turn flyout columns into stacked dropdowns */
  .lsm-menu ul {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--lsm-border);
    background: var(--lsm-bg-2);
    transform: none;
    opacity: 1;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--lsm-speed) ease;
    z-index: auto;
  }

  /* Open state for dropdown */
  .lsm-menu li.submenu-open > ul {
    max-height: 1000px; /* large enough to reveal contents */
  }

  /* Remove multi-column offsets for deeper levels */
  .lsm-menu ul ul,
  .lsm-menu ul ul ul {
    left: 0;
  }

  /* Swap the caret and rotate when open */
  .lsm-menu .menu-item-has-children > a::after {
    content: "▾";
    float: right;
    transition: transform var(--lsm-speed) ease;
  }
  .lsm-menu li.submenu-open > a::after {
    transform: rotate(180deg);
  }

  /* Optional: a bit tighter padding on small screens */
  .lsm-menu a { padding: .8rem 1rem; }

  ul.lsm-menu li:nth-child(1) ul, ul.lsm-menu li:nth-child(2) ul, ul.lsm-menu li:nth-child(3) ul {
    background: none;
  }

  .lsm-menu ul.sub-menu {
    padding-top: 0;
  }

  /* make the container take the row and align left */
  #lsm-panel .lsm-nav-logo-container {
    width: 100%;
    display: block !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* force the image to hug the left edge */
  #lsm-panel .lsm-nav-logo {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    max-width: 240px;
  }

  /* kill common centering on ancestors inside the panel */
  #lsm-panel .align_center,
  #lsm-panel [class*="align_"],
  #lsm-panel [style*="text-align:center"] {
    text-align: left !important;
  }

  #lsm-panel .lsm-nav-logo-container { display: flex !important; justify-content: flex-start !important; }
  #lsm-panel .lsm-nav-logo { align-self: flex-start !important; }
}

/* Fix the bug in safari browser whch majkes the mouse cursor change to text cursor when you hover over the textual portions of the logo inmage*/
#zng-main-logo img {
  user-select: none;
  -webkit-user-select: none;
}

#zng-main-logo {
  cursor: pointer;
}