/* mega menu list */
.nav-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 15;
}

/* a top level navigation item in the mega menu */
.nav-item {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* first descendant link within a top level navigation item */
.nav-item > a {
  border: 1px solid transparent;
  display: inline-block;
  margin: 0 0 -1px 0;
  padding: 0.5em 1em;
  position: relative;
}

/* focus/open states of first descendant link within a top level navigation item */
.nav-item > a:focus,
.nav-item > a.open {
  border: 1px solid #dedede;
}

/* open state of first descendant link within a top level
   navigation item */
.nav-item > a.open {
  background-color: #fff;
  border-bottom: none;
  z-index: 1;
}

/* sub-navigation panel */
.sub-nav {
  right: 0;
  background: #f5f8fa;
  border: 1px solid #b3b3b3;
  box-shadow: 0 4px 4px -3px #171717;
  color: #454545;
  cursor: default;
  left: -1px;
  line-height: normal;
  margin: 0;
  max-height: 0;
  opacity: 0;
  display: block;
  overflow: hidden;
  padding: 0 12px;
  position: absolute;
  top: -9999em;
  transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
}

/* sub-navigation panel open state */
:is(:hover, :focus-within) > .sub-nav {
  max-height: 600px;
  opacity: 1;
  top: 3em;
  transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
  z-index: 1001;
}

/* list of items within sub-navigation panel */
.sub-nav ul {
  display: block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.sub-nav > ul > li{
  float: left;
}


/* list item within sub-navigation panel */
.sub-nav li {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}