/* ============ Burger icon ============ */
.sm-btn-110{position:fixed;padding-right:20px;padding-top:22px;z-index:10000;}
.sm-btn-110 .menu-icon3{position:relative;width:28px;height:24px;cursor:pointer;}
.sm-btn-110 .menu-icon3 > span{display:none!important;}
/* closed // */
.sm-btn-110 .menu-icon3::before,
.sm-btn-110 .menu-icon3::after{
  content:"";position:absolute;top:55%;left:50%;
  width:22px;height:3px;background:#f2f2f2;border-radius:2px;
  transform-origin:left center;transition:transform .3s ease,background .3s ease;
}
.sm-btn-110 .menu-icon3::before{
  height:4px;width:18px;transform:translate(-50%,-50%) rotate(-65deg);
  top:calc(55% - 5px);
}
.sm-btn-110 .menu-icon3::after{
  height:6px;transform:translate(calc(-50% + 10px),-50%) rotate(-65deg);
}
.sm-btn-110 .menu-icon3:hover::after{transform:translate(-50%,-50%) rotate(-65deg);}

/* open state (color + merge only) */
.lp-burger .menu-icon3::before,
.lp-burger .menu-icon3::after{
  background:#b94e3d!important;
  transform:translate(-50%,-50%) rotate(-65deg)!important;
}

/* keep icon steady via fixed container (ensure .menu-icon-cont exists in markup) */
.lp-burger .menu-icon-cont{
  position:fixed!important;right:20px!important;top:22px!important;left:auto!important;
  transform:none!important;z-index:10002!important;
}
.lp-burger .menu-icon3{
  position:static!important;right:auto!important;top:auto!important;transform:none!important;
}

/* ============ Slide + skew (transition-only, one layer) ============ */
:root{ --lp-skew:-6deg; --lp-shift:24px; --lp-ease:cubic-bezier(.2,.8,.2,1); }

/* Level containers enter from right w/ skew */
nav.off-menu_110.sm-menu [class*="level"]{
  transform:translateX(var(--lp-shift)) skewX(var(--lp-skew));
  transform-origin:right center;transition:transform 420ms var(--lp-ease);
  will-change:transform;backface-visibility:hidden;
}
nav.off-menu_110.sm-menu.lp-burger [class*="level"]{
  transform:translateX(0) skewX(0deg);
}

/* Items: visible skew/slide */
nav.off-menu_110.sm-menu [class*="level"] > li,
nav.off-menu_110.sm-menu [class*="level"] > *{
  transform:translateX(22px) skewX(-8deg);opacity:0;
  transform-origin:right center;
  transition:transform 420ms var(--lp-ease), opacity 260ms ease-out;
  will-change:transform,opacity;backface-visibility:hidden;
}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > li,
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *{
  transform:translateX(0) skewX(0deg);opacity:1;
}

/* Stagger for first 12 items */
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(1)  {transition-delay:40ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(2)  {transition-delay:80ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(3)  {transition-delay:120ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(4)  {transition-delay:160ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(5)  {transition-delay:200ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(6)  {transition-delay:240ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(7)  {transition-delay:280ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(8)  {transition-delay:320ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(9)  {transition-delay:360ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(10) {transition-delay:400ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(11) {transition-delay:440ms;}
nav.off-menu_110.sm-menu.lp-burger [class*="level"] > *:nth-child(12) {transition-delay:480ms;}

/* ============ LAYOUT: center everything + group gaps ============ */

/* Make the panel content vertically center-able */
nav.off-menu_110.sm-menu .sm-levels{
  display:flex;
  flex-direction:column;
  min-height:100vh;              /* full panel height */
}

/* Root list: stack, center in panel, tidy spacing */
nav.off-menu_110.sm-menu .sm-levels > ul,
nav.off-menu_110.sm-menu .sm-levels > .sm-level,
nav.off-menu_110.sm-menu .sm-levels > .level0{
  display:flex;
  flex-direction:column;
  justify-content:center;        /* vertical centering */
  align-items:center;            /* horizontal centering of items */
  gap:14px;                      /* regular item gap */
  padding:40px 32px;
  flex:1;                        /* take available height for centering */
  text-align:center;             /* center link text */
}

/* Group gaps — preferred: add 'group-start' to LI (WORK, SOCIAL) in Offlajn */
nav.off-menu_110.sm-menu .sm-levels > ul > li.group-start,
nav.off-menu_110.sm-menu .sm-levels > .sm-level > li.group-start,
nav.off-menu_110.sm-menu .sm-levels > .level0 > li.group-start{
  margin-top:28px;               /* bigger space before a new group */
}

/* Fallback if you can't add classes:
   assumes order = Home(1), About(2), News(3), Contact(4), WORK(5), Studios(6), Video(7), SOCIAL(8), Instagram(9), Facebook(10), Youtube(11) */
nav.off-menu_110.sm-menu .sm-levels > ul > li:nth-child(5),
nav.off-menu_110.sm-menu .sm-levels > ul > li:nth-child(8),
nav.off-menu_110.sm-menu .sm-levels > .sm-level > li:nth-child(5),
nav.off-menu_110.sm-menu .sm-levels > .sm-level > li:nth-child(8),
nav.off-menu_110.sm-menu .sm-levels > .level0 > li:nth-child(5),
nav.off-menu_110.sm-menu .sm-levels > .level0 > li:nth-child(8){
  margin-top:28px;
}

/* Group gaps for Offlajn DL/DT structure (root menu) */
nav.off-menu_110.sm-menu .sm-levels dl > dt:nth-of-type(4),
nav.off-menu_110.sm-menu .sm-levels dl > dt:nth-of-type(7) {
  margin-top: 28px !important;  /* gap before WORK (5) and SOCIAL (8) */
}

/* (optional) ensure links center nicely */
nav.off-menu_110.sm-menu .sm-levels dl > dt .link > a {
  display: block;
  text-align: center;
}

/* ===== Offlajn DL/DT: centered column + left-aligned text ===== */

/* 1) Make the root DL a flex column and center it vertically */
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active{
  display:flex !important;
  flex-direction:column;
  justify-content:center;      /* vertical centering */
  align-items:center;          /* center the column itself */
  min-height:100vh;
  gap:14px;
}

/* 2) Give items a fixed-width column, centered; text inside will be left-aligned */
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active > dt > .inner{
  width:min(520px, 86vw);      /* adjust 520px to taste */
  margin:0 auto;               /* center the column */
}

/* 3) Left-align the labels/anchors */
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active > dt > .inner > .link,
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active > dt > .inner > .link > a{
  display:block;
  text-align:left !important;
}

/* 4) Group gaps (before WORK and before SOCIAL) */
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active > dt:nth-of-type(5),
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active > dt:nth-of-type(8){
  margin-top:28px !important;
}

/* --- Pull the first menu item closer to the top --- */

/* If your root is UL / generic level containers */
nav.off-menu_110.sm-menu .sm-levels > ul,
nav.off-menu_110.sm-menu .sm-levels > .sm-level,
nav.off-menu_110.sm-menu .sm-levels > .level0{
  justify-content: flex-start !important;   /* stop vertical centering */
  min-height: auto !important;              /* don’t force full viewport height */
  padding: 12px 32px 24px !important;       /* was 40px top; reduce to ~12px */
}

/* If your root is Offlajn’s DL structure (most likely in your case) */
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active{
  justify-content: flex-start !important;   /* move items to the top */
  min-height: auto !important;              
  padding-top: 12px !important;             /* trim top spacing */
  gap: 12px !important;                      /* optional: slightly tighter item gap */
}

/* Ensure the very first item has no accidental top margin */
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active > dt:first-of-type,
nav.off-menu_110.sm-menu .sm-levels > ul > li:first-child{
  margin-top: 0 !important;
}

/* Keep your group dividers further down only */
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active > dt:nth-of-type(5),
nav.off-menu_110.sm-menu .sm-levels > dl.level1.ps-container.ps-active > dt:nth-of-type(8){
  margin-top: 28px !important;
}

/* About + Contact: BLACK when CLOSED */
body.itemid-115 .sm-btn-110 .menu-icon3::before,
body.itemid-115 .sm-btn-110 .menu-icon3::after,
body.itemid-116 .sm-btn-110 .menu-icon3::before,
body.itemid-116 .sm-btn-110 .sm-btn-110 .menu-icon3::after{
  background:#000 !important;
}

/* About + Contact: MAROON when OPEN (lp-burger is on ) */
body.itemid-115 nav.lp-burger .menu-icon3::before,
body.itemid-115 nav.lp-burger .menu-icon3::after,
body.itemid-116 nav.lp-burger .menu-icon3::before,
body.itemid-116 nav.lp-burger .menu-icon3::after{
  background:#b94e3d !important;
}

/* Default burger = black */
body .sm-btn-110 .menu-icon3::before,
body .sm-btn-110 .menu-icon3::after{
  background:#000000 !important;
}

/* Dark slide detected = white burger */
body.burger-white .sm-btn-110 .menu-icon3::before,
body.burger-white .sm-btn-110 .menu-icon3::after{
  background:#ffffff !important;
}

body.itemid-101 .sm-btn-110 .menu-icon3::before,
body.itemid-101 .sm-btn-110 .menu-icon3::after{
  background:#ffffff !important;
}

/* Dark slide always wins */
body.burger-white .sm-btn-110 .menu-icon3::before,
body.burger-white .sm-btn-110 .menu-icon3::after{
  background:#ffffff !important;
}

body.itemid-121 .sm-btn-110 .menu-icon3::before,
body.itemid-121 .sm-btn-110 .menu-icon3::after{
    background:#fff !important;
}

/* Open menu icon = maroon */
nav.off-menu_110.sm-menu.lp-burger .menu-icon3::before,
nav.off-menu_110.sm-menu.lp-burger .menu-icon3::after,
.sm-btn-110.sm-close .menu-icon3::before,
.sm-btn-110.sm-close .menu-icon3::after{
  background:#8E2A2A !important;
}