@font-face {
	font-family: 'OSReg';
	src: url('fonts/Open/OpenSans-Regular.ttf');
	}
	
@font-face {
	font-family: 'OSLgt';
	src: url('fonts/Open/OpenSans-Light.ttf');
	}
	
@font-face {
	font-family: 'OSConL';
	src: url('fonts/Open/OpenSans-CondLight.ttf');
	}
	
@font-face {
	font-family: 'OSConLI';
	src: url('fonts/Open/OpenSans-CondLightItalic.ttf');
	}
		

html, body { 
	margin: 0; padding: 0; 
	height: 100%;
	width: 100%;
	cursor: default;
	/*overflow-x: hidden; 
	text-align: center;	
	overflow-y: auto;	*/
	}
	




label { cursor: pointer; }

input[type="radio"], 
input[type="checkbox"] { display: none; }

h1, h2, h3, h4, h5 { font-family: 'OSConL', sans-serif; margin: 0% 25% 2% 10%; font-variant: small-caps;}

h1 		   { font-size: 7.5vh; }
h2 		   { font-size: 6.25vh; }
h3, h4, h5 { font-size: 4.25vh; }

a { font-family: 'OSReg', sans-serif; font-size: 120%; text-decoration: none; margin: 0; }


p { margin: 0% 25% 5% 10%; font-family: 'OSLgt', sans-serif; font-size: 2vh; /*border-bottom: 1px solid #777; padding-bottom: 20%;*/ }

/*h1:nth-of-type(even) { text-align: right; }*/

.headbutt, .nav {
	z-index: 999;
	position: fixed;
}

.headbutt{	
	box-shadow:  3px 3px 12px 1px rgba(0,0,0, 0.2), 3px 3px 3px 0px rgba(0,0,0, 0.1);
}

.nav {	
	box-shadow:  -3px 3px 12px 1px rgba(0,0,0, 0.2), 3px 3px 3px 0px rgba(0,0,0, 0.1);

}


.headbutt {
	top: -5vw;
	left: 5vw;
	width: 5vw;
	padding-bottom: 10vw;
	background-color: rgba(0,0,0,0.7);
	transition: top 0.3s ease-in-out 0s;	
}

.headbutt:after {
	content: '.';
	display: block;
	position: absolute;
	bottom: 10%;
	left: 40%;
	color: #FFF;
	width: 100%;
	
	font-family: 'OSLgt';
	font-size: 4.5vw;
}

.nav {
	top:  10%;
	right: -32%;
	padding: 15vh 6vh 8vh 10vh;
	background-color: rgba(0,0,0,0.7);
	color: #FFF;
	
	transition: right 0.3s ease-out 0s;
}

.nav a { display: block; font-family: 'OSConL'; font-size: 3.5vh; text-align: right; margin: 15% 0; }



#NAVI:checked ~ .headbutt { top: 0%; }
#NAVI:checked ~ .nav { right: 0%; }




.btn {
	position: absolute;
	top: -45%;
	width: 10%;
	padding-bottom: 10%;
	border: 0px solid green;
	
	z-index: 99;
}


.btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 25%;
	left: 25%;
	padding: 25%;
	
	
	border-top: 2px solid  #CCC;
	border-left: 2px solid #CCC;
	
}

.stage {
	position: relative;
	width: 100%;
	height: 88%;
	border: 1px solid yellow;	
	box-sizing: border-box;

	overflow: hidden;
}
	
.sld {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;	
	border: 2px solid red;
	/*overflow: hidden;*/
	z-index: 66;
}

.stgbg {	
	position: absolute;
	width: 100%;
	height: 100%;	
	
	opacity: 0.5;
	background-image: url(pics/walltex_01.jpg);
	background-position: 0% -5%;
	
	clip-path: polygon(10% 9%, 90% 5%, 88% 90%, 12% 85%);

	
	border: 1px solid purple;
}


/*TEMP*/

.set02 .stgbg { transform: rotateZ(180);}



.sld.sld03 { border: 1px solid orange; }
.sld.sld03 > img { border: 1px solid orange; }


.sld.sld02 { border: 1px solid blue; }
.sld.sld02 > img { border: 1px solid blue; }
.sld.sld01 > img { border: 1px solid red; }

.sld.sld01 > img { box-shadow: 3px 3px 3px 1px rgba(0,0,0, 0.1), 0px 0px 12px 1px rgba(0,0,0, 0.2); }

.sld > img { 
	position: absolute;  
	transition: left 0.3s ease-in-out 0s, right 0.3s ease-in-out 0s, top 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s; 
}



/*   INIT X-Sides   */
.stg01 .sld01 { left: -200%; }
.stg01 .sld02 { left:  200%; }
.stg01 .sld03 { left:  200%; }


/* --------  Portrait: @MediaQueries ! ------------ */


/* -------- STG01 - Drucke ------------ */
/*   SET_01   Warten */
.stg01 .set01.sld01 > img {  width:  48%;     top:  20%;  left: 25%; }
.stg01 .set01.sld02 > img { height:  45%;     top:  -12%;  left:  5%; }
.stg01 .set01.sld03 > img { height:  55%;  bottom:   0%; right:  0%; }

.stg01 .set01.sld02 { left: -200%; }

/*   SET_02   London */	
.stg01 .set02.sld01 > img { height:  90%;    top:   3%;  left: 23%; }
.stg01 .set02.sld02 > img {  width:  45%;  bottom:   0%; right: 15%; }	
.stg01 .set02.sld03 > img { height:  42%;     top:   3%; right: 30%; }	

/*   SET_03   Birds */	
.stg01 .set03.sld01 > img {  width:  63%;     top:  27%;  left: 15%; }
.stg01 .set03.sld02 > img {  width:  45%;  bottom:   4%;  left: 18%; }	
.stg01 .set03.sld03 > img { height:  65%;  bottom:   0%; right: 8%; }	

.stg01 .set03.sld02 { left: -200%; }


/* -------- STG02 - Collagen ------------ */
/*   SET_01   Matt */
.stg02 .set01.sld01 > img {  width:  36%;     top:  12%;  left: 32%; }
.stg02 .set01.sld02 > img { height:  36%;  bottom:   7%;  left:  15%; }
.stg02 .set01.sld03 > img { height:  55%;	bottom:  0%; right:  12%; }

.stg02 .set01.sld02 { left: -200%; }





/* --------  Timings  ------------ */
/*   SET_01   */
/* out */
.set01.sld01 				  { transition: left 1.4s ease-in-out 0.4s; }
.set01.sld02 				  { transition: left 1.3s ease-in-out 0.2s; }
.set01.sld03 				  { transition: left 1.2s ease-in-out 0.0s; }
/*  in */
#set01:checked ~ .set01.sld01 { transition: left 1.2s ease-in-out 0.8s; }
#set01:checked ~ .set01.sld02 { transition: left 1.0s ease-in-out 0.3s; }
#set01:checked ~ .set01.sld03 { transition: left 1.0s ease-in-out 0.6s; }


/*   SET_02   */
/* out */
.set02.sld01 				  { transition: left 1.4s ease-in-out 0.6s; }
.set02.sld02 				  { transition: left 1.2s ease-in-out 0.4s; }
.set02.sld03 				  { transition: left 1.3s ease-in-out 0.0s; }
/*  in */
#set02:checked ~ .set02.sld01 { transition: left 1.2s ease-in-out 0.8s; }
#set02:checked ~ .set02.sld02 { transition: left 1.0s ease-in-out 0.6s; }
#set02:checked ~ .set02.sld03 { transition: left 1.0s ease-in-out 0.3s; }


/*   SET_03   */
/* out */
.set03.sld01 				  { transition: left 1.4s ease-in-out 0.6s; }
.set03.sld02 				  { transition: left 1.2s ease-in-out 0.4s; }
.set03.sld03 				  { transition: left 1.3s ease-in-out 0.0s; }
/*  in */
#set02:checked ~ .set03.sld01 { transition: left 1.2s ease-in-out 0.8s; }
#set02:checked ~ .set03.sld02 { transition: left 1.0s ease-in-out 0.6s; }
#set02:checked ~ .set03.sld03 { transition: left 1.0s ease-in-out 0.3s; }





#set01:checked ~ .set01,
#set02:checked ~ .set02,
#set03:checked ~ .set03 { left: 0%; }


#set01:checked ~ .btn[for$="03"],
#set01:checked ~ .btn[for$="02"],
#set02:checked ~ .btn[for$="01"],
#set02:checked ~ .btn[for$="03"],
#set03:checked ~ .btn[for$="02"],
#set03:checked ~ .btn[for$="01"] { top: 45%; }


#set01:checked ~ .btn[for$="03"]::after {  transform: rotate(-45deg); }
#set01:checked ~ .btn[for$="03"] {  left: 0; }
#set01:checked ~ .btn[for$="02"]::after {  transform: rotate(135deg); }
#set01:checked ~ .btn[for$="02"] { right: 0; }

#set02:checked ~ .btn[for$="01"]::after {  transform: rotate(-45deg); }
#set02:checked ~ .btn[for$="01"] {  left: 0; }
#set02:checked ~ .btn[for$="03"]::after {  transform: rotate(135deg); }
#set02:checked ~ .btn[for$="03"] { right: 0; }

#set03:checked ~ .btn[for$="02"]::after {  transform: rotate(-45deg); }
#set03:checked ~ .btn[for$="02"] {  left: 0; }
#set03:checked ~ .btn[for$="01"]::after {  transform: rotate(135deg); }
#set03:checked ~ .btn[for$="01"] { right: 0; }




	
div, img { border: none !important; }



@media screen and (orientation: portrait) {
.sld00::before, 
.sld00::after  {
	display: none;
}

h1 { margin: 0% 10% 2%; }
p  { margin: 0% 10% 5%; }

.stgbg {
clip-path: polygon(0% 13%, 100% 9%, 100% 90%, 0% 85%);
}
	
.nav {	right: -65%; }
.headbutt {
	top: -10vw;
	left: 5vw;
	width: 10vw;
	padding-bottom: 20vw;
}




.headbutt:after {
	font-size: 7.5vw;
}
	
/* -------- STG01 - Drucke ------------ */	
/*   SET_01   */
.stg01 .set01.sld01 > img {  width:  86%;    top:  25%;  left:   7%; }
.stg01 .set01.sld02 > img { height:  32%;    top:  -10%;  left:  15%; }
.stg01 .set01.sld03 > img { height:  40%; bottom:   2%; right: -5%; }


/*   SET_02   */
.stg01 .set02.sld01 > img { height:  90%;    top:   3%;  left:  12%; }	
.stg01 .set02.sld02 > img {  width: 120%; bottom:   0%; right: -50%; height: auto !important; }	
.stg01 .set02.sld03 > img {  width:  52%;    top:   2%; right:   5%; height: auto !important; }
	

/*   SET_03   */	
.stg01 .set03.sld01 > img {  width: 130%;     top:  27%;  left: -15%; }
.stg01 .set03.sld02 > img {  width: 120%;  bottom:   3%;  left: -65%; height: auto !important; }	
.stg01 .set03.sld03 > img { height:  65%;  bottom:   0%; right:  -8%; }



/* -------- STG02 - Collagen------------ */	
/*   SET_01   */
.stg02 .set01.sld01 {  
	display: flex;
	justify-content: center;
}
.stg02 .set01.sld01 > img {  height:  40%;    top:  15%;  left:   auto; right: auto; width: auto !important; }
.stg02 .set01.sld02 > img { height:  28%; bottom:   5%;  left:  15%; }
.stg02 .set01.sld03 > img {  height:  42%; bottom:   0%; right:   3%; }

}


@media screen and (max-height: 500px) {
.nav {
	top:  0%;
	height: 100%;
	padding: 15vh 8vh 6vh 12vh;
}

.nav a { font-size: 4.5vh;  margin: 15% 0%; }
}


@media screen and (orientation: landscape) {


}





/*
.stgbg::before, 
.stgbg::after, 
.sld00::before, 
.sld00::after  {
	content: '';
	display: block;
	position: absolute;
	z-index: 0;
	background-color: #FFF;
	
}
.stgbg::before, 
.stgbg::after {	
	width: 130%;
	height: 20%;
	left: -15%;
}

.sld00::before, 
.sld00::after  {
	width: 20%;
	height: 130%;
	top: -15%;
	
}

.sld00::before {
	z-index: 1;
	left: -10%;
	transform: rotate(-1.6deg)
}
.sld00::after {	
	right: -10%;	
	transform: rotate(1.81deg);
}


.stgbg::before {	
	top: -15%;
	transform: rotate(-1deg)
}
.stgbg::after {	
	bottom: -5%;	
	transform: rotate(.81deg);
}

*/


/*  HarryP sample
div {
  border: 1px solid red;
	width: 280px;
	height: 280px;
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
  background-size: cover;
  transition: 0.4s linear;
  clip-path: polygon(10% 10%, 90% 13%, 85% 95%, 17% 90%);
}
div:hover {
  clip-path: polygon(5% 15%, 93% 13%, 82% 90%, 12% 95%);
}


html, body { height: 100%; }
body {
	display: flex;
	justify-content: center;
	align-items: center;
}

*/




/*
.sld.sld01 > .pimg {
	position: absolute;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;	
	border: 1px solid orange;
}

.set01.sld01 > .pimg { background-image: url(pics/warten.jpg); }


*/



	
/* ----------------------------------------------------------------------------------- */	

		/*
.xxx {
	position: relative;
	margin: 0;
	top: 0;
	left: 0;
	width: 100vw;
	height: 60vh;
	background-repeat: no-repeat;
	background-position: 0 45%;
	background-size: cover;
	/*background-attachment: fixed;*/
	}
*/
	/*
.sld0101 { background-image: url(pics/titel_big.jpg); background-position: 0 65%; height: 100vh; transition: height 0.4s linear 0s;}
.sld0102 { background-image: url(pics/bf_still.jpg); background-position: 0 35%; }
.sld0103 { background-image: url(pics/zs_still.jpg); }
.sld0104 { background-image: url(pics/ls_still.jpg); }
*/