/* namdhinggo-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Namdhinggo';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/namdhinggo-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* namdhinggo-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Namdhinggo';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/namdhinggo-v2-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* namdhinggo-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Namdhinggo';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/namdhinggo-v2-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* questrial-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/questrial-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding:0;
	position:absolute;left:0;top:0;right:0;bottom:0;
	overflow:hidden;
	background-color:#333; font-family: "Questrial", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:18px;
}
#scroller {   
	position:absolute;left:0;top:0;right:0;bottom:0;
	width: 100vw;
	height: 100vh;overflow-y:scroll;
	overflow-x: hidden;
}
section { min-height:100%; }
canvas {
  position: fixed;
  top:0;
  left:0;
  z-index:-98;
}

.lensflare0 { position:fixed;top:0%;right:00%;width:40%;z-index: -99; }
.lensflare0::after { content:" ";display:block;padding-bottom:100%;background:url(images/lensflare1.png) center center no-repeat transparent;background-size:100% auto;}

.btn { display:inline-block;text-decoration:none;font-family: "Questrial", sans-serif; position:relative;color:#fff;padding:15px 20px;border:0px;outline:0;cursor:pointer;background-color:#1f2b37;font-weight:bold;position:relative;letter-spacing:1px;font-size:14px;transition:all .1s ease-in-out;transform:scale(1);margin-bottom:5px; }
.btn::after { content:" ";background-color:rgba(0,0,0,0.1);position:absolute;bottom:0;left:0;top:0;width:0%;transition:all .5s ease-in-out; }
.btn:hover::after { width:100%; }
.btn:hover { transform:scale(1.05); }

.sticky {  position: -webkit-sticky; position: sticky;  top: 0px; }

.title { position:sticky;display:flex;left:0;top:0;right:0;bottom:0;width: 100vw;z-index:5;height: 100vh;justify-content:center;align-items:center;}
.title > div { margin:0 auto;width:100%;max-width:900px;padding:0 20px; color:#fff;line-height:21px; }
.title h1 { font-family: "Namdhinggo", serif;font-size: 66px;margin-bottom: 20px;line-height: 58px;margin-top: 0px; }
.title h1 font { font-weight:100;font-style:italic;opacity:0.7;}
.title button { margin-top:30px;background-color:rgba(255,255,255,0.05);border-radius:30px;position:relative;z-index:9999;overflow:hidden;margin-bottom:10px; }
@media screen and (max-width: 1340px) {	
	.title > div { text-align:center; }
}

.content { position:relative;z-index:9999;}

.hideTexts { max-height:300px;opacity:0.2;overflow:hidden;position:relative; }

.hideTexts::after { content:" ";position:absolute;left:0;top:0;bottom:0;right:0; 
	/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#7db9e8+0,1f2b37+100&0+0,1+100 */
	background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(31,43,55,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.paralax { position:fixed;left:0;top:0;right:0;bottom:0;  width: 100vw;  height: 100vh; border:1px solid green;z-index:-99;overflow:hidden;opacity:0;background: linear-gradient(to bottom,  rgba(133,167,203,1) 0%,rgba(196,200,206,1) 48%,rgba(231,200,161,1) 98%);}
.paralax .inner { left:0;top:0;right:0;bottom:0;  width: 100vw;  height: 100vh; position:absolute;transfor:translateY(100%);background: linear-gradient(to bottom, rgba(247,245,242,0) 0%,rgba(247,245,242,0.02) 1%,rgba(255,250,244,0.38) 21%,rgba(255,250,244,1) 56%);}

.scene {
	position: absolute;
	width: 100%;
	bottom:0px;
	transform: translateY(var(--translateY));
	will-change: transform;
}
.cryptedmail:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
}

section.one .wrap { display:flex;opacity:0.2;width: 100%;display:none;}
section.one .wrap > div { width:100%;flex-shrink:1;flex-shrink:0;}
section.one h1 { max-width:900px; margin:0 auto;font-size:40px;color:#fff;  font-family: "Namdhinggo", serif;  }
section.one .sticky-element { min-height:100vh;display:flex;align-items:center;width: 100%; }
section.two .sticky-element > div { min-width:3000px; }

section.three { position:relative;background-color:transparent;color:#1f2b37;padding:0px;min-height:100vh;box-sizing:border-box; }
section.three h1 { font-family: "Namdhinggo", serif;font-size: 50px;margin-top:0px; font-weight: bold;margin-bottom: 5px; }
section.three h2 { font-weight:600;margin-top:0px;margin-bottom:30px;font-size:22px; }
section.three p { margin-top:0px; }
section.three .me { position:absolute;top: 38px;left: -30px;width: 170px;background:url(images/ich.jpg) center center no-repeat transparent;background-size:130% auto; }
section.three .me::after { content:" ";position:relative;padding-bottom:130%;display:block; }
section.three .akzent { background-color:rgba(255,255,255,0.7);position:relative;z-index:1;padding:35px;padding-left:170px;padding-bottom:70px;}
section.three .bg { position:absolute;bottom:0;left:0;width:50%;z-index:0;transform:translateY(-10%) translateX(-20%) rotate(217deg); }
section.three .bg::after { display:block;content:" ";position:relative;padding-bottom:100%;background:url(images/circle.svg) center center no-repeat transparent;background-size:100% auto;opacity:0.1; } 
section.three .margincontainer { position:relative;z-index:1; }
section.three .sticky-element { padding-top:100px;padding-bottom:100px; }
section.three .f2 {padding-left:50px;}
section.three .signiture { position:absolute;bottom: 20px;
  right: 15px;width: 200px;
  transform: translateY(45%) rotate(3deg); }
section.three .signiture::after { content:" ";position:relative;padding-bottom:60%;display:block;background:url(images/sign.png) center center no-repeat transparent;background-size:cover; }
@media screen and (max-width: 900px) {	
	section.three .f2 {padding-left:0px;padding-top:50px;}
}
@media screen and (max-width: 550px) {	
	section.three .akzent { padding:20px; padding-bottom:70px; }
	section.three .me {position: relative;top: 5px;right: 0x;width: 170px;left: 0px;margin-bottom: 37px;}
}
section.four { background-color:#1f2b37;padding-top:100px;padding-bottom:100px;color:rgba(255,255,255,0.6);min-height:100vH;box-sizing:border-box; }
section.four h1 { font-family: "Namdhinggo", serif;color:#fff;font-size: 50px;margin-top:0px; font-weight: bold;margin-bottom: 30px; }
section.four .f1 {padding-left:50px;column-count: 2;font-size:12px; }
section.four .f1 h2 { margin-top:0px; }
section.four .f1 h1 { font-size:36px;margin-bottom: 10px; }
section.four .f1 b, section.four .f1 h2 { color:#fff; }
section.four a { text-decoration:none; color:#fff; }
@media screen and (max-width: 900px) {	
	section.four .f1 {padding-left:0px;padding-top:50px;}
}
 @media screen and (max-width: 550px) {	
	 section.four .f1 { column-count: 1; }
} 
.rows { display:flex;flex-wrap:wrap; }
.rows > div.f1 { width:68.2%;box-sizing:border-box; }
.rows > div.f2 { width:31.8%;box-sizing:border-box; }
@media screen and (max-width: 900px) {	
	.rows > div.f1 { width:100%; }
	.rows > div.f2 { width:100%; }
}
.margincontainer { max-width:1300px; margin:0 auto; }
@media screen and (max-width: 1340px) {	
	.margincontainer { margin:0 20px;box-sizing:border-box; }
}
.collums { columns: 2; } 
@media screen and (max-width: 600px) {	
	.collums { columns: 1; } 
}