/*		|8		|		|24		|		|40		|		|56		|		|72		|		|88		|		|104	|		|*/
:root{
		--navy					:	#012842								;
		--navy-deep				:	#0e2b43								;
		--heading				:	#01294c								;
		--silver				:	#c0c0c0								;
		--accent				:	#fcd166								;
		--text					:	#4b4f58								;
		--muted					:	#686868								;
		--tint					:	#f6f7f8								;
		--pale					:	#f9f9f9								;
		--boxed					:	1140px								;
		--wide					:	1600px								;
		--shadow				:	0 0 10px rgba(0,0,0,.5)				;
}
*,*::before,*::after{
		box-sizing				:	border-box							;
}
html{
		font-size				:	118.75%								;
}
body{
		margin					:	0									;
		font-family				:	"Lato",sans-serif					;
		font-size				:	1rem								;
		line-height				:	1.85								;
		color					:	var(--text)							;
		background				:	#fff								;
		overflow-x				:	hidden								;
}
h1,h2,h3,h4,h5,h6{
		margin					:	0 0 20px							;
		font-family				:	"Barlow",sans-serif					;
		font-weight				:	600									;
		line-height				:	1.2									;
		color					:	var(--heading)						;
}
h1{
		font-size				:	45px								;
}
h2{
		font-size				:	42px								;
}
h3{
		font-size				:	32px								;
}
h4{
		font-size				:	26px								;
}
p{
		margin					:	0 0 1.6em							;
}
a{
		color					:	var(--navy)							;
}
img{
		display					:	block								;
		max-width				:	100%								;
		height					:	auto								;
}
.skip,.offscreen{
		position				:	absolute							;
		left					:	-100vw								;
}
.skip:focus{
		top						:	1rem								;
		left					:	1rem								;
		z-index					:	10									;
		padding					:	.5rem 1rem							;
		background				:	#fff								;
}
.boxed{
		max-width				:	var(--boxed)						;
		margin					:	0 auto								;
		padding					:	0 10px								;
}
.wide{
		max-width				:	var(--wide)							;
		margin					:	0 auto								;
		padding					:	0 30px								;
}
.button{
		display					:	inline-block						;
		padding					:	15px 40px							;
		border-radius			:	2px									;
		font-family				:	"Barlow",sans-serif					;
		font-size				:	16px								;
		font-weight				:	600									;
		line-height				:	1									;
		text-transform			:	uppercase							;
		text-decoration			:	none								;
		color					:	#fff								;
		background				:	var(--silver)						;
		transition				:	background .3s						;
}
.button:hover,.button:focus{
		color					:	#fff								;
		background				:	var(--accent)						;
}
.button.navy{
		font-size				:	18px								;
		font-weight				:	500									;
		background				:	var(--navy)							;
}
.actions{
		display					:	flex								;
		flex-wrap				:	wrap								;
		gap						:	10px								;
		margin					:	0									;
}
.banner{
		position				:	relative							;
		display					:	flex								;
		align-items				:	center								;
		min-height				:	306px								;
		padding					:	20px								;
		background				:	#686868								;
}
.banner::before{
		content					:	""									;
		position				:	absolute							;
		inset					:	0									;
		background				:	center/cover no-repeat				;
		opacity					:	.2									;
}
.banner h1{
		position				:	relative							;
		width					:	60%									;
		max-width				:	684px								;
		margin					:	0 0 0 calc((100% - var(--boxed))/2 + 10px)	;
		padding					:	0 10px								;
		font-size				:	52px								;
		font-weight				:	700									;
		line-height				:	1.38								;
		text-transform			:	uppercase							;
		color					:	var(--navy)							;
		background				:	#fff								;
		box-shadow				:	0 13px 10px rgba(0,0,0,.5)			;
}
@media (max-width:1024px){
	.banner h1{
		width					:	66%									;
		margin-left				:	10px								;
	}
	h1{
		font-size				:	30px								;
	}
	h2{
		font-size				:	25px								;
	}
	h3{
		font-size				:	20px								;
	}
}
@media (max-width:767px){
	.banner{
		min-height				:	123px								;
	}
	.banner h1{
		width					:	auto								;
		font-size				:	34px								;
	}
	body{
		font-size				:	16px								;
	}
}