.main-menu .menu .back-link a::before,
.main-menu .menu .back-link span::before, .main-menu .menu-level-0 > li > a::after, .main-menu .menu-level-0 > li > span::after, .main-menu .menu-level-2.submenu > li a::after, .main-menu .menu-level-1.submenu > li.parent-link a::after, .main-menu .menu-level-1 > li:not(.back-link, .parent-link) > a::after {
  width: 1.25rem;
  height: 1.25rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  --tw-bg-opacity: 1;
  background-color: rgb(17 156 169 / var(--tw-bg-opacity));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 18px 14px;
          mask-size: 18px 14px;
  -webkit-mask-position: center;
          mask-position: center;
  content: ""
}

.main-menu .menu-level-2.submenu > li a::after, .main-menu .menu-level-1.submenu > li.parent-link a::after, .main-menu .menu-level-1 > li:not(.back-link, .parent-link) > a::after {
  margin-left: 0.5rem;
  -webkit-mask-image: url("/themes/custom/wateruk_theme/images/arrow.svg");
          mask-image: url("/themes/custom/wateruk_theme/images/arrow.svg")
}

.main-menu .menu-level-0 > li > a::after, .main-menu .menu-level-0 > li > span::after {
  margin-left: 0.5rem;
  -webkit-mask-image: url("/themes/custom/wateruk_theme/images/chevron.svg");
          mask-image: url("/themes/custom/wateruk_theme/images/chevron.svg")
}

.main-menu .menu .back-link a::before,
.main-menu .menu .back-link span::before {
  margin-right: 0.5rem;
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -webkit-mask-image: url("/themes/custom/wateruk_theme/images/arrow.svg");
          mask-image: url("/themes/custom/wateruk_theme/images/arrow.svg")
}

.toolbar-icon-9 .main-menu {
  top: 109px
}

.main-menu {
  position: fixed;
  left: 0px;
  right: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 245 245 / var(--tw-bg-opacity));
  padding-top: 0px;
  padding-bottom: 1rem;
  overflow: hidden;
  z-index: 100;
  top: 69px;
  height: calc(100vh - 69px);
  height: calc(100dvh - 69px);
  transform: translateX(100%);
  transition: 450ms transform cubic-bezier(0.23, 1, 0.32, 1), 450ms box-shadow linear, 450ms visibility linear
}

@media (min-width: 1024px) {
  .main-menu {
    height: auto;
    position: static;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: visible;
    background-color: transparent;
    z-index: auto;
    top: auto;
    transform: none;
    transition: none
  }
}

.main-menu.is-active {
  visibility: visible;
  transform: translateX(0)
}

.main-menu.is-active .menu,
.main-menu.is-active .menu-close {
  visibility: visible
}

@media (min-width: 1024px) {
  .main-menu .main-menu__wrapper .pre-header__menu {
    display: none
  }
}

.main-menu__wrapper {
  overflow-y: auto;
  position: fixed;
  width: 100%;
  inset: 0px;
  padding-bottom: 2rem
}

@media (min-width: 1024px) {
  .main-menu__wrapper {
    overflow-y: visible;
    position: static;
    height: 100%;
    padding-bottom: 0px;
    display: flex
  }
}

.main-menu ul {
  padding: 0px;
  list-style-type: none;
  margin-top: 0px;
  margin-bottom: 0px
}

@media (min-width: 1024px) {
  .main-menu ul li {
    font-weight: 400;
    letter-spacing: 0.025em
  }
}

.main-menu .menu {
  visibility: hidden
}

@media (min-width: 1024px) {
  .main-menu .menu {
    visibility: visible;
    display: flex;
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto
  }
}

@media (min-width: 1280px) {
  .main-menu .menu {
    max-width: 1280px
  }
}

.main-menu .menu a,
.main-menu .menu span {
  display: flex;
  align-items: center;
  color: currentColor;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500
}

.main-menu .menu a:hover::after,
.main-menu .menu span:hover::after {
  --tw-translate-x: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.main-menu .menu a::after, .main-menu .menu a::before,
.main-menu .menu span::after,
.main-menu .menu span::before {
  --tw-text-opacity: 1;
  color: rgb(17 156 169 / var(--tw-text-opacity))
}

@media (min-width: 1024px) {
  .main-menu .menu a {
    border-style: solid;
    border-bottom-width: 2px;
    border-color: transparent
  }
  .main-menu .menu a:hover {
    border-color: currentColor
  }
}

.main-menu .menu > li {
  padding: 0px
}

@media (min-width: 1024px) {
  .main-menu .menu > li {
    display: flex;
    flex-direction: column;
    align-items: center
  }
}

.main-menu .menu > li > a, .main-menu .menu > li > span {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  display: flex;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  cursor: pointer
}

@media (min-width: 1024px) {
  .main-menu .menu > li > a, .main-menu .menu > li > span {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    text-align: center
  }
}

.main-menu .menu .back-link {
  display: block
}

.main-menu .menu .back-link a,
.main-menu .menu .back-link span {
  font-weight: 300
}

.main-menu .menu .back-link a::after,
.main-menu .menu .back-link span::after {
  display: none
}

.main-menu .menu .back-link a:hover::before,
.main-menu .menu .back-link span:hover::before {
  --tw-translate-x: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width: 1024px) {
  .main-menu .menu .back-link {
    display: none
  }
  .main-menu .submenu li a,
  .main-menu .submenu li span {
    display: inline
  }
}

.main-menu .submenu > .parent-link {
  margin-left: 0px;
  margin-right: 0px;
  font-weight: 500
}

@media (min-width: 1024px) {
  .main-menu .submenu > .parent-link {
    background-color: transparent;
    padding-left: 0px;
    padding-right: 0px
  }
  .main-menu .submenu > .parent-link a::after {
    margin-left: 0.5rem;
    position: absolute
  }
  .main-menu .submenu > .parent-link a,
  .main-menu .submenu > .parent-link span {
    position: relative;
    font-size: 3rem;
    line-height: 1;
    font-weight: 500
  }
}

.main-menu .submenu > .parent-link a::before,
.main-menu .submenu > .parent-link span::before {
  display: none
}

.main-menu a + .submenu-wrapper,
.main-menu span + .submenu-wrapper {
  position: fixed;
  width: 100%;
  visibility: hidden;
  top: 0px;
  right: 0px;
  bottom: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 245 245 / var(--tw-bg-opacity));
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 2rem;
  left: 100%;
  transition: 450ms left cubic-bezier(0.23, 1, 0.32, 1), 450ms box-shadow linear, 450ms visibility linear
}

@media (min-width: 1024px) {
  .main-menu a + .submenu-wrapper,
  .main-menu span + .submenu-wrapper {
    position: absolute;
    width: auto;
    background-color: transparent;
    height: auto;
    bottom: auto;
    padding-bottom: 0px;
    left: 0px;
    transform: none;
    transition: none
  }
  .main-menu a + .submenu-wrapper li,
  .main-menu span + .submenu-wrapper li {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0px;
    padding-right: 0px
  }
}

@media (min-width: 1280px) {
  .main-menu a + .submenu-wrapper li,
  .main-menu span + .submenu-wrapper li {
    padding-top: 1rem;
    padding-bottom: 1rem
  }
}

.main-menu a + .submenu-wrapper li a,
.main-menu a + .submenu-wrapper li span,
.main-menu span + .submenu-wrapper li a,
.main-menu span + .submenu-wrapper li span {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem
}

@media (min-width: 1024px) {
  .main-menu a + .submenu-wrapper li a,
  .main-menu a + .submenu-wrapper li span,
  .main-menu span + .submenu-wrapper li a,
  .main-menu span + .submenu-wrapper li span {
    padding: 0px
  }
  .main-menu a + .submenu-wrapper li a::after,
  .main-menu a + .submenu-wrapper li span::after,
  .main-menu span + .submenu-wrapper li a::after,
  .main-menu span + .submenu-wrapper li span::after {
    position: absolute
  }
}

.main-menu a + .submenu-wrapper.is-active,
.main-menu span + .submenu-wrapper.is-active {
  visibility: visible;
  left: 0px;
  z-index: 1
}

.main-menu .menu-level-0 {
  position: relative
}

@media (min-width: 1024px) {
  .main-menu .menu-level-0 {
    position: static;
    max-width: 48rem
  }
  .main-menu .menu-level-0 > li > a, .main-menu .menu-level-0 > li > span {
    font-weight: 300
  }
  .main-menu .menu-level-0 > li > a::after, .main-menu .menu-level-0 > li > span::after {
    display: none
  }
  .main-menu .menu-level-0 > li:last-child > a, .main-menu .menu-level-0 > li:last-child > span {
    padding-right: 1.25rem
  }
}

@media (min-width: 1280px) {
  .main-menu .menu-level-0 {
    max-width: none
  }
}

@media (min-width: 1024px) {
  .main-menu .menu-level-0 > li > a, .main-menu .menu-level-0 > li > span {
    border-style: solid;
    border-color: transparent;
    border-bottom-width: 4px;
    font-weight: 500
  }
}

.main-menu .menu-level-0 > li > a::after, .main-menu .menu-level-0 > li > span::after {
  position: absolute;
  right: 1.5rem
}

@media (min-width: 1024px) {
  .main-menu .menu-level-0 > li > a::after, .main-menu .menu-level-0 > li > span::after {
    display: none
  }
  .main-menu .menu-level-0 > li > a.is-active, .main-menu .menu-level-0 > li > a:hover, .main-menu .menu-level-0 > li > span.is-active, .main-menu .menu-level-0 > li > span:hover {
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(0 108 120 / var(--tw-border-opacity));
    border-bottom-width: 4px
  }
}

.main-menu .menu-level-0 > li.has-submenu > .submenu-wrapper {
  z-index: 10
}

@media (min-width: 1024px) {
  .main-menu .menu-level-0 > li.has-submenu > .submenu-wrapper {
    --tw-bg-opacity: 1;
    background-color: rgb(244 245 245 / var(--tw-bg-opacity));
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: content-box;
    overflow-y: auto;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    top: 87px;
    max-height: calc(100vh - 87px - 100px);
    max-height: calc(100dvh - 87px - 100px);
    left: calc(-50vw + 50%);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none /* IE 10+ */
  }
  .main-menu .menu-level-0 > li.has-submenu > .submenu-wrapper::-webkit-scrollbar {
    width: 0px;
    background-color: transparent
  }
  .main-menu .menu-level-0 > li.has-submenu > .submenu-wrapper::before {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 24rem;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: -10;
    background-repeat: no-repeat;
    content: "";
    background-size: 1270px 300px;
    background-position: bottom -35px center;
    background-image: url("/themes/custom/wateruk_theme/images/wateruk_brand_logo.svg")
  }
  .main-menu .menu-level-0 > li.has-submenu > .submenu-wrapper > .submenu {
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px
  }
}

@media (min-width: 1280px) {
  .main-menu .menu-level-0 > li.has-submenu > .submenu-wrapper > .submenu {
    max-width: 1280px
  }
}

@media (min-width: 1536px) {
  .main-menu .menu-level-0 > li.has-submenu > .submenu-wrapper > .submenu {
    max-width: 1536px
  }
}

.main-menu .menu-level-1.submenu {
  position: relative
}

@media (min-width: 1024px) {
  .main-menu .menu-level-1.submenu {
    display: flex;
    flex-wrap: wrap;
    padding: 0.25rem
  }
  .main-menu .menu-level-1.submenu > li {
    width: 25%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 2.5rem
  }
}

.main-menu .menu-level-1.submenu > li.parent-link a,
.main-menu .menu-level-1.submenu > li.parent-link span {
  font-weight: 500
}

@media (min-width: 1024px) {
  .main-menu .menu-level-1.submenu > li.parent-link {
    width: 100%
  }
  .main-menu .menu-level-1.submenu > li.parent-link a,
  .main-menu .menu-level-1.submenu > li.parent-link span {
    font-weight: 700
  }
  .main-menu .menu-level-1.submenu > li.parent-link a::after {
    margin-left: 1rem;
    width: 3.5rem;
    height: 3rem;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    --tw-bg-opacity: 1;
    background-color: rgb(17 156 169 / var(--tw-bg-opacity));
    -webkit-mask-image: url("/themes/custom/wateruk_theme/images/arrow.svg");
            mask-image: url("/themes/custom/wateruk_theme/images/arrow.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 50px 39px;
            mask-size: 50px 39px;
    content: ""
  }
  .main-menu .menu-level-1.submenu > li.parent-link a:hover::after {
    --tw-translate-x: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }
  .main-menu .menu-level-1.submenu > li.has-submenu > a,
  .main-menu .menu-level-1.submenu > li.has-submenu > span {
    display: none
  }
  .main-menu .menu-level-1.submenu > li.has-submenu > .submenu-wrapper {
    position: static;
    visibility: inherit
  }
  .main-menu .menu-level-1.submenu.no-submenus {
    display: flex;
    flex-wrap: wrap
  }
  .main-menu .menu-level-1.submenu.no-submenus li {
    width: 33.333333%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
  }
  .main-menu .menu-level-1.submenu.no-submenus li.parent-link {
    width: 100%
  }
}

.main-menu .menu-level-1.submenu li:not(.parent-link, .back-link) > a, .main-menu .menu-level-1.submenu li:not(.parent-link, .back-link) > span {
  padding-left: 2.5rem
}

@media (min-width: 1024px) {
  .main-menu .menu-level-1.submenu li:not(.parent-link, .back-link) > a, .main-menu .menu-level-1.submenu li:not(.parent-link, .back-link) > span {
    padding-left: 0px
  }
  .main-menu .menu-level-2.submenu > li {
    padding-top: 2rem;
    padding-bottom: 0px
  }
  .main-menu .menu-level-2.submenu > li.parent-link {
    padding-top: 0px
  }
  .main-menu .menu-level-2.submenu > li.parent-link > a,
  .main-menu .menu-level-2.submenu > li.parent-link > span {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem
  }
  .main-menu .menu-level-2.submenu > li.parent-link span::after {
    display: none
  }
}

.main-menu .menu-level-2.submenu > li:not(.parent-link, .back-link) a,
.main-menu .menu-level-2.submenu > li:not(.parent-link, .back-link) span {
  --tw-text-opacity: 1;
  color: rgb(0 108 120 / var(--tw-text-opacity));
  font-weight: 500
}

@media (min-width: 1024px) {
  .main-menu .menu-level-2.submenu > li:not(.parent-link, .back-link) a,
  .main-menu .menu-level-2.submenu > li:not(.parent-link, .back-link) span {
    --tw-text-opacity: 1;
    color: rgb(17 156 169 / var(--tw-text-opacity));
    font-weight: 300
  }
  .main-menu .menu-level-2.submenu > li:not(.parent-link, .back-link) a::after {
    display: none
  }
  .main-menu .menu-level-2.submenu > li a,
  .main-menu .menu-level-2.submenu > li span {
    font-size: 1rem;
    line-height: 1.5rem
  }
}

.main-menu .menu.pre-header__menu .pre-header__card a,
.main-menu .menu.pre-header__menu .pre-header__card span {
  padding: 0px
}

.animated-hamburger {
  width: 2rem;
  height: 1.5rem;
  position: relative;
  cursor: pointer;
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.animated-hamburger span {
  display: block;
  position: absolute;
  left: 0px;
  height: 0.25rem;
  width: 100%;
  background-color: currentColor;
  border-radius: 1px;
  opacity: 1;
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms
}

.animated-hamburger span:nth-child(1) {
  top: 0px
}

.animated-hamburger span:nth-child(2), .animated-hamburger span:nth-child(3) {
  top: 0.625rem
}

.animated-hamburger span:nth-child(4) {
  top: 1.25rem
}

.animated-hamburger.is-active span:nth-child(1),
.animated-hamburger.is-active span:nth-child(4) {
  top: 0.625rem;
  left: 50%;
  width: 0px
}

.animated-hamburger.is-active span:nth-child(2) {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.animated-hamburger.is-active span:nth-child(3) {
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

body.with-menu-overlay {
  overflow: hidden
}

@media (min-width: 1024px) {
  body.with-menu-overlay {
    overflow: auto
  }
}

/*# sourceMappingURL=main-menu.css.map */