@charset "UTF-8";

/*
 * The legacy site's public/style.css, rule for rule, its values read from
 * tokens.css. The DIN font files and the banner pattern are the legacy web
 * root's own (fonts/din/, images/gray-pixels.png).
 */

@font-face{
	font-family: "DIN Next LT W04 Condensed";
	src: url("/fonts/din/1eada93f-36f7-45d8-8cae-51162e2a22bd.eot?#iefix");
	src :url("/fonts/din/1eada93f-36f7-45d8-8cae-51162e2a22bd.eot?#iefix") format("eot"),url("/fonts/din/938f5f0d-cdb1-4df4-af29-d5ebe7898bed.woff2") format("woff2"),url("/fonts/din/7c164e01-90a5-49c0-835f-249ab7c8da57.woff") format("woff"),url("/fonts/din/c095cc6f-f34c-4e0f-b987-cb20e8ef545b.ttf") format("truetype"),url("/fonts/din/fd4e3bb5-bd89-4dff-8955-e0e922dc317d.svg#fd4e3bb5-bd89-4dff-8955-e0e922dc317d") format("svg");
}

html {
	margin: var(--space-0);
}

body {
	margin: var(--space-0);
	padding: var(--space-0);
	font-size: var(--font-size-14);
	line-height: var(--line-height-21);
	font-family: var(--font-family-body);
	font-style: normal;
	color: var(--color-black);
}

p {
	font-family: var(--font-family-body);
	font-style: normal;
}

a, a:visited, a:hover, a:link {
	color: inherit;
}

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: underline;
}

.italic {
	font-style: italic;
}

.underline {
	text-decoration: underline;
}

.blue {
	background-color: var(--color-navy);
	color: var(--color-white);
}

h1, h2, h3, h4{
	font-family: var(--font-family-heading);
}

h1 {
	font-size: var(--font-size-24);
	line-height: var(--line-height-30);
	color: var(--color-navy);
	font-weight: var(--font-weight-bold);
}

h3, h4 {
	color: var(--color-navy);
	font-weight: normal;
}

.logo {
	float: left;
}

.skip-link {
	position: absolute;
	top: var(--space-neg-100pct);
	left: 0;
	background: var(--color-black);
	color: var(--color-white);
	padding: var(--space-8) var(--space-16);
	z-index: var(--z-skip);
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

.plan-branding {
	font-family: var(--font-family-din);
	float: right;
	padding-top: var(--space-20);
}

.top-hero {
	float: left;
	width: var(--size-100pct);
	min-height: var(--size-264) !important;
	max-height: var(--size-264) !important;
	overflow: hidden;
}

.fund {
	clear: both;
	display: block;
	font-size: var(--font-size-12);
}

.half {
	width: var(--size-50pct);
	float: left;
}

.fundgroup {
	font-family: var(--font-family-din);
	font-size: var(--font-size-19);
	line-height: var(--line-height-24);
	margin-top: var(--space-20);
	margin-bottom: var(--space-20);
}

.center {
	text-align: center;
}

.fundgroup-divider {
	font-family: var(--font-family-din);
	font-size: var(--font-size-18);
	line-height: var(--line-height-24);
	margin-top: var(--space-20);
}

#login-btn {
	background-color: var(--color-button);
	color: var(--color-white);
	width: var(--size-200);
	border:none;
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
	font-family: var(--font-family-din);
	text-transform: uppercase;
	text-align: center;
	font-size: var(--font-size-18);
	height: var(--size-44);
}

#login-btn:hover{
	cursor: pointer;
}

.hero-headline {
	line-height: var(--line-height-30);
	color: var(--color-white);
}

.hero-subhead {
	font-size: var(--font-size-21);
	line-height: var(--line-height-24);
	font-family: var(--font-family-din);
	color: var(--color-white);
}

.the-backdrop {
	position: absolute;
	top: var(--space-1);
}

#banner {
	position: absolute;
	z-index: var(--z-banner);
	right: 0;
	left: var(--space-25pct);
	top: var(--space-40pct);
	padding: var(--space-10);
	background-image: url("/images/gray-pixels.png");
}

#banner-content {
	text-align: center;
}

#login-banner {
	padding: var(--space-10);
	border-radius: var(--radius-8);
}

.rowspan {
	float: left;
	width: var(--size-100pct);
	margin-bottom: var(--space-10);
}

.fundname-left {
	float: left;
	width: var(--size-200);
	height: auto;
	max-height: var(--size-40);
}

.fundname {
	font-family: var(--font-family-din);
	font-size: var(--font-size-16);
	margin-top: var(--space-3);
	display: block;
	text-align: right;
}

.fundvalue-right {
	float: left;
	margin-left: var(--space-8);
}

.fundvalue,
#TotalPercent {
	float: left;
	width: var(--size-40);
}

.percent {
	padding-top: var(--space-4);
	margin-left: var(--space-3);
	float: left;
}

input[type="radio"]:checked+label,input[type="radio"]:checked+label div{
	background-color: var(--color-navy);
	color: var(--color-white);
}

/*
* Mobile (portrait) to Tablet
*/
@media (max-width: 767px) {

	#banner {
		position: absolute;
		z-index: var(--z-banner);
		right: 0;
		left: 0;
		top: var(--space-40pct);
		padding: var(--space-10);
		background-image: url("/images/gray-pixels.png");
	}

	#banner-content {
		width: var(--size-90pct);
	}

	.half {
		width: var(--size-100pct);
	}

	.mobileleft{
		padding-left: 0;
	}

	.mobilefull{
		width: var(--size-100pct) !important;
	}
}

/*
* Mobile
*/
@media (max-width: 480px) {

	#banner {
		position: absolute;
		z-index: var(--z-banner);
		right: 0;
		left: 0;
		top: var(--space-40pct);
		padding: var(--space-10);
		background-image: url("/images/gray-pixels.png");
	}

	#banner-content {
		width: var(--size-90pct);
	}

	.half {
		width: var(--size-100pct);
	}

	.mobilefull{
		width: var(--size-100pct) !important;
	}
}

@media print {
	a, #login-btn{
		display: none !important;
	}

	p > a{
		display: inline !important;
	}
}