@charset "UTF-8";

@font-face {
    font-family: 'archiaregular';
    src: url('./fonts/archia-regular-webfont.eot');
    src: url('./fonts/archia-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/archia-regular-webfont.woff2') format('woff2'),
         url('./fonts/archia-regular-webfont.woff') format('woff'),
         url('./fonts/archia-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

*{
	
	box-sizing: border-box;
	
}

img{
	
	max-width: 100%;
	
}

html{
	
	font-size: 62.5%;
	
}

body{
	
	font-size: 1.6rem;
	font-family: 'archiaregular', Arial, Helvetica;
	color: #000000;
	margin: 0;
	overflow-x: hidden;
	
}

@media (max-width: 800px) {
	
	body{
		font-size: 1.8rem;
	}
	
}



h3{
	
	font-size: 1em;
	
}

.full{
	
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	overflow: hidden;
}

.full video{
	
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}

.logo{
	
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 25%;		
	transition: opacity 0.5s linear;
	z-index: 10;
	
}

@media (max-width: 1400px) {

	.logo{
		
		width: 40%;
		
	}
	
}

@media (max-width: 800px) {

	.logo{
		
		width: 60%;
		
	}
	
}



.logoklein{
	
	position: fixed;
	left: 2rem;
	top: 2rem;
	width: auto;
	z-index: 10;
	transform: translateX(-200%);
	transition: transform 1.5s linear;
	cursor: pointer;
		
}



.logoklein img{
	
	width: 10rem;
	display: inline-block;
	vertical-align: middle;
	margin-right: 1rem;
}

body.scrolled .logoklein{
	
	transform: none;
	
}


.logo img{
	
	width: 100%;
	height: auto;
	
}


body.scrolled .logo img:nth-child(1),
body.scrolled-full .logo img.logo-black{
	
	
	
}

body.scrolled .logo{
	
	opacity: 0;
	
}



.logo .claim{
	
	font-size: 1.5vw;
	color: #ffffff;
	text-align: center;
	transition: font-size 0.5s linear;
	white-space: nowrap;
	
}

@media (max-width: 1400px) {
	
	.logo .claim{	
	
		font-size: 3rem;
		
	}
	
}

.logoklein .claim{
	
	font-size: 2rem;
	text-align: left;
	display: inline-block;
	color: #000000;
}



.friends{
	
	position: absolute;
	left: 0;
	top: -5.5rem;
	width: 100%;
	line-height: 1em;
	padding: 2rem 0 3.5rem 0;
	background: #ffffff;
	text-align: center;
	cursor: pointer;
	transition: top 1.5s linear, padding-top 1.5s linear;
	
}

body.scrolled-full .friends{
	
	top: 0;
	padding-top: 15rem;
	
} 

@media (max-width: 550px) {

	body.scrolled-full .friends{
	
		padding-top: 22rem;
	
	}
	
	
}

.header{
	
	background: #ffffff;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 10rem;
	display: none;
	z-index: 9;
	
}

body.scrolled-full .header{
	
	display: block;
	
}

.container{
	
	background: #ffffff;
	min-height: 100vh;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	padding-top: 25rem;
	
	
}

body.scrolled-full .full{
	
	display: none;
	
}
/*
body.scrolled-full .container{
	
	padding-top: 25rem;
	
	
} */

.kontakt{
	
	position: fixed;
	right: 2rem;
	top: 5rem;
	font-size: 1.6rem;
	display: none;
	z-index: 10;
}

body.scrolled-full .kontakt{
	
	display: block;
	
}

@media (max-width: 550px) {
	
	.kontakt{
		
		top: 13rem;
		
	}
	
}

.kontakt img{
	
	width: 5rem;
	margin-right: 1.5rem;
	transform: translateY(-0.1rem);
	vertical-align: middle;
	display: inline-block;
	
}

.footer{
	
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2em;
	padding: 2rem 0 3.5rem 0;
	line-height: 1em;
	color: #ffffff;
	background: #000000;
	text-align: center;
	text-transform: lowercase;
	
}

body.scrolled .footer{
	
	display: block;
	
}

.content{
	
	display: none;
	max-width: 75vw;
	padding: 0 10rem 10rem 10rem;
	margin: 2rem auto;
	line-height: 1.4em;
	background: #ffffff;
	
}

@media (max-width: 800px) {
	
	.content{
		max-width: none;
		padding: 0 2rem;
	}
	
}

@media (max-width: 500px) {
	
	.content{
		margin: 4rem auto;
	}
	
}

.content a{
	
	color: #000000;
	text-decoration: none;
	
}

#kontakt{
	
	text-align: center;
	display: block;
	
}

.trigger{
	
	cursor: pointer;
	
}