#menu {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  width: 100%;
  right: 0;
}

#menu a {
  font-size: var(--menu-mobiles-font-size);
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu li:hover {
  cursor: default;
}

#menu li:hover > a {
  color: var(--menu-item-hover-text);
  cursor: pointer;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
  position: absolute;
  right: 0;
  top: var(--nav-height);
  width: 100%;
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  background-color: var(--nav-mobile-background-color);
}

#menu input[type="checkbox"],
#menu ul span.drop-icon {
  display: none;
}

#menu li,
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: var(--nav-mobile-background-color);
  border-width: 1px 1px 0;
  margin: 0 1em;
}

#menu .sub-menu li:last-child {
  border-width: 0;
  padding-bottom: var(--main-padding);
}

#menu li,
#toggle-menu,
#menu a {
  position: relative;
  display: block;
  color: var(--nav-mobile-text-color);
}

#toggle-menu,
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
  width: 100%;
}

#menu a:hover,
#menu .sub-menu a:hover {
  color: var(--menu-item-hover-text);
}

#menu .sub-menu {
  display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .hamburger-menu {
  position: absolute;
  right: calc(2 * var(--main-margin));
  top: 0;
  width: 20px;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#menu .hamburger-menu.closed {
  background-image: url("https://143253449.fs1.hubspotusercontent-eu1.net/hubfs/143253449/Branding%20materials/Icons/hamburger-menu-id.svg");
  width: 24px;
}

#menu .hamburger-menu.opened {
  background-image: url("https://f.hubspotusercontent-eu1.net/hubfs/139679499/close-hamburger-icon.svg");
}

#toggle-menu .drop-icon,
#menu li label.drop-icon {
  position: absolute;
  right: 0;
  top: 4px;
  width: 100vw;
}

#menu label.drop-icon,
#toggle-menu span.drop-icon {
  font-size: 20px;
  text-align: center;
  padding: var(--main-padding) calc(2 * var(--main-padding));
  transition: transform 0.15s;
  transform-origin: center;
  display: flex;
  justify-content: flex-end;
}

#menu li label.drop-icon:after,
#menu li label.drop-icon:focus {
  content: url("https://143223927.fs1.hubspotusercontent-eu1.net/hubfs/143223927/chevron-menu.svg");
  text-align: right;
}

#menu label.drop-icon.active {
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: invert(52%) sepia(47%) saturate(1554%) hue-rotate(336deg) brightness(95%) contrast(95%);
}

@media only screen and (min-width: 1375px) {
  #menu {
    align-items: center;
    position: static;
  }

  #toggle-menu .drop-icon,
  #menu li label.drop-icon {
    top: 0;
  }

  #menu .main-menu {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  #menu a {
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--nav-desktop-text-color);
    line-height: 24px;
    font-size: var(--paragraph-small);
  }

  #toggle-menu,
  #menu label.drop-icon {
    display: none;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
    height: 100%;
  }

  #menu li.active-branch > a,
  #menu li.active > a {
    color: var(--primary);
  }

  #menu .sub-menu li {
    float: none;
    background-color: var(--dropdown-menu-desktop-bg-color);
  }

  #menu .mega-menu-column:nth-child(1) {
    margin-right: 1rem;
  }
  #menu .mega-menu-column:nth-child(2) {
    margin-right: 0rem;
  }
  
  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: calc(100% - 10px);
    left: 0;
    z-index: 3000;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    /*display: none;*/
    display: grid;
    /* grid-template-columns: repeat(3, 1fr);
    column-gap: 0;
    width: 38em;*/
    grid-template-columns: max-content;
    column-gap: 0;
    width: auto;
    align-items: start;
    justify-items: start;
    padding: 0.75em 0.3em 0 0.3em;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
  }

  #menu .sub-menu.mega-menu-columns {
    /*grid-template-columns: repeat(3, 1fr);*/
    grid-template-columns: max-content max-content max-content;
    column-gap: 1rem;
  }

  #menu .mega-menu-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* #menu .mega-menu-column > li {
    float: none;
    height: auto;
    border-width: 0;
    width: 100%;
  }

  #menu .mega-menu-column > li > a {
    padding: 0 1.5em 1em 1.5em !important;
    height: auto;
    width: auto;
  }

  #menu .mega-menu-column > li:first-child > a {
    padding: 0.5em 1.5em 0.75em 1.5em !important;
    pointer-events: none;
    cursor: default;
  }*/
  #menu .mega-menu-column > li {
  float: none;
  height: auto;
  border-width: 0;
  width: 100%;
  margin-bottom: 1em;

  /* keeps the same horizontal position */
  padding: 0 1.5em;
}

#menu .mega-menu-column > li > a {
  display: inline-flex;
  padding: 0 !important;
  height: auto;
  width: auto;
}

#menu .mega-menu-column > li:first-child {
  margin-bottom: 0.75em;
  padding: 0 1.5em;
}

#menu .mega-menu-column > li:first-child > a {
  display: inline-flex;
  padding: 0.5em 0 0 0 !important;
  height: auto;
  width: auto;
  pointer-events: none;
  cursor: default;
}
  

  #menu .mega-menu-column > li:first-child:hover > a {
    color: var(--nav-desktop-text-color);
  }
  
  #menu .mega-menu-column > li:first-child:hover > a {
  color: var(--nav-desktop-text-color);
}

/* link color */
#menu .mega-menu-column > li:hover > a {
  color: var(--nav-desktop-text-color);
}

#menu .mega-menu-column > li > a:hover {
  color: var(--menu-item-hover-text);
}

  /* #menu .sub-menu,
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: grid;
  }*/
#menu .sub-menu,
#menu input[type="checkbox"]:checked + .sub-menu {
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.18s;
}

/*#menu li:hover > input[type="checkbox"] + .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}*/
  
  #menu li.menu-open > input[type="checkbox"] + .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
  
  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    grid-template-columns: none;
    display: block;
    width: 12em;
  }

  #menu .sub-menu .drop-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
  }

  #menu li.has-sub > a::after {
    content: url("https://143223927.fs1.hubspotusercontent-eu1.net/hubfs/143223927/chevron-menu.svg");
    margin-left: var(--main-margin);
    transition: transform 0.15s;
    transform-origin: center;
    filter: brightness(0) saturate(100%) invert(14%) sepia(29%) saturate(1320%)
      hue-rotate(158deg) brightness(90%) contrast(92%);
  }

  #menu li.has-sub:hover > a::after {
    transform: rotate(180deg);
    filter: invert(52%) sepia(47%) saturate(1554%) hue-rotate(336deg) brightness(95%) contrast(95%);
  }
}

.external-link-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
}

.external-link-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .125s ease-in-out;
}

.external-link-icon .icon-default {
  opacity: 1;
}

.external-link-icon .icon-hover {
  opacity: 0;
}

.menu-depth-2:hover .external-link-icon .icon-default {
  opacity: 0;
}

.menu-depth-2:hover .external-link-icon .icon-hover {
  opacity: 1;
}

.menu-item .menu-depth-2 a {
    padding: 0.5em 0.8em !important;
}

span.mega-menu-parent {
  font-size: var(--menu-mobiles-font-size);
}

@media only screen and (min-width: 1375px) {
    span.mega-menu-parent  {
        font-size: var(--paragraph-small);
    }