@charset "utf-8";
/* ============================================================
   Onelife Capital - responsive layer
   Loaded AFTER css/style.css. Everything lives inside a media
   query, so the desktop site above 1024px is byte-for-byte
   unchanged. Breakpoints:
     <= 1024px  fluid   - the fixed 1000px shell becomes fluid
     <=  820px  mobile  - columns stack, menus fold into a burger
   ============================================================ */

/* The injected burger bar and menu panel never show on desktop. */
.olc-bar,
.olc-panel {
	display: none;
}

/* ------------------------------------------------------------
   FLUID  -  tablets and narrow desktop windows
   ------------------------------------------------------------ */
@media screen and (max-width: 1024px) {

	html {
		-webkit-text-size-adjust: 100%;
		overflow-x: hidden;
	}

	body {
		margin: 0;
		overflow-x: hidden;
	}

	/* The outer width="1000" shell and every nested table go fluid. */
	body > table {
		width: 100% !important;
		max-width: 100% !important;
	}

	body table {
		max-width: 100% !important;
	}

	/* Decorative 18px gutter columns earn nothing on a small screen. */
	td.leftbg,
	td.rightbg {
		display: none !important;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* Long PDF names and unbroken strings must not push the page wide. */
	td {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
}

/* ------------------------------------------------------------
   MOBILE  -  phones and small tablets
   ------------------------------------------------------------ */
@media screen and (max-width: 820px) {

	/* 12px Tahoma is a squint on a phone. */
	td,
	body {
		font-size: 14px !important;
		line-height: 1.6 !important;
	}

	/* --- burger bar ------------------------------------------ */
	.olc-bar {
		display: flex;
		align-items: center;
		gap: 10px;
		position: sticky;
		top: 0;
		z-index: 1000;
		padding: 8px 12px;
		padding-top: calc(8px + env(safe-area-inset-top, 0px));
		background: #0360a3;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	}

	.olc-bar img {
		height: 34px;
		width: auto;
		flex: none;
	}

	.olc-bar-title {
		flex: 1 1 auto;
		min-width: 0;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: bold;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.olc-burger {
		flex: none;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, .45);
		border-radius: 4px;
		background: transparent;
		color: #fff;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	.olc-burger:active {
		background: rgba(255, 255, 255, .15);
	}

	/* --- slide-down menu panel ------------------------------- */
	.olc-panel {
		display: none;
		position: sticky;
		top: 50px;
		z-index: 999;
		background: #0360a3;
		border-top: 1px solid rgba(255, 255, 255, .2);
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	html.olc-nav-open .olc-panel {
		display: block;
	}

	.olc-panel a {
		display: block;
		padding: 13px 16px;
		min-height: 44px;
		box-sizing: border-box;
		font-family: Tahoma, sans-serif;
		font-size: 14px;
		color: #fff !important;
		text-decoration: none !important;
		border-bottom: 1px solid rgba(255, 255, 255, .13);
	}

	.olc-panel a:active {
		background: rgba(255, 255, 255, .15);
	}

	.olc-panel a.olc-current {
		font-weight: bold;
		background: rgba(255, 255, 255, .12);
		box-shadow: inset 3px 0 0 #01aef0;
	}

	/* Secondary group (Home, Careers, HRMS...) reads quieter. */
	.olc-panel .olc-group-2 a {
		background: #024b80;
		font-size: 13px;
	}

	/* --- originals the burger now replaces ------------------- */
	[data-olc-hide="1"] {
		display: none !important;
	}

	/* --- header ---------------------------------------------- */
	/* Logo cell and wordmark cell stack and centre. */
	td[width="14%"],
	td[width="86%"] {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
	}

	td[align="right"] {
		text-align: center !important;
	}

	/* --- body columns ---------------------------------------- */
	/* The 24% blue menu column / 76% content column split. */
	td[width="24%"],
	td[width="76%"] {
		display: block !important;
		width: 100% !important;
	}

	/* Fixed pixel widths carried on content cells. */
	td[style*="width: 671px"] {
		width: auto !important;
	}

	/* --- contact page: form + office info -------------------- */
	td.sidecolumn {
		display: block !important;
		width: 100% !important;
	}

	td.dotted-verticaldivider {
		display: none !important;
	}

	form table td {
		display: block !important;
		width: 100% !important;
	}

	input.textfield,
	textarea.textarea,
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea,
	select {
		width: 100% !important;
		box-sizing: border-box;
		padding: 10px;
		border: 1px solid #b7b7b7;
		border-radius: 3px;
		/* 16px keeps iOS Safari from zooming on focus. */
		font-size: 16px;
		font-family: Tahoma, sans-serif;
	}

	textarea,
	textarea.textarea {
		min-height: 120px;
	}

	input.button,
	input[type="submit"],
	input[type="reset"] {
		min-height: 44px;
		padding: 10px 22px;
		margin: 4px 6px 4px 0;
		border: 0;
		border-radius: 3px;
		background: #0360a3;
		color: #fff;
		font-size: 15px;
		cursor: pointer;
	}

	input[type="reset"],
	input.button[value="Reset"] {
		background: #777;
	}

	/* --- wide data tables get their own scroller -------------- */
	.olc-scroll {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.olc-scroll > table {
		min-width: 560px;
		max-width: none !important;
	}

	/* --- dead Flash banner ----------------------------------- */
	/* 733x236 of nothing: it forces a horizontal scrollbar. */
	object,
	embed {
		display: none !important;
	}

	/* --- footer ---------------------------------------------- */
	.footer {
		height: auto !important;
		padding: 14px 12px;
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		line-height: 1.7 !important;
	}

	/* Links in body copy need a thumb-sized target. */
	td a {
		text-decoration: underline;
	}
}