/* Example CSS file */
:root {
	--light: white;
	--black: black;
	--grey: grey;
	--click: #FF8A00;

	--margin: 10px;
	--small: .7rem;
	--medium:1.15rem;
	--marginPixel: 20px;
	--big: 40px;
	--XXL: 80px;

}


:root {
	--menu: calc(var(--margin) * 3);
}


@font-face {
	font-family: 'ESAllianz';
	src: url('../fonts/ESAllianz-Book.woff') format('woff');
}
@font-face {
	font-family: 'OrdinaryHeavy';
	src: url('../fonts/Ordinary-DisplayHeavy.woff') format('woff');
}

body, html {
	font-family: ESAllianz;
	margin: 0;

	-webkit-scroll-behavior: smooth;
	scroll-behavior: smooth;
	overflow-anchor: none;
	width: 100vw;
	/* overflow-x: hidden; */
	/* overflow-y: auto; */
}


p {
	margin: 0;
}
p::selection, em::selection {
	color: var(--light);
	background-color:var(--click);
}
p br{
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.menu {
	position: fixed;
	width: 100vw;
	height: var(--menu);
	padding-top: calc(var(--margin) / 2);
	top: 0;
	color: var(--grey);
	z-index: 200;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: var(--medium);
	pointer-events: none;
}

/* .menu-container{
	background-color: red;
	position: relative; 
	height: 100vh;
	overflow: auto;
} */

.language-toggle input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.language-toggle input[type="radio"]:checked+label {
	color: var(--click)
}

.language-toggle span {
	pointer-events: none;
}

.menu a, .language-toggle label {
	cursor: pointer;
	text-decoration: none;
	color: var(--grey);
}

.language-toggle label:hover {
	color: var(--black);
}

.menu .menu-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: var(--grey);
	pointer-events: all;
}
.menu-order:hover{
	color: var(--click);
}

.menu-left {
	position: sticky;
    background-color: var(--light);
    right: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: var(--menu);
    top: 0;
    padding-top: calc(var(--margin) / 2);
    /* margin-bottom: var(--menu); */
    justify-content: flex-end;
    z-index: 10;
}

.loader::after {
	/* content: "";
    background: var(--light);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
	opacity: 1; */
	/* animation: .5s linear 1s forwards fadeOut; */
}

/* @-webkit-keyframes fadeOut { */
@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}
.otherLanguage{
	display: none;
}
.arrows {
	position: absolute;
	right: 50%;
	height: auto;
	padding: var(--margin) ;
	padding-bottom: 0;
	width: auto;
	bottom: 0;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	justify-content: flex-start;

	color: var(--grey);
	text-decoration: none;
	transform: translateX(50%);
	transition: all .1s linear;
	filter: saturate(0);
	mix-blend-mode: exclusion;
}
.arrows span{
	transition: all .1s linear;
}
.arrows:hover {
	mix-blend-mode: normal;
	filter: saturate(1);
	color: var(--click);
}
.arrows:hover span{
	transform: translateY(calc(var(--margin) /2));
}

.arrows span {
	font-size: var(--big);
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* transform: translateY(-0.1em); */
}

.container {
	position: relative;
    min-height: calc(100svh - 0px);
    padding: var(--margin);
    padding-top: 0;
    width: calc(100% - var(--margin) * 2);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    gap: var(--margin);
    font-size: var(--medium);
    z-index: 100;
}

.container-content {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 calc(100% - var(--margin));
    gap: calc(2 * var(--margin));
}

.section-footer {
	font-size: var(--small);
	flex: 1;
	margin-left: calc(var(--margin) * -1);
	margin-right: calc(var(--margin) * -1);
	display: flex;
	gap: var(--margin);
	border-top: 1px solid;
	padding-top: var(--margin);
	padding-left: var(--margin);
	padding-right: var(--margin);
}

@media  (max-width: 600px), (hover: none) and (orientation: portrait) {
	.section-about, .section-fill, .section-footer {
		flex-direction: column;
	}
	
}

.subtitle {
	text-transform: uppercase;
}

.section-small {
	flex: 0 1 calc(20%);
	font-size: var(--medium);
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.section-about, .section-fill {
	flex: 1 1 calc(100% - var(--margin));
	display: flex;
	gap: var(--margin);
}


.section-big {
	flex: 0 1 calc(80% - var(--margin));
}

.section-members {
	padding-bottom: calc(2 * var(--margin));
}

.section-members, .section-videos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--margin);
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media only screen and (max-width: 1100px) {
	.section-members, .section-videos {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 850px) {
	.section-members {
		grid-template-columns: repeat(2, 1fr);
	}

	.section-videos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 450px), screen and (orientation: portrait) {
	.section-members {
		grid-template-columns: repeat(2, 1fr);
	}

	.section-videos {
		grid-template-columns: repeat(1, 1fr);
	}
}


.member {
	position: relative;
	text-decoration: none;
	color: var(--black);
}

.member::after {
	content: "→";
	left: calc(var(--margin) * -1);
	position: absolute;
	top: 0;
	opacity: 0;
	transform: translateX(-100%);

}

.member:hover::after {
	opacity: 1;
}

.member-name {
	color: var(--click);
}

@media  screen and (orientation: portrait) and (hover: none) {
	:root {
		/* --menu: --margin: 0px;; */
		--margin: 2.5svw;
		--medium: 4.5svw;
		--big: 10svw;
	}
}
@media  screen and (orientation: landscape) and (hover: none) {
	
	.container-content{
		--medium: 2.2vw;
	}
	a.member{
		font-size:  2.2vw;
	}
}