@charset "utf-8";
/* CSS Document */

/* font -----------------------------------------------------*/
/* montserrat-300 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	src: local(''), url('fonts/montserrat-v15-latin-300.woff2') format('woff2'), url('fonts/montserrat-v15-latin-300.woff') format('woff');
}
/* montserrat-regular - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local(''), url('fonts/montserrat-v15-latin-regular.woff2') format('woff2'), url('fonts/montserrat-v15-latin-regular.woff') format('woff');
	}
/* montserrat-600 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: local(''), url('fonts/montserrat-v15-latin-600.woff2') format('woff2'), url('fonts/montserrat-v15-latin-600.woff') format('woff');
	}

/* base -----------------------------------------------------*/
	* {
		margin:0;
		padding:0;
		cursor: url('img/cursor.svg'), auto; 
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance:none;
		-moz-appearance:none;
		-ms-overflow-style: none;  
		 scrollbar-width: none;
	}
	*::-webkit-scrollbar { display: none; }
	html, body {
		font-family: 'Montserrat', sans-serif;
		font-size: 1rem;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	main { display: block; /*nur für IE*/ }
	input[id*=check] { display:none; }
	input, textarea {-webkit-user-select:text;} 

/* mobile / small devices --------------------------------------------------------------*/
@media screen and (max-width:600px) {
	/* header -----------------------------------------------------*/
		#head {
			position:fixed;
			top:0;
			width:100%;
			height:60px;
			padding-top:2px;
			z-index:100;
		}
		#scr-head-bg {
			position:fixed;
			top:0;
			width:100%;
			height:60px;
			background:#fff;
			display:none;
			z-index:50;
		}
		#head > div {
			position:relative;
		}
		h1 {
			position:absolute;
			top:12px;
			left:0px;
			z-index: 101;
		}
		h1 a {
			display:block;
			text-decoration:none;
			color: #000;
			text-transform:uppercase;
			font-size:1rem;
			font-weight:600;
			line-height:2rem;
			letter-spacing:0.2rem;	
			cursor: url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}

	/* navigation -----------------------------------------------------*/
		#topnav { 
			position:fixed;
			right:-100vw;
			top:0;
			background:#fff;
			width:100vw;
			height:100vh;
			overflow:scroll;
			transition:1s;
		}
		#topnav:target { right:0; }
		#topnav > p > a { 
			position:fixed;
			width:40px;
			height:40px;
			right:10%;
			background:#fff;
			display:block;
			text-align:center;
			top:10px;		
		}
		#topnav p a[href="#topnav"] { background: rgba(255,255,255,0); }
		#topnav p a[href="#closenav"] {
			opacity:0;
			width: 0px;
			height: 0px;
			transition:1s;
		}
		#topnav:target p a[href="#closenav"] {
			opacity:1;
			width:40px;
			height:40px;
		}	
		#topnav ul {
		  	list-style-type: none;
			padding: 80px 0;
		}
		#topnav ul li a {
			display:block;
			text-decoration:none;
			color: #000;
			text-transform:uppercase;
			font-size:2.5rem;
			font-weight:300;
			line-height:3rem;
			padding: 5% 10%;
			cursor: url('img/cursor2.svg'), pointer;
		}
		#topnav ul li a.akt {text-decoration:line-through;}

	/* start / EINS -----------------------------------------------------*/
		#start {
			min-height:100vh;
			background:#CFD0D1;
		}
		/* hallo -----------------------------------------------------*/
		#hallo {
			position:fixed;
			left:50%;
			top:50%;
			transform:translateX(-50%) translateY(-50%);
			width:60vw;
			z-index:1;
		}
		/* kapitel-indikatoren -----------------------------------------------------*/
		#element1,#element2, #element3 {
			position:relative;
			z-index:5;
		}
		#element1 { display:none; }
		#number1, #number2, #number3 {
			position:absolute;
			left:10vw;
			bottom:0px;
			width:200px;
			height:200px;
			background-image:url("img/article-indicator-chiffre1.svg");
			background-size:contain;
		}
		#number2 {background-image:url("img/article-indicator-chiffre2.svg");}
		#number3 {background-image:url("img/article-indicator-chiffre3.svg");}

	/* über / ZWEI -----------------------------------------------------*/
		h2 {
			text-transform:uppercase;
			font-weight:300;
			font-size:3rem;
			margin-bottom:2%;
		}
		h2 .bold { font-weight:600; }
		#ueber {
			padding:100px 10vw 50px 10vw;
			background:#fff;
			min-height:100vh;
			z-index:3;
		}
		#ueber p {margin:20px 0;}
		#moretext {
			line-height:0rem;
			opacity:0;
			transition:0.5s;
		}
		#checker-moretext:checked ~ #moretext {
			line-height:2rem;
			opacity:1;
			transition:0.5s;
		}
		#checker-moretext:checked ~ * .hidechecked { display:none; }
		.unfold { overflow:hidden; }
		.unfold .arrowright, .unfold .arrowleft {
			width:3rem;
			padding:4% 0;
			cursor:url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}
		.unfold .arrowright:hover { transform:translateX(10px); }
		.unfold .arrowleft { transform: translateX(10px); }
		.unfold .arrowleft:hover { transform: translateX(0px); }

	/* backgroundimage 1 -----------------------------------------------------*/
		.e-with-fixed-bg-me {
			width:100%;
			height:50vh;
			position:relative;
				}
		.bg-wrap-me {
			clip-path: circle();	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		.bg-me { 
			position:fixed;
			display: block;
			top:0;
			right:0;
			width:100vw;
			height:100vh;
			background-size:cover;
			background-position: center center;
			background-image: url("img/TB02.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* über2 / DREI -----------------------------------------------------*/
		#ueber2 {
			background:#F5DF4D;
			padding:0px 10vw;
			z-index:4;
		}
		h3 {
			text-transform: uppercase;
			font-weight:600;
			font-size:1.5rem;
			letter-spacing: 0.3rem;
			margin-bottom:10px;
		}

		/* accordion funktionalität -----------------------------------------------------*/
		input[name="accVita"],
		input[name="accSkills"],
		input[name="accRef"] { display:none; }

		.accSegment {
			overflow: hidden;
			padding: 10px 0px 2px 0px;
			max-width: 90vw;
			margin-left: auto;
			margin-right: auto;
		}
		.accSegment > div  {
			line-height:0rem;
			opacity:0;
			height:0;
			padding:0px;
			max-width:90vw;
			margin-left:auto;
			margin-right:auto;
			transition:0.5s;
		}		
		input[name="accVita"]:checked ~ #vita,
		input[name="accSkills"]:checked ~ #skills,
		input[name="accRef"]:checked ~ #ref {
			line-height:2rem;
			opacity:1;
			height:auto;
			padding:4% 0%;
		}
		/* accordion design -----------------------------------------------------*/
		label[for*="checker"],
		label[for*="close"] {
			cursor: url('img/cursor2.svg'), pointer;
		}
		#ueber2 h2 { font-size:2rem; }
		#ueber2 h3 { 
			font-size:1.2rem; 
			padding-top:20px;
		}
		.accSegment ul { list-style:none; }
		.accSegment ul li, #ref p { 
			line-height:1.5rem;
			font-size:1.2rem;
			padding:10px 0px;
		}
		#skills ul li { padding:1px 0px; }

		/* accordion drehelement -----------------------------------------------------*/
		.accSegment > h2 label::before {
			content:"\2014";
			margin-right: 20px;
			display:inline-block;
			transition: 0.5s;
		}	
		input[name="accVita"]:checked ~ h2 label::before, 
		input[name="accSkills"]:checked ~ h2 label::before, 
		input[name="accRef"]:checked ~ h2 label::before { transform: rotate(45deg); }

	/* backgroundimage / VIER -----------------------------------------------------*/
		.e-with-fixed-bg {
			width:100%;
			height:100vh;
			position:relative;
				}
		.bg-wrap {
			clip:rect(0,auto,auto,0);	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		.bg1 { 
			position:fixed;
			display: block;
			top:0;
			right:0;
			width:100%;
			height:100%;
			background-size:cover;
			background-position: center center;
			background-image: url("img/gb-itma2019-01-orig.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* Projekte / FÜNF -----------------------------------------------------*/
		#projekte, #grafik {
			min-height:100vh;
			background:#fff;
			padding:0px 10vw;
			z-index:3;
		}
		.textside {
			padding-top:100px;			
			max-width:90vw;
			margin-left:auto;
			margin-right:auto;
			display:flex;
			justify-content:space-between;
		}
		#grafik .textside {text-align:right;}
		.textside div { flex-basis: 50%;}
		.textside div p {
			padding: 10% 0;
			line-height:2rem;
			font-size:1.5rem;
		}

	/* slideshow -----------------------------------------------------*/
		.slideshow {
			max-width:80vw;
			margin-left:auto;
			margin-right:auto;
			padding:8% 0px 40% 0px;
		}	
	
		/* controls in mobile ausgeblendet*/
		.sy-controls, .sy-controls li, .sy-controls li a {display:none;}

		/* captions, styled fo the overlay variant */
		.sy-caption-wrap {
			position:absolute;
			bottom:-3rem;
			z-index:5;
			left:50%; }
		.sy-caption-wrap .sy-caption {
			position:relative;
			left:-50%;
			background-color:rgba(0,0,0,0);
			color:#000;
			text-transform:uppercase;
			line-height:1rem;
			font-size:0.8rem;
			font-weight:600;
			letter-spacing:0.3rem;
		}

		/* pager bubbles */
		.sy-pager {display:none;}


	/* backgroundimage / SECHS -----------------------------------------------------*/
		.bg2 { 
			position:fixed;
			display: block;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-size:cover;
			background-position: center center;
			background-image: url("img/meta-haus-pub-01-orig.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* kontakt / SIEBEN -----------------------------------------------------*/
		#kontakt {
			min-height:100vh;
			background: #F5DF4D;
			padding:100px 10vw;
			z-index:3;
		}
		#kontakt > div {
			margin-bottom:100px;
			margin-top:50px;
		}
		#kontakt div p {
			line-height:2rem;
			font-size:1.5rem;
			text-align:left;
		}
		#kontakt form {
			width: 80vw;
			margin-left:auto;
			margin-right:auto;
			margin-bottom:50px;
		}
		input, textarea {
			width:80vw;
			border:none;
			border-bottom:2px solid #000;
			background:#F5DF4D;
			font-family:'Montserrat';
			font-size:1.2rem;
			text-transform:uppercase;
			letter-spacing:0.2rem;
			padding:0.5rem;
			outline:none; /*iOs*/
			border-radius:0; /*iOs*/
		}
		input:focus,
		textarea:focus { background:#FFF;}
		textarea { margin-bottom:30px; }
		input[type="submit"] {
			border:none;
			text-align:center;
			line-height:2rem;
			font-weight:600;
			cursor:url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}
		#inputsend + .inputline {
			background:#000;
			width:100%;
			height:2px;
			padding:0px;
			margin-left:auto;
			margin-right:auto;
			opacity:0; 
			transform:translateY(10px);	
			transition:0.5s;
		}
		#inputsend:hover + .inputline {
			opacity:1;
			transform:translateY(0px);
		} 
		.mail {
			font-weight:600;
			text-decoration:none;
			color:#000;
		}
		.mail:hover {
			color:#FFF;
		}

	/* footer / ACHT -----------------------------------------------------*/
		#ende {
			max-width: 80vw;
			margin-left: auto;
			margin-right: auto;
			padding: 20px 0px;
			z-index:3;
		}
		#ende p {
			font-size:0.8rem;
			padding-top:5px;
		}
		#ende > p { padding-top:15px; }
		#ende nav li { list-style:none; }
		#ende > nav > ul > li > a {
			text-decoration:none;
			text-transform:uppercase;
			font-size:0.8rem;
			color: #000;
			display:block;
			padding:5px 0px;
		}
		#ende nav ul li a:hover {
			color:#f5df4d;
			cursor: url('img/cursor2.svg'), pointer;
		}
		#insta, #linked {
			width:15px;
			height:15px;
			margin:15px 0px;
			background: url("img/insta_b.svg") no-repeat;
			background-position: center center;
			cursor: url('img/cursor2.svg'), pointer;
		}
		#linked { background: url("img/linked_b.svg") no-repeat; }
		#insta:hover { background: url("img/insta_y.svg") no-repeat; }
		#linked:hover { background: url("img/linked_y.svg") no-repeat; }

	/* impressum + datenschutz -----------------------------------------------------*/
		#impframe, dataframe { position:relative; }
		#impframe > p > a,
		#dataframe > p > a {
			display:block;
			color:#000;
			text-decoration:none;
			text-transform:uppercase;
			font-size:0.8rem;
			padding:5px 0px;
		}
		#impframe > p > a:hover,
		#dataframe > p > a:hover { color:#F5DF4D;} 
		#imp, #data {
			position:fixed;
			right:0;
			left:0;
			bottom:-200vh;
			height:100vh;
			width:100vw;
			background:#FFF;
			z-index:200;
			overflow:scroll;
			transition:1s;
		}
		#imp:target, #data:target { bottom:0; }
		#imp > p > a,
		#data > p > a {
			position:absolute;
			width:40px;
			height:40px;
			right:10%;
			display:block;
			text-align:center;
			padding: 2px 0px;
			top:15vh;
		}
		#imp p a img,
		#data p a img {
			width:40px;
			height:40px;
			padding-bottom:3px;
			display:inline-block;
			cursor:url('img/cursor2.svg'), pointer;
		}
		#imp p a[href="#closeimp"],
		#data p a[href="#closedata"] { display:none; }

		#imp:target p a[href="#closeimp"],
		#data:target p a[href="#closedata"]{ display:block; }		

		#imp div, #data div {
			max-width:80%;
			margin-left:auto;
			margin-right:auto;
			margin-top:15vh;
			margin-bottom:10%;
		}
		#imp h3, #data h3 {
			margin-bottom:15px;
			font-size:1.3rem;
			letter-spacing:0.2rem;
		}
		#imp h4, #data h4 {
			line-height:1rem;
			font-size:0.8rem;
			font-weight:400;
			text-decoration:underline;
			padding: 1% 0;
			margin-top:10px;
		}
		#imp div ul, #data div ul {
			list-style:none;
			padding: 1% 0;
		}
		#imp div ul li, #data div ul li {
			line-height:1.2rem;
			font-size:0.8rem;
		}
		#imp div p, #data div p {
			padding: 2% 0;
			font-size:0.8rem;
			line-height:1.2rem;
		}
		#imp div p a {
			color:#000;
			cursor:url('img/cursor2.svg'), pointer;
		}
		.mail-imp {
			color: #000;
			text-decoration:none;
		}

	/* back to top -----------------------------------------------------*/
		#backtop {
			position: fixed;
			right:5%;
			bottom:5%;
			display:none;
			z-index:150;
		}
		#backtop a {
			display:block;
			border:0px solid #000;
			padding:1rem;
			cursor: url('img/cursor2.svg'), pointer;
			transform: translateY(10px);
			transition:0.5s;
		}
		#backtop a:hover {
			transform: translateY(0px);
		}
		#backtop a img {
			height: 3rem;	
		}

	/* freie Klassen -----------------------------------------------------*/
		.wrapper {
			max-width:80vw;
			margin-left:auto;
			margin-right:auto;
		}
		.ftext { line-height: 2rem; font-size:1.5rem;}

	/* action-Bereich für bewegliche Elemente ---------------------------------------- */
		/* animation header -----------------------------*/
		.fadeInDown {
			-webkit-animation-name: fadeInDown;
			animation-name: fadeInDown;
			-webkit-animation-duration: 1s;
			animation-duration: 1s;         
			-webkit-animation-delay: 2s;
			animation-delay: 2s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		/* animation hallo -----------------------*/
		.fadeIn {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
			-webkit-animation-duration: 2s;
			animation-duration: 2s;	  
			-webkit-animation-delay: 0.5s;
			animation-delay: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			z-index:1;
		}
		/* einblenden von links ----------------------*/
		.moveleft {
			transform: translateX(-5vw);
			opacity: 0;
			transition: all 800ms; 
		}
		/* einblenden von unten ----------------------*/
		.moveup {
			transform: translateY(5vw);
			opacity: 0;
			transition: all 900ms;
		}
		.go { transform: translateX(0);opacity: 1; }
}


/* tablet / medium devices --------------------------------------------------------------*/
@media screen and (min-width:601px) and (max-width:991px) {
	/* header -----------------------------------------------------*/
		#head {
			position:fixed;
			top:0;
			width:100%;
			height:90px;
			padding-top:18px;
			z-index:100;
		}
		#scr-head-bg {
			position:fixed;
			top:0;
			width:100%;
			height:90px;
			background:#fff;
			display:none;
			z-index:50;
		}
		#head > div {
			position:relative;
		}
		h1 {
			position:absolute;
			top:12px;
			left:0px;
			z-index: 101;
		}
		h1 a {
			display:block;
			text-decoration:none;
			color: #000;
			text-transform:uppercase;
			font-size:1.2rem;
			font-weight:600;
			line-height:2rem;
			letter-spacing:0.2rem;	
			cursor: url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}

	/* navigation -----------------------------------------------------*/
		#topnav { 
			position:fixed;
			right:-100vw;
			top:0;
			background:#fff;
			width:100vw;
			height:100vh;
			overflow:scroll;
			transition:1s;
		}
		#topnav:target { right:0; }
		#topnav > p > a { 
			position:fixed;
			width:45px;
			height:45px;
			right:10%;
			background:#fff;
			display:block;
			text-align:center;
			top:25px;		
		}
		#topnav p a[href="#topnav"] { background: rgba(255,255,255,0); }
		#topnav p a[href="#closenav"] {
			opacity:0;
			width: 0px;
			height: 0px;
			transition:1s;
		}
		#topnav:target p a[href="#closenav"] {
			opacity:1;
			width:45px;
			height:45px;
		}	
		#topnav ul {
		  	list-style-type: none;
			padding: 80px 0;
		}
		#topnav ul li a {
			display:block;
			text-decoration:none;
			color: #000;
			text-transform:uppercase;
			font-size:2.5rem;
			font-weight:300;
			line-height:3rem;
			padding: 5% 10%;
			cursor: url('img/cursor2.svg'), pointer;
		}
		#topnav ul li a.akt {text-decoration:line-through;}

	/* start / EINS -----------------------------------------------------*/
		#start {
			min-height:100vh;
			background:#CFD0D1;
		}
		/* hallo -----------------------------------------------------*/
		#hallo {
			position:fixed;
			left:50%;
			top:50%;
			transform:translateX(-50%) translateY(-50%);
			width:50vw;
			z-index:1;
		}
		/* kapitel-indikatoren -----------------------------------------------------*/
		#element1,#element2, #element3 {
			position:relative;
			z-index:5;
		}
		#element1 { display:none; }
		#number1, #number2, #number3 {
			position:absolute;
			left:10vw;
			bottom:0px;
			width:200px;
			height:200px;
			background-image:url("img/article-indicator-chiffre1.svg");
			background-size:contain;
		}
		#number2 {background-image:url("img/article-indicator-chiffre2.svg");}
		#number3 {background-image:url("img/article-indicator-chiffre3.svg");}

	/* über / ZWEI -----------------------------------------------------*/
		h2 {
			text-transform:uppercase;
			font-weight:300;
			font-size:3rem;
			margin-bottom:2%;
		}
		h2 .bold { font-weight:600; }
		#ueber {
			padding:100px 10vw 100px 10vw;
			background:#fff;
			min-height:100vh;
			z-index:3;
		}
		#ueber > section > div { margin-top:40px;}
		#ueber p {margin:20px 0;}
		#moretext {
			line-height:0rem;
			opacity:0;
			transition:0.5s;
		}
		#checker-moretext:checked ~ #moretext {
			line-height:2rem;
			opacity:1;
			transition:0.5s;
		}
		#checker-moretext:checked ~ * .hidechecked { display:none; }
		.unfold { overflow:hidden; }
		.unfold .arrowright, .unfold .arrowleft {
			width:4rem;
			padding:4% 0;
			cursor:url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}
		.unfold .arrowright:hover { transform:translateX(10px); }
		.unfold .arrowleft { transform: translateX(10px); }
		.unfold .arrowleft:hover { transform: translateX(0px); }

	/* backgroundimage 1 -----------------------------------------------------*/
		.e-with-fixed-bg-me {
			width:100%;
			height:100vh;
			position:relative;
				}
		.bg-wrap-me {
			clip-path: circle();	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		.bg-me { 
			position:fixed;
			display: block;
			top:0;
			right:0;
			width:100vw;
			height:100vh;
			background-size:cover;
			background-position: center center;
			background-image: url("img/TB02.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* über2 / DREI -----------------------------------------------------*/
		#ueber2 {
			background:#F5DF4D;
			padding:0px 10vw;
			z-index:4;
		}
		h3 {
			text-transform: uppercase;
			font-weight:600;
			font-size:1.5rem;
			letter-spacing: 0.3rem;
			margin-bottom:10px;
		}

		/* accordion funktionalität -----------------------------------------------------*/
		input[name="accVita"],
		input[name="accSkills"],
		input[name="accRef"] { display:none; }

		.accSegment {
			overflow: hidden;
			padding: 10px 0px 2px 0px;
			max-width: 90vw;
			margin-left: auto;
			margin-right: auto;
		}
		.accSegment > div  {
			line-height:0rem;
			opacity:0;
			height:0;
			padding:0px;
			max-width:90vw;
			margin-left:auto;
			margin-right:auto;
			transition:0.5s;
		}		
		input[name="accVita"]:checked ~ #vita,
		input[name="accSkills"]:checked ~ #skills,
		input[name="accRef"]:checked ~ #ref {
			line-height:2rem;
			opacity:1;
			height:auto;
			padding:4% 0%;
		}
		/* accordion design -----------------------------------------------------*/
		label[for*="checker"],
		label[for*="close"] {
			cursor: url('img/cursor2.svg'), pointer;
		}
		#ueber2 h3 { 
			font-size:1.2rem; 
			padding-top:20px;
		}
		.accSegment ul { list-style:none; }
		.accSegment ul li, #ref p { 
			line-height:1.5rem;
			font-size:1.2rem;
			padding:10px 0px;
		}
		#skills ul li { padding:1px 0px; }

		/* accordion drehelement -----------------------------------------------------*/
		.accSegment > h2 label::before {
			content:"\2014";
			margin-right: 20px;
			display:inline-block;
			transition: 0.5s;
		}	
		input[name="accVita"]:checked ~ h2 label::before, 
		input[name="accSkills"]:checked ~ h2 label::before, 
		input[name="accRef"]:checked ~ h2 label::before { transform: rotate(45deg); }

	/* backgroundimage / VIER -----------------------------------------------------*/
		.e-with-fixed-bg {
			width:100%;
			height:100vh;
			position:relative;
				}
		.bg-wrap {
			clip:rect(0,auto,auto,0);	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		.bg1 { 
			position:fixed;
			display: block;
			top:0;
			right:0;
			width:100%;
			height:100%;
			background-size:cover;
			background-position: center center;
			background-image: url("img/gb-itma2019-01-orig.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* Projekte / FÜNF -----------------------------------------------------*/
		#projekte, #grafik {
			min-height:100vh;
			background:#fff;
			padding:0px 10vw;
			z-index:3;
		}
		.textside {
			padding-top:100px;			
			max-width:90vw;
			margin-left:auto;
			margin-right:auto;
			display:flex;
			justify-content:space-between;
		}
		#grafik .textside {text-align:right;}
		.textside div { flex-basis: 50%;}
		.textside div p {
			padding: 10% 0;
			line-height:2rem;
			font-size:1.5rem;
		}

	/* slideshow -----------------------------------------------------*/
		.slideshow {
			max-width:80vw;
			margin-left:auto;
			margin-right:auto;
			padding:8% 0% 20% 0%;
		}	
	
		/* next/ prev buttons */
		.sy-controls {display:block;}
		.sy-controls li {
			background:rgba(0,0,0,0);
			width: 7.5%;
		}
		.sy-controls li.sy-prev {
			left: -4em;
			top: 0; 
			transform:translateX(0px);
			transition:0.5s; }
		.sy-controls li.sy-prev:hover {
			transform:translateX(-10px);}
		.sy-controls li.sy-next {
			right: -4em;
			top: 0; 
			transform:translateX(0px);
			transition:0.5s; }
		.sy-controls li.sy-next:hover {
			transform:translateX(10px);}
		.sy-controls li a { transition:0.5s; }
		.sy-controls li.sy-prev a:after {
			content:"";
			background-image:url("img/arrow_left.svg");
			background-repeat:no-repeat;
			background-size:contain;
			background-position:center center;
		}
		.sy-controls li.sy-next a:after {
			content:"";
			background-image:url("img/arrow_right.svg");
			background-size:contain;
			background-repeat:no-repeat;
			background-position:center center;
		}
		.sy-controls li a:link, .sy-controls li a:visited {
			opacity:1; 
		}
		.sy-controls li a:hover, .sy-controls li a:focus {
			opacity:1;
			outline:none;
			cursor:url('img/cursor2.svg'), pointer;
		}
		.sy-controls li a:after { 
			position:absolute;
			background-color:rgba(255,255,255,0);
			width:2.5rem;
			height:2.5rem;
			left:50%;
			top:50%;
			margin-top:-1.25rem;
			margin-left:-1.25rem;
		}

		/* captions, styled fo the overlay variant */
		.sy-caption-wrap {
			position:absolute;
			bottom:-3rem;
			z-index:5;
			left:50%; }
		.sy-caption-wrap .sy-caption {
			position:relative;
			left:-50%;
			background-color:rgba(0,0,0,0);
			color:#000;
			text-transform:uppercase;
			line-height:1rem;
			font-size:0.8rem;
			font-weight:600;
			letter-spacing: 0.3rem;
		}

		/* pager bubbles */
		.sy-pager {display:none;}


	/* backgroundimage / SECHS -----------------------------------------------------*/
		.bg2 { 
			position:fixed;
			display: block;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-size:cover;
			background-position: center center;
			background-image: url("img/meta-haus-pub-01-orig.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* kontakt / SIEBEN -----------------------------------------------------*/
		#kontakt {
			min-height:100vh;
			background: #F5DF4D;
			padding:100px 10vw;
			z-index:3;
		}
		#kontakt > div {
			margin-bottom:100px;
			margin-top:50px;
		}
		#kontakt div p {
			line-height:2rem;
			font-size:1.5rem;
			text-align:left;
		}
		#kontakt form {
			width: 80vw;
			margin-left:auto;
			margin-right:auto;
			margin-bottom:50px;
		}
		input, textarea {
			width:80vw;
			border:none;
			border-bottom:2px solid #000;
			background:#F5DF4D;
			font-family:'Montserrat';
			font-size:1.2rem;
			text-transform:uppercase;
			letter-spacing:0.2rem;
			padding:0.5rem;
			outline:none; /*iOs*/
			border-radius:0; /*iOs*/
		}
		input:focus,
		textarea:focus { background:#FFF;}
		textarea { margin-bottom:30px; }
		input[type="submit"] {
			border:none;
			text-align:center;
			line-height:2rem;
			font-weight:600;
			cursor:url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}
		#inputsend + .inputline {
			background:#000;
			width:100%;
			height:2px;
			padding:0px;
			margin-left:auto;
			margin-right:auto;
			opacity:0; 
			transform:translateY(10px);	
			transition:0.5s;
		}
		#inputsend:hover + .inputline {
			opacity:1;
			transform:translateY(0px);
		} 
		.mail {
			font-weight:600;
			text-decoration:none;
			color:#000;
		}
		.mail:hover {
			color:#FFF;
		}

	/* footer / ACHT -----------------------------------------------------*/
		#ende {
			display:flex;
			flex-wrap:wrap;
			justify-content:space-between;
			max-width: 80vw;
			margin-left: auto;
			margin-right: auto;
			padding: 20px 0px;
			z-index:3;
		}
		#ende > nav {
			display: flex;
			justify-content:space-between;
		}
		#ende > nav > ul {
			display: flex;
			justify-content:space-between;
		}
		#ende p { font-size:0.8rem; }
		#ende > p { padding-top:4px; }
		#ende nav li { list-style:none; }
		#ende > nav > ul > li > a {
			text-decoration:none;
			text-transform:uppercase;
			font-size:0.8rem;
			color: #000;
			display:block;
			padding:4px 10px;
		}
		#ende nav ul li a:hover {
			color:#f5df4d;
			cursor: url('img/cursor2.svg'), pointer;
		}
		#insta, #linked {
			width:18px;
			height:18px;
			margin-right: 10px;
			background: url("img/insta_b.svg") no-repeat;
			background-position: center center;
			cursor: url('img/cursor2.svg'), pointer;
		}
		#linked { background: url("img/linked_b.svg") no-repeat; margin-left:10px; }
		#insta:hover { background: url("img/insta_y.svg") no-repeat; }
		#linked:hover { background: url("img/linked_y.svg") no-repeat; }


	/* impressum + datenschutz -----------------------------------------------------*/
		#impframe, dataframe { position:relative; }
		#impframe > p > a,
		#dataframe > p > a {
			display:block;
			color:#000;
			text-decoration:none;
			text-transform:uppercase;
			font-size:0.8rem;
			padding:4px 10px;
		}
		#impframe > p > a:hover,
		#dataframe > p > a:hover { color:#F5DF4D;} 
		#imp, #data {
			position:fixed;
			right:0;
			left:0;
			bottom:-200vh;
			height:100vh;
			width:100vw;
			background:#FFF;
			z-index:200;
			overflow:scroll;
			transition:1s;
		}
		#imp:target, #data:target { bottom:0; }
		#imp > p > a,
		#data > p > a {
			position:absolute;
			width:40px;
			height:40px;
			right:5%;
			display:block;
			text-align:center;
			padding:2px 0px;
			bottom:90vh;
		}
		#imp p a img,
		#data p a img {
			width:40px;
			height:40px;
			padding-bottom:3px;
			display:inline-block;
			cursor:url('img/cursor2.svg'), pointer;
		}
		#imp p a[href="#closeimp"],
		#data p a[href="#closedata"] { display:none; }

		#imp:target p a[href="#closeimp"],
		#data:target p a[href="#closedata"]{ display:block; }		

		#imp div, #data div {
			max-width:80%;
			margin-left:auto;
			margin-right:auto;
			margin-top:15vh;
			margin-bottom:10%;
		}
		#imp h3, #data h3 {
			margin-bottom:15px;
		}
		#imp h4, #data h4 {
			line-height:1rem;
			font-size:0.8rem;
			font-weight:400;
			text-decoration: underline;
			padding: 1% 0;
			margin-top:10px;
		}
		#imp div ul, #data div ul {
			list-style:none;
			padding: 1% 0;
		}
		#imp div ul li, #data div ul li {
			line-height:1.2rem;
			font-size:0.8rem;
		}
		#imp div p, #data div p {
			padding: 2% 0;
			font-size:0.8rem;
			line-height:1.2rem;
		}
		#imp div p a {
			color:#000;
			cursor:url('img/cursor2.svg'), pointer;
		}
		.mail-imp {
			color: #000;
			text-decoration:none;
		}

	/* back to top -----------------------------------------------------*/
		#backtop {
			position: fixed;
			right:5%;
			bottom:5%;
			display:none;
			z-index:150;
		}
		#backtop a {
			display:block;
			border:0px solid #000;
			padding:1rem;
			cursor: url('img/cursor2.svg'), pointer;
			transform: translateY(10px);
			transition:0.5s;
		}
		#backtop a:hover {
			transform: translateY(0px);
		}
		#backtop a img {
			height: 3rem;	
		}

	/* freie Klassen -----------------------------------------------------*/
		.wrapper {
			max-width:80vw;
			margin-left:auto;
			margin-right:auto;
		}
		.ftext { line-height: 2rem; font-size:1.5rem;}

	/* action-Bereich für bewegliche Elemente ---------------------------------------- */
		/* animation header -----------------------------*/
		.fadeInDown {
			-webkit-animation-name: fadeInDown;
			animation-name: fadeInDown;
			-webkit-animation-duration: 1s;
			animation-duration: 1s;         
			-webkit-animation-delay: 2s;
			animation-delay: 2s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		/* animation hallo -----------------------*/
		.fadeIn {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
			-webkit-animation-duration: 2s;
			animation-duration: 2s;	  
			-webkit-animation-delay: 0.5s;
			animation-delay: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			z-index:1;
		}
		/* einblenden von links ----------------------*/
		.moveleft {
			transform: translateX(-5vw);
			opacity: 0;
			transition: all 800ms; 
		}
		/* einblenden von unten ----------------------*/
		.moveup {
			transform: translateY(5vw);
			opacity: 0;
			transition: all 900ms;
		}
		.go { transform: translateX(0);opacity: 1; }
}


/* desktop / large devices --------------------------------------------------------------*/
@media screen and (min-width:992px) {
	/* header -----------------------------------------------------*/
		#head {
			position:fixed;
			top:0;
			width:100%;
			height:90px;
			padding-top:20px;
			z-index:100;
		}
		#scr-head-bg {
			position:fixed;
			top:0;
			width:100%;
			height:92px;
			background: #fff;
			display:none;
			z-index:50;
		}
		#head > div {
			display:flex;
			justify-content:space-between;
		}
		h1 a {
			display:block;
			text-decoration:none;
			color: #000;
			text-transform:uppercase;
			font-size:1.5rem;
			font-weight:600;
			line-height:3rem;
			letter-spacing:0.3rem;	
			cursor: url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}
		h1:after {
			content:"";
			display:block;
			width:100%;
			height:2px;
			background:#000;
			transform:translateY(10px);
			opacity:0;
			transition:0.5s;
		}
		h1:hover:after {
			transform:translateY(0px);
			opacity:1;
		}

	/* navigation -----------------------------------------------------*/
		#topnav {  }
		#topnav > p > a {display:none;}
		#topnav ul {
			list-style:none;
			display:flex;
			justify-content:flex-end;
		}
		#topnav ul li a {
			display:block;
			text-decoration:none;
			color: #000;
			text-transform:uppercase;
			font-size:1.5rem;
			font-weight:400;
			line-height:3rem;
			padding: 0 2rem;
			cursor: url('img/cursor2.svg'), pointer;
		}
		.line {
			width:80%;
			margin-left:auto;
			margin-right:auto;
			height:2px;
			background:#000;
			transform:translateY(10px);
			opacity:0;
			transition:0.5s;
		}
		#topnav ul li a:hover + .line, #topnav ul li a.akt + .line {
			transform:translateY(0px);
			opacity:1;	
		}

	/* start / EINS -----------------------------------------------------*/
		#start {
			min-height:100vh;
			background:#CFD0D1;
		}
		/* hallo -----------------------------------------------------*/
		#hallo {
			position:fixed;
			left:50%;
			top:50%;
			transform:translateX(-50%) translateY(-50%);
			width:40vw;
			z-index:1;
		}
		/* kapitel-indikatoren -----------------------------------------------------*/
		#element1,#element2, #element3 {
			position:relative;
			z-index:5;
		}
		#element1 { display:none; }
		#number1, #number2, #number3 {
			position:absolute;
			left:5vw;
			bottom:0px;
			width:200px;
			height:200px;
			background-image:url("img/article-indicator-chiffre1.svg");
			background-size:contain;
		}
		#number2 {background-image:url("img/article-indicator-chiffre2.svg");}
		#number3 {background-image:url("img/article-indicator-chiffre3.svg");}

	/* über / ZWEI -----------------------------------------------------*/
		h2 {
			text-transform:uppercase;
			font-weight:300;
			font-size:4rem;
			padding-bottom:30px;
		}
		h2 .bold { font-weight:600; }

		#ueber {
			display:flex;
			justify-content: space-between;
			padding:100px 5vw;
			background:#fff;
			min-height:100vh;
			z-index:3;
		}
		#ueber section { flex-basis:45%; }
		#ueber p {margin:20px 0;}
		#moretext {
			line-height:0rem;
			opacity:0;
			transition:0.5s;
		}
		#checker-moretext:checked ~ #moretext {
			line-height:2rem;
			opacity:1;
			transition:0.5s;
		}
		#checker-moretext:checked ~ * .hidechecked { display:none; }
		.unfold { overflow:hidden; }
		.unfold .arrowright, .unfold .arrowleft {
			width:4rem;
			padding:4% 0;
			cursor:url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}
		.unfold .arrowright:hover { transform:translateX(10px); }
		.unfold .arrowleft { transform: translateX(10px); }
		.unfold .arrowleft:hover { transform: translateX(0px); }

	/* backgroundimage 1 -----------------------------------------------------*/
		.e-with-fixed-bg-me {
			width:100%;
			height:80vh;
			position:relative;
				}
		.bg-wrap-me {
			clip-path: circle();	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		.bg-me { 
			position:fixed;
			display: block;
			top:0;
			right:0;
			width:50vw;
			height:100vh;
			background-size:cover;
			background-position: center right;
			background-image: url("img/TB02.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* über2 / DREI -----------------------------------------------------*/
		#ueber2 {
			background:#F5DF4D;
			z-index:4;
		}
		#ueber2 h2 { padding-bottom:0px;}
		h3 {
			text-transform: uppercase;
			font-weight:600;
			font-size:1.5rem;
			letter-spacing: 0.3rem;
			margin-bottom:10px;
		}
		/* accordion funktionalität -----------------------------------------------------*/
		input[name="accVita"],
		input[name="accSkills"],
		input[name="accRef"] { display:none; }

		.accSegment {
			overflow: hidden;
			padding: 20px 0px;
			max-width: 90vw;
			margin-left: auto;
			margin-right: auto;
		}
		.accSegment > div  {
			line-height:0rem;
			opacity:0;
			height:0;
			padding:0px;
			max-width:90vw;
			margin-left:auto;
			margin-right:auto;
			display:flex;
			flex-wrap:wrap;
			justify-content:space-between;
			transition:0.5s;
		}		
		.accSegment > div > div { max-width:40vw;}

		input[name="accVita"]:checked ~ #vita,
		input[name="accSkills"]:checked ~ #skills,
		input[name="accRef"]:checked ~ #ref {
			line-height:2rem;
			opacity:1;
			height:auto;
			padding:4% 0%;
		}
		.space-top {margin-top:20px;}

		/* accordion design -----------------------------------------------------*/
		label[for*="checker"],
		label[for*="close"] {
			cursor: url('img/cursor2.svg'), pointer;
		}
		.accSegment ul { list-style:none; }
		.accSegment ul li, #ref p { 
			line-height:2rem;
			font-size:1.5rem;
			padding:10px 0px;
		}
		#skills ul li { padding:5px 0px; }

		/* accordion drehelement -----------------------------------------------------*/
		.accSegment > h2 label::before {
			content:"\2014";
			margin-right: 20px;
			display:inline-block;
			transition: 0.5s;
		}	

		input[name="accVita"]:checked ~ h2 label::before, 
		input[name="accSkills"]:checked ~ h2 label::before, 
		input[name="accRef"]:checked ~ h2 label::before { transform: rotate(45deg); }

	/* backgroundimage / VIER -----------------------------------------------------*/
		.e-with-fixed-bg {
			width:100%;
			height:100vh;
			position:relative;
				}
		.bg-wrap {
			clip:rect(0,auto,auto,0);	
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		.bg1 { 
			position:fixed;
			display: block;
			top:0;
			right:0;
			width:100%;
			height:100%;
			background-size:cover;
			background-position: center center;
			background-image: url("img/gb-itma2019-01-orig.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* Projekte / FÜNF -----------------------------------------------------*/
		#projekte, #grafik {
			min-height:100vh;
			background:#fff;
			z-index:3;
		}
		.textside {
			padding-top:100px;			
			max-width:90vw;
			margin-left:auto;
			margin-right:auto;
			display:flex;
			justify-content:space-between;
		}
		#grafik .textside {text-align:right;}
		.textside div { flex-basis: 50%;}
		.textside div p {
			padding:20px 0px;
			line-height:2rem;
			font-size:1.5rem;
		}

	/* slideshow -----------------------------------------------------*/
		.slideshow {
			max-width:70vw;
			margin-left:auto;
			margin-right:auto;
			padding:8%;
		}	
		/* next/ prev buttons */
		.sy-controls {display:block;}
		.sy-controls li {
			background:rgba(0,0,0,0);
			width: 7.5%;
		}
		.sy-controls li.sy-prev {
			left: -6em;
			top: 0; 
			transform:translateX(0px);
			transition:0.5s; }
		.sy-controls li.sy-prev:hover {
			transform:translateX(-10px);}
		.sy-controls li.sy-next {
			right: -6em;
			top: 0; 
			transform:translateX(0px);
			transition:0.5s; }
		.sy-controls li.sy-next:hover {
			transform:translateX(10px);}
		.sy-controls li a { transition:0.5s; }
		.sy-controls li.sy-prev a:after {
			content:"";
			background-image:url("img/arrow_left.svg");
			background-repeat:no-repeat;
			background-size:contain;
			background-position:center center;
		}
		.sy-controls li.sy-next a:after {
			content:"";
			background-image:url("img/arrow_right.svg");
			background-size:contain;
			background-repeat:no-repeat;
			background-position:center center;
		}
		.sy-controls li a:link, .sy-controls li a:visited {
			opacity:1; 
		}
		.sy-controls li a:hover, .sy-controls li a:focus {
			opacity:1;
			outline:none;
			cursor:url('img/cursor2.svg'), pointer;
		}
		.sy-controls li a:after { 
			position:absolute;
			background-color:rgba(255,255,255,0);
			width:4rem;
			height:4rem;
			left:50%;
			top:50%;
			margin-top:-2rem;
			margin-left:-2rem;
		}

		/* captions, styled fo the overlay variant */
		.sy-caption-wrap {
			position:absolute;
			bottom:-4rem;
			z-index:5;
			left:50%; }
		.sy-caption-wrap .sy-caption {
			position:relative;
			left:-50%;
			background-color:rgba(0,0,0,0);
			color:#000;
			text-transform:uppercase;
			line-height:1rem;
			font-size:1rem;
			font-weight:600;
			letter-spacing: 0.3rem;
		}

		/* pager bubbles */
		.sy-pager {display:none;}


	/* backgroundimage / SECHS -----------------------------------------------------*/
		.bg2 { 
			position:fixed;
			display: block;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-size:cover;
			background-position: center center;
			background-image: url("img/meta-haus-pub-01-orig.jpg");
			transform: translateZ(0);
			will-change:transform;
		}

	/* kontakt / SIEBEN -----------------------------------------------------*/
		#kontakt {
			min-height:100vh;
			background: #F5DF4D;
			padding:100px 5vw;
			z-index:3;
		}
		#kontakt > div {
			max-width: 50vw;
			margin-bottom:200px;
			margin-right:50vw;
			padding:10px 0px;
		}
		#kontakt div p {
			line-height:2rem;
			font-size:1.5rem;
			text-align:left;
		}
		#kontakt form {
			width: 60vw;
			margin-left:auto;
			margin-right:auto;
			margin-bottom:50px;
		}
		input, textarea {
			width:60vw;
			border:none;
			border-bottom:2px solid #000;
			background:#F5DF4D;
			font-family:'Montserrat';
			font-size:1.5rem;
			text-transform:uppercase;
			letter-spacing:0.3rem;
			padding:1rem;
			outline:none; /*iOs*/
			border-radius:0; /*iOs*/
		}
		input:focus,
		textarea:focus { background:#FFF;}
		textarea { margin-bottom:30px; }
		input[type="submit"] {
			border:none;
			text-align:center;
			line-height:3rem;
			font-weight:600;
			cursor:url('img/cursor2.svg'), pointer;
			transition:0.5s;
		}
		#inputsend + .inputline {
			background:#000;
			width:100%;
			height:2px;
			padding:0px;
			margin-left:auto;
			margin-right:auto;
			opacity:0; 
			transform:translateY(10px);	
			transition:0.5s;
		}
		#inputsend:hover + .inputline {
			opacity:1;
			transform:translateY(0px);
		} 
		.mail {
			font-weight:600;
			text-decoration:none;
			color:#000;
		}
		.mail:hover {
			color:#FFF;
		}
	
	/* footer / ACHT -----------------------------------------------------*/
		#ende {
			display:flex;
			flex-wrap:wrap;
			justify-content:space-between;
			padding: 15px 0px;
			z-index:3;
		}
		#ende > nav {
			display: flex;
			justify-content:space-between;
		}
		#ende > nav > ul {
			display: flex;
			justify-content:space-between;
		}
		#ende nav li {
			list-style:none;
		}
		#ende > p {
			font-size:0.8rem;
			padding-top:12px;
		}
		#ende nav ul li a {
			text-decoration:none;
			text-transform:uppercase;
			font-size:0.8rem;
			color: #000;
			display:block;
			padding:12px 10px;
		}
		#ende nav ul li a:hover {
			color:#f5df4d;
			cursor: url('img/cursor2.svg'), pointer;
		}
		#insta, #linked {
			width:18px;
			height:18px;
			margin:0px 10px;
			margin-top:10px;
			background: url("img/insta_b.svg") no-repeat;
			background-position: center center;
			cursor: url('img/cursor2.svg'), pointer;
		}
		#linked { background: url("img/linked_b.svg") no-repeat; }
		#insta:hover { background: url("img/insta_y.svg") no-repeat; }
		#linked:hover { background: url("img/linked_y.svg") no-repeat; }


	/* impressum + datenschutz -----------------------------------------------------*/
		#impframe, dataframe { position:relative; }
		#impframe > p > a,
		#dataframe > p > a {
			display:block;
			color:#000;
			text-decoration:none;
			text-transform:uppercase;
			font-size:0.8rem;
			padding:12px 10px;
		}
		#impframe > p > a:hover,
		#dataframe > p > a:hover { color:#F5DF4D;} 
		#imp, #data {
			position:fixed;
			right:0;
			left:0;
			bottom:-200vh;
			height:100vh;
			width:100vw;
			background:#FFF;
			z-index:200;
			overflow:scroll;
			transition:1s;
		}
		#imp:target, #data:target { bottom:0; }
		#imp > p > a,
		#data > p > a {
			position:absolute;
			width:40px;
			height:40px;
			right:5%;
			display:block;
			text-align:center;
			padding: 2px 0px;
			bottom:90vh;
		}
		#imp p a img,
		#data p a img {
			width:40px;
			height:40px;
			padding-bottom:3px;
			display:inline-block;
			cursor:url('img/cursor2.svg'), pointer;
		}
		#imp p a[href="#closeimp"],
		#data p a[href="#closedata"] { display:none; }

		#imp:target p a[href="#closeimp"],
		#data:target p a[href="#closedata"]{ display:block; }		

		#imp div, #data div {
			max-width:80%;
			margin-left:auto;
			margin-right:auto;
			margin-top:12vh;
			margin-bottom:10%;
		}
		#imp h3, #data h3 {
			margin-bottom:15px;
		}
		#imp h4, #data h4 {
			line-height:1rem;
			font-size:0.8rem;
			font-weight:400;
			text-decoration: underline;
			padding: 1% 0;
		}
		#imp div ul, #data div ul {
			list-style:none;
			padding: 1% 0;
		}
		#imp div ul li, #data div ul li {
			line-height:1.2rem;
			font-size:0.8rem;
		}
		#imp div p, #data div p {
			padding: 1% 0;
			font-size:0.8rem;
			line-height:1.2rem;
		}
		#imp div p a {
			color:#000;
			cursor:url('img/cursor2.svg'), pointer;
		}
		.mail-imp {
			text-transform:lowercase;
			text-decoration:none;
			color:#000;
		}

	/* back to top -----------------------------------------------------*/
		#backtop {
			position: fixed;
			right:4vw;
			bottom:5rem;
			display:none;
			z-index:150;
		}
		#backtop a {
			display:block;
			border:0px solid #000;
			padding:1rem;
			cursor: url('img/cursor2.svg'), pointer;
			transform: translateY(10px);
			transition:0.5s;
		}
		#backtop a:hover {
			transform: translateY(0px);
		}
		#backtop a img {
			height: 4rem;	
		}

	/* freie Klassen -----------------------------------------------------*/
		.wrapper {
			max-width: 90vw;
			margin-left: auto;
			margin-right: auto;
		}
		.ftext { line-height: 2rem; font-size:1.5rem;}

	/* action-Bereich für bewegliche Elemente ---------------------------------------- */
		/* animation header -----------------------------*/
		.fadeInDown {
			-webkit-animation-name: fadeInDown;
			animation-name: fadeInDown;
			-webkit-animation-duration: 1s;
			animation-duration: 1s;         
			-webkit-animation-delay: 2s;
			animation-delay: 2s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		/* animation hallo -----------------------*/
		.fadeIn {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
			-webkit-animation-duration: 2s;
			animation-duration: 2s;	  
			-webkit-animation-delay: 0.5s;
			animation-delay: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			z-index:1;
		}
		/* einblenden von links ----------------------*/
		.moveleft {
			transform: translateX(-5vw);
			opacity: 0;
			transition: all 800ms; 
		}
		/* einblenden von unten ----------------------*/
		.moveup {
			transform: translateY(5vw);
			opacity: 0;
			transition: all 900ms;
		}
		.go { transform: translateX(0);opacity: 1; }
	
}


/* --------- animation keyframes / webkit-keyframes --------------------*/
	@-webkit-keyframes fadeInDown {
		0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		}
		100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
		}
	}
	@keyframes fadeInDown {
		0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		}
		100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
		}
	}
	@-webkit-keyframes fadeIn {
		0% { opacity: 0;}
		100% { opacity: 1; }
	}
	@keyframes fadeIn {
		0% { opacity: 0; }
		100% { opacity: 1; }
	} 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10 + IE11 CSS styles go here */
		 .e-with-fixed-bgme, .bgme-wrap, .bgme, .e-with-fixed-bg, .bg-wrap, .bg1, .bg2 { display:none; }
		
		#ueber .window {
				background-image: url("img/TB02.jpg");
				background-position: center right;
				background-size: 100vh;
				background-repeat: no-repeat;
				background-attachment: fixed;
				border-radius:50vw;
				width:40vw;
				height:80vh;
				}
		#bgimg1 {
				background-image: url("img/gb-itma2019-01-orig.jpg");
				min-height: 100vh;
				background-attachment: fixed;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		#bgimg2 {
				background-image: url("img/meta-haus-pub-01-orig.jpg");
				min-height: 100vh;
				background-attachment: fixed;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
	}