.toggle-inner .toggle-text {
top: calc(100% + 0.5rem);
.overlay-header .toggle-text {
.header-inner .toggle:focus .toggle-text,
.header-inner .toggle:hover .toggle-text {
text-decoration: underline;
/* Search Toggle ----------------------------- */
.search-toggle .toggle-icon,
/* Navigation Toggle ------------------------- */
.nav-toggle .toggle-icon,
.nav-toggle .toggle-inner {
/* Primary Menu ---------------------------- */
letter-spacing: -0.0277em;
justify-content: flex-end;
margin: -0.8rem 0 0 -1.6rem;
transform: rotate(-45deg);
.primary-menu .icon::before,
.primary-menu .icon::after {
background-color: currentColor;
bottom: calc(50% - 0.1rem);
.primary-menu .icon::before {
.primary-menu .icon::after {
margin: 0.8rem 0 0 1.6rem;
.primary-menu > li.menu-item-has-children > a {
.primary-menu > li > .icon {
.primary-menu .current_page_ancestor {
text-decoration: underline;
.primary-menu li.current-menu-item > a,
.primary-menu li.current-menu-item > .link-icon-wrapper > a {
text-decoration: underline;
.primary-menu li.current-menu-item > a:hover,
.primary-menu li.current-menu-item > .link-icon-wrapper > a:hover,
.primary-menu li.current-menu-item > a:focus,
.primary-menu li.current-menu-item > .link-icon-wrapper > a:focus {
transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
transform: translateY(0.6rem);
.primary-menu li.menu-item-has-children:hover > ul,
.primary-menu li.menu-item-has-children:focus > ul,
.primary-menu li.menu-item-has-children.focus > ul {
transform: translateY(0);
transition: opacity 0.15s linear, transform 0.15s linear;
.primary-menu ul::before,
.primary-menu ul::after {
.primary-menu ul::before {
.primary-menu ul::after {
border: 0.8rem solid transparent;
border-bottom-color: #000;
transition: background-color 0.15s linear;
.primary-menu ul li.menu-item-has-children > a {
.primary-menu ul li.menu-item-has-children .icon {
.primary-menu ul li.menu-item-has-children:hover > ul,
.primary-menu ul li.menu-item-has-children:focus > ul,
.primary-menu ul li.menu-item-has-children.focus > ul {
right: calc(100% + 2rem);
.primary-menu ul ul::before {
.primary-menu ul ul::after {
border-bottom-color: transparent;
.rtl .primary-menu ul ul::after {
transform: rotate(180deg);
* Enable nav submenu expansion with tapping on arrows on large-viewport
* touch interfaces (e.g. tablets or laptops with touch screens).
* These rules are supported by all browsers (>IE11) and when JS is disabled.
@media (any-pointer: coarse) {
.primary-menu > li.menu-item-has-children > a {
.primary-menu ul li.menu-item-has-children > a {
/* Repeat previous rules for IE11 (when JS enabled for polyfill). */
body.touch-enabled .primary-menu > li.menu-item-has-children > a {
body.touch-enabled .primary-menu ul li.menu-item-has-children > a {
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
transition: opacity 0.25s ease-in, left 0s 0.25s, right 0s 0.25s;
@media (max-width: 782px) {
transition: opacity 0.25s ease-out;
justify-content: stretch;
-ms-overflow-style: auto;
justify-content: space-between;
button.close-nav-toggle {
justify-content: flex-end;
button.close-nav-toggle svg {
button.close-nav-toggle .toggle-text {
/* Main Menu --------------------------------- */
border-width: 0.1rem 0 0 0;
justify-content: flex-start;
.modal-menu > li > .ancestor-wrapper > a {
letter-spacing: -0.0375em;
.modal-menu > li:last-child {
border-bottom-width: 0.1rem;
.modal-menu .ancestor-wrapper {
justify-content: space-between;
.modal-menu li.current-menu-item > .ancestor-wrapper > a,
.modal-menu li.current_page_ancestor > .ancestor-wrapper > a {
text-decoration: underline;
border-left: 0.1rem solid #dedfdf;
button.sub-menu-toggle svg {
transition: transform 0.15s linear;
button.sub-menu-toggle.active svg {
transform: rotate(180deg);
/* Main menu animation ----------------------- */
.menu-wrapper .menu-item {
.menu-wrapper.is-toggling {
.menu-wrapper.is-toggling .menu-item {
.menu-wrapper.is-toggling .menu-bottom .social-menu .menu-item {
.menu-wrapper.is-animating .menu-item,
.menu-wrapper.is-animating .toggling-target {
transition-duration: 250ms;
.menu-wrapper.is-animating .menu-item {
transition-property: transform;
.menu-wrapper.is-toggling .toggling-target {
.menu-wrapper.is-toggling .toggling-target.active {