@import url('./normalize.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap');

:root {
	font-size: 100%;

	--color-bg: white;
	--color-main: #009ee3;
	--color2: #A52A2A; /* #A52A2A; /*#b22222;*/
	--color3: #4E4E4E;
	--body-font: "Open Sans", sans-serif;
	--hdg-font: "Open Sans", Arial;
	--viewport-width: 100vw;
	--viewport-height: 100vh;

	--ratioA: 4;
	--ratioB: 3;
	
	--ar-factor-hor: calc(var(--ratioB) / var(--ratioA));
	--ar-factor-ver: calc(var(--ratioA) / var(--ratioB));

	--content-width: calc( var(--viewport-width) - 6rem);
	--content-width600: calc( var(--viewport-width) - 22rem);
	--content-width900: calc( var(--viewport-width) - 22rem);
	--content-width1200: calc( var(--viewport-width) - 39rem);

	--img-height-hor-2col: calc( var(--content-width) * var(--ar-factor-hor));
	--img-height-hor-1col: calc( calc(var(--content-width) / 2) * var(--ar-factor-hor));
	--img-height-ver-2col: calc( var(--content-width) * var(--ar-factor-ver));
	--img-height-ver-1col: calc( calc(var(--content-width) / 2) * var(--ar-factor-ver));
}

html, body {
	color: var(--color-bg);
	width: 100vw;
	font-family: var(--body-font);
}

body { 
	margin: 0;
	width: var(--viewport-width);
	height: var(--viewport-height);
}

a {
	color: var(--color-bg);
	text-decoration: underline dotted;
	text-decoration-thickness: 0.1rem;	
}

h1 {
	display: none;
}

h2 {
	font-size: 2rem;
}

h2:nth-of-type(2) {
	margin-top: 2.5rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	margin-top: 6rem;//3rem;
	font-size: 1.5rem; //1.35rem;
	text-align: center;
}

ul {
	list-style: none;
	padding: 0;
}

.container {
	display: grid;
	grid-template-rows: auto auto auto;
	height: 100%;
}

.branding {
	padding: 3rem;
}

.logo {
	height: 8rem;
	/* position: absolute; */
	top: 3rem;
}

.logo-container {
	width: fit-content;
	display: flex;
	flex-direction: column;
	position: relative;
}

.logo-since {
	color: var(--color-main);
	width: fit-content;
	font-style: oblique;
	position: absolute;
	right: 0;
	bottom: 0;
}

.content {
	background-color: var(--color-main);
	padding: 3rem;
}

.imprint {
	background-color: var(--color2);
	padding: 3rem 3rem;
}

.imprint > ul {
	font-size: 0.8rem;
	line-height: 1.3rem;
}

.icon {
	height: 1.15rem;
	margin-right: 1rem;
}

.footer {
	background-color: var(--color3);
	font-size: 0.5rem;
	padding: 1rem 3rem;
}

.gallery {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr;
}

.gallery-team {
	grid-gap: 1rem;
}

.galleryimg, .galleryimg-square {
	overflow: hidden;
}

.galleryimg.horizontal {
	height: calc( calc(var(--content-width) / 2) * var(--ar-factor-hor));
}

.galleryimg.vertical {
	height: calc( calc(var(--content-width) / 2) * var(--ar-factor-ver));
}

.galleryimg.horizontal.span2 {
	height: calc( var(--content-width) * var(--ar-factor-hor));;
}

.galleryimg.vertical.span2 {
	height: calc( var(--content-width) * var(--ar-factor-ver));
}

.galleryimg > img, .galleryimg > a > img {
	height: 100%;
	min-width: 100%;
	left: 50%;
	position: relative;
	transform: translateX(-50%);
}

.galleryimg-square > img {
	width: 100%;
	height: auto;
}

.span2 {
	grid-column: span 2;
}

.eori {
	margin-top: 0;
	margin-bottom: 0;
}


@media only screen and (max-width: 600px) {
}

@media only screen and (min-width: 600px) and (max-width: 900px) {
	.content, .branding, .imprint {
		padding-left: 12rem;
		padding-right: 6rem;
	}
	.galleryimg.horizontal {
		height: calc( calc(var(--content-width600) / 2) * var(--ar-factor-hor));
	}

	.galleryimg.vertical {
		height: calc( calc(var(--content-width600) / 2) * var(--ar-factor-ver));
	}

	.galleryimg.horizontal.span2 {
		height: calc( var(--content-width600) * var(--ar-factor-hor));;
	}

	.galleryimg.vertical.span2 {
		height: calc( var(--content-width600) * var(--ar-factor-ver));
	}

	h2:nth-of-type(2) {
		margin-top: 2.5rem;
	}

}

@media only screen and (min-width: 900px) and (max-width: 1281px) {
	.content, .branding, .imprint {
		padding-left: 16rem;
		padding-right: 6rem;
	}
	.galleryimg.horizontal {
		height: calc( calc(var(--content-width900) / 2) * var(--ar-factor-hor));
	}

	.galleryimg.vertical {
		height: calc( calc(var(--content-width900) / 2) * var(--ar-factor-ver));
	}

	.galleryimg.horizontal.span2 {
		height: calc( var(--content-width900) * var(--ar-factor-hor));;
	}

	.galleryimg.vertical.span2 {
		height: calc( var(--content-width900) * var(--ar-factor-ver));
	}

	h2:nth-of-type(2) {
		margin-top: 2.5rem;
	}

}

@media only screen and (min-width: 1281px) {

	.content, .branding, .imprint {
		padding-left: 30rem;
		padding-right: 9rem;
	}
	.logo {
		height: 10rem;
		top: 4rem;
	}
	/* .branding {
		padding-left: 6rem;
		padding-top: 10rem;
	} */
	h2 {
		font-size: 3rem;
	}
	h2:nth-of-type(2) {
		margin-top: 3rem;
	}
	h3 {
		font-size: 1.8rem;
	}
	h4 {
		font-size: 2rem;
	}

	.content p, li {
		font-size: 1rem;
		line-height: 1.4rem;
	}
	.galleryimg.horizontal {
		height: calc( calc(var(--content-width1200) / 2) * var(--ar-factor-hor));
	}

	.galleryimg.vertical {
		height: calc( calc(var(--content-width1200) / 2) * var(--ar-factor-ver));
	}

	.galleryimg.horizontal.span2 {
		height: calc( var(--content-width1200) * var(--ar-factor-hor));;
	}

	.galleryimg.vertical.span2 {
		height: calc( var(--content-width1200) * var(--ar-factor-ver));
	}

}