@font-face { font-family: 'Flamenco'; src: url(style/fonts/flamenco.light.ttf);	}
@font-face { font-family: 'RobotoCon'; src: url(style/fonts/RobotoCondensed-Bold.ttf); }
@font-face { font-family: 'RobotoConLt'; src: url(style/fonts/RobotoCondensed-Light.ttf); }

html, body { margin: 0;	padding: 0;	width: 100%; height: 100%; }
body { background-color:	rgba(15, 15, 15, 1);}
input { display: none; }

* {
    cursor: default;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;		
	box-sizing: border-box;
}

a, input, label, label * { cursor: pointer; }

h1, h2, h3 {	
	margin: 0; 
	font-family: 'Flamenco'; 
	font-size: 20.0vw; 
	background-color: rgb(15, 15, 15);	
	color: rgb(249, 249, 249); 
	padding: 0 2vmin 2vmin;
	margin: 1vmin 0;

}

nav label  {	margin: 0; font-family: 'Flamenco'; font-size: 20.0vw; color: rgb(235, 235, 235);	}

h1 { font-size: 16.0vmin; letter-spacing: -1.25vmin; }
h2 { font-size: 15.0vmin; letter-spacing: -1.00vmin; }
h3 { font-size:  8.0vmin; letter-spacing: -0.25vmin; }


p {	
	font-family: 'RobotoConLt';	
	font-size: 5.0vmin; 
	letter-spacing: -0.25vmin;
	font-size: 4.0vmin; 
	letter-spacing: -0.15vmin;	
	
	color:	rgba(35, 35, 35, 1); }

a {
	font-family: 'RobotoConLt';
	font-size: 5.0vmin; 
	letter-spacing: -0.25vmin;	
	color:	rgb(135, 135, 135);	
	text-decoration: none;
	text-align: right;
	margin-top: 5vmin;	
}

a.demoBtn {	font-size: 3.75vmin; letter-spacing: -0.175vmax; 	margin-top: 0vmin; }

.section {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border: 0px solid green;
}

.img { 
	position: relative;
	width: 100%;
	height: 100vh;	
	top: 0%;
	
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;	
	background-attachment: fixed;
	
	overflow: hidden;
	}

body::before {
	content: '';
	display: block;
	position: fixed;
	z-index: 50;
	left: 0;
	width: 100%;
	height: 2vh;
	top: -2vh;	
	box-shadow: 0 0 .45em .25em rgba(0, 0, 0, 0.35);
}
	
.headings {
	z-index: 99;
	position: absolute;
	top: 12vmin;
	height: 80vh;
	width: 100%;	
	border: 0px solid blue;
}

.headings span {
	position: absolute;
	right: 0%;
	bottom: 0;
	width: 100%;
	text-align: right;
	
	border: 0px solid orange;
}

.headsled {
	position: relative;
	width: 100%;
	border: 0px solid purple;
	left:  0%;
	
	display: flex;
	align-items: center;
	width: 100%;
	
	transition: transform .2s linear 0s;
}

.headsub {
	position: relative;
	/*float: left;*/
	min-width: 100%;
	width: 100%;
	height: 100%;
	
	border: 0px solid green;	
}

.headings h1,
.headings h2,
.headings h3 { display: inline-block; text-align: right; margin-right: 10%; }

#sec_0 .img { background-image: url(pics/backs/04.jpg); }
#sec_1 .img { background-image: url(pics/backs/06.jpg); }
#sec_2 .img { background-image: url(pics/backs/09.jpg); }
#sec_3 .img { background-image: url(pics/backs/03.jpg); }
#sec_4 .img { background-image: url(pics/backs/05.jpg); background-position: 50% 50%; }

#sec_0 { z-index: 4; }
#sec_1 { z-index: 3; }
#sec_2 { z-index: 2; }
#sec_3 { z-index: 1; }
#sec_4 { z-index: 0; }

#sec_4 .img  { height: 50vh; }
/* 
#sec_4 .content { height: 20vh; }
#sec_4 .cnt_sub { background-color: rgb(15, 15, 15);}
#sec_4 .cnt_sub p { color: rgb(249, 249, 249); }
 */

.content {
	position: relative;
	width: 100%;
	height: auto;
	height: 83vh;
	overflow: hidden;

	border: 0px solid orange;
	background-color: rgba(249, 249, 249, 1);
	
}

.cnt_scrl {
	position: relative;
	height: auto;	
	position: absolute;
	height: 100%;	
	
	display: flex;
	align-items: center;
	width: 100%;
	transition: transform .2s linear 0s;

}


.cnt_sub {
	position: relative;
	min-width: 100%;
	width: 100%;
	height: auto;
	height: 100%;
}

.cnt_sub {
	overflow: hidden;
	width: 100%;
	position: relative;
	display: flex;
    flex-wrap: wrap;
	
	align-items: center;
		
	justify-content: center;	

	background-color: rgba(0,0,0,0);	
	box-sizing: border-box;	
	padding: 10vh 5vw;	
}




.wrap {
	position: relative;
	/*margin: -.5vw -.5vw 0;	*/
	box-sizing: border-box;
	border: 0px solid green;
	background-color:	rgba(235, 235, 235, 0);		
	padding: 3vw 3vw;

}

/* 
 */
.cnt_scrl:hover { cursor: grab; }
.cnt_scrl * { cursor: inherit; }

.cnt_scrl .wrap a { cursor: pointer !important; }



.w01 {  width: 40%; margin: 10vmin 0 0;  				   }
.w02 {  width: 60%; max-width: 90vh; margin: -5vmin 0 0;   }

#sec_2 .w02 { max-width: 80vh; margin: -5vmin 0 0;}
#sec_3 .w01 { width: auto;  max-width: 70vw; }


.w02::after {
	content: '';
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	border: 0px solid pink;
}

.cnt_sub .w01 { order: 2; }
.cnt_sub .w02 { order: 1; }

.wrap > span { display: block; width: 100%; text-align: right; margin-top: 2.5vmin; }

.picbox > div { max-width: 100%; float: left; position: relative; }
.picbox > div > img { position: relative; width: 100%;  }


.picbox.trp div:nth-of-type(1)  { margin-left:   5%; 	width: 80%; }
.picbox.trp div:nth-of-type(2)  { margin-left:   -3%;   	width: 50%; margin-top:   30%;}
.picbox.trp div:nth-of-type(3)  { margin-left:  33%;  	width: 24%; margin-top:   21%; margin-right:  -25%; }

.picbox.dbl div:nth-of-type(1)  { 						width: 85%; }
.picbox.dbl div:nth-of-type(2)  { margin-left: 45%; 	width: 55%; margin-top:  40%; }

.picbox.dblm div:nth-of-type(1) { 					 	width: 85%; }
.picbox.dblm div:nth-of-type(2) { margin-left: 47%; 	width: 53%; margin-top:  36%; }

.picbox.dblp div:nth-of-type(1) { 						width: 85%; }
.picbox.dblp div:nth-of-type(2) { margin-left: 75%;	    width: 25%; margin-top:  21%; }

.picbox.dadgal div:nth-of-type(1) { margin-left: -2%;	width: 85%; margin-top:  5%; 	z-index: 2; margin-bottom:   15%;}
.picbox.dadgal div:nth-of-type(2) { margin-left: 25%; 	width: 75%; margin-top:  18%; display: none;}
.picbox.dadgal div:nth-of-type(3) { margin-left: 0%; 	width: 40%;	margin-top:  40%; z-index: 2; }
.picbox.dadgal div:nth-of-type(4) { margin-left: -5%;	width: 40%; margin-top:  30%; }
.picbox.dadgal div:nth-of-type(5) { margin-left: 60%; 	width: 45%; margin-top:  -2%; margin-bottom:   35%; }

.picbox.pom div { width: 30%; }
.picbox.pom div:nth-of-type(1) { 						width: 35%;	margin-top:   5%; 	z-index: 2; }
.picbox.pom div:nth-of-type(2) { margin-left:  -7%; 	width: 30%; margin-top:   0%; }           
.picbox.pom div:nth-of-type(3) { margin-left:  73%;		width: 35%; margin-top:  25%; z-index: 2; }
.picbox.pom div:nth-of-type(4) { margin-left:  63%; 	width: 30%; margin-top:  -18%; }
.picbox.pom div:nth-of-type(5) { margin-left:  20%; 	width: 80%;	margin-top:  25%; z-index: -1; margin-bottom:   43%;}

.picbox.plugg div { width: 25%; }
.picbox.plugg div:nth-of-type(1) { margin-left:   -5%; 	width: 50%;	margin-top:   10%;	z-index: 2; }
.picbox.plugg div:nth-of-type(2) { margin-left:   55%; 	width: 50%; margin-top:   -5%; }
.picbox.plugg div:nth-of-type(3) { margin-left:   5%; 	width: 96%;	margin-top:   20%; }
.picbox.plugg div:nth-of-type(4) { margin-left:  60%; 	width: 45%; margin-top:   15%;  margin-bottom:   45%; }

.picbox.krn div:nth-of-type(1) { margin-left:  10%;		width: 70%; }
.picbox.krn div:nth-of-type(2) { margin-left:  -5%;		width: 60%;  margin-top:   37%; }
.picbox.krn div:nth-of-type(3) { margin-left:  15%; 	width: 35%;  margin-top:   30%;  margin-bottom:   45%; margin-right: -10%;}

.picbox.flm div:nth-of-type(1) { margin-left:  0%; 		width: 65%; }
.picbox.flm div:nth-of-type(2) { margin-left: -5%;   	width: 37%;  margin-top:   42%; }
.picbox.flm div:nth-of-type(3) { margin-left: 13%;		width: 48%;  margin-top:   23%;  margin-bottom:   65%; }

.picbox.gog div:nth-of-type(1) { margin-left:  -5%; 	width: 60%;  margin-top:   0%; }
.picbox.gog div:nth-of-type(2) { margin-left:  50%;   	width: 65%;  margin-top:   10%; margin-right: -50%; }
.picbox.gog div:nth-of-type(3) { margin-left:  15%; 	width: 80%;  margin-top:   40%;	 margin-bottom:   30%;}

.picbox.rad div:nth-of-type(1) { margin-left: -10%;	 	width: 85%; }
.picbox.rad div:nth-of-type(2) { margin-left: 33%; 		width: 63%;  margin-top:  57%;  margin-bottom:   20%;}

.picbox.pbk div:nth-of-type(1) { margin-left: -5%;		width: 45%;  margin-top:  10%; 	z-index: 2; }
.picbox.pbk div:nth-of-type(2) { margin-left: 30%; 		width: 40%;  margin-top:  -7%;  z-index: 1; }
.picbox.pbk div:nth-of-type(3) { margin-left: 60%; 		width: 40%;	 margin-top:  0%;  margin-right: -10%; }
.picbox.pbk div:nth-of-type(4) { margin-left: -6%;		width: 40%;  margin-top:  33%;	z-index: 3;	}
.picbox.pbk div:nth-of-type(5) { margin-left: -7%;		width: 70%;  margin-top:  42%;  margin-right: -100%;  margin-bottom:   43%;}

.picbox.png div:nth-of-type(1) { margin-left:  -3%; 	width: 60%;	 margin-top:  0%; margin-right:  -30%; z-index: 1; }
.picbox.png div:nth-of-type(2) { margin-left:  60%;  	width: 37%;	 margin-top:  20%; margin-right: -15%; z-index: 2; }
.picbox.png div:nth-of-type(3) { margin-left:  -5%;  	width: 25%;  margin-top:  30%; }
.picbox.png div:nth-of-type(4) { margin-left:  7%;		width:  8%;  margin-top:  55%; z-index: 3; }
.picbox.png div:nth-of-type(5) { margin-left:  6%;  	width: 25%;  margin-top:  37%;  margin-bottom:   50%;}

.picbox.vita { width: auto; }
.picbox.vita div:nth-of-type(1) { margin-left: 20%; width: 60%; }


#sec_0 .w01 {  order: 2; width: 60%; margin: 10vmin 0 0; align-self: center; }
#sec_0 .w02 {  order: 1; width: 40%; max-width: 90vh; margin: -5vmin 0 0; align-self: center; }
#sec_0 .w01.vita {  width: 100%; align-self: center; margin: 0; padding: 0 3vw; }

#sec_1 .picbox div:nth-of-type(1) { margin-right: -100%; width: 95%; }
#sec_1 .picbox.sngl div:nth-of-type(1)  { 				width: 100%; }

#sec_2 .picbox > div { height: 0; }
#sec_2 .w02 { padding: 0 3vw; }
#sec_2 .w01, #sec_1 .w01 { text-align: left; align-self: center; }
#sec_2 .w01 { padding: 0 0 0 6vw;}

.w01 ul {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-left: 35%;
}

.w01 ul li {
	position: relative;
	margin: 2vmin 0;
}

.w01 ul li span {	
	font-family: 'RobotoConLt';	
	font-size: 4.0vmin; 
	letter-spacing: -0.15vmin;	
	color:	rgba(35, 35, 35, 1);	
}

.w01 ul li > span:nth-of-type(1) {
	position: absolute;
	text-align: right;
	width: 55%;
	left: -60%;
	height: auto;
}

.w01 ul li span:nth-of-type(1) span {	
	color:	rgba(185, 185, 185, 1);	
	position: relative;
	padding: .2vw .6vw;
	
	font-family: 'Flamenco';
	font-size: 4.7vmin;
	
	color:	rgba(235, 235, 235, 1); 	
	background-color:	rgba(35, 35, 35, 1); 
}

.mugshot {
	transform: rotateZ(-2deg);
	position: relative;
	width: 100%;
	height: 50vh;

	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(pics/jpgs/bewbild_sw_lite.jpg);
}

/* svg (%jpg) shadow layers */
.svgBox { display: none;}
.picbox > div > svg { position: absolute; top: 0; left: 0; width: 100%; }

.fil0 { fill: rgba(25,25,25, 1.0); }
.fil1 { fill: rgba(255,255,255, 1.0); }
.svgShad { filter: drop-shadow( -.1em  .1em .5em rgba(  0,   0,   0, .5) ); }

.picbox.plugg div:nth-of-type(4) img { border-radius: 50%; }
.picbox.plugg div:nth-of-type(4) img ,
.picbox img[src$=".jpg"] { box-shadow:   -0.1em .1em .75em 0em rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.12); }


.naVert {
	position: fixed;
	position: absolute;
	width: 80%;
	left: 10%;
	z-index:99;
	bottom: -10vmin;
	padding: 3vh 0;
	border: 0px solid purple;
	
}

.naVerItm {
	position: relative;
	border: 0px solid red;
	float: left;
	display: flex;
	align-items: center;
	justify-content: right;
	left: 1.2vmin;
}

.naVerDot {
 	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;	
	width: 0;
	height: 0;
	padding: 1.2vmin;
	padding: .5vw;
	padding: 10px;
	border-radius: 50%;
	
	border: 2px solid rgb(85, 85, 85);	
	border: 2px solid rgb(235,235,235);
	border: 2px solid rgb(15,15,15);	
	/* box-shadow: inset 0 0 .5em rgba(235, 235, 235, 0.25), 0 0 .5em rgba(235, 235, 235, 0.35); */
	
}

.naVerDot::after {
	content: '';
	position: relative;
	display: block;
	width: 0;
	height: 0;
	padding: .6vmin;
	padding: 5px;
	border-radius: 50%;
	
	
	
	background-color: rgb(85, 85, 85);
	background-color: rgb(235,235,235);
	background-color: rgb(15,15,15);
	/*box-shadow: 0 0 .3em rgba(235, 235, 235, 0.25);*/
		
	transform: scale(0); 
	transition: transform .2s linear 0s;
	
}

.naVerDot.nActive::after { transform: scale(1); }

.naVerItm::before {
	content: '';
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	
	border: 1px solid rgb(85, 85, 85);
	border: 1px solid rgb(235,235,235);
	border: 1px solid rgb(15,15,15);	
	/* box-shadow: 0 0 .3em rgba(235, 235, 235, 0.35); */
}

.naVerItm:nth-of-type(1)::before { opacity: 0; }


.draghint {
	display: block;
	position: absolute;
	z-index: 999;
	bottom: 10%;
	left: 50%;
	
	border: 3px solid green;
	
	transform: translateX(  0vw ) scale(0);
	
	animation-name: dragHintAni01;
	animation-duration: 2.3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-play-state: running;	
}

.draghint::before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-left:  25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom:  50px solid #000;
}


@keyframes dragHintAni01 { 
	  0%   { transform: translateX(  0vw ) scale(0); }
	  5%   { transform: translateX(  0vw ) scale(1); }
	 10%   { transform: translateX(  0vw ); }
	 30%   { transform: translateX(-25vw ); }
	 70%   { transform: translateX( 25vw ); }
	 90%   { transform: translateX(  0vw ); }
	 95%   { transform: translateX(  0vw ) scale(1); }
	100%   { transform: translateX(  0vw ) scale(0); }
	}
	
	

#NavBox {
	cursor: pointer; 
	position: fixed;
	box-sizing: border-box;
	top: -1vh;
	
	left: 3vw;	
	padding: 4vmax 6vmax 5vmax 6vmax;
	transform: rotate(-3deg) translateY(-28vmax);
	transition: transform .4s linear 0s;
	
	will-change: transform;  /* fix FF75 render-bug! */
}

#NavBox.NavOn { transform: rotate(-3deg) translateY(-2vmax); }

#NavBox::before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;

	left: 0;
	top: 0;

	background-position:  0% 100%;	
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(pics/backs/nav_4.jpg);	
	box-shadow: .15em .15em .45em .25em rgba(0, 0, 0, 0.35);
	background-color: rgba(0, 0, 0, 0.35);
	
}



#NavBox label {
	text-decoration: none;
	display: block;
	position: relative;
	font-size: 6.0vmax;
	letter-spacing: -0.4vmax;
	margin: 0;
	color: #151515;
	color: #000;
}



#NavBox, #NavBut { z-index: 99; }

#NavBox::before, #NavBut::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}

#NavBox::before, #NavBut::before { z-index: -1; }
#NavBox::before, #NavBut::before { background-color: rgba(255,255,255,0.25); }





@media screen and (max-aspect-ratio: 13/16) {	
	.cnt_sub { 	align-items: initial; }
	#sec_0 .w01, .w01 { width: 100%; margin: 0vmax 0 0; align-self: center;}
	#sec_0 .w02, .w02 { width: 100%; margin:  0vmin 0 0; align-self: flex-end;}
	#sec_2 .w02 { width: 90%; }
	#sec_3 .w01 {  width: auto }
	.picbox.vita div:nth-of-type(1) { margin-left: 30%; width: 40%; }	
	.mugshot {	height: 30vh; }
}

@media screen and (max-width: 1024px) {
	.naVerDot { padding: 8px; }
	.naVerDot::after { padding: 4px; }
}

@media (hover: none) {
	.img { background-attachment: initial; }
	.draghint { display: none; }
	
}