/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/megaMenu/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************/
/**
A couple rules for creating and styling mega menus

1) If you want the dropdown to go full width on desktop, add the class "has-full-width-submenu" to the parent menu item.

2) If you want to replace a menu item with a Wordpress Block, add the ID of the block in the "title attribute" fiels. (i.e. core/heading), and add any attributes for the block under "Description"

3) If a wordpress block is programatically injected, the menu item will have the class "menu-item-with-injected-block"

4) NOTE: This css file contains the bare minimum classes to make the mega-menu display and function properly. Theme specific styles can be found in the theme stylesheet at duralight/talwind/custom/components/nav.css
*/
.megamenu-container {
  max-width: var(--wp--style--global--wide-size) !important;
  /* DESKTOP! */
}
.megamenu-container .menu-toggle {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  padding-left: 0.2rem;
  margin-top: -3.1rem !important;
  border: none;
  background-color: transparent;
}
.megamenu-container .menu-toggle .bar1, .megamenu-container .menu-toggle .bar2, .megamenu-container .menu-toggle .bar3 {
  width: 17px;
  height: 2px;
  background-color: #333;
  margin: 4px 0;
  transition: 0.4s;
}
.megamenu-container .menu-toggle.open .bar1 {
  transform: translate(0, 6px) rotate(-45deg);
}
.megamenu-container .menu-toggle.open .bar2 {
  opacity: 0;
}
.megamenu-container .menu-toggle.open .bar3 {
  transform: translate(0, -6px) rotate(45deg);
}
.megamenu-container .megamenu {
  position: absolute;
  z-index: 100;
  width: 100%;
  display: none;
}
.megamenu-container .megamenu.open {
  display: block;
}
.megamenu-container .megamenu .menu-carat {
  border: none;
  background: transparent;
}
.megamenu-container .megamenu .menu-carat::before {
  content: "\f140";
  font-family: dashicons;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 20px;
  text-align: center;
}
.megamenu-container .megamenu .menu-carat[aria-expanded=true] {
  transform: rotate(180deg);
}
.megamenu-container .megamenu ul {
  list-style: none;
}
.megamenu-container .megamenu ul.menu {
  margin: 0;
  padding: 0;
}
.megamenu-container .megamenu ul.sub-menu {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
}
.megamenu-container .megamenu li.has-full-width-submenu .sub-menu__wrapper {
  width: 100%;
  left: 0;
}
.megamenu-container .megamenu .menu-item-with-injected-block:hover {
  background-color: inherit !important;
}
@media (min-width: 900px) {
  .megamenu-container .megamenu {
    display: block;
    position: unset;
  }
  .megamenu-container .megamenu .sub-menu__wrapper {
    z-index: -1;
    background-color: transparent;
  }
  .megamenu-container .megamenu .sub-menu__wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-color: #FFFFFF;
  }
  .megamenu-container .menu-toggle {
    display: none;
  }
  .megamenu-container .top-nav-group {
    z-index: 10;
  }
  .megamenu-container ul.menu {
    display: flex;
  }
  .megamenu-container ul.menu > li:not(.hide-on-desktop-nav) {
    background-color: inherit;
    display: flex;
  }
  .megamenu-container ul.menu > li:not(.hide-on-desktop-nav) > a {
    display: block;
  }
  .megamenu-container .sub-menu__wrapper {
    z-index: -1;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    z-index: 10;
    transition: transform 0.25s ease-out;
  }
  .megamenu-container .sub-menu__wrapper.sliding-in {
    animation: slideNavIn 0.3s 1 linear forwards;
  }
  .megamenu-container .sub-menu__wrapper.sliding-out {
    pointer-events: none;
    animation: slideNavOut 0.3s 1 linear forwards;
  }
  .megamenu-container .sub-menu__wrapper.hidden {
    display: none;
  }
}

@keyframes slideNavIn {
  0% {
    transform: translateY(0%);
  }
  1% {
    display: block;
    transform: translateY(1%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes slideNavOut {
  0% {
    transform: translateY(100%);
  }
  99% {
    transform: translateY(0%);
  }
  100% {
    display: none;
    transform: translateY(0%);
  }
}
.top-nav-group {
  position: relative;
}

/* MOBILE ONLY */
@media (max-width: 900px) {
  .megamenu-container .megamenu {
    background-color: #FFFFFF;
    left: 0;
  }
  .sub-menu__wrapper.sliding-in {
    display: block;
  }
  .sub-menu__wrapper.sliding-out {
    display: none;
  }
}

/*# sourceMappingURL=style-index.css.map*/