:root {
  /* BASE SIZES */
  --page-rem-size : 16px;
  --rem : 0.0625rem;
  --em : 0.0625em;
  --vmax : 0.05208333333333vmax; 
  --vmin : 0.09259259259259vmin; 

  /* GLOBAL Z-INDEX */
  --fixed: 1000;
  --sticky: 1010;
  --float: 1020;

  /* THEME */
  font-family: 'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, system-ui, sans-serif;
  color-scheme: light dark;
}


/* RESET */
*,
*::after,
*::before {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	outline: 0;
	padding: 0;
  text-wrap: pretty;
	-webkit-tap-highlight-color: transparent;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  position: relative;
	min-height: 100svh;
  text-rendering: optimizeSpeed;
  display: flex;
  flex-direction: column;
}
body > * {
  flex: 1 1 auto;
}
:where(a) {
	background-color: transparent;
	text-decoration: none;
}
:where(a):link,
:where(a):visited,
:where(a):hover,
:where(a):active { 
  color: inherit;
  outline: 0; 
  text-decoration-skip-ink: auto;
}
:where(button) {
	background: none;
	color: inherit;
	line-height: 1em;
  cursor: pointer;
  > * {
    user-select: none;
  }
}
:where(img,picture) {
	border: 0;
	border-style: none;
	display: block;
  max-width: 100%;
}
:where(figure,picture) > img {
	height: auto;
}
:is(input,button,textarea,select) {
  font: inherit;
}
:is(dialog) {
  margin: auto;
}

/* BASE BREAKPOINTS */
@media (width <= 600px) {
  html {
    font-size: max(16px,4vw);
  }
  [desktop] {
    display: none!important;
    visibility: hidden;
  }
}
@media (width > 601px) {
  html {
    font-size: 1rem;
  }
  [mobile] {
    display: none!important;
    visibility: hidden;
  }
}
@media (width <= 1024px) {
  [expanded] {
    display: none!important;
    visibility: hidden;
  }
}
@media (width <= 1025px) {
  [collapsed] {
    display: none!important;
    visibility: hidden;
  }
}
@media (width > 1920px) {
  html {
    font-size: calc( var(--vmax) * 16);
  }
}

/* BASE PAGE STRUCTURE */
main {
  display: flex;
  flex-direction: column;
}
footer {
  flex: 0 0 auto;
}

/* BASE PAGE GRID STRUCTURE */
.container-grid {
  --padding-inline: 1.25rem;
  --fixed-max-width: var(--container, 1420px);
  --breakout-max-width: 2dvw;

  display: grid;
  grid-auto-rows: min-content;
  grid-template-columns: 
    [fluid-start] minmax(var(--padding-inline), 1fr) 
    [breakout-start] minmax(0, var(--breakout-max-width))
    [fixed-start] min(100% - (var(--padding-inline) * 2), var(--fixed-max-width)) [fixed-end] 
    minmax(0, var(--breakout-max-width)) [breakout-end] 
    minmax(var(--padding-inline), 1fr) [fluid-end];
}
.container-grid > :not(.breakout, .fluid),
.container-grid > .fixed {
  grid-column: fixed;
}
.container-grid > .breakout {
  grid-column: breakout;
}
.container-grid > .fluid {
  grid-column: fluid;
}

@supports not (display: grid) {
  .container-grid {
    width: min(90dvw, var(--fixed-max-width));
    margin-inline: auto;
  }
}

/* PAGE DEBUG VISIBILITY */
[debug] * {
  outline: 1px dotted light-dark(
    color(from black srgb r g b / 0.02),
    color(from white srgb r g b / 0.02)
  );
  outline-offset: -1px;
}
[debug] *:focus {
  outline: 2px solid lime;
  filter: drop-shadow(0 0 5px lime);
}




/* Z8G Addition */

#page-top-navigation {
  position: sticky;
  z-index: 1010;
  top: 0;
  opacity: 1!important;
  transition: transform $transition, translate $transition;
  flex-grow: 0;
}
#page-top-navigation.topped {
  translate: 0;
}
#page-top-navigation.pushed {
  translate: 0 -50px;
}
@media (width <= 600px) {
  #page-top-navigation.pushed {
    translate: 0 -40px;
  }
}
#sgw-top-navigation {
  position: sticky;
  z-index: 1010;
  opacity: 1!important;
  top: 0;

  width: 100%;
  justify-content: center;
  background-color: hsl(0 0% 0%);
}
#sgw_gnb_div {
  position: static;
}
#stickyHamburger {
  position: fixed;
  z-index: 1010;
  top: 0;
  left: 0;

  max-width: 70%;
  cursor: pointer;
}
#stickyHamburger a > div {
  height: 40px;
  padding: 0 0.625rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media (width > 600px) {
  #stickyHamburger {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  #sgw_gnb_div.lightboxmode {
    overflow: unset!important;
  }
}