/**
 * Components
 *
 * 1. Headlines
 * 2. Buttons
 */

/**
 * 1. Headlines
 */
.h1 {
	font-family:		var(--bold);
	font-size:			calc( 100vw * 32 / 390 );
	line-height:		calc( 100vw * 38 / 390 );
	margin:				0;
	padding:			0;
	text-align:			left;
	text-transform:		uppercase;
}

/**
 * 2. Buttons
 */
button, .btn {
	background:			transparent;
	border:				0;
	cursor:				pointer;
	margin:				0;
	border-radius:		10px;
	text-align:			center;
	transition:			all 0.2s ease;
	display:			inline-block;
	padding:			11px 34px;
}

.btn-big {
	font-size:			21px;
	letter-spacing:		-0.03em;
	font-family:		var(--medium);
}
.btn-small {
	font-size:			12px;
	letter-spacing:		0.5px;
	font-family:		var(--medium);
}
.btn-primary-secondary,
.btn-primary-secondary:visited {
	background:			var(--primary);
	color:				var(--default);
	box-shadow:			inset 0 0 0 2px var(--primary);
}
.btn-primary-secondary:hover {
	background:			var(--default);
	color:				var(--charcoal);
	box-shadow:			inset 0 0 0 2px var(--primary);
}
.btn-secondary-primary,
.btn-secondary-primary:visited {
	background:			var(--secondary);
	color:				var(--charcoal);
	box-shadow:			inset 0 0 0 2px var(--secondary);
}
.btn-secondary-primary:hover {
	background:			var(--default);
	color:				var(--charcoal);
	box-shadow:			inset 0 0 0 2px var(--secondary);
}

/**
 * Button Style 1
 *
 * Nav Button
 */
.btn-nav {
	cursor:				pointer;
	display:			block;
	height:				33px;
	overflow:			hidden;
	position:			relative;
	width:				33px;
	padding:			0;
}
.btn-nav .style-1 svg {
	fill:				none;
	height:				33px;
	width:				33px;
}
.btn-nav .style-1 line {
	stroke:				var(--primary);
	stroke-width:		2px;
	stroke-linecap:		round;
}
.btn-nav:hover .style-1 line,
.btn-nav:focus .style-1 line,
.btn-nav:active .style-1 line {
	stroke:				var(--primary_active);
}

/**
 * Button Style 1
 *
 * Close Button
 */
.btn-close {
	cursor:				pointer;
	display:			block;
	height:				30px;
	overflow:			hidden;
	position:			relative;
	width:				30px;
}
.btn-close .style-1 svg {
	height:				30px;
	width:				30px;
	fill:				none;
}
.btn-close .style-1 svg line {
	stroke:				var(--primary);
	stroke-width:		3px;
	stroke-linecap:		round;
}
.btn-close:hover .style-1 line,
.btn-close:focus .style-1 line,
.btn-close:active .style-1 line {
	stroke:					var(--primary_active);
}

/**
 * Button Style 2
 */
.btn-nav .style-2 svg {
	height:					52px;
	width:					52px;
	fill:					none;
}
.btn-nav .style-2 rect {
	height:					52px;
	width:					52px;
	fill:					var(--default);
}
.btn-nav .style-2 line {
	stroke:					var(--tertiary);
	stroke-width:			3px;
	stroke-linecap:			round;
}
.btn-nav:hover .style-2 line,
.btn-nav:focus .style-2 line,
.btn-nav:active .style-2 line {
	stroke:					var(--tertiary_active);
}

header {
	position:				relative;
	z-index:				2;
}
main {
	position:				relative;
	z-index:				1;
	min-height:				calc( 100vh - 293px );
}

/**
 * Page Specific Styles
 */
header.with-bg .inner-bg {
	background-image:		url(/img/landing-page-background.png);
	background-repeat:		no-repeat;
	background-size:		cover;
	background-position:	right top;
}
.inner-top {
	padding:				50px 24px 15px;
	display:				flex;
	justify-content:		space-between;
	margin:					0 auto;
	max-width:				1324px;
	z-index:				2;
	position:				relative;
}
.inner-top nav {
	overflow:				hidden;
	margin-top:				-5px;
}
.inner-top input {
	display:				none;
}
.inner-top ul {
	display:				none;
}
.inner-top .btn-nav {
	display:				block;
}
.inner-top .btn-close {
	display:				none;
}
.inner-top .explanation {
	position:				absolute;
	left:					-1000%;
	top:					0;
}
#menu-toggle-opened:checked ~ nav .btn-nav {
	display:				none;
}
#menu-toggle-opened:checked ~ nav ul {
	background-color:		#CFECFF;
	display:				block;
	left:					0;
	padding:				74px 48px;
	position:				absolute;
	top:					0;
	width:					100%;
}
.inner-top li {
	font-size:				18px;
	font-weight:			500;
	line-height:			36px;
	text-align:				left;
}
.inner-top li a,
.menu-header-text {
	font-family:			var(--regular);
}
.inner-top li a:not(.btn) {
	padding:				11px 0;
	line-height:			36px;
}
.inner-top li a:hover,
.inner-top li a.selected {
	color:					var(--primary);
}
/*.inner-top .btn-profile,
.inner-top .btn-menu-login {
	background:			var(--sky-blue);
	border-radius:		5px;
	color:				var(--default);
	font-size:			21px;
	font-weight:		600;
	height:				50.92px;
	letter-spacing:		-0.03em;
	line-height:		50.92px;
	text-align:			center;
	padding:			0 24px;
	display:			inline-block;
	transition:			all 0.2s ease;
	margin-top:			8px;
}*/
/*.inner-top .btn-profile:hover,
.inner-top .btn-menu-login:hover {
	background:			var(--default);
	color:				var(--sky-blue);
}*/
#menu-toggle-opened:checked ~ nav .btn-close {
	display:				block;
	position:				absolute;
	right:					24px;
	top:					46px;
	box-shadow:				none;
}

.header-home {
	margin:					0 auto;
	width:					100%;
	max-width:				1324px;
	padding:				10px 18px 300px;
}
.header-home-inner {
	padding:				50px;
	max-width:				670px;
	background:				var(--blue-lighter);
	border-radius:			25px;
	color:					var(--soft-yellow);
}
.header-home .content {
	font-size:				16px;
	line-height:			24px;
	text-align:				left;
	padding-top:			16px;
	margin:					0;
	max-width:				600px;
}
.header-cta {
	padding:				22px 0 0;
	margin:					0;
}
.main-inner {
	padding:				0 24px;
}

.admin-link {
	position:				relative;
}
.admin-link .menu-list {
	flex-direction:			column;
	position:				absolute;
	top:					50px;
	display:				none;
	width:					215px;
	left:					-15px;
	background:				var(--light-blue);
}
.admin-link:hover .menu-list {
	display:				flex;
	color:					white;
	padding:				15px;
	box-shadow:				0px 0px 7px 0px #00000040;
	border-radius:			15px;
}
.admin-link:hover .menu-list:before{
	content:				"";
	background:				var(--light-blue);
	height:					10px;
	width:					10px;
	position:				absolute;
	left:					18px;
	top:					-4px;
	transform:				rotate(45deg);
}
.admin-link:hover .menu-list a {
	color:					white;
	font-size:				12px;
}
.admin-link:hover .menu-list:after {
	content:				"";
	position:				absolute;
	left:					0;
	top:					-50px;
	width:					60px;
	height:					50px;
}
.page-link {
	padding:				0 20px;
}
.table-nopad p {
	padding-top:			0;
	padding-bottom:			15px;
}
.pension-accordion-toggle {
	display:				none;
}
label[for="pension-accordion-toggle"] {
	order:					2;
	width:					49px;
	position:				absolute;
	right:					0;
	cursor:					pointer;
}
label[for="pension-accordion-toggle"]:hover path {
	fill:					var(--primary);
}
label[for="pension-accordion-toggle"] span {
	display:				none;
}
.mfa-reminder {
	max-width:				680px;
	margin:					0 auto;
	padding-top:			40px;
}
.mfa-reminder p {
	background:				rgba(0,0,0,0.05);
	border-radius:			10px;
	padding:				15px;
	text-align:				center;
}
.mfa-reminder span {
	display:				block;
}
.mfa-reminder a {
	display:				inline-block;
	margin:					8px auto;
	width:					auto;
}
div[role="alert"]{
	margin:					5 auto;
	max-width:				1324px;
	padding:				10px 24px;
}
@media all and (min-width:720px) {
	.inner-top .btn-nav {
		display:				none;
	}
	.inner-top nav {
		overflow:				visible;
		margin-top:				-16px;
	}
	.inner-top ul,
	#menu-toggle-opened:checked ~ nav ul {
		display:				inline-block;
		background:				transparent;
		left:					unset;
		padding:				unset;
		position:				relative;
		top:					unset;
		width:					unset;
	}
	#menu-toggle-opened:checked ~ nav .btn-close {
		display:				none;
	}
	.inner-top li {
		display:				inline-block;
		margin-right:			24px;
	}
	.inner-top li.is-home-link {
		display:				none;
	}
	.inner-top li.has-button {
		margin-right:			0;
	}
	.inner-top li.hidden {
		display:				none;
	}
}

@media all and (min-width:680px) {
	.h1 {
		font-size:				63px;
		line-height:			92px;
	}
	.header-home .h1 {
		font-size:				63px;
		line-height:			63px;
	}
}