/* Header responsive rule: below 1100 uses hamburger, 1100 and above uses desktop nav. */
#header-outer #top nav > ul.sf-menu > li > a,
#header-outer #top nav ul.buttons.sf-menu > li > a {
	white-space: nowrap;
}

@media only screen and (min-width: 1100px) {
	body #header-outer #top .left-aligned-ocm,
	body #header-outer #top .slide-out-widget-area-toggle.mobile-icon {
		display: none !important;
	}
}

@media only screen and (min-width: 1100px) and (max-width: 1400px) {
	body #header-outer #top #logo img {
		width: auto !important;
		height: clamp(34px, 3.2vw, 48px) !important;
	}

	body #header-outer #top nav > ul.sf-menu > li > a {
		font-size: clamp(12px, 1.02vw, 16px) !important;
		padding-left: clamp(4px, 0.5vw, 10px) !important;
		padding-right: clamp(4px, 0.5vw, 10px) !important;
	}

	body #header-outer #top nav ul.buttons.sf-menu > li > a {
		font-size: clamp(11px, 0.95vw, 16px) !important;
		padding-left: clamp(8px, 0.9vw, 20px) !important;
		padding-right: clamp(8px, 0.9vw, 20px) !important;
	}

	body #header-outer #top nav > .buttons {
		margin-left: clamp(6px, 0.9vw, 15px) !important;
	}
}

@media only screen and (max-width: 1099px) {
	html body #header-outer {
		height: auto !important;
		padding: 12px 0 !important;
	}

	html body #header-outer header > .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	html body #header-outer #top {
		height: 54px !important;
	}

	html body #header-outer #top nav,
	html body #header-outer #top .col.span_9,
	html body #header-outer #top .nectar-mobile-only.mobile-header {
		display: none !important;
	}

	html body #header-outer #top .col.span_3 {
		width: 100% !important;
		float: none !important;
		position: relative !important;
		display: block !important;
		min-width: 0;
		min-height: 54px;
		padding-left: 0 !important;
		text-align: center !important;
	}

	html body #header-outer #top .left-aligned-ocm:not([data-user-set="1"]),
	html body #header-outer #top .left-aligned-ocm {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: absolute !important;
		left: clamp(10px, 2.6vw, 28px) !important;
		top: 50% !important;
		z-index: 10000;
		width: 36px;
		height: 36px;
		margin: 0 !important;
		transform: translateY(-50%) !important;
	}

	html body #header-outer #top .left-aligned-ocm li,
	html body #header-outer #top .left-aligned-ocm > li > div {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	html body #header-outer #top .left-aligned-ocm a {
		width: 36px !important;
		height: 36px !important;
		padding: 0 !important;
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		align-items: center;
		justify-content: center;
	}

	html body #header-outer #top .left-aligned-ocm .lines-button,
	html body #header-outer #top .left-aligned-ocm .lines,
	html body #header-outer #top .left-aligned-ocm .lines:before,
	html body #header-outer #top .left-aligned-ocm .lines:after {
		background-color: #fff !important;
		width: 27px !important;
		height: 2px !important;
	}

	html body #header-outer #top .left-aligned-ocm .lines:before {
		top: 7px !important;
	}

	html body #header-outer #top .left-aligned-ocm .lines:after {
		top: -7px !important;
	}

	html body #header-outer #top #logo {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		display: block !important;
		max-width: min(220px, calc(100vw - 120px));
		margin: 0 !important;
		transform: translate(-50%, -50%) !important;
	}

	html body #header-outer #top #logo img {
		width: auto !important;
		height: clamp(30px, 4vw, 48px) !important;
		max-width: 100%;
		object-fit: contain;
	}

}