/* Font Declarations - REMOVE AFTER RECONCILLIATION OF GLOBAL STYLESHEET (Q4 2020?) */ @font-face { font-display: swap; font-family: "HelveticaNeue-USB"; font-style: normal; font-weight: 200; src: url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-45Light.eot?#iefix") format("eot"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-45Light.woff2") format("woff2"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-45Light.woff") format("woff"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-45Light.ttf") format("truetype"); } @font-face { font-display: swap; font-family: "HelveticaNeue-USB"; font-style: normal; font-weight: 400; src: url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW04-55Roman.eot?#iefix") format("eot"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW04-55Roman.woff2") format("woff2"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW04-55Roman.woff") format("woff"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW04-55Roman.ttf") format("truetype"); } @font-face { font-display: swap; font-family: "HelveticaNeue-USB"; font-style: italic; font-weight: 400; src: url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW04-56Italic.eot?#iefix") format("eot"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW04-56Italic.woff2") format("woff2"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW04-56Italic.woff") format("woff"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW04-56Italic.ttf") format("truetype"); } @font-face { font-display: swap; font-family: "HelveticaNeue-USB"; font-style: normal; font-weight: 600; src: url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-65Medium.eot?#iefix") format("eot"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-65Medium.woff2") format("woff2"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-65Medium.woff") format("woff"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-65Medium.ttf") format("truetype"); } @font-face { font-display: swap; font-family: "HelveticaNeue-USB"; font-style: normal; font-weight: 800; src: url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-75Bold.eot?#iefix") format("eot"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-75Bold.woff2") format("woff2"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-75Bold.woff") format("woff"), url("../../shield/clientlibs/clientlib-site/resources/fonts/HelveticaNeueLTW06-75Bold.ttf") format("truetype"); } /* Menu Open - Sets to a "scroll locked" fixed position */ html.scroll-locked, html.scroll-locked body { overflow: hidden } /* */ html.scroll-locked body { bottom: 0; inset: 0; left: 0; position: fixed; right: 0; top: 0; } /* CSS Z-Index Conflicts */ .alert { z-index: +1112 } .headerIpar { z-index: +1111 } .banner { z-index: 1 !important; position: relative } .breadcrumb { z-index : 1 } /* AEM Component Container */ .globalNavigation { z-index: 2; position: relative } /* General */ .header { zoom: 1; } .header::before, .header::after { content: ""; display: table; } .header::after { clear: both; } .navigation { position: relative; } .navigation::before { background-color: rgba(0, 0, 0, 0.3); /* Scrim/Overlay */ bottom: 0; content: ""; display: block; left: 0; inset: 0; pointer-events: none; position: fixed; right: 0; top: 0; -webkit-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; z-index: -1; will-change: opacity; } .navigation[data-scrim-overlay]::before { opacity: 1 } .navigation:not([data-scrim-overlay])::before { opacity: 0 } .navigation *:not(.login-dropdown), .navigation *:not(.login-dropdown) * { font-family: "HelveticaNeue-USB", "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; } .navigation.in-mobile > * { padding: 0 24px } /* Top Utilities Navigation (Desktop-Only) */ .navigation.in-mobile .utilities { display: none } /* Primary Navigation */ .navigation.in-mobile .primary { background-color: #FFFFFF; box-shadow: 0 3px 4px 0 rgba(46, 32, 32, 0.1); line-height: 32px; margin: 0; min-height: 48px; text-align: center; vertical-align: top; } .navigation.in-mobile .primary > * { display: inline-block; height: inherit; padding: 8px 12px; white-space: wrap; vertical-align: middle; } /* Main Navigation - Menu Container - Mobile */ .navigation.in-mobile .menu { float: left; padding: 0; margin: 0 12px 0 -12px; vertical-align: top; } .navigation.in-mobile .homepage { display: inline-block; height: 100%; margin: 0 auto; max-height: 48px; min-width: 100px; max-width: calc(100% - 164px); outline-offset: -2px; padding: 0; width: 220px; } .navigation.in-mobile .homepage.in-desktop { display: none } .navigation.in-mobile .homepage .logo { height: 100%; max-height: inherit; min-height: 48px; padding: 12px 12px; width: 100%; } /* Menu Button */ .navigation.in-mobile .menu-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; color: #555555; cursor: pointer; border: 0; display: block; height: 48px; outline-offset: -2px; min-width: 48px; padding: 8px 16px; position: relative; text-align: center; touch-action: manipulation; width: auto; z-index: +2; } .navigation.in-mobile .menu-button::after { bottom: 0; content: ""; display: block; left: 0; inset: 0; position: absolute; right: 0; top: 0; } /* Menu Button (Icon - Initial State) */ .navigation.in-mobile .menu-icon { color: #555555; fill: #555555; } .navigation.in-mobile .menu-icon .line { display: block; line-height: auto; -webkit-transform: rotateZ(0) translate3d(0,0,0); -ms-transform: rotateZ(0) translate3d(0,0,0); transform: rotateZ(0) translate3d(0,0,0); -webkit-transition: opacity 250ms ease-in-out, -webkit-transform 400ms ease-in-out; -ms-transition: opacity 250ms ease-in-out, -ms-transform 400ms ease-in-out; transition: opacity 250ms ease-in-out, transform 400ms ease-in-out; width: 30px; will-change: opacity, transform; } .navigation.in-mobile .menu-icon .line-1 { -webkit-transform-origin: 3.5px 11px; transform-origin: 3.5px 11px; } .navigation.in-mobile .menu-icon .line-2 { -webkit-transform-origin: 16px; transform-origin: 16px; opacity: 1; } .navigation.in-mobile .menu-icon .line-3 { -webkit-transform-origin: 3.5px 21px; transform-origin: 3.5px 21px; } /* Menu Button (Icon - Active State) */ .navigation.in-mobile .menu-icon.active .line-1 { -webkit-transform: rotateZ(45deg) translateX(0) translateY(0); -ms-transform: rotateZ(45deg) translateX(0) translateY(0); transform: rotateZ(45deg) translateX(0) translateY(0); } .navigation.in-mobile .menu-icon.active .line-2 { -webkit-transform: rotateZ(0) translateX(0) translateY(0); -ms-transform: rotateZ(0) translateX(0) translateY(0); transform: rotateZ(0) translateX(0) translateY(0); opacity: 0; } .navigation.in-mobile .menu-icon.active .line-3 { -webkit-transform: rotateZ(-45deg) translateX(0) translateY(0); -ms-transform: rotateZ(-45deg) translateX(0) translateY(0); transform: rotateZ(-45deg) translateX(0) translateY(0); } /* Menu Button (Icon - Transition/Animation - Turn off based on accessibility user preference) */ @media screen and (prefers-reduced-motion: reduced) { .navigation.in-mobile .menu-icon .line { -webkit-transition: none; -ms-transition: none; transition: none; } } /* Menu Button (Icon - SVG CSS3 Transform Animations on SVG elements doesn't work in IE9-IE11) */ @media screen and (min-width:0\0) and (min-resolution: +72dpi) { .navigation.in-mobile .menu-icon .line, .navigation.in-mobile .menu-icon.active .line { -webkit-transform: none; -ms-transform: none; transform: none; transform-origin: none; -webkit-transition: none; -ms-transition: none; transition: none; } } /* Login Button - Single Button */ .navigation.in-mobile .login-button { background-color: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline-offset: -2px; text-align: center; text-decoration: none; touch-action: manipulation; } .navigation.in-mobile .login-button:not([aria-expanded]), .navigation.in-mobile .login-button:not([aria-expanded]) * { color: #0A41C5; text-align: center; } .navigation.in-mobile .login-button:not([aria-expanded]) { border: 0; float: right; font-size: 16px; font-weight: 600; height: 48px; line-height: 2; margin: 0 -12px 0 0; padding: 8px 24px; position: relative; width: auto; } .navigation.in-mobile .login-button:not([aria-expanded]) * { margin: 0 auto; } .navigation.in-mobile .login-button:not([aria-expanded]) *[hidden] { display: none; } /* Dropdown Levels/Layers - Mobile */ .navigation .menu-dropdown, .navigation .menu-scrolls, .navigation .menu-list { background-color: #FFFFFF; outline: none; height: 100%; list-style-type: none; margin: 0; padding: 0; width: 100%; } .navigation .menu-dropdown, .navigation .menu-list { bottom: 0; inset: 0; left: 0; position: absolute; right: 0; top: 0; } .navigation .menu-dropdown, .navigation .menu-secondary, .navigation .menu-tertiary { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: transform 375ms ease-in-out; -ms-transition: transform 375ms ease-in-out; transition: transform 375ms ease-in-out; will-change: transform; } .navigation .menu-dropdown[hidden], .navigation .menu-secondary[hidden], .navigation .menu-tertiary[hidden] { display: block !important; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .navigation .menu-dropdown:not([hidden]), .navigation .menu-secondary:not([hidden]), .navigation .menu-tertiary:not([hidden]) { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .navigation .menu-dropdown { box-shadow: 0 6px 12px 0 rgba(0,0,0,0.08); overflow-x: hidden; overflow-y: hidden; top: 100%; width: calc(95% - 44px); z-index: -1; } .navigation .menu-scrolls { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: scroll; position: relative; } .navigation .menu-scrolls:focus { border: 2px solid #109CDE; } .navigation .menu-close { clip: auto; display: block; height: 48px; font-size: 12px; font-weight: 600; left: 0; outline: none; /* Mobile devices will have native outline here, lets just make sure it overlays the close button itself... */ overflow: hidden; padding: 8px; position: absolute; right: 64px; top: -48px; visibility: visible; width: 64px; z-index: -2; } .navigation .menu-secondary, .navigation .menu-tertiary { z-index: +2; } .navigation .menu-tertiary { height: calc(100% + 48px); } .navigation .menu-search-form { margin: 0; padding: 28px 16px 16px 16px; width: 100%; } .navigation .menu-search-label { width: 100%; margin: 0; padding: 0; } .navigation .menu-search-field { position: relative; text-align: left; } .navigation .menu-search-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #FFFFFF; border: thin solid #858585; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; font-weight: 400; height: 40px; line-height: 1.5; padding: 9px 12px 7px 42px; outline: none; outline-offset: 0; vertical-align: middle; width: 100%; } .navigation .menu-search-input:focus, .navigation .menu-search-input:active { border-color: #0C2074; box-shadow: 0 0 0 2px #109CDE; outline: none; } .navigation .menu-search-input::-webkit-input-placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation .menu-search-input::-moz-placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation .menu-search-input:-ms-input-placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation .menu-search-input:-moz-placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation .menu-search-input::placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation .menu-search-input:not(:focus)::-webkit-input-placeholder { color: #6E6E6E } .navigation .menu-search-input:not(:focus)::-moz-placeholder { color: #6E6E6E; opacity: 1 } .navigation .menu-search-input:not(:focus):-ms-input-placeholder { color: #6E6E6E; opacity: 1 } .navigation .menu-search-input:not(:focus):-moz-placeholder { color: #6E6E6E; opacity: 1 } .navigation .menu-search-input:not(:focus)::placeholder { color: #6E6E6E; opacity: 1 } .navigation .menu-search-button { background-color: transparent; border-color: transparent; height: 100%; left: 0; outline: 2px solid #109CDE; outline-offset: -2px; position: absolute; top: 0; width: 40px; } .navigation .menu-search-button:not(:focus):not(:active) { outline: none; } .navigation .menu-search-icon { left: 11px; height: 16px; position: absolute; width: 16px; top: 11px; } .navigation .menu-primary-item { border-top: thin solid #CDCDD3; min-height: 54px; } .navigation .menu-primary-item:last-child { border-bottom: thin solid #CDCDD3; } .navigation .menu-secondary-item, .navigation .menu-tertiary-item { min-height: 50px } .navigation .menu-utility-item[hidden] { display: none } .navigation .menu-utility-item[role="separator"]:empty { margin: 0 0 16px 0; padding: 0; } .navigation .menu-item .menu-link { cursor: pointer; color: #2C2C2C; display: block; line-height: 1.5; outline: 2px solid transparent; outline-offset: -2px; position: relative; text-decoration: none; -ms-text-underline-position: under; text-underline-position: under; width: 100%; z-index: +1; } .navigation .menu-item .menu-link:hover, .navigation .menu-item .menu-link:focus, .navigation .menu-item .menu-link:active { color: #0A41C5; } .navigation .menu-item .menu-link:focus, .navigation .menu-item .menu-link:active { outline: 2px solid #109CDE; } .navigation .menu-item .menu-link:not(.menu-primary-link) { font-size: 14px; font-weight: 600; padding: 18px 16px 18px 28px; text-align: left; } .navigation .menu-item .menu-link:not(.menu-primary-link)::before, .navigation .menu-item .menu-link:not(.menu-primary-link)::after { bottom: 0; content: ""; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: -1; } .navigation .menu-item .menu-link:not(.menu-primary-link)::before { background-color: #FFFFFF; } .navigation .menu-item .menu-link:not(.menu-primary-link)::after { left: 28px; border-bottom: thin solid #CDCDD3; } .navigation .menu-item .menu-link * { fill: #555555; } .navigation .menu-item .menu-link:hover, .navigation .menu-item .menu-link:focus, .navigation .menu-item .menu-link:active * { fill: currentColor; } .navigation .menu-item .menu-title, .navigation .menu-item .menu-primary-link { max-height: 55px; padding: 16px; text-align: left; text-decoration: none; } .navigation .menu-item .menu-primary-link { min-height: inherit; } .navigation .menu-item .menu-title { background-color: #F7F7FA; } .navigation .menu-item .menu-primary-link, .navigation .menu-item .menu-primary-link *:not(span) { font-size: 16px; font-weight: 800; line-height: 1.5; } .navigation .menu-item .menu-primary-link { background-color: #FFFFFF } .navigation .menu-item .menu-title, .navigation .menu-item .menu-title * { font-size: 16px; font-weight: 800; line-height: 1.5; } .navigation .menu-item .menu-return { background-color: #FFFFFF; border: none; color: #555555; font-size: 14px; font-weight: 600; min-height: 64px; outline-offset: -2px; padding: 12px 16px 12px 40px; text-align: left; vertical-align: middle; width: 100%; } .navigation .menu-item .menu-return * { color: inherit; fill: currentColor; float: left; left: 12px; margin: 0; position: absolute; top: 22px; } .navigation .menu-item .menu-title { border-bottom: thin solid #CDCDD3; border-top: thin solid #CDCDD3; color: #323232; outline: none; } .navigation .menu-item .USBNavigation__MainMenuCategoryIcon { color: inherit; display: block; fill: currentColor; float: right; margin: 0 0 0 12px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: transform 125ms 0ms ease-in-out; -ms-transition: transform 125ms 0ms ease-in-out; transition: transform 125ms 0ms ease-in-out; will-change: transform; } .navigation .menu-item .menu-link:not([aria-expanded]) .USBNavigation__MainMenuCategoryIcon { display: none; } .navigation .menu-item .USBNavigation__MainMenuSubcategoryIcon { background-color: transparent; color: #FFFFFF; opacity: 0; position: absolute; right: 8px; top: 14px } .navigation .menu-utility-item .menu-primary-link { background-color: #FFFFFF; color: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; -ms-text-underline-position: under; text-underline-position: under; } .navigation .menu-utility-item .menu-primary-link:hover, .navigation .menu-utility-item .menu-primary-link:focus, .navigation .menu-utility-item .menu-primary-link:active { color: #0A41C5; } .navigation .menu-utility-item .menu-primary-link *:not(span) { float: left; fill: currentColor; margin: 0 8px 0 0; } .navigation.in-mobile .menu-button[aria-expanded="false"] + .menu-dropdown .menu-scrolls { overflow: hidden; } /* IE10/11 workaround for IE missing outline-offset support - 200% ZOOM */ @media screen and (min-width: 0\0), (-ms-high-contrast: none), (-ms-high-contrast: active) { .navigation.in-mobile .menu-button:focus, .navigation.in-mobile .homepage:focus, .navigation.in-mobile .login-button:not([aria-expanded]):focus { box-shadow: 0 0 0 1.5px #109CDE inset !important; outline: none !important; } } @media screen and (min-width: 1140px) { /* General */ .navigation.in-desktop { padding: 0 12px; z-index: 1; } .navigation.in-desktop > * { padding: 0 5%; } /* Utilities */ .navigation.in-desktop .utilities { background-color: #F7F7FA; display: block; line-height: 40px; margin: 0 0 0 -12px; min-height: 40px; width: calc(100% + 24px); zoom: 1 } .navigation.in-desktop .utilities::before, .navigation.in-desktop .utilities::after { content: ""; display: table; } .navigation.in-desktop .utilities::after { clear: both; } .navigation.in-desktop .utilities-left { float: left } .navigation.in-desktop .utilities-right { float: right; margin-right: 12px; } .navigation.in-desktop .utility-items { display: inline-block; list-style-type: none; margin: 0 -12px; padding: 0; vertical-align: top; } .navigation.in-desktop .utility-item { display: inline-block; /* max-height: 40px; */ /* Button height was causing 2.5-3px offset for login button */ position: relative; } .navigation.in-desktop .utility-link { color: #0A41C5; display: block; font-weight: 400; font-size: 12px; line-height: inherit; outline-offset: -3px; padding: 0 12px; text-decoration: underline; width: 100%; } .navigation.in-desktop .utility-link:not(:hover):not(:focus):not(:active) { color: inherit; text-decoration: none; } /* Search */ .navigation.in-desktop .search-form-nav { margin: 8px 0; padding: 0; width: 100% } .navigation.in-desktop .search-field { line-height: normal; position: relative; text-align: left; } .navigation.in-desktop .search-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #FFFFFF; border: thin solid #858585; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 12px; font-weight: 400; height: 24px; line-height: 1.5; margin: 0 16px 0 0; max-width: 175px; outline: none; outline-offset: 2px; padding: 2.5px 12px 2.5px 28px; vertical-align: middle; width: 100% } .navigation.in-desktop .search-input:focus, .navigation.in-desktop .search-input:active { border-color: #0C2074; outline: 2px solid #109CDE; } .navigation.in-desktop .search-input::-webkit-input-placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation.in-desktop .search-input::-moz-placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation.in-desktop .search-input:-ms-input-placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation.in-desktop .search-input:-moz-placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation.in-desktop .search-input::placeholder { color: #CDCDD3; transition: color 125ms 0s ease-in-out } .navigation.in-desktop .search-input:not(:focus)::-webkit-input-placeholder { color: #6E6E6E } .navigation.in-desktop .search-input:not(:focus)::-moz-placeholder { color: #6E6E6E; opacity: 1 } .navigation.in-desktop .search-input:not(:focus):-ms-input-placeholder { color: #6E6E6E; opacity: 1 } .navigation.in-desktop .search-input:not(:focus):-moz-placeholder { color: #6E6E6E; opacity: 1 } .navigation.in-desktop .search-input:not(:focus)::placeholder { color: #6E6E6E; opacity: 1 } .navigation.in-desktop .search-button { background-color: transparent; border-color: transparent; height: 100%; left: 0; position: absolute; top: 0; width: 28px; } .navigation.in-desktop .search-label { width: 100%; margin: 0; padding: 0; } .navigation.in-desktop .search-icon { margin:0px auto; width: 13px; height: 13px; } /* Login Menu - Desktop */ .navigation.in-desktop .login-button:not([aria-expanded]) { display: none; } .navigation.in-desktop .login-button[aria-expanded] { background-color: #DE162B; border: 2px #DE162B solid; color: #FFFFFF; font-size: 14px; font-weight: 800; line-height: 1.5; padding: 8px 16px; position: relative; text-align: center; text-decoration: none; } .navigation.in-desktop .login-button[aria-expanded]:focus { z-index: +3; } .navigation.in-desktop .login-button[aria-expanded]:not(:hover):not(:focus):not(:active) { color: #FFFFFF; } .navigation.in-desktop .login-button[aria-expanded]::after { bottom: 0; content: ""; display: block; inset: 0; left: 0; position: absolute; right: 0; top: 0; z-index: +1; } .navigation.in-desktop .login-button[aria-expanded="false"] { box-shadow: -3px 0px 6px 2px rgba(0,0,0, 0.01); } .navigation.in-desktop .login-button[aria-expanded="true"] { background-color: transparent; border: 2px #FFFFFF solid; box-shadow: -3px 0px 6px 2px rgba(0,0,0, 0.1); color: #0A41C5; } .navigation.in-desktop .login-dropdown { background-color: transparent; /* box-shadow: 0 6px 12px 0 rgba(0,0,0,0.1); */ right: 0; margin: 0; min-height: 400px; min-width: 223.2px; /* (992px / 4) * 0.9 (90% width with 5% margins) */ overflow-x: hidden; position: absolute; top: 100%; width: auto; z-index: 2; } .navigation.in-desktop .login-dropdown .aw-usb-authenticate { padding: 16px; /* As according to the mobile dropdown docs from Jordan, instead of 25px */ } .navigation.in-desktop .login-dropdown[hidden] { display: none !important } .navigation.in-desktop .login-dropdown:not([hidden]) { display: block !important } .navigation.in-desktop .login-button[aria-expanded] .login-close { color: #0A41C5; height: 28px; position: absolute; right: 14px; top: 4px; width: 28px; z-index: +1; } .navigation.in-desktop .login-button[aria-expanded="false"] .login-label { opacity: 1; } .navigation.in-desktop .login-button[aria-expanded="true"] .login-label { opacity: 0; } .navigation.in-desktop .login-button[aria-expanded="false"] .login-close { display: none !important } .navigation.in-desktop .login-button[aria-expanded="true"] .login-close { display: block !important } /* Logo/Home - Desktop */ .navigation.in-desktop .homepage.in-desktop { display: inline-block; float: left; height: 100%; margin: 0 0 0 -12px; max-height: 64px; max-width: 220px; min-width: auto; padding: 0 12px 0 12px; text-align: left; width: auto; } .navigation.in-desktop .homepage.in-desktop .logo { max-width: 100%; min-height: 64px; padding: 16px 0 16px 0; width: auto; } .navigation.in-desktop .homepage.in-mobile { display: none } /* Main Menu - Desktop */ .navigation.in-desktop .primary { height: auto; min-height: 64px; text-align: left; margin: 0 -12px; } .navigation.in-desktop .primary > * { position: relative } .navigation.in-desktop .primary .USBNavigation__LoginButton { display: none } .navigation.in-desktop .menu, .navigation.in-desktop .menu-dropdown, .navigation.in-desktop .menu-scrolls, .navigation.in-desktop .menu-items, .navigation.in-desktop .menu-primary-item, .navigation.in-desktop .menu-item .menu-primary-link { min-height: inherit; height: auto; vertical-align: top; } .navigation.in-desktop .menu { float: none; margin: 0; padding: 0; position: relative; width: calc(100% - 232px); } .navigation.in-desktop .menu-button { display: none } .navigation.in-desktop .menu-dropdown { box-shadow: none; border: none; } .navigation.in-desktop .menu-scrolls { position: static; overflow: visible; } .navigation.in-desktop .menu-button[aria-expanded="false"] + .menu-dropdown .menu-scrolls { overflow: visible; } .navigation .menu-close { display: none; } .navigation.in-desktop .menu-dropdown[hidden], .navigation.in-desktop .menu-dropdown:not([hidden]) { bottom: auto; display: block !important; float: left; overflow: visible; position: static; width: 100% } .navigation.in-desktop .menu-dropdown[hidden], .navigation.in-desktop .menu-secondary[hidden], .navigation.in-desktop .menu-tertiary[hidden] { transform-origin: center center; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: none; -ms-transition: none; transition: none; will-change: initial; } .navigation.in-desktop .menu-dropdown:not([hidden]), .navigation.in-desktop .menu-secondary:not([hidden]), .navigation.in-desktop .menu-tertiary:not([hidden]) { transform-origin: center center; -webkit-transform: translate3d(center, center, 0); -ms-transform: translate3d(center, center, 0); transform: translate3d(center, center, 0); -webkit-transition: none; -ms-transition: none; transition: none; will-change: initial; } .navigation.in-desktop .menu-dropdown:not([hidden]) { min-height: inherit !important; /* The dropdown resize event doesn't reset this without click/keydown, so we'll do it from the CSS */ z-index: auto; } .navigation.in-desktop .menu-secondary { background-color: #F7F7FA; bottom: auto; height: auto; left: 0; padding: 0; right: auto; top: 100%; width: auto; z-index: -1; } .navigation.in-desktop .menu-secondary[hidden], .navigation.in-desktop .menu-tertiary[hidden] { display: none !important; } .navigation.in-desktop .menu-tertiary:not([hidden]) { background-color: #FFFFFF; border: none; height: 100%; left: 100%; overflow: hidden; position: absolute; top: 0; } .navigation.in-desktop .menu-tertiary:not([hidden]) { display: block } .navigation.in-desktop .menu-secondary:not([hidden]), .navigation.in-desktop .menu-tertiary:not([hidden]) { width: 296px; /* 592px total secondary + tertiary */ } .navigation.in-desktop .USBNavigation__MainMenuCategoryIcon:first-child:not(:last-child) { display: none; } .navigation.in-desktop .menu-items { margin: 0; position: static; z-index: +1; } .navigation.in-desktop .menu-item:not(.menu-primary-item) { min-height: 48px; padding: 0; } .navigation.in-desktop .menu-utility-item { display: none; } .navigation.in-desktop .menu-primary-item { border: none; float: left; } .navigation.in-desktop .menu-secondary-item { background-color: none; } .navigation.in-desktop .menu-item:not(.menu-primary-item)::before, .navigation.in-desktop .menu-item .menu-link:not(.menu-primary-link)::before, .navigation.in-desktop .menu-item .menu-link:not(.menu-primary-link)::after { content: none; } .navigation.in-desktop .menu-item:not(.menu-primary-item):first-child, .navigation.in-desktop .menu-title { display: none; } .navigation.in-desktop .menu-item .menu-link { background-color: inherit; z-index: auto; } .navigation.in-desktop .menu-item .menu-link:hover, .navigation.in-desktop .menu-item .menu-link:focus, .navigation.in-desktop .menu-item .menu-link:active { text-decoration: underline; } .navigation.in-desktop .menu-item .menu-link:focus, .navigation.in-desktop .menu-item .menu-link:active { z-index: +2; } .navigation.in-desktop .menu-item .menu-link:not(.menu-primary-link) { font-size: 14px; font-weight: 400; line-height: 1.5; min-height: 48px; outline-offset: -2px; padding: 12px; text-align: left; } .navigation.in-desktop .menu-item .menu-link:not(.menu-primary-link) * { fill: currentColor; } .navigation.in-desktop .menu-item .menu-link:not(.menu-primary-link)::before { content: none; } .navigation.in-desktop .menu-item .menu-link:not(.menu-primary-link):not([aria-expanded]) { color: #0A41C5; } .navigation.in-desktop .menu-item .menu-link:not(.menu-primary-link):not([aria-expanded]):hover { background-color: #FFFFFF; /* Leave this here, it appears to trigger paint so that we don't have weird underline bugs... */ } .navigation.in-desktop .menu-item .menu-primary-link { color: inherit; font-size: 14px; font-weight: 400; min-height: 64px; outline-offset: 0; padding: 20px 12px; text-decoration: none; } .navigation.in-desktop .menu-item .menu-primary-link::after { background-color: transparent; border: 0.5px solid transparent; bottom: 0; color: currentColor; content: ''; display: inline-block; left: 0; height: calc(100% - 42px); inset: 0; margin: 21px 7px; position: absolute; right: 0; top: 0; width: calc(100% - 14px); } .navigation.in-desktop .menu-item .menu-primary-link:hover { color: #0A41C5; text-decoration: none; } .navigation.in-desktop .menu-item .menu-primary-link:focus, .navigation.in-desktop .menu-item .menu-primary-link:active { color: #0A41C5; text-decoration: underline; } .navigation.in-desktop .menu-item .menu-primary-link:hover::after { border-color: #CDCDD3; } .navigation.in-desktop .menu-item .menu-primary-link:hover:focus::after, .navigation.in-desktop .menu-item .menu-primary-link:hover:active::after { border-color: transparent; } /* Links attached to the "current page" on load of page coming from JavaScript - Further testing required... */ /*.navigation.in-desktop .menu-item .menu-primary-link[aria-current="page"] { color: #323232; text-decoration: underline; } .navigation.in-desktop .menu-item .menu-primary-link[aria-current="page"]:hover { color: #0A41C5; text-decoration: underline; text-decoration-color: #323232; }*/ .navigation.in-desktop .menu-item .menu-primary-link > .USBNavigation__MainMenuCategoryIcon { display: none } .navigation.in-desktop .menu-secondary::before { bottom: 0; box-shadow: 0 6px 12px 0 rgba(0,0,0,0.1); content: ""; display: block; left: 0; position: absolute; right: 0; top: 0 } .navigation.in-desktop .menu-secondary[data-multiple-layers="false"] { background-color: #FFFFFF; box-shadow: 0 6px 12px 0 rgba(0,0,0,0.1); left: auto; width: auto; } .navigation.in-desktop .menu-secondary[data-multiple-layers="true"]::before { right: -100%; } .navigation.in-desktop .menu-item .menu-secondary-link, .navigation.in-desktop .menu-item .menu-secondary-link *:not(span) { color: #0A41C5; font-weight: 400; } .navigation.in-desktop .menu-item .menu-secondary-link { -webkit-transition: background-color 125ms 0ms ease-in-out, color 125ms 0ms ease-in-out; -ms-transition: background-color 125ms 0ms ease-in-out, color 125ms 0ms ease-in-out; transition: background-color 125ms 0ms ease-in-out, color 125ms 0ms ease-in-out; will-change: background-color, color } .navigation.in-desktop .menu-item .menu-secondary-link * { transition: color 125ms 0ms ease-in-out, fill 125ms 0ms ease-in-out; will-change: color, fill } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded] { font-weight: 600; padding: 12px 48px 12px 12px; } .navigation.in-desktop .menu-item .menu-secondary-link:not([aria-expanded]) { color: #0A41C5; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"] { background-color: #F7F7FA; color: #2C2C2C; text-decoration: none; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:hover { color: #0A41C5; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:focus, .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:active, .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="true"] { background-color: #0A41C5; color: #FFFFFF; text-decoration: none; z-index: +2; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:focus *, .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:active *, .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="true"] * { fill: #FFFFFF; opacity: 1; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"] * { fill: transparent; opacity: 0; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded='true'] { color: #FFFFFF; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="true"]:active { background-color: #0C2074; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="true"] .USBNavigation__MainMenuSubcategoryIcon { display: inline-block; min-height: auto; padding: 0; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded] + .menu-tertiary { left: 0; margin-left: 100%; outline: 0; -webkit-transform: none; -ms-transform: none; transform: none; width: 100%; will-change: initial; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded] + .menu-tertiary[hidden] { z-index: -1; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"] + .menu-tertiary[hidden] { display: none; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:focus + .menu-tertiary, .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:active + .menu-tertiary { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: +1; } .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:focus + .menu-tertiary .menu-tertiary-item, .navigation.in-desktop .menu-item .menu-secondary-link[aria-expanded="false"]:active + .menu-tertiary .menu-tertiary-item { opacity: 1; } } /* IE 9/10/11 workaround for IE missing outline-offset support */ @media screen and (min-width: 1140px) and (min-width: 0\0), (-ms-high-contrast: none), (-ms-high-contrast: active) { .navigation.in-desktop .utility-link:focus, .navigation.in-desktop .menu-link:focus { box-shadow: 0 0 0 1.5px #109CDE inset !important; outline: none !important; } .navigation.in-desktop .login-button[aria-expanded]:focus { border: 2px solid #109CDE !important; outline: none !important; } .navigation.in-desktop .homepage.in-desktop .logo { width: 100%; } } /* OFFSHORE CODE */ .secNavAuthor, .terNavAuthorItems { display: block; padding: 1% 5%; } .secNavAuthor p, .terNavAuthor p { font-size: 12px; margin-bottom: 0; font-weight: bold; text-transform: uppercase; } table.navAuthorTable { width: 100%; margin: 1% 0%; border: thin solid black; } table.navAuthorTable tr th { width: 33%; text-align: center; border: thin solid black; } table.navAuthorTable tr td { padding: 1%; border: thin solid black; } .errorsearch { color: #cc0033; display: flex; font-size: 12px; line-height: 15px; margin: 3px 0 0; } .shield-content .navigation button svg.login-close circle { fill: none; } .shield-content .navigation .login-button:focus { outline: 2px solid #0a41cf; } .shield-content .navigation.in-mobile .menu-button { margin: 0px; } /************************************************** Static Language indicator disclamer **************************************************/ .navigation .menu-primary-link span.languageIndicatorSmallIcon{background-color:#364aa4;border:0;border-radius:3px;color:white;padding:4px 3px 3px 3px;font-size:11px;margin-left:7px} #langIndicatorToggleButtonMobileNav span.languageIndicatorSmallIconMobile{background-color:#364aa4;border:0;border-radius:3px;color:white;padding:4px 3px 3px 3px;font-size:11px;} #langIndicatorToggleButtonMobileNav span.languageIndicatorSmallIconMobileEnPg{/* background-color: #fafdff; */border: 1px solid;border-radius:3px;padding:4px 3px 3px 3px;font-size:11px;margin-right: .5rem;} .navigation.in-mobile .mobileToggleDesc{ width: 55%; /* height: auto; */ margin-top: -.2rem; margin-bottom: 1%; padding-left: 4rem; font-size: .9rem; padding-top: 0px; color: inherit; pointer-events: none ; } /*Mobile / Tablet*/ #staticSpanishDisclamer { padding: 1.75rem 0rem 1.75rem 5%; background-color:rgb(246, 246, 246); line-height: 27px; font-family: sans-serif; /*font-size: 18px;*/ } .languageIndicatorSmallIconDisclamer { background-color: #263d82; border: 0; border-radius: 4px; color: white; padding: 5px 5px; font-size: 15px; } #staticSpanishDisclamer .column1 { float: left; width: 5rem; } #staticSpanishDisclamer .column2 { float: left; width: 90%; font-size: 14px; line-height: 1.8rem; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /**Desktop*/ @media only screen and (min-width: 1145px) { #staticSpanishDisclamer { border: 1px solid rgba(54, 104, 218, 0.16); padding: 1.75rem 0rem 1.75rem 5%; border-radius: 5px; border-top-width: .5rem; border-top-color:rgb(54, 104, 218); background-color: rgb(239, 243, 252); font-family: sans-serif; line-height: 27px; /*font-size: 18px;*/ } #staticSpanishDisclamer .column1 { float: left; width: 4rem; } #staticSpanishDisclamer .column2 { margin: 5px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } } /* #staticSpanishDisclamer .column1 span{vertical-align:middle !important} #staticSpanishDisclamer .column2 span{vertical-align middle;} */ /*Mobile Only */ @media screen and (max-width:600px){ .navigation.in-mobile .login-button:not([aria-expanded]){font-size: 14px;padding: 8px 8px;} .navigation.in-mobile .homepage{height:48px; width:100px;} .navigation.in-mobile .homepage .logo{padding:2px 2px;} #staticSpanishDisclamer .column1 { width: 4rem; } #staticSpanishDisclamer .column2 { width: 80%; } .navigation.in-mobile .mobileToggleDesc{ width: 80%; } } /**************************************************/ /*Nav Autocomplete */ .search-form-nav .search-autocomplete, .navbar-form-nav .search-autocomplete { position: relative; } .search-form-nav .search-autocomplete ul, .navbar-form-nav .search-autocomplete ul { position: absolute; padding-left: 0px; margin: 0px; list-style-type: none; border: 1px solid #6E6E6E; box-shadow: 0px 15px 10px -6px rgba(0, 0, 0, 0.15); display: none; width: 100%; } .search-form-nav .search-autocomplete ul li, .navbar-form-nav .search-autocomplete ul li { height: 40px; padding: 10px 20px 12px 40px; background-color: white; border-bottom: 1px solid #efefef; outline: none; overflow: hidden; font-size: 16px; font-weight: normal; color: #555; } .search-autocomplete ul li:hover,.search-autocomplete ul li:focus ,.search-autocomplete ul li.active-listitem{ background-color: #F2F2F5; } .search-form-nav button.search-close-icon, .navbar-form-nav button.search-close-icon { border: 1px solid transparent; background-color: transparent; vertical-align: middle; outline: 0; cursor: pointer; position: absolute; top: 0px; padding: 0; background: url(../../../etc.clientlibs/dotcomsales/clientlibs/clientlib-site/resources/images/svg/icon-close.svg) no-repeat; height: 40px; width: 40px; right: 0; background-size: 55%; background-position: center; display: none; z-index: 201; } .search-form-nav button.search-close-icon:focus, .navbar-form-nav button.search-close-icon:focus { outline: 2px solid black; outline-offset: -2px; } form.search-form-nav.active-search input, form.navbar-form-nav.active-search input { z-index: 200; position: relative; } form.search-form-nav.active-search .nav-search-icon-desk, form.navbar-form-nav.active-search .nav-search-icon-mob { z-index: 201; } form.search-form-nav.active-search .search-autocomplete, form.navbar-form-nav.active-search .search-autocomplete { z-index: 100; } form.search-form-nav.active-search .search-autocomplete ul::before, form.navbar-form-nav.active-search .search-autocomplete ul::before { background-color: rgba(0, 0, 0, 0.3); bottom: 0; content: ""; display: block; left: 0; inset: 0; pointer-events: none; position: fixed; right: 0; top: 0; -webkit-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; z-index: -1; } form.search-form-nav div.search-autocomplete > ul { width: 175px; } form.search-form-nav div.search-autocomplete > ul > li { height: 25px; padding: 6px 10px 6px 28px; line-height: 1.25; font-size: 12px; } form.search-form-nav .search-close-icon { height: 24px; width: 24px; right: 16px; } button.nav-search-icon-desk,button.nav-search-icon-mob{ height: 40px; position: absolute; width: 40px; z-index: 1; padding: 0; background-color:transparent; border:2px solid transparent; outline-offset: -2px; } button.nav-search-icon-desk{ height: 25px; width: 25px; left: 0px; bottom: 0px; }