/*
-----------------------------------------------
	www.belindawinkelmann.com
by  www.lichtsignale.de
----------------------------------------------- */


/*		R E S E T
----------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-variant-ligatures: none;
	font-variant-numeric: lining-nums;
	-moz-font-feature-settings: "lnum";
	-webkit-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
}

html {
	height: 100%;
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
	display: block;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	outline: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, select {
	vertical-align: middle;
}

h1, h2, h3, h4, h5, h6, strong, b {
	font-weight: normal;
}


/*		W E B F O N T S
----------------------------------------------- */
  
@font-face {
	font-family: "Inter BW";
	src: url('fonts/Inter-Regular.woff2') format('woff2'), url('fonts/Inter-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter BW";
	src: url('fonts/Inter-Italic.woff2') format('woff2'), url('fonts/Inter-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}


/*		B A S I C S
----------------------------------------------- */

body {
	color: #000;
	background: #fff;
	font-family: "Inter BW", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 0.01em;
}

a:link, a:visited {
	color: #000;
	text-decoration: none;
}

article a:link, article a:visited {
	border-bottom: 1px solid #000;
}

*:focus {
	outline: none;
}

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

p {
	text-align: left !important;
}

#home {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-position: center top;
	background-size: cover;
}

#home header, #home footer {
	z-index: 100;
}

#homevideo {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}


/*		H E A D E R
----------------------------------------------- */

header {
	margin: 11px 22px 0 22px;
	position: relative;
	z-index: 100;
}

#home header h1 a {
	cursor: default;
}

header h1 span {
	display: none;
}

#home header h1 span {
	display: block;
}

#home h1 {
	margin-bottom: 44px;
}

nav {
	margin: 22px 0 0 0;
}

nav li {
	list-style: none;
	display: inline-block;
	margin-right: 11px;
	margin-bottom: 3px;
}

.active a {
	border-bottom: 1px solid #000;
}

#lang {
	display: block;
	position: absolute;
	right: 22px;
	top: 0;
}


/*		B A S I C S
----------------------------------------------- */

main {
	margin: 66px 0 0 22px;
	padding-bottom: 22px;
}

main p, main aside, main figure {
	margin-right: 22px;
	margin-bottom: 22px;
}

section {
	margin-bottom: 66px;
}

figure {
	margin-bottom: 22px;
}

h2 {
	border-top: 1px solid #000;
	font-size: 135%;
	line-height: 1.25;
	letter-spacing: -0.01em;
	padding: 6px 11px 22px 0;
	text-indent: -1px;
}

article {
	clear: both;
}

aside {
	font-size: 80%;
	letter-spacing: 0.01em;
	line-height: 1.4;
	margin-top: 44px;
}

.grid {
	display: grid;
	row-gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
	column-gap: 22px;
	grid-gap: 22px;
	justify-items: center;
	align-items: center;
	margin: 22px 22px 0 0;
}

.grid a, .sponso a, .overview a {
	display: block;
}

.grid a img {
	display: block;
	max-width: calc(100vw - 44px);
	max-height: calc(100vw - 44px);
}

hr {
	border: none;
	border-top: 1px solid #000;
	margin-bottom: 22px;
}

.sponso {
	display: grid;
	row-gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	column-gap: 22px;
	grid-gap: 22px;
	justify-items: center;
	align-items: center;
	margin: 22px 22px 0 0;
}

.overview::after {
	content: "";
	clear: both;
	display: table;
}

.overview a {
	width: 40%;
	float: left;
	margin: 0 22px 44px 0;
}

.overview a:nth-child(3n) {
	float: right;
}

.overview a:nth-child(3n-1) {
	margin-left: 5%;
}

.overview a:nth-child(3n+1) {
	margin-top: 15%;
}

.fancybox-infobar, .fancybox-button--zoom, .fancybox-button--play, .fancybox-caption, .fancybox-navigation {
	display: none !important;
}

.fancybox-slide--image .fancybox-content {
	max-width: 90vw;
	max-height: 90vh;
	margin: 22px;
}

footer {
	margin: 44px 22px 0 22px;
	padding-bottom: 11px;
}

footer li {
	display: inline-block;
	list-style: none;
	margin-right: 11px;
}

#home footer {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
}


/*		R E S P O N S I V E
----------------------------------------------- */

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

aside {
	width: 66%;
}

}


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

main p {
	width: 75%;
}

aside {
	width: 45%;
}

main figure {
	margin-left: 25%;
	margin-right: 0;
}

.grid {
	row-gap: 44px;
	grid-gap: 44px;
	grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}

.grid a img {
	display: block;
	max-width: calc(80vw - 44px);
	max-height: calc(80vw - 44px);
}

.sponso {
	row-gap: 44px;
	column-gap: 44px;
	grid-gap: 44px;
}

h1 strong {
	font-size: 150%;
	letter-spacing: -0.01em;
	padding-top: 3px;
	text-indent: -1px;
	display: block;
}

h2 {
	font-size: 150%;
}


}


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

#home {
	background-position: center center;
}

#home header {
	margin-top: 35px;
}

header h1 {
	width: 40%;
}

header h1 span {
	display: block;
}

nav {
	position: absolute;
	right: calc(50vw - 134px);
	top: -22px;
}

#home nav {
	top: -22px;
}

#home #lang {
	top: 0;
}

nav li {
	display: block;
	margin: 0;
}

header, main, footer {
	margin-left: 66px;
}

section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 66px;
	grid-gap: 66px;
	align-items: start;
}

section figure {
	grid-column-end: 3;
}

section article {
	grid-column-start: 1;
	grid-row-start: 1;
}

main {
	margin-top: 154px;
}

main p {
	width: 100%;
}

main figure {
	margin-left: 0;
	margin-top: 5px;
}

aside {
	width: 75%;
}

.grid {
	grid-template-columns: 1fr 1fr;
	margin: 22px 66px 0 0;
	column-gap: 66px;
	row-gap: 61px;
	grid-gap: 61px;
	max-width: 1800px;
}

.grid a img {
	max-width: calc(50vw - 99px);
	max-height: calc(50vw - 99px);
}

h2 {
	padding-top: 22px;
}

.overview {
	max-width: 1600px;
}

.overview a {
	width: 35%;
	float: left;
	margin: 0 44px 88px 0;
}

.overview a:nth-child(3n) {
	float: right;
}

.overview a:nth-child(3n-1) {
	margin-left: 10%;
}

.overview a:nth-child(3n+1) {
	margin-top: 20%;
}

section article, .sponso {
	max-width: 700px;
	justify-self: start;
}

}


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

body {
	font-size: 21px;
	line-height: 30px;
	letter-spacing: 0.005em;
}

h1 strong, h2 {
	font-size: 200%;
	letter-spacing: -0.02em;
	padding: 26px 11px 28px 0;
	text-indent: -2px;
}

h1 strong {
	padding-bottom: 7px;
	padding-top: 10px;
}

#home header {
	margin-top: 55px;
}

#home nav {
	top: -21px;
}

#home #lang {
	top: 0;
}

main p, main aside, main figure, hr {
	margin-bottom: 28px;
}

header, main, footer {
	margin-left: 100px;
}

.grid {
	margin: 22px 100px 0 0;
	float: left;
}

.grid::after {
	content: "";
	clear: both;
	display: table;
}

footer {
	clear: both;
	padding-top: 60px;
}

.grid a img {
	max-width: calc(50vw - 160px);
	max-height: calc(50vw - 160px);
}

section {
	column-gap: 100px;
}

nav {
	right: calc(50vw - 186px);
}

}


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

.grid a img {
	display: block;
	max-width: calc(800px - 31px);
	max-height: calc(800px - 31px);
}

}