/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /** * @file * Navigation in header. */ [dir="ltr"] .header-nav { left: 100% } [dir="rtl"] .header-nav { right: 100% } [dir="ltr"] .header-nav { padding-left: 1.125rem } [dir="rtl"] .header-nav { padding-right: 1.125rem } [dir="ltr"] .header-nav { padding-right: 1.125rem } [dir="rtl"] .header-nav { padding-left: 1.125rem } .header-nav { position: fixed; z-index: 105; /* appear above overlay */ top: 0; visibility: hidden; overflow: auto; /* Ensure that header nav not use additional space and force system branding block text to unnecessarily wrap. */ flex-basis: 0; flex-grow: 1; /* Necessary for IE11. */ width: 100%; max-width: 31.25rem; height: 100%; padding-top: 0; padding-bottom: 1.125rem; border-top: solid #fff 54px; /* Create room for the "close" button. */ background-color: #fff; box-shadow: 0 0 72px rgba(0, 0, 0, 0.1) } .header-nav.is-active { visibility: visible; transform: translateX(-100%); /* LTR */ } @supports (flex-basis: max-content) { .header-nav { flex-basis: max-content } } @media (min-width: 31.25rem) { .header-nav { border-top-width: 90px } } @media (min-width: 43.75rem) { [dir="ltr"] .header-nav { padding-left: 3.375rem } [dir="rtl"] .header-nav { padding-right: 3.375rem } .header-nav { padding-bottom: 3.375rem; border-top-width: 126px } } @media (min-width: 62.5rem) { .header-nav { -ms-grid-column: 5; -ms-grid-column-span: 9; grid-column: 5 / 14 } } /* * Only apply transition styles when JS is loaded. This * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 */ html.js .header-nav { transition: visibility 0.2s, transform 0.2s; } /* Toolbar is fixed, and tray is vertical. */ body.toolbar-vertical .header-nav { border-top-width: 93px } @media (min-width: 31.25rem) { body.toolbar-vertical .header-nav { border-top-width: 129px } } /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */ @media (min-width: 43.75rem) { body.toolbar-vertical .header-nav, body.toolbar-horizontal.toolbar-fixed .header-nav { border-top-width: 165px } } /* Toolbar is horizontal fixed, and tray is open. */ @media (min-width: 43.75rem) { body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav { border-top-width: 205px } } @media (min-width: 75rem) { [dir="ltr"] body:not(.is-always-mobile-nav) .header-nav { padding-left: 0 } [dir="rtl"] body:not(.is-always-mobile-nav) .header-nav { padding-right: 0 } [dir="ltr"] body:not(.is-always-mobile-nav) .header-nav { padding-right: 0 } [dir="rtl"] body:not(.is-always-mobile-nav) .header-nav { padding-left: 0 } body:not(.is-always-mobile-nav) .header-nav { position: static; display: flex; visibility: visible; overflow: visible; -ms-grid-column: 5; -ms-grid-column-span: 10; grid-column: 5 / 15; align-items: center; justify-content: flex-end; max-width: none; height: 6.75rem; margin-top: auto; padding-top: 0; padding-bottom: 0; transition: transform 0.2s; transform: none; border-top: 0; box-shadow: none } } body.is-always-mobile-nav { /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */ } @media (min-width: 75rem) { body.is-always-mobile-nav.toolbar-vertical .header-nav, body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed .header-nav { border-top-width: 237px } } body.is-always-mobile-nav { /* Toolbar is horizontal fixed, and tray is open. */ } @media (min-width: 75rem) { body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav { border-top-width: 277px } } @media (min-width: 75rem) { [dir="ltr"] body.is-always-mobile-nav .header-nav { padding-right: 1.125rem } [dir="rtl"] body.is-always-mobile-nav .header-nav { padding-left: 1.125rem } body.is-always-mobile-nav .header-nav { overflow: auto; max-width: calc(50vw - 4.40625rem); transition: transform 0.2s, visibility 0.2s; border-top-width: 198px } } @media (min-width: 90rem) { [dir="ltr"] body.is-always-mobile-nav .header-nav { padding-right: calc(100vw - 88.875rem) } [dir="rtl"] body.is-always-mobile-nav .header-nav { padding-left: calc(100vw - 88.875rem) } body.is-always-mobile-nav .header-nav { max-width: calc(100vw - 48.9375rem) } } [dir="rtl"] .header-nav.is-active { transform: translateX(100%); }