/* ==========================
   Base nav
========================== */
#menu-main-navigation,
#menu-main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-main-navigation li {
  position: relative;
}

/* ==========================
   Top-level links
========================== */


#menu-main-navigation > li:hover > a {
  background-color: white;
  color: black;
}

#menu-main-navigation > li:hover {
  z-index: 999;
  box-shadow: 6px 3px 24px 2px rgba(0,0,0,0.1);
}

/* ==========================
   Submenus base style
========================== */
#menu-main-navigation ul.sub-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: white;
  min-width: 100%;
  padding-left: 0;
  list-style: none;
  border-radius: 0.5em;
  box-shadow: 6px 3px 24px 2px rgba(0,0,0,0.1);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
  z-index: 999;
}

/* 1st level submenu drops down */
#menu-main-navigation > li > ul.sub-menu {
  top: 100%;
  left: 0;
  transform: translateY(10px);
  border-top-left-radius: 0;
}

/* 2nd+ level submenus slide right */
#menu-main-navigation ul.sub-menu ul.sub-menu {
  top: 0;
  left: 100%;
  transform: translateY(-8px);
}

/* Show submenu on hover/focus */
#menu-main-navigation li:hover > ul.sub-menu,
#menu-main-navigation li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ==========================
   Submenu links
========================== */
#menu-main-navigation ul.sub-menu li > a {
  display: flex;
  width: 100%;
  padding: 1em .75vw;
  color: black;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  background-color: white;
  transition: 300ms ease all;
}

#menu-main-navigation ul.sub-menu li > a:hover {
  background-color: #eee;
}

#menu-main-navigation ul.sub-menu li.current_page_item > a,
#menu-main-navigation ul.sub-menu li.current_page_ancestor > a {
  background-color: #eee;
}

/* ==========================
   Submenu indicators for parents
========================== */
#menu-main-navigation li.menu-item-has-children > a::after {
  content: '\f054';
  font-family: 'FontAwesome';
  font-size: 0.6em;
  position: absolute;
  right: .5vw;
  top: 50%;
  transform: translateY(-50%);
  transition: 600ms ease all;
  opacity: 0.8;
}

#menu-main-navigation li.menu-item-has-children:hover > a::after {
  transform: translateY(-50%) rotate(-180deg);
}

#menu-main-navigation > li.menu-item-has-children > a::after {
transform: rotate(90deg);
}
/* ==========================
   Border radius for first/last items
========================== */
#menu-main-navigation ul.sub-menu > li:first-child > a {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}

#menu-main-navigation ul.sub-menu > li:last-child > a {
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

/* ==========================
   Recursive submenu positioning (up to 5 levels)
========================== */
#menu-main-navigation ul.sub-menu ul.sub-menu { left: 100%; top: 0; }
#menu-main-navigation ul.sub-menu ul.sub-menu ul.sub-menu { left: 100%; top: 0; }
#menu-main-navigation ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu { left: 100%; top: 0; }
#menu-main-navigation ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu { left: 100%; top: 0; }

/* ==========================
   Reset non-hovered sibling background
========================== */
#menu-main-navigation ul.sub-menu:hover > li:not(:hover) > a {
  background-color: white;
}

#menu-main-navigation > li > .sub-menu > li.menu-item-has-children > a {
    padding-right: 1.75vw;
}
#menu-main-navigation ul.sub-menu ul.sub-menu {
    width: 180px;
    max-width: 100%;
    min-width: auto;
}