/* @group FONTS */

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}

/* @end */

/* @group ROOT */

:root {
	
	--color-blue: 									#0b274e;
	--color-highlight: 						#FD7127;
	--color-highlight-light: 			#ffc88c;
	--color-highlight-subtle: 			#ffd2a2;
	--color-white: 								#FFFFFF;
	--color-grey-light: 						#EEEEEE;
	
	--color-base: 				var(--color-blue);
	--color-background: 	var(--color-white);
	
	--font-family: 'Open Sans', Helvetica, Arial, sans-serif;

	--font-xs: 	500 .8rem/1.5em var(--font-family);
	--font-sm: 	500 .9rem/1.5em var(--font-family);
	--font: 		400 clamp(17px, 1.9vw, 19px)/1.5em var(--font-family);
	--font-lg: 	400 clamp(1.25rem, 3vw, 1.4rem)/1.5em var(--font-family);
	--font-xl: 	400 clamp(1.5rem, 4vw, 1.8rem)/1.2em var(--font-family);
	
	--header-height: 4rem;
	
	--container-sm-max-width: 42rem;
	--container-max-width: 		70rem;
	--container-lg-max-width: 	84rem;
	
	--spacing-block-xs: 1.5rem;
	--spacing-block-sm: clamp(2rem, 6vw, 3rem);
	--spacing-block: 		clamp(2.5rem, 8vw, 4rem);
	--spacing-block-lg: 	clamp(3rem, 12vw, 6rem);
	
	--padding-inline: clamp(1rem, 4vw, 3rem);
	
	--spacing-columns: clamp(1rem, 4vw, 2rem);
	
	--box-shadow: .15rem .15rem .3rem rgba(0,0,0,.25);
	--box-padding: clamp(1.5rem, 3vw, 3rem);
	
	--border-radius: 1.5rem;
	
}

/* @end */

/* @group BASE */

html {
	scroll-behavior: smooth;
	color: var(--color-base);
  font: var(--font);
	letter-spacing: .01em;
}

body {
	position: relative;
	min-width: 320px;
	font: var(--font);
}

body.home {
	--color-base: var(--color-white);
	--color-background: var(--color-blue);
	color: var(--color-base);
	background-color: var(--color-background);
}

h3,
strong {
	font-weight: 700;
}

h1 {
	font: var(--font-xl);
}

h1:has(+ *) {
	margin-bottom: .8em;
}

	h1 strong {
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .03em;
	}
	
h2 {
	font: var(--font-lg);
	font-weight: 700;
	line-height: 1.3em;
}

* + h2 {
	margin-top: 3rem;
}

h2:has(+ *) {
	margin-bottom: 1rem;
}

* + h3 {
	margin-top: 1.5em;
}
	
h3:has(+ *) {
	margin-bottom: 1em;
}

	h3 em {
		font-size: 3em;
		font-style: normal;
		font-weight: 650;
	}
	
p:has(+ *) {
	margin-bottom: 1em;
}

.main p:has(+ ul:not([class])),
.main p:has(+ ol:not([class])) {
	margin-bottom: 1em;
}

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

img.rounded {
	border-radius: var(--border-radius);
}

img.shadow {
	box-shadow: var(--box-shadow);
}

/* @group Links */

.breadcrumb a,
*[class^="text"] a {
	color: var(--color-highlight);
	font-weight: 450;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: .06em;
	text-underline-offset: .1em;
	transition: text-decoration .15s ease-in-out 0s;
}

*[class^="text"] h3 a {
	font-weight: inherit;
}

.breadcrumb a:hover,
*[class^="text"] a:hover {
	text-decoration-color: currentColor;
}

.cover__news a,
*[class^="text"] a:has(mark) {
	display: flex;
	column-gap: .5em;
}
	
	.cover__news a:before,
	*[class^="text"] a:has(mark)::before {
		content: '';
		flex: 0 0 1.5em;
		height: 1.5em;
		-webkit-mask-image: url(../images/arrow-right.svg);
		mask-image: url(../images/arrow-right.svg);
		-webkit-mask-size: cover;
		mask-size: cover;
		background-color: var(--color-base);
		vertical-align: top;
		animation: backandforth 700ms infinite alternate ease-in-out backwards;
	}

/* @end */

/* @group Lists */

.main ul:not([class]):has(+ *) {
    margin-bottom: 1.5em;
}

	.main ul:not([class]) li {
	   display: flex;
	}
	
		.main ul:not([class]) li::before {
	    content: "•";
	    flex: 0 0 2em;
			padding-right: .25em;
			text-align: center;
		}
	
	.main ul:not([class]) li:has(+ li) {
	   margin-bottom: .5em;
	}
	
.main ol:not([class]) {
  counter-reset: counter;
}

.main ol:not([class]):has(+ *) {
	margin-bottom: 1.5em;
}

	.main ol:not([class]) li {
		display: table;
	  counter-increment: counter;
	}
	
	.main ol:not([class]) li:has(+ li) {
	   margin-bottom: .5em;
	}
	
		.main ol:not([class]) li::before {
		  content: counter(counter, lower-alpha) ")";
	    display: table-cell;
	    width: 2em;
			padding-right: .3em;
			text-align: right;
		}

/* @end */

/* @end */

/* @group Header */

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

	@media (min-width: 1000px) {
		
		.header {
			position: fixed;
			z-index: 20;
			inset-block-start: 0;
			inset-inline: 0 0;
			color: var(--color-base);
			background-color: var(--color-background);
		}
		
	}

/* @end */

/* @group Banner */

.banner {
	max-width: var(--container-lg-max-width);
	margin-inline: auto;
	transition: all .15s ease-in-out 0s;
}

	@media (min-width: 1000px) {
		
		.banner {
			display: flex;
			justify-content: space-between;
			column-gap: 2em;
			padding-block: .5rem;
			padding-inline: var(--padding-inline);
		}
	}

/* @end */

/* @group Site-logo */

.site-logo {
	display: flex;
	align-items: center;
}

	.site-logo svg {
		width: auto;
		height: 2rem;
		vertical-align: bottom;
	}
	
	@media (max-width: 999px) {
	
		.site-logo {
			position: relative;
			z-index: 15;
			height: var(--header-height);
			padding-inline: var(--padding-inline);
			color: var(--color-base);
			background-color: var(--color-background);
		}
		
		.home .site-logo {
			opacity: 0;
		}
		
		.site-logo.menu-open {
			position: fixed;
			inset-block: 0 0;
			inset-inline: 0 0;
			opacity: 1;
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.home .site-logo {
			opacity: 0;
		}
		
	}

/* @end */

/* @group Menu */

.menu {
	display: flex;
	align-items: center;
}

	.menu a {
		transition: all .1s ease-in-out 0s;
	}
	
	.menu a:hover {
		transform: scale(1.1);
	}

	.menu a.active {
		opacity: .6;
	}

	@media (max-width: 999px) {
	
		.menu {
			position: fixed;
			z-index: 10;
			inset-block: 0 0;
			inset-inline: 0 0;
			flex-direction: column;
			row-gap: .7em;
			justify-content: center;
			width: 100vw;
			height: 100vh;
			padding-block-end: 4rem;
			padding-inline: var(--padding-inline);
			color: var(--color-base);
			background-color: var(--color-background);
			font-size: 1.4rem;
			line-height: 1.2em;
			transform: translateX(-100%);
			transition: transform .3s ease-in-out 0s;
		}
		
		.menu.open {
			transform: translateX(0);
		}
		
	}

	@media (min-width: 1000px) {
		
		.menu {
			column-gap: clamp(1em, 3vw, 2em);
			font: var(--font-sm);
			letter-spacing: 0.03em;
			line-height: 1.2em;
		}
		
	}

/* @end */

/* @group Menu-toggle */

.menu-toggle {
	position: fixed;
	z-index: 20;
	inset-block-start: 0;
	inset-inline-end: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--header-height);
	height: var(--header-height);
	padding: 1em;
	color: var(--color-base);
	background-color: var(--color-background);
	text-align: center;
}

.menu-toggle:hover {
	cursor: pointer;
}

	@media (min-width: 1000px) {
		
		.menu-toggle {
			display: none;
		}
		
	}

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 100%;
}

	.hamburger > * {
		display: block;
		position: absolute;
		top: 50%;
		height: 1.5px;
		width: 100%;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
		transform: translateY(-50%);
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(calc(-50% + .5em));
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .5em));
	}
	
	.hamburger.menu-open > *:nth-child(1),
	.hamburger.menu-open > *:nth-child(3) {
		margin-inline: auto;
	}
	
	.hamburger.menu-open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger.menu-open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.menu-open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @group Main */

.main {
	container-type: inline-size;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-block: var(--spacing-block) var(--spacing-block-lg);
	padding-inline: var(--padding-inline);
}

body:not(.home) .main {
	position: relative;
}

	@media (min-width: 1000px) {
		
		.main {
			min-height: calc(100vh - 6rem);
			margin-block-start: 3rem; /* height of banner */
		}
		
	}

/* @end */

/* @group Cover */

.cover {
	
}

	.cover__logo {
		margin-bottom: 1rem;
	}
	
		.cover__logo svg {
			width: 100%;
			height: auto;
		}
	
	.cover__subhead {
		margin-bottom: 1em;
		font: var(--font-lg);
		text-align: center;
	}

	.cover__image {
		text-align: center;
	}
	
		.cover__image img {
			width: 100%;
			max-width: 32rem;
		}

	.cover__news {
		--color-background: var(--color-highlight);
		--color-base: var(--color-white);
		padding: clamp(1.5rem, 3vw, 2rem);
		background-color: var(--color-background);
		color: var(--color-base);
		border-radius: var(--border-radius);
		box-shadow: var(--box-shadow);
		font-weight: 500;
		transform: rotate(-3deg);
	}

	@media (max-width: 999px) {
		
			.cover__logo {
				position: absolute;
				inset-block-start: 1rem;
				inset-inline-start: var(--padding-inline);
				width: calc(100% - var(--header-height) - var(--padding-inline));
				max-width: 20rem;
			}
		
	}

	@media (min-width: 1000px) {
		
			.cover__logo {
				padding-inline-start: 30%;
				padding-inline-end: 20%;
			}
			
				.cover__logo svg {
					display: block;
					width: 100%;
				}
				
			.cover__subhead {
				padding-inline-end: 30%;
			}
		
	}
	
	@media (max-width: 1199px) {
		
			.cover__news {
				width: 80%;
				max-width: 26rem;
				margin-block-start: -10%;
				margin-inline: auto;
			}
		
	}
	
	@media (min-width: 1200px) {
		
		.cover {
			display: grid;
			grid-template-columns: 25% 50% 25%;
			align-items: center;
		}
		
			.cover__logo,
			.cover__subhead {
				grid-column: 1 / span 3;
			}
			
			.cover__image {
				grid-column: 2;
			}
			
			.cover__news {
				margin-inline-start: -3rem;
			}
		
	}

/* @end */

/* @group Breadcrumb */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
}

	.breadcrumb > *:first-child {
		display: none;
	}
	
	.breadcrumb > *:not(:last-child)::after {
		content: "/";
		display: inline-block;
		margin-inline: .25em;
	}
	
	.breadcrumb a[aria-current] {
		display: none;
	}

/* @end */

/* @group Layout */

.layout {
	display: grid;
	column-gap: var(--spacing-columns);
	row-gap: clamp(1.5rem, 4vw, 2rem);
	margin-bottom: var(--spacing-xl);
}

.layout.align-center {
	align-items: center;
}

.layout.align-end {
	align-items: end;
}

	.layout.align-stretch .column {
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}
	
.layout.spacing-small:has(+ *) {
	margin-bottom: var(--spacing-block-xs);
}

.layout.spacing-regular:has(+ *) {
	margin-bottom: var(--spacing-block-sm);
}

.layout.spacing-large:has(+ *) {
	margin-bottom: var(--spacing-block-lg);
}

.column {
	container-type: inline-size;
}

	@media (max-width: 799px) {
		
			.layout.mobile-order > :nth-child(1) { order: 4; }
			.layout.mobile-order > :nth-child(2) { order: 3; }
			.layout.mobile-order > :nth-child(3) { order: 2; }
			.layout.mobile-order > :nth-child(4) { order: 1; }
		
		.column:not(:has(> *)) {
			display: none;
		}
		
	}

	
	@container (min-width: 800px) {
		
		.layout {
			grid-template-columns: repeat(6, 1fr);
		}
		
		.column--span-6 {
			grid-column: span 6;
		}
		
		.column--span-4 {
			grid-column: span 4;
		}
		
		.column--span-3 {
			grid-column: span 3;
		}
		
		.column--span-2 {
			grid-column: span 2;
		}
		
	}
	
	@container (min-width: 800px) and (max-width: 1199px) {
		
		.column:has(> .news) {
			grid-column: span 6;
		}
		
	}

/* @end */

/* @group Blocks */

/* @group Image */

.image {
	/*transform: rotate(-1deg);*/
}

.image:has(+ *) {
	margin-bottom: 1em;
}

.image.portrait {
	width: 70%;
}

.image.center.portrait {
	margin-inline: auto;
}

.image.right.portrait {
	margin-inline-start: auto;
}

.image.video {
	position: relative;
}

	.image.video::after {
		pointer-events: none;
		content: url(../images/youtube.svg);
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%);
	}
	
/*	.image .credit {
		margin-block-start: .25em;
		padding-inline: 1.5rem;
		font: var(--font-xs);
		opacity: .5;
	}*/

/* @end */

/* @group Drawing */

.drawing:has(+ *) {
	margin-bottom: 1rem;
}

.drawing {
	text-align: center;
}

.drawing.left {
	text-align: left;
}

.drawing.right {
	text-align: right;
}

/* @end */

.logo:has(+ *) {
	margin-bottom: 1.5rem;
}

/* @group Text */

.text:has(+ *) {
	margin-bottom: 1.5rem;
}

.text.large {
	font: var(--font-lg);
}

.text.center {
	text-align: center;
}

.text.center:has(+ *) {
	margin-bottom: 1.5em;
}

/* @end */

/* @group Card */

.card {
	position: relative;
	height: 100%;
	background-color: var(--color-highlight-subtle);
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: background .15s ease-in-out 0s;
}

.card:has(> a):hover {
	background-color: var(--color-highlight-light);
}

	.card .image {
		margin-block-end: unset;
	}
	
	.card .drawing {
		margin-block-end: unset;
		padding-block-start: 1.5rem;
	}
	
	.card .text {
		margin-block-end: unset;
		padding: 1.5rem;
	}
	
	.card .drawing + .text {
		text-align: center;
	}

	.card > a {
		position: absolute;
		inset: 0;
	}

	@container (min-width: 28rem) {
		
		.card:has(.image) {
			display: grid;
			grid-template-columns: auto minmax(20rem, 50%);
			align-items: center;
		}
		
			.card .image {
				height: 100%;
			}
		
				.card .image img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
		
	}

/* @end */

/* @group Downloads & Download */

.downloads {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	font: var(--font-sm);
}

.downloads:has(+ *) {
	margin-bottom: .5rem;
}

.download {
	position: relative;
	display: grid;
	grid-template-columns: 6.5em auto;
	column-gap: 2px;
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: transform .15s ease-in-out 0s;
}

.download:has(> a):hover {
	transform: scale(1.05);
}
	
	.download > *:nth-child(1) {
		position: relative;
		display: flex;
		align-content: center;
		min-height: 100%;
		background-color: var(--color-grey-light);
	}

		.download > *:nth-child(1)::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: inline-flex;
			-webkit-mask-image: url(../images/download.svg);
		  mask-image: url(../images/download.svg);
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: 2em;
			height: 2em;
			background-color: var(--color-highlight);
		}
	
	.download > *:nth-child(2) {
		padding: 1em;
		background-color: var(--color-grey-light);
	}
	
	.download__title {
		font-weight: bold;
	}
	
	.download img {
		width: 100%;
		aspect-ratio: 1;
		object-fit: contain;
	}
	
	.download > a {
		position: absolute;
		inset: 0;
	}
	
	.download__info {
		opacity: .5;
	}
	
	.download__extension {
		text-transform: uppercase;
	}

/* @end */

/* @end */

/* @group Background */

.background {
	padding: var(--box-padding);
	background-color: var(--color-grey-light);
	border-radius: var(--border-radius);
}

.background:has(+ .background) {
	margin-block-end: unset;
	padding-block-end: 1rem;
	border-end-start-radius: unset;
	border-end-end-radius: unset;
}

.background + .background {
	padding-block-start: unset;
	border-start-start-radius: unset;
	border-start-end-radius: unset;
}

.background + .background:has(+ .background) {
	border-radius: unset;
}

/* @end */

/* @group Logos */

.logos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr));
	column-gap: clamp(2rem, 8vw, 4rem);
	row-gap: clamp(3rem, 8vw, 4rem);
	/*margin-inline: clamp(2rem, 8vw, 4rem);*/
}

.logos:has(+ *) {
	margin-bottom: var(--spacing-block);
}

	.logos > * {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.logos img {
		width: 100%;
		max-width: 10rem;
	}
	
	.logos img.portrait {
		width: 60%;
		height: auto;
	}

/* @end */

/* @group Footer */

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

	.footer a {
		transition: all .1s ease-in-out 0s;
	}

	.footer a:hover {
		transform: scale(1.1);
	}

	.footer a.active {
		opacity: .6;
	}
	
	@media (orientation: portrait) {
		
		.footer {
			padding-block-end: var(--spacing-block-lg);
		}
		
	}

/* @end */

/* @group Colophon */

.colophon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 3rem;
	row-gap: 1.5em;
	max-width: var(--container-lg-max-width);
	margin-inline: auto;
	padding-block: .9rem;
	padding-inline: var(--padding-inline);
	font: var(--font-sm);
}

	@media (max-width: 599px) {
		
		.colophon {
			flex-wrap: wrap;
		}
		
			.colophon > * {
				flex-basis: 100%;
			}
			
			.colophon .channels {
				order: 1;
			}
			
			.colophon .footer-menu {
				order: 2;
			}
		
	}

/* @end */

/* @group Footer-menu */

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
}

/* @end */

/* @group Channels */

.channels {
	display: flex;
	gap: 1em;
}

	.channels a {
		display: inline-flex;
		vertical-align: bottom;
	}

		.channels a::before {
		  content: "";
			position: relative;
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: 1.2rem;
		  height: 1.2rem;
		  background-color: currentColor;
			transition: transform .15s ease-in-out 0s;
		}
		
		.channels a[href*="facebook"]::before {
		  -webkit-mask-image: url(../images/facebook.svg);
		  mask-image: url(../images/facebook.svg);
		}
		
		.channels a[href*="instagram"]::before {
		  -webkit-mask-image: url(../images/instagram.svg);
		  mask-image: url(../images/instagram.svg);
		}
		
		.channels a[href*="linkedin"]::before {
		  -webkit-mask-image: url(../images/linkedin.svg);
		  mask-image: url(../images/linkedin.svg);
		}
		
		.channels a:hover::before {
			transform: scale(1.1);
		}

/* @end */

/* @group Animations */
	
/* @group Blink */
	
		.animation-blink svg path.on {
			animation: blink 3s infinite linear forwards;
		}
		
		.animation-blink svg path.off {
			opacity: 0;
			animation: blink 3s infinite linear forwards;
			animation-delay: 1.5s;
		}
	
	@keyframes blink {
	
		0% {
		  opacity: 1;
		}
		
		49.999999999% {
		  opacity: 1;
		}
		
		50% {
		  opacity: 0;
		}
		
		99.999999999% {
		  opacity: 0;
		}
	
	}
	
/* @end */
	
/* @group Heartbeat */
	
	.animation-heartbeat svg {
		animation: heartbeat 1.2s cubic-bezier(.34,.98,.6,1) infinite;
	}
	
	@keyframes heartbeat {
	
	  0%   {
			transform: scale(1);
		}
		
	  10% {
			transform: scale(var(--heartbeat-scale)); /* first strong beat */
		}
		
	  20%  {
			transform: scale(0.95); /* tiny recoil */
		}            
		        
	  30%  {
			transform: scale(calc(1.125)); /* second softer beat */
		}
		
	  40%  {
			transform: scale(0.98); /* settle */
		}
		               
	  100% {
			transform: scale(1);
		}
	}
	
/* @end */
	
/* @group Fly */

	.animation-fly svg {
		animation: fly 2s ease-in-out infinite;
	}
	
	@keyframes fly {
	
	  0% {
			transform: translate(0, 0);
		}
		
		25% {
			transform: translate(-8px, 6px) rotate(-3deg);
		}
		
		50% {
			transform: translate(0, 0) rotate(0deg);
		}
		
		75% {
			transform: translate(-5px, 4px) rotate(2deg);
		}
		
		100% {
			transform: translate(0, 0);
		}
	}
	
	
/* @end */

/* @group Swing */

.animation-swing svg {
		animation: swing .5s infinite linear alternate;
	}

@keyframes swing {

	0% {
		transform: rotateZ(-10deg);
	}
	
	100% {
		transform: rotateZ(8deg);
	}
	
}

/* @end */

/* @group Backandforth */

@keyframes backandforth {
	
  0% {
		transform: translateX(.3em);
	}
	
	100% {
	    transform: translateX(-.3em);
	}
	
}

/* @end */