/* =============================================================================
   RWJBarnabas Health — MyChart Third-Party Skin
   Self-contained stylesheet for header.html + footer.html

   Last updated: 2026-05
   Release scope: alert-banner removal + Patient Portal icon swap to MyChart

   This file is purpose-built for the third-party skin used at:
     https://mychart.rwjbh.org/MyChart/-/providers/

   It deliberately includes ONLY the styles needed by header.html and
   footer.html. The full rwjbh.org stylesheet covers hundreds of selectors
   for page templates that don't exist in the MyChart skin (article layouts,
   forms, scroll widgets, doctor-finder modals, etc.) — those are omitted.

   Web fonts are loaded from Google Fonts so no font files need to be hosted
   alongside this CSS. SVG icons are inlined directly in footer.html, so no
   external icon sprites or fontello dependency is needed either.

   Brand palette:
     #00548B  primary (RWJBH blue)
     #D0282E  secondary (RWJBH red)
     #3F79BC  tertiary (lighter blue)
     #EFECE4  light cream
     #53616F  dark grey
     #2B2E30  text
     #FFFFFF  white
   ============================================================================= */


/* =============================================================================
   1. WEB FONTS (Google Fonts — no local font files needed)
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap');


/* =============================================================================
   2. RESET / BASE
   ============================================================================= */
*, *:before, *:after {
	box-sizing: border-box;
}

/* Default sizing for inline SVGs and <icon> tags throughout the header/footer.
   Most inline SVGs in this skin use viewBox="0 0 36 36" with no explicit
   width/height, which makes browsers render them at their intrinsic 36px
   size — too big at most font sizes. The 1em default scales naturally with
   surrounding text and is overridden by more specific rules below where
   needed (logo, social icons, dropdown title icons, etc.). */
.header-area svg,
.footer-container svg,
.want-to-find svg,
.header-area icon,
.footer-container icon,
.want-to-find icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	background-color: #FFFFFF;
	line-height: 1.5;
	color: #2B2E30;
	font-weight: 400;
	-webkit-text-size-adjust: 100%;
}

a {
	text-decoration: none;
	color: #00548B;
	transition: color .4s ease 0s;
}

a:hover {
	color: #D0282E;
}

a[href^=tel] {
	cursor: default;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5 {
	margin: 0;
	line-height: 1.2;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
}

img {
	max-width: 100%;
	-ms-interpolation-mode: bicubic;
}

button {
	border: none;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 10000;
	padding: 12px 24px;
	background: #1B3A5C;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transition: top 0.2s ease, opacity 0.2s ease;
}
.skip-link:focus {
	top: 0;
	opacity: 1;
	outline: 3px solid #2A7F8E;
	outline-offset: 2px;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.main {
	max-width: 1440px;
	margin: 0 auto;
}

.relative { position: relative; }
.third  { width: 33.33%; }
.two-thirds { width: 66.66%; }
.full   { width: 100%; }


/* =============================================================================
   3. HEADER
   ============================================================================= */

.header-area {
	width: 100%;
	background-color: #FFFFFF;
	box-shadow: 0 0.1em 1.5em rgba(0,0,0,0.15);
	position: relative;
	z-index: 50;
}

.nav-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: #FFFFFF;
	position: relative;
}

/* Logo block */
.nav-bar .top-logo {
	width: 23%;
	padding: 1em 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-bar .top-logo img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Right-side block holding upper utility nav + main desktop nav */
.nav-bar .box {
	display: flex;
	flex-wrap: wrap;
	width: 77%;
}

/* ---- Upper utility bar (top links + search trigger) ---- */
.upper-top-nav {
	width: 100%;
	display: flex;
	position: relative;
}

.top-links-translate {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-image: linear-gradient(to right, #F3F2ED 30%, #D7ECFA);
}

.top-links-translate .top-links {
	display: flex;
	align-items: center;
	margin-left: 1.5em;
}

.top-links-translate .top-links li a {
	display: inline-block;
	color: #3F79BC;
	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	letter-spacing: 0.03em;
	padding: 0.75em 0.9em;
	transition: color .4s ease 0s;
}

.top-links-translate .top-links li a:hover,
.top-links-translate .top-links li a:focus {
	color: #D0282E;
}

/* Search trigger button on the right of the upper utility bar */
.site-search-trigger {
	display: flex;
}

.site-search-trigger .search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #3F79BC;
	color: #FFFFFF;
	padding: 0.65em 1.25em;
	font-size: 1em;
	cursor: pointer;
	transition: background-color .4s ease 0s;
}

.site-search-trigger .search-btn:hover,
.site-search-trigger .search-btn:focus {
	background-color: #00548B;
}

/* ---- Main desktop nav ---- */
.top-nav {
	width: 100%;
	display: flex;
}

.top-nav .desktop-nav {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	align-items: stretch;
	background-color: #FFFFFF;
	padding: 0 0.8em;
	position: relative;
}

.top-nav .desktop-nav > li {
	display: flex;
	align-items: stretch;
	font-size: 0.95em;
	font-weight: 500;
	position: relative;
}

.top-nav .desktop-nav > li:after {
	content: '';
	display: block;
	width: calc(100% - 2.5em);
	height: 0.35em;
	position: absolute;
	left: 1.25em;
	bottom: 0;
	background-color: #3F79BC;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .4s ease 0s;
	pointer-events: none;
}

.top-nav .desktop-nav > li:hover:after,
.top-nav .desktop-nav > li.selected:after {
	transform: scaleX(1);
}

.top-nav .desktop-nav > li > a {
	display: flex;
	align-items: center;
	padding: 1em 1.25em;
	color: #00548B;
	background-color: #FFFFFF;
	line-height: 1;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	transition: color .4s ease 0s;
}

.top-nav .desktop-nav > li > a:hover,
.top-nav .desktop-nav > li > a:focus {
	color: #D0282E;
}

.top-nav .desktop-nav .menu-close,
.top-nav .desktop-nav .extra-links {
	display: none;
}

/* ---- Dropdown sub-nav panels ----
   Hidden via opacity + pointer-events (NOT negative z-index or visibility
   transition delays — WebKit mis-hit-tests both patterns). */
.dd-nav {
	position: absolute;
	left: -1.5em;
	top: 100%;
	width: 22em;
	padding: 2em 2em 2.5em;
	background-color: #00548B;
	opacity: 0;
	transform: translateY(-0.5em);
	transition: opacity .4s ease, transform .4s ease;
	z-index: 1;
	pointer-events: none;
}

.top-nav .desktop-nav > li.open .dd-nav {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Hover-reveal only on devices with a real pointer — on touch devices
   iOS Safari fires a synthetic hover on first tap, which half-opens the
   panel and swallows the tap. Touch uses the .open class (JS) instead. */
@media (hover: hover) and (pointer: fine) {
	.top-nav .desktop-nav > li:hover .dd-nav {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

.top-nav .desktop-nav > li:last-child .dd-nav {
	left: auto;
	right: 0;
}

.dd-nav ul {
	display: block;
	max-height: 55vh;
	overflow: auto;
	width: 100%;
}

.dd-nav ul li {
	width: 100%;
	padding: 0.4em 1em;
}

.dd-nav ul li a {
	display: flex;
	align-items: center;
	color: #FFFFFF;
	padding: 0;
	line-height: 1.6;
	transition: padding-left .4s ease, color .4s ease;
}

.dd-nav ul li a:hover,
.dd-nav ul li a:focus {
	padding-left: 0.5em;
	color: #D7ECFA;
}

.dd-nav .dd-close {
	display: none;
}

/* Treatment & Care has a wider two-column dropdown */
.dd-nav.treatment-care {
	width: 44em;
	left: -9em;
	padding: 2em 2em 3em;
}

.dd-nav.treatment-care .title {
	color: #FFFFFF;
	font-size: 1.4rem;
	margin-bottom: 0.5em;
}

.dd-nav.treatment-care .fly-nav {
	display: flex;
	flex-wrap: wrap;
}

.dd-nav.treatment-care .fly-nav li {
	width: 49%;
	flex: 0 1 49%;
}

.dd-nav.treatment-care .all-services-link {
	position: absolute;
	right: 1em;
	bottom: 1em;
	background-color: #FFFFFF;
	color: #00548B;
	font-size: 0.85rem;
	padding: 0.5em 0.8em;
	font-weight: 600;
	transition: background-color .4s ease, color .4s ease;
}

.dd-nav.treatment-care .all-services-link:hover {
	background-color: #DDEAF2;
	color: #D0282E;
}

.dd-nav.treatment-care .all-services-mobile {
	display: none;
}

/* Hide the panel toggles used on mobile */
.dd-nav .panel-btn,
.desktop-nav > li > a.collapsing-btn {
	display: none;
}

/* Constrain any inline icons (SVGs and images) inside dropdown panels.
   The Treatment & Care dropdown has a 'Specialty Services' SVG icon
   in its .title span — without this rule it renders at its intrinsic
   viewBox size (36×36 → far too big given the surrounding em scaling). */
.dd-nav .title svg,
.dd-nav .title icon {
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
	vertical-align: middle;
	flex-shrink: 0;
}

.dd-nav img,
.dd-nav .title img {
	max-width: 1.5em;
	max-height: 1.5em;
	width: auto;
	height: auto;
	margin-right: 0.5em;
	vertical-align: middle;
}

/* Top-of-header logo: cap dimensions so it can't blow up if image
   styling elsewhere ever changes the implicit width/height attrs. */
.nav-bar .top-logo img {
	max-width: 100%;
	max-height: 67px;
	width: auto;
	height: auto;
	display: block;
}

/* Bottom-of-footer logo: same cap. */
.footer-container .footer-details .contact-info .footer-logo img,
.footer-container .footer-details .contact-info .footer-logo .bottom-logo {
	max-width: 306px;
	max-height: 67px;
	width: auto;
	height: auto;
	display: block;
}

/* "I Want to Find" dropdown icons — keep these explicit so the
   MyChart-Icon swap (and the other 7 icons) render at consistent size. */
.want-to-find-dropdown .dropdown-links li a img {
	width: auto;
	max-width: 4em;
	height: 4em;
	margin-bottom: 1em;
	object-fit: contain;
	display: block;
}


/* =============================================================================
   4. "I WANT TO FIND" RED CTA BUTTON + DROPDOWN
   ============================================================================= */

.want-to-find {
	display: block;
}

.want-to-find .trigger {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.6em 2.5em;
	min-width: 14em;
	background-color: #D0282E;
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.95em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1;
	cursor: pointer;
	border: none;
	transition: background-color .4s ease 0s;
	position: relative;
}

.want-to-find .trigger:hover,
.want-to-find .trigger:focus {
	background-color: #F73E3E;
}

.want-to-find .trigger > p {
	margin: 0 0.5em 0 0;
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
}

.want-to-find .trigger > svg,
.want-to-find .trigger > icon {
	stroke: currentColor;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	transition: transform .4s ease 0s;
}

.want-to-find.find-open .trigger > svg,
.want-to-find.find-open .trigger > icon {
	transform: rotate(180deg);
}

.want-to-find .close-btn {
	position: absolute;
	top: 1ch;
	right: 1ch;
	color: #FFFFFF;
	z-index: 10;
	background: transparent;
	display: none;
}

.want-to-find.find-open .close-btn {
	display: inline-flex;
}

/* Dropdown panel with the 8 icon links.
   Positioned FIXED (not absolute) so it can't be clipped by sticky/overflow
   wrappers around the header — that clipping is what made the panel appear
   "empty" on mobile Safari after scrolling. The vertical position is set by
   the toggle JS via the --wtf-top custom property (top edge = bottom of the
   trigger button). Also note: no negative z-index and no visibility
   transition-delay here — both are patterns WebKit mis-hit-tests, which was
   why links inside the open panel wouldn't click in Safari/DuckDuckGo. */
.want-to-find .want-to-find-dropdown {
	position: fixed;
	top: var(--wtf-top, 5em);
	right: 0;
	width: 41%;
	min-width: 32em;
	max-height: calc(100vh - var(--wtf-top, 5em));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 2rem;
	background-color: #D0282E;
	opacity: 0;
	transform: translateY(-0.5em);
	pointer-events: none;
	z-index: 60;
	transition: transform .35s ease, opacity .35s ease;
}

.want-to-find.find-open .want-to-find-dropdown {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.want-to-find-dropdown .dropdown-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
}

.want-to-find-dropdown .dropdown-links li {
	width: 25%;
	display: flex;
	flex-direction: column;
}

.want-to-find-dropdown .dropdown-links li.header {
	display: none;
}

.want-to-find-dropdown .dropdown-links li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 2.5em 0.75em;
	color: #FFFFFF;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 0.75em;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	transition: background-color .4s ease 0s, padding .4s ease 0s;
}

.want-to-find-dropdown .dropdown-links li a:hover,
.want-to-find-dropdown .dropdown-links li a:focus {
	background-color: #F73E3E;
	color: #FFFFFF;
}

/* Optional in-dropdown search box */
.static-site-search {
	margin: 1em 0;
}

.static-site-search .search-box label {
	display: none;
}

.static-site-search .search-box .search-input {
	position: relative;
}

.static-site-search .search-box .search-input input {
	width: 100%;
	padding: 0.9em 3em 0.9em 1em;
	border: none;
	font-size: 1em;
	font-family: 'Source Sans 3', sans-serif;
	line-height: 1.2;
}

.static-site-search .search-box .search-input button {
	position: absolute;
	right: 0.5%;
	top: 5%;
	height: 90%;
	width: 12%;
	background-color: #00548B;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .4s ease 0s;
}

.static-site-search .search-box .search-input button:hover {
	background-color: #3F79BC;
}


/* =============================================================================
   5. FOOTER — upper link grid + bottom disclaimer bar
   ============================================================================= */

.footer-container {
	width: 100%;
	padding: 0;
	z-index: 0;
}

/* ---- Upper section: blue band with link columns ---- */
.footer-container .footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 3.5em 0 3.5em 5em;
	background-color: #00548B;
	position: relative;
	width: 100%;
}

.footer-links .header,
.footer-links header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer-links .header a.collapsing-btn,
.footer-links header a.collapsing-btn {
	display: none;
}

/* +/− accordion toggle icon (visible at mobile widths only).
   Two bars: :before is the horizontal stroke, :after the vertical one.
   When the panel is open (.list-open) the vertical bar scales away,
   turning the + into a −. */
.footer-links .collapsing-btn {
	position: relative;
	width: 1em;
	height: 1em;
	padding: 0.65em;
	flex-shrink: 0;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.footer-links .collapsing-btn:before,
.footer-links .collapsing-btn:after {
	content: '';
	position: absolute;
	background-color: #FFFFFF;
}

.footer-links .collapsing-btn:before {
	width: 100%;
	height: 0.2em;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.footer-links .collapsing-btn:after {
	width: 0.2em;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%) scale(1);
	transition: transform .3s ease 0s;
	transform-origin: center;
}

.footer-links .list-open .collapsing-btn:after,
.footer-links .list-open .header .collapsing-btn:after {
	transform: translateX(-50%) scale(0);
}

/* Column: Quick Links */
.footer-links .quick-links-container {
	width: 20%;
	padding: 1.5em 4em 1.5em 0;
	border-right: solid 1px #3F79BC;
}

.footer-links .quick-links-container .quick-link-header .header h4,
.footer-links .quick-links-container .quick-link-header header h4 {
	font-size: 1.25em;
	font-weight: 600;
	color: #FFFFFF;
	margin-bottom: 1em;
}

.footer-links .quick-links-container .quick-link-list li a {
	display: flex;
	align-items: center;
	padding: 0.35em 0;
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.8;
	transition: padding .4s ease 0s, color .4s ease 0s;
}

.footer-links .quick-links-container .quick-link-list li a:hover,
.footer-links .quick-links-container .quick-link-list li a:focus {
	padding-left: 0.75em;
	color: #DEEAF2;
}

/* Columns: General Info / Patients & Visitors / Treatment & Care */
.footer-links .other-footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	width: 62%;
	padding: 1.5em 1em 1.5em 6em;
}

.footer-links .other-footer-links .other-links {
	width: 33.33%;
	padding-right: 1em;
}

.footer-links .other-links .header h4,
.footer-links .other-links header h4 {
	font-size: 1.15em;
	font-weight: 300;
	color: #FFFFFF;
	margin-bottom: 1em;
}

.footer-links .other-links .header h4 a,
.footer-links .other-links header h4 a {
	color: #FFFFFF;
}

.footer-links .other-links li a {
	display: flex;
	align-items: center;
	padding: 0.5em 0;
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.8;
	transition: padding .4s ease 0s, color .4s ease 0s;
}

.footer-links .other-links li a:hover,
.footer-links .other-links li a:focus {
	padding-left: 0.5em;
	color: #DEEAF2;
}

/* Right-side block: Employees / Health Care Pros / Suppliers / Design&Construction */
.footer-links .employee-box {
	width: 18%;
	padding-top: 1.5em;
}

.footer-links .employee-box .profession-links {
	margin-top: 1.75em;
}

/* Language Assistance row, full width along the bottom of the upper section */
.footer-links .language-links {
	width: 100%;
	margin-top: 2em;
}

p.language-header {
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.1em;
	padding-top: 2em;
	margin: 0 0 1em 0;
}

.language-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	text-align: left;
}

.language-list div {
	width: 12%;
	margin: 0 0.1em 0.4em 0.1em;
}

.language-list div a {
	display: inline-block;
	color: #FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85em;
	font-weight: 500;
	padding: 0.2em 0;
	transition: padding-left .4s ease 0s, color .4s ease 0s;
}

.language-list div a:hover,
.language-list div a:focus {
	padding-left: 0.5em;
	color: #DEEAF2;
}


/* ---- Bottom section: white band with phone / logo / social + disclaimer links ---- */
.footer-container .footer-details {
	padding: 4em 5em 1.3em;
	background-color: #FFFFFF;
}

.footer-container .footer-details .contact-info {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 2.5em;
	font-size: 0.95em;
}

/* Phone column */
.footer-container .footer-details .contact-info .contact-phone {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6em;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.2;
}

.footer-container .footer-details .contact-info .contact-phone a,
.footer-container .footer-details .contact-info .contact-phone .phone-link {
	color: #3F79BC;
	display: block;
}

/* Center logo column */
.footer-container .footer-details .contact-info .footer-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-container .footer-details .contact-info .footer-logo img,
.footer-container .footer-details .contact-info .footer-logo .bottom-logo {
	max-width: 100%;
	height: auto;
}

/* Social column */
.footer-details .contact-info .social-info .foot-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

.footer-details .contact-info .social-info .foot-social li {
	margin: 0 0.25em;
}

.footer-details .contact-info .social-info .foot-social li:last-child {
	margin-right: 0;
}

.footer-details .contact-info .social-info .foot-social li a.icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	padding: 0.6em;
	background-color: #00548B;
	color: #FFFFFF;
	border-radius: 50%;
	transition: background-color .4s ease 0s;
}

.footer-details .contact-info .social-info .foot-social li a.icon-btn:hover,
.footer-details .contact-info .social-info .foot-social li a.icon-btn:focus {
	background-color: #D0282E;
}

.footer-details .contact-info .social-info .foot-social li a.icon-btn svg {
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
}

/* Disclaimer link row */
.footer-details .disclaimer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.footer-details .disclaimer-links .disclaimer-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
}

.footer-details .disclaimer-links .disclaimer-list li {
	position: relative;
	margin-right: 1em;
}

.footer-details .disclaimer-links .disclaimer-list li a {
	display: inline-block;
	color: #57585A;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1em;
	padding: 0.1em 0;
	position: relative;
	transition: color .4s ease 0s;
}

.footer-details .disclaimer-links .disclaimer-list li a:after {
	content: '';
	position: absolute;
	top: 0;
	right: -0.5em;
	height: 100%;
	width: 1px;
	background-color: #57585A;
}

.footer-details .disclaimer-links .disclaimer-list li:last-child a:after {
	display: none;
}

.footer-details .disclaimer-links .disclaimer-list li a:hover,
.footer-details .disclaimer-links .disclaimer-list li a:focus {
	color: #D0282E;
}

.footer-container .footer-details .disclaimer-links .small,
.footer-container .footer-details .disclaimer-links .blk {
	font-size: 0.8em;
	color: #57585A;
	font-family: 'Source Sans 3', sans-serif;
	margin-top: 0.5em;
	width: 100%;
}


/* =============================================================================
   6. RESPONSIVE
   ============================================================================= */

@media screen and (max-width: 1500px) {
	.footer-container .footer-links {
		padding: 2.5em;
	}
}

@media screen and (max-width: 1200px) {
	/* Footer: stack columns and switch to accordion */
	.footer-container .footer-links {
		padding: 2.5em 2em 5em;
	}

	.footer-links .header a.collapsing-btn,
	.footer-links header a.collapsing-btn {
		display: block;
	}

	.footer-links .quick-links-container,
	.footer-links .other-footer-links,
	.footer-links .other-footer-links .other-links,
	.footer-links .employee-box {
		width: 100%;
		padding: 0;
		border: none;
	}

	.footer-links .other-links .header,
	.footer-links .other-links header,
	.footer-links .quick-links-container .quick-link-header .header,
	.footer-links .quick-links-container .quick-link-header header {
		border-bottom: solid 1px #3F79BC;
		cursor: pointer;
	}

	.footer-links .other-links .header h4,
	.footer-links .other-links header h4,
	.footer-links .quick-links-container .quick-link-header .header h4,
	.footer-links .quick-links-container .quick-link-header header h4 {
		padding: 1em 0;
		margin-bottom: 0;
		font-size: 1.2em;
		font-weight: 600;
	}

	/* Accordion: lists collapsed by default at mobile width; the toggle JS
	   in footer.html adds .list-open to the panel to expand. */
	.footer-links .quick-link-list,
	.footer-links .other-links-list,
	.footer-links .employee-links-list,
	.footer-links .profession-links-list {
		max-height: 0;
		overflow: hidden;
		transition: max-height .4s ease;
	}

	.footer-links .list-open .quick-link-list,
	.footer-links .list-open .other-links-list,
	.footer-links .list-open .employee-links-list,
	.footer-links .list-open .profession-links-list {
		max-height: 80em;
	}

	.footer-container .footer-details {
		padding: 3em 2em 1.3em;
	}

	.footer-links .language-links {
		width: 100%;
	}

	/* Header: hide desktop nav; show mobile menu button if your skin uses one */
	.top-nav .desktop-nav {
		display: none;
	}
}

@media screen and (max-width: 1000px) {
	.nav-bar .top-logo {
		width: 60%;
	}

	.nav-bar .box {
		width: 40%;
	}

	.upper-top-nav .top-links-translate .top-links {
		display: none;
	}

	.footer-container .footer-details .contact-info {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-container .footer-details .contact-info > * {
		width: 100%;
		margin-bottom: 1.5em;
	}

	.footer-details .contact-info .social-info .foot-social {
		justify-content: center;
	}

	.footer-details .disclaimer-links .disclaimer-list {
		justify-content: center;
	}

	.language-list div {
		width: 24%;
	}

	.want-to-find .want-to-find-dropdown {
		width: 100%;
		right: 0;
		min-width: 0;
	}

	.want-to-find-dropdown .dropdown-links li {
		width: 50%;
	}
}

@media screen and (max-width: 600px) {
	.nav-bar .top-logo {
		width: 100%;
	}

	.nav-bar .box {
		width: 100%;
	}

	.want-to-find .trigger {
		width: 100%;
		min-width: 0;
	}

	.footer-details .disclaimer-links .disclaimer-list li {
		margin-bottom: 0.5em;
	}

	.footer-details .disclaimer-links .disclaimer-list li a {
		font-size: 12px;
	}

	.language-list div {
		width: 49%;
	}

	.want-to-find-dropdown .dropdown-links li {
		width: 50%;
	}

	.want-to-find-dropdown .dropdown-links li a {
		padding: 1.5em 0.5em;
		font-size: 0.7em;
	}
}

@media screen and (max-width: 450px) {
	.footer-container .footer-links {
		padding: 2em 1em 4.5em;
	}

	.footer-container .footer-details {
		padding: 2em 0.5em 3em;
	}

	.want-to-find-dropdown .dropdown-links li {
		width: 100%;
	}
}