:root {
  --navTransition: .2s ease-in;
  --navAniDuration: .15s;
  --navFlyout: .2s;
}

/* contains the site logo and main navi for desktop and mobile  */
.dm-header__mobileNavBar {
  background-color: var(--brandColor);
}

.dm-header__mobileNavBarInner {
  display: flex;
  justify-content: space-between;
  padding: 1rem var(--mobileMargin);
  color: var(--white);
}

/* this checkbox stores the nav status */
.dm-mobileNavToggle {
  position: absolute;
  top: -99px;
  visibility: hidden; /* disable this to allow scrolling when burger is clicked */
}

/* label for checkbox */
.dm-burger {
  display: inline-block;
  position: absolute;
  z-index: 10000; /* this needs to be above content and menu */
  padding: 0;
  border: 0;
  outline: 0;
  right: 10px;
  top: 10px;
  cursor: pointer;
  border-radius: 50%;
  background: var(--brandColor);
  animation: flyOut ease-in var(--navFlyout);
}

@keyframes flyOut {
  0% { position:fixed;top: 10px;  }
  99% { position:fixed;top: -50px;  }
  100% { position: absolute;top: 10px;  }
}

/* on scroll up: show the burger icon */
.dm-naviShowJS .dm-burger {
  animation: flyIn ease-in var(--navFlyout);
  position:fixed;
  top: 10px;
}

@keyframes flyIn {
	0% { position:fixed;top: -50px; }
	100% { position:fixed;top: 10px; }
}


/* icon inside the label */
.dm-burgerIcon {
	display: block;
	cursor: pointer;
	color: white;
	transform: rotate(0deg);
	transition: var(--navAniDuration) cubic-bezier(0.165, 0.84, 0.44, 0.7);
}

 .dm-burgerIcon__bar, .dm-burgerIcon__circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

 .dm-burgerIcon__bar {
	transform: rotate(0deg);
	transform-origin: 50% 50%;
	transition: calc(var(--navAniDuration) - .5s) ease-in-out;
}

.dm-burgerIcon__circle {
	transition: stroke-dashoffset var(--navAniDuration) ease-in 0.1s;
	stroke-dashoffset: 144.513262038;
  stroke-dasharray: 144.513262038;
  stroke: transparent;
}

/* icon design transformation based on nav status */
.dm-mobileNavToggle:checked~.dm-burger .dm-burgerIcon {
  transform: rotate(180deg);
}

.dm-mobileNavToggle:checked~.dm-burger .dm-burgerIcon__circle {
  stroke-dashoffset: 0;
  stroke: currentColor;
}

.dm-mobileNavToggle:checked~.dm-burger .dm-burgerIcon__bar:nth-child(1), .dm-mobileNavToggle:checked~.dm-burger .dm-burgerIcon__bar:nth-child(4) {
  opacity: 0;
}

.dm-mobileNavToggle:checked~.dm-burger .dm-burgerIcon__bar:nth-child(2) {
  transform: rotate(45deg);
}

.dm-mobileNavToggle:checked~.dm-burger .dm-burgerIcon__bar:nth-child(3) {
  transform: rotate(-45deg);
}

.dm-mobileNavToggle:checked~.dm-burger .nav__menu {
  visibility: visible;
}

.dm-mobileNavToggle:checked~.dm-burger .nav__item {
  opacity: 1;
  transform: translateY(0);
}

/* menu */
.dm-mobileNav {
  top: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  width: 100vw;
  z-index: 9999; /* Even above Cleverpush! */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overscroll-behavior: contain;
  opacity: 0;
  animation: fadeOut ease-in-out var(--navAniDuration);
}

@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

.dm-mobileNavToggle:checked~.dm-mobileNav {
  pointer-events: auto;
  opacity: 1;
  animation: fadeIn ease-in-out var(--navAniDuration);
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.dm-mobileNav__title {
  margin: 10px 0 0;
  color: grey;
}

.dm-mobileNavToggle:checked~.dm-mobileNav .dm-header {
  box-shadow: var(--shadow);
}

.dm-mobileNav__listLevel1 {
  min-height: calc(100vh); /* this hack is necessary to get .dm-mobileNav { overscroll-behavior: contain; } working correctly when there isn't enough content */
  user-select: none;
  list-style-type: none;
  padding: 0;
  background-color: var(--white);
}

.dm-mobileNav__itemLevel1,
.dm-mobileNav__itemLevel2  {
  border-top: 1px solid;
  border-image: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--brandColor) 50%,rgba(255,255,255,0) 100%);
  border-image-slice: 1;
}

.dm-mobileNav__itemLevel1:first-of-type {
  border-top: none;
  padding-top: 3px;
}

.dm-mobileNav__itemLevel1Link,
.dm-mobileNav__itemLevel2Link {
  display: block;
  padding: 12px;
  text-align: center;
}

.dm-mobileNav__itemLevel1Link:hover {
  backdrop-filter: brightness(98%);
}

.dm-mobileNav__listLevel2 {
  margin-left: -1rem;
}

.dm-mobileNav__itemLevel2 {
  padding-left: 2rem;
}

.dm-mobileNav__itemLevel2Link {
  padding-left: 1rem;
}

.dm-headerNav {
  display: none;
}

@media (min-width: 768px) {

  .dm-burger,
  .dm-naviShowJS .dm-burger {
    position: absolute;
    animation: none;
  }

  .dm-headerNav {
    display: block;
    text-transform: uppercase;
    position: static;
    background: transparent;
    color: var(--navColor);
    box-shadow: none;
    padding-bottom: 0;
    width: calc(100% - 200px);
  }

  .dm-headerNav__listLevel1 {
    padding-top: 0;
  }

  .dm-headerNav__itemLevel1 {
    position: relative;
    display: inline-block;
    margin-right: 1rem;
  }

  .dm-headerNav__itemLevel1HasMore:after {
    content: ">";
    transform: rotate(0deg) scaleY(1.5) translate(2px);
    transition: all var(--navTransition);
    display: inline-block;
  }

  .dm-headerNav__itemLevel1:hover .dm-headerNav__itemLevel1HasMore:after {
    transform: rotate(90deg) scaleY(1.5) translate(2px);
  }

  .dm-headerNav a {
    padding: 0;
    display: inline-block;
    line-height: var(--navHeight);
    vertical-align: text-bottom;

  }

  .dm-headerNav__itemLevel1Link {
    font-size: 1rem;
    display: block;
    padding: 0 var(--mobileMargin);
    background: var(--lightGrey);
    font-family: var(--headlineFont);
    font-weight: bold;
    text-transform: uppercase;
    line-height: 3;
  }

  .dm-headerNav__itemLevel2Link {
    font-size: 1rem;
    display: block;
    padding: 0 var(--mobileMargin);
    line-height: 2;
  }

  .dm-headerNav__listLevel2 {
    padding: 0.5rem 0;
  }


  .dm-headerNav__itemLevel1Link,
  .dm-headerNav__itemLevel1Link:hover,
  .dm-headerNav__itemLevel1Link:visited,
  .dm-headerNav__itemLevel1Link:active {
    color: var(--navColor);
  }

  .dm-headerNav__itemLevel1Link,
  .dm-headerNav__itemLevel1HasMore:after {
    font-size: 1.125rem; /* of 16px == 18px */
    line-height: var(--navHeight);
    vertical-align: text-bottom;
  }

  .dm-headerNav__itemLevel1Link {
    background: transparent;
  }

  .dm-headerNav__spacer {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity var(--navTransition);
    position: absolute;
    padding-top: 1rem;
    min-width: 200px;
    z-index: 4;
  }

  .dm-headerNav__itemLevel1:hover .dm-headerNav__spacer,
  .dm-headerNav__spacer:hover {
    visibility: visible;
    opacity: 1;
  }

  .dm-headerNav__listLevel2 {
    font-size: 0.8rem;
    background: var(--white);
    padding: 0.5rem 0;
    box-shadow: var(--shadow);
  }

  .dm-headerNav__spacer ul>li {
    color:var(--grey);
  }

  .dm-headerNav__listLevel2>li>a {
    display: block;
    padding: 0.5rem 1rem;
  }

  .dm-headerNav__listLevel2>li>a:hover {
    background: var(--grey);
    color: var(--white);
  }

  .dm-headerNavToggle:checked~.dm-header .dm-header__mobileNavBar {
    height: auto;
  }




}