:root {
	--content-max-width:50rem;
	--section-max-width:1200px;
	--column-gutter:4rem;
	--menu-vpad:1rem;
	--menu-hpad:1rem;
	--four-col-width:calc(25% - (var(--column-gutter)*.75));
	--three-col-width:calc(33.333% - (var(--column-gutter)*.666));
	--two-col-width:calc(50% - (var(--column-gutter)*.5));
	--section-vpad:4rem;
	--section-hpad:calc((100vw - var(--section-max-width)) / 2);
	--section-width:100%;
	--vgutter:1rem;
}
@media(max-width:calc(1200px + 2rem)){
	:root{
		--column-gutter:3rem;
		--section-hpad:2rem;
		--section-width:calc(100% - calc(var(--section-hpad) * 2));
	}
}
@media(max-width:900px){
	:root {
		--column-gutter:2rem;
		--four-col-width:calc(50% - (var(--column-gutter)*.5));
	}
	span{
		margin-top:var(--vgutter);
	}
	span span{
		width:100%!important; /* Note, this is a hack and nested span's should be avoided */
		margin-top:0;
	}
	span span + span{
		margin-top:var(--vgutter);
	}
}
@media(max-width:700px){
	:root {
		--three-col-width:100%;
		--section-vpad:3rem;
	}
}
@media(max-width:650px){
	:root {
		--two-col-width:100%;
	}
	span:first-child:has(+span:last-child img:only-child) + span{
		margin-top:0;
		order:-1;
	}
	span:first-child:has(> img:only-child):has(+span:last-child){
		margin-top:0;
	}
}
@media(max-width:500px){
	:root {
		--four-col-width:100%;
	}
}
body{
	margin:0;
}
body > header, section, body > footer{
	padding:var(--section-vpad) var(--section-hpad);
	max-width:var(--section-max-width);
	width:var(--section-width);
}
* + div{
	margin-top:var(--vgutter);
}
span{
	display:block;
	box-sizing:border-box;
	width:auto;
}
*:has(> span){
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
span:has(+span), span:has(+span)+span{
	width:var(--two-col-width);
}
span:has(+span+span), span:has(+span+span)+span, span:has(+span+span)+span+span{
	width:var(--three-col-width);
}
span:has(+span+span+span), span:has(+span+span+span)+span, span:has(+span+span+span)+span+span, span:has(+span+span+span)+span+span+span{
	width:var(--four-col-width);
}
nav menu{
	list-style:none;
	padding:0;
}
body > header > *:not(div, nav), section > *:not(div), body > footer > *:not(div, nav){
	max-width:var(--content-max-width);
}
header > nav > menu{
	display:flex;
}
header > nav > menu > li + li{
	display:inline-block;
}
header nav menu > li > menu{
	padding:var(--menu-vpad) var(--menu-hpad);
}
header nav menu > li > menu, header nav menu > li > section{
	background-color:#ddd;
	display:none;
	position:absolute;
	z-index:1;
}
header nav menu > li:hover > menu{
	display:block;
}
header nav menu > li:hover > section{
	display:flex;
}
header nav menu > li:hover > section{
	left:0;
}



*{
	font-family:Helvetica, sans-serif;
}
body{
	background-color:#FCFCFC;
	color:#1C1726;
	font-size:calc(13px + .35vw);
	line-height:1.4;
}
h1{
	font-size:calc(2rem + 2vw);
	line-height:1.2;
	margin:0;
}
h2{
	font-size:calc(1.5rem + 1.5vw);
	line-height:1.2;
	margin:0 0 1rem 0;
}
h3{
	font-size:calc(.75rem + 1.25vw);
	line-height:1.2;
	margin:0 0 1rem 0;
}
body > footer h2{
	font-size:1rem;
}
p{
	margin:0;
}
* + p{
	margin:1rem 0 0 0;
}
button{
	background-color:#1C1726;
	border:0;
	border-radius:10px;
	color:#fff;
	display:inline-block;
	font-size:1rem;
	line-height:3;
	margin:1rem 0 0 0;
	padding:0 2rem;
}
img{
	width:100%;
}
img.icon{
	margin-bottom:1rem;
	width:80px;
}
img[src*=".icon."]{
	margin-bottom:1rem;
	width:80px!important;
}
body > *:nth-child(odd){
	background-color:#CCF1FD;
}
@media(max-width:500px){
	.hide-on-mobile{
		display:none;
	}
}
*:has(span + span > img){
	/* align-items:center;*/
}
*:has(span:has(> img) + span){
	align-items:center;
}





section{
	position:relative;
}
section > img:has(+span:last-child)+span{
	width:var(--two-col-width);
	margin-left:calc(50% + (var(--column-gutter) / 2));
}
section > img:has(+span:last-child){
	position:absolute;
	left:0;
	top:0px;
	bottom:0px;
	object-fit:cover;
	height:100%;
	width:50vw;
}
section > span:has(+img:last-child)+img{
	position:absolute;
	right:0;
	top:0px;
	bottom:0px;
	object-fit:cover;
	height:100%;
	width:50vw;
}
section > span:has(+img:last-child){
	width:var(--two-col-width);
	margin-right:calc(50% + (var(--column-gutter) / 2));
}
@media(max-width:650px){
	section > img:has(+span:last-child), section > span:has(+img:last-child)+img{
		position:static;
		width:100%;
		height:auto;
		object-fit:contain;
		order:-1;
	}
	section > img:has(+span:last-child)+span, section > span:has(+img:last-child){
		width:100%;
		margin:var(--vgutter) 0 0 0;
	}
}
span:has(> img:only-child){
	font-size:0;
}