/* @import url('http://www.jennifer-genova.de/fonts/featherly/styles.css'); */
/*@import url(//db.onlinewebfonts.com/c/3a3a19f140d07620fa88224d741c6bcf?family=featherly);*/
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Prata|Dancing+Script&display=swap');

/*@font-face {
  font-family: 'featherly';
  src: url('featherly.eot'); / IE9 Compat Modes /
  src: url('featherly.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
       url('featherly.woff2') format('woff2'),  / Super Modern Browsers /
       url('featherly.woff') format('woff'), / Pretty Modern Browsers /
       url('featherly.ttf')  format('truetype'), / Safari, Android, iOS /
       url('featherly.svg#featherly') format('svg'); / Legacy iOS /
}*/

@font-face {
  font-family: featherly;
  src: url(featherly.ttf);
}

/* Resets */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; }
article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: block; }
a img { border: 0; }
address { font-style: normal; }

img {
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
	pointer-events:none
}
img::selection { background: transparent; outline: none; }
a::selection, a:active { background: transparent; outline: none; }

*:focus { outline: none; }

/*html { scroll-behavior: smooth; }*/

/* Variables */
:root {
  --nav-height: 90px;
  --nav-height-compact: 72px;
  --text-color: rgba(93, 93, 93, 1);
  /* --text-color: rgba(76, 44, 45, 1); */
  --background-color: rgba(255, 250, 243, 1); /* #fffaf3 */
  --background-color2: rgba(255, 255, 255, 1);
  
   /* Rosa Hintergrund in 0 7 6 13 cmyk */
   --background-color: rgb(230, 220, 217);
   
   /* Navi in 4 6 0 35 omyk */
   --nav-background-color: rgb(182, 179, 184);
  
  --social-icon-color: rgb(255,255,255);
  --color1: rgb(255,255,255);
  --color2: rgb(93,93,93);
  --color3: #D1AF8C;
  --color3: rgb(182, 179, 184);
  /* --color3: #f6dec6; */
  --color4: rgb(192,192,192);
  --color5: rgb(230, 220, 217);
  --headline-color: var(--color3);
  --shadow1: 0px 0px 9px rgba(0,0,0,0.2);
  --font-size-mobile: 17px;
}

/* General formatting */
a { color: #D9B282; text-decoration: none; }
a:hover { text-decoration: underline; color: #BF9169; }
body { background: var(--background-color); color: var(--text-color); font-family: 'Lato', sans-serif; font-size: 18px; font-weight: 400; line-height: 27px; }
body.no-scroll { overflow: hidden; }

h1, h2 { color: var(--headline-color); font-family: 'Prata', serif; font-weight: 400; margin: 72px 0 45px 0; }
h1 { background-image: linear-gradient(var(--color3), var(--color3)); background-position: 0 bottom; background-repeat: no-repeat; background-size: 0 0; font-size: 54px; font-weight: 300; line-height: 63px; padding-bottom: 0; }
h2 { color: var(--color2); font-size: 34px; font-weight: 300; line-height: 30px; }
p { margin: 27px 0; }

.section-content { margin: 0 auto; margin-bottom: 90px; max-width: 1280px; width: 90vw; }
.section-full { align-items: center; display: flex; justify-content: center; width: 100%; }
.full-height { min-height: 100vh; }
.full-height.scroll-stop { min-height: calc(100vh - var(--nav-height-compact)); }
.scroll-stop { padding-top: var(--nav-height-compact); }
#home.scroll-stop { padding-top: 0; }

.section-subtitle { font-family: featherly ,'Dancing Script', cursive; font-size: 45px; /*font-weight: bold;*/ word-spacing: 5px; margin-bottom: 72px; opacity: 0; padding-left: 29px; transform: translate(0, -18px); transition: transform 900ms ease, opacity 900ms; }
.inview .section-subtitle { opacity: 1; transform: translate(0, -2px); }
.bg1 .section-subtitle { color: var(--color1); }
.bg2 .section-subtitle { color: var(--color4); }

.flex { display: flex; }

/* .bg1 { background-color: rgb(255,255,255); } */
.bg1 { background-color: var(--background-color); }
.bg1 h1 { background-image: linear-gradient(var(--color1), var(--color1)); background-position: left 0 bottom 5px; background-size: 0 2px; color: var(--color2); padding-bottom: 5px; margin-bottom: 0; transition: background-size 450ms ease 450ms; }
.bg1.inview h1 { background-size: 16px 2px; }

.bg2 { color: rgb(255,255,255); background-color: var(--background-color2); }
/* .bg2 { background-color: var(--background-color); } */
.bg2 h1 { background-image: linear-gradient(var(--color4),var(--color4)); background-position: left 0 bottom 5px; background-size: 0 2px; color: var(--color2); padding-bottom: 5px; margin-bottom: 0; transition: background-size 450ms ease 450ms; }
.bg2.inview h1 { background-size: 16px 2px; }

.bg3 { background-color: var(--color2); color: var(--color1); }
.bg3 { background-color: var(--background-color); }
.bg3 h1 { background-image: linear-gradient(var(--color5),var(--color5)); background-size: 0 1px; color: var(--color2); padding-bottom: 27px; transition: background-size 450ms ease 450ms; }
.bg3.inview h1 { background-size: 45px 3px; }

.inview-fade { opacity: 0.0; transition: opacity 900ms ease-out; }
.inview-fade.inview { opacity: 1.0; }

.inview-movedown { transform: translate(0, -90px); transition: all 900ms ease-out; }
.inview-movedown.inview { transform: translate(0, 0); }

.inview-moveup { transform: translate(0, 90px); transition: all 900ms ease-out; }
.inview-moveup.inview { transform: translate(0, 0); }

.inview-moveleft { transform: translate(90px, 0); transition: all 900ms ease-out; }
.inview-moveleft.inview { transform: translate(0, 0); }

.inview-moveright { transform: translate(-90px, 0); transition: all 900ms ease-out; }
.inview-moveright.inview { transform: translate(0, 0); }

/* Startseite */
#page-home #slideshow-wrapper { height: 100vh; left: 0; position: fixed; top: 0; width: 100%; }
#page-home #home { height: 100vh; overflow: hidden; width: 100%; }
#page-home #home .section-content { color: rgb(255,255,255); display: flex; height: 100vh; margin-bottom: 0; }
#page-home #home .section-content h1 { background: none; color: rgb(255,255,255); margin-bottom: 0; padding-bottom: 0; }

/* About me */
#about { /* background: var(--color2) url(../img/3D/lotus.png) no-repeat fixed left 180px top -400px; background-size: 200px; */ overflow: hidden; position: relative; }
/* #about h1 { background-image: linear-gradient(var(--color1),var(--color1)); color: var(--color3); } */
#about-content { align-items: flex-start; display: flex; justify-content: flex-end; position: relative; }
#about-text, #about-portrait { max-width: 622px; width: calc(45vw - 18px); }
#about-text { box-shadow: var(--shadow1); max-width: 532px; width: calc(45vw - 108px); }
#about-portrait { box-shadow: var(--shadow1); left: 0; position: absolute; top: 0; z-index: 2; opacity: 1.0; }
#about-portrait.fixed { opacity: 1.0; }
#about-text { 
				background: var(--color1); 
				background-image: linear-gradient(var(--color3),var(--color3)); 
				background-repeat: no-repeat;
				background-position: right top;
				background-size: 4px 100%;
				/*border-top: 9px solid var(--color3); */
				color: var(--color2); padding: 45px 72px 45px 107px; transform: translate(0, -54px); z-index: 1; 
			}
#about-portrait { background: var(--color2) url(../img/about-me.jpg); background-size: cover; height: 45vw; max-height: 622px; }

#about-portrait { background-position: center top; height: 100%; max-height: 100%; max-width: calc(1280px / 2); width: calc(45vw); }
#about-text { padding: 54px 45px; transform: none; max-width: calc(1280px / 2 - 90px); width: calc(45vw - 90px); }
#about-text p:first-child { margin-top: 0; }
#about-text .hidden { }
#about-text .hidden p { height: 0; overflow: hidden; transition: all 270ms ease-out; }
#about-text .hidden.active p { height: auto; }

#center-line { display: none; position: fixed; top: 50vh; left: 0; width: 100%; height: 1px; background: red; z-index: 9000; }

h1 { background-position: center bottom; text-align: center; }
.bg1 h1 { background-image: none; }
.bg2 h1 { background-image: none; }
.section-subtitle { padding: 0; text-align: center; transform: translate(0, -18px); }

/* < 900px */
@media screen and (max-width: 1080px)
{
	h1 { background-position: center bottom; text-align: center; }
	.bg1 h1 { background-image: none; }
	.bg2 h1 { background-image: none; }
	.section-subtitle { padding: 0; text-align: center; transform: translate(0, -18px); }
	#about-content { box-shadow: var(--shadow1); flex-wrap: wrap; }
	#about-portrait { background-position: center 0; box-shadow: none; height: 70vw; max-width: 90vw; position: relative; width: 90vw; }
	#about-text { background-size: 100% 4px; /*margin: -90px 5% 90px 5%;*/ max-width: 90vw; padding: 9%; transform: translate(0, 0); width: 100%; }
	body { font-size: var(--font-size-mobile); }
}

/* Slidehsow */
#slideshow-wrapper { filter: blur(0); transition: filter 540ms ease; }
#slideshow-wrapper.blurred { filter: blur(9px); }
#slideshow { background-color: rgb(255,255,255); height: 100vh; position: relative; width: 100%; }
#slideshow .slide { align-items: center; background-color: #000; background-repeat: no-repeat; background-size: cover; display: flex; height: 100vh; justify-content: center; left: 0; opacity: 0.0; position: absolute; top: 0; transition: opacity 1400ms ease; width: 100%; }
#slideshow .slide.active { opacity: 1.0; transition: opacity 1400ms ease; width: 100%; }
#slideshow .slide .caption h1 { color: rgb(255,255,255); font-size: 110px; font-weight: 300; line-height: 70px; text-align: center; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
#slide1 { background-image: url(../img/slide1.jpg); }
#slide2 { background-image: url(../img/slide2.jpg); }
#slideshow #slide3.slide { 	background-image: url(../img/home.png); 
			background-color: var(--color5);
			background-position: calc(50% - 220px) 129px;
			background-size: auto 129%;}

@keyframes jennifer {
  	from {
		letter-spacing: 18px;
		opacity: 0.0;
		transform: translate(54px, -54px);
  	}
  	to {
		letter-spacing: 0;
		opacity: 1.0;
	 	transform: translate(45px, 0);
  	}
}

@keyframes genova {
  	from {
		letter-spacing: 18px;
		opacity: 0.0;
		transform: translate(-54px, 54px);
  	}
  	to {
		letter-spacing: 0;
		opacity: 1.0;
	 	transform: translate(-45px, 0);
  	}
}

/* The typing effect */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: white; }
}

/* #home-content { } */
#jennifer-genova { transform: translate(-45px, -29px); /*text-shadow: 0 2px 9px rgba(0,0,0,0.2);*/ }
#jennifer { animation: jennifer 900ms ease-out; display: inline-block; transform: translate(45px, 0); }
#genova { animation: genova 900ms ease-out; display: inline-block; transform: translate(-45px, 0); }
#jennifer-genova-subtitle { 
							animation: typing 1.8s steps(62, end) 720ms forwards, blink-caret .54s step-end 720ms 2; 
							/* background: -webkit-linear-gradient(108deg, rgb(255,255,255), var(--color3), rgb(255,255,255), var(--color3));  */
							border-right: 2px solid transparent; 
							color: var(--color2); 
							/* display: none; */
							font-family: featherly ,'Dancing Script', cursive;
							font-size: 54px; 
							/* letter-spacing: 1px;  */
							line-height: 54px;
							margin: 0 auto; 
							margin-top: 9px; 
							overflow: hidden; 
							padding-top: 0; 
							/* padding-left: 2px;  */
							text-align: center; 
							transform: translate(0, -39px);
							/* -webkit-background-clip: text;  */
							/* -webkit-text-fill-color: transparent;  */
							white-space: nowrap; 
							width: 0; }
							
.scroll-button { 
				background: url(../img/gallery/arrow.svg); 
				background-position: 54% center;
				background-repeat: no-repeat; 
				background-size: 50%; 
				border: 2px solid rgba(255,255,255,0.0); 
				border-radius: 50%; 
				height: 45px;
				margin: 27px auto 0;
				transform: rotate(90deg);
				transition: background-position 180ms ease-out, border-color 180ms linear; 
				width: 45px;
				z-index: 90;
			}

.scroll-circle {	background: url(../img/gallery/circle.svg); 
				background-position: center center;
				background-repeat: no-repeat; 
				background-size: 45px;
				height: 100%;
				left: 0;
				opacity: 1.0;
				position: absolute;
				top: 0;
				transition: background-position 270ms ease-out, opacity 270ms ease-out, transform 450ms ease-out;
				width: 100%;
				z-index: -1;
			}
			
.scroll-button:hover .scroll-circle { opacity: 1.0; transform: rotateY(180deg); }
.scroll-button a { display: block; height: 100%; width: 100%; }

@media screen and (max-width: 540px)
{
	/*#slideshow #slide3.slide { background-position: calc(50% + 27px) 0; }*/
	#page-home #home .section-content { align-items: flex-end; justify-content: center; margin-bottom: 220px; }
	#jennifer-genova-subtitle { font-size: 45px; transform: translate(0, 0); }
	#jennifer-genova { font-size: 18.3vw; line-height: 11vw; transform: translate(0, 0); text-align: center; }
	#jennifer { display: inline-block; transform: translate(40px, 0); }
	#genova { display: inline-block; transform: translate(-40px, 0); }
}

@media screen and (min-width: 540px) and (max-width: 720px)
{
	/*#slideshow #slide3.slide { background-position: calc(50% + 27px) 0; }*/
	#page-home #home .section-content { align-items: flex-end; justify-content: center; margin-bottom: 220px; }
	#jennifer-genova-subtitle { font-size: 45px; transform: translate(0, 0); }
	#jennifer-genova { font-size: 16.2vw; line-height: 10vw; transform: translate(0, 0); text-align: center; }
}

@media screen and (min-width: 720px) and (max-width: 900px)
{
	/*#slideshow #slide3.slide { background-position: calc(50% + 27px) 0; }*/
	#page-home #home .section-content { align-items: flex-end; justify-content: center; margin-bottom: 220px; }
	#jennifer-genova { font-size: 110px; line-height: 70px; transform: translate(0, 0); text-align: left; }
	#jennifer-genova-subtitle { transform: translate(0, 0); }
}

@media screen and (max-width: 900px)
{
	#slideshow #slide3.slide { background-position: center 90px; background-size: auto 100%; }
	#jennifer-genova { text-shadow: 0 2px 5px rgba(0,0,0,0.3); }
	#home .section-content { transform: translate(0, 2vh); }
}

@media screen and (min-width: 900px)
{
	#slideshow #slide3.slide { background-position: calc(50% - 220px) 129px; }
	#page-home #home .section-content { align-items: center; justify-content: right; }
	#page-home #home .section-content h1 { font-size: 110px; line-height: 70px; }
}

@media screen and (min-width: 1190px)
{
	#jennifer-genova { transform: translate(calc(-45px - 27%), 29px); }
	#jennifer-genova-subtitle { transform: translate(-27%, 39px); }
}

.slideshow-nav { align-items: center; display: none/*flex*/; height: 100vh; justify-content: space-between; left: 0; position: absolute; top: 0; width: 100%; }
.slideshow-prev, .slideshow-next { background: rgba(0,0,0,0.0) url(../img/arrow.svg) center center no-repeat; background-size: 20px; cursor: pointer; height: 81px; width: 108px; }
.slideshow-prev:hover, .slideshow-next:hover { background-color: rgba(0,0,0,0.5); }
.slideshow-next { transform: rotate(180deg); }

#site-header { display: flex; flex-direction: row; height: calc(100vh - var(--nav-height)); text-align: center; z-index: 99; }
#header-logo { align-self: flex-end; background-image: url(../img/logo-negative.svg); background-position: 0 center; background-repeat: no-repeat; background-size: 101% auto; display: flex; flex-direction: column; overflow: hidden; text-align: center; }
#header-logo a { border: 2px solid rgb(255,255,255); display: flex; }
#header-logo img { height: 315px; opacity: 0.0; }
#header-logo .logo-padding { background: rgb(255,255,255); flex: 1; }
#header-bg { height: 100vh; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: 90; }
#header-bg > div { background-size: cover; filter: blur(11px); height: calc(100vh + 22px); left: -11px; opacity: 0.0; position: absolute; top: -11px; transition: opacity 1400ms ease; width: calc(100% + 22px); }
#header-bg > div.active { opacity: 1.0; transition: opacity 1400ms ease; }
#header-right { align-items: flex-end; display: flex; font-size: 17px; justify-content: right; text-align: right; }
#header-right .phone { padding: 18px 27px; }
.header-aside { background: rgb(255,255,255); flex: 1; }

.intro { border: 1px solid rgb(180,180,180); font-size: 19px; font-weight: 400; line-height: 27px; padding: 18px; }

/* Classes */
.clear { display: block; clear: both; }
.center { text-align: center; }
.flex-center { display: flex; justify-content: center; }

.full-wrapper { position: relative; width: 100%; }
.full-wrapper.inverted { background: #333; color: #ccc; }
.full-wrapper.inverted h1 { color: #fff; }
.inner-wrapper { margin: 0 auto; padding: 60px 0; max-width: 1280px; width: 90vw; }
.light-grey { background: #eaeaea; }

.bg-color1 { background-color: #333; color: #ccc; }

@keyframes underline {
  	0% {
		background-size: 0 2px;
  	}
  	100% {
	 	background-size: 90px 2px;
  	}
}

@keyframes blob-left-top-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(-180px,0);
  }
  62%{
    transform:scale(0.7) translate(-180px,-180px);

  }
  94%{
    transform:scale(1.1) translate(0,0);
  }
}

@keyframes blob-right-top-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(180px,0);
  }
  64%{
    transform:scale(0.7) translate(180px,-180px);
  }
  96%{
    transform:scale(1.1) translate(0,0);
  }
}
@keyframes blob-left-bottom-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(-180px,0);
  }
  66%{
    transform:scale(0.7) translate(-180px,180px);
  }
  98%{
    transform:scale(1.1) translate(0,0);
  }
}

@keyframes blob-right-bottom-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(180px,0);
  }
  68%{
    transform:scale(0.7) translate(180px,180px);
  }
  100%{
    transform:scale(1.1) translate(0,0);
  }
}

/* IDs */
#site-content { display: flex; filter: blur(0); flex-direction: column; transition: filter 540ms ease; }
#site-content.blurred { filter: blur(9px); }
#site-wrapper { margin: 0 auto; max-width: 1280px; /*overflow: hidden;*/ padding-top: 20px; width: 90vw; }
#site-header { position: relative; }
#footer { background: var(--color2); color: var(--color1); font-size: 16px; padding: 0; text-align: center; }
#footer .section-content { background: var(--color2); border-top: 1px solid rgba(255,255,255,0.2); /*box-shadow: var(--shadow1);*/ margin-bottom: 0; padding: 9px 0; }

#main-content { background: #fff; box-shadow: 0px 1px 3px #333; float: left; padding: 20px 20px 40px 20px; width: 940px; }

/* Vita */
#vita { background-attachment: fixed; background-image: url(../img/vita.jpg); background-position: center bottom; background-size: cover; }
#vita { background-image: none; }
#vita-content { 
				align-items: flex-start; 
				background-color: var(--color2); 
				background-image: linear-gradient(var(--color1),var(--color1)); 
				background-position: right bottom; 
				background-repeat: no-repeat; 
				background-size: 55% 100%; 
				box-shadow: var(--shadow1);
				display: flex; /*flex-direction: row-reverse;*/ flex-wrap: wrap; justify-content: flex-start; width: 100%; 
			}

#vita-left { width: 45%; }
#vita-image { /*background-attachment: fixed;*/ background-image: url(../img/vita3.jpg); background-position: left bottom -90px; background-size: cover; height: 390px; /*transform: scaleX(-1);*/ width: 100%; }
#vita-history { width: 55%; }
#vita-intro { background: var(--color2); color: var(--color1); display: table; padding: 45px; width: calc(100% - 90px); }

@media screen and (min-width: 960px)
{
	#vita-intro { margin-top: 99px; }
}

@media screen and (max-width: 960px)
{
	#vita-content { background: none; box-shadow: none; flex-wrap: wrap; }
	#vita-left { box-shadow: var(--shadow1); margin-bottom: 45px; width: 100%; }
	#vita-image { background-position: left bottom; }
	#vita-history { box-shadow: var(--shadow1); width: 100%; }
}

/* #vita-intro { background: rgb(255,255,255); color: var(--color2); } */
#vita-intro div { display: table-row; }
#vita-intro div:last-child div:last-child { border: none; }
#vita-intro div div { border-bottom: 1px dotted var(--color4); display: table-cell; padding: 2px 0; }
#vita-intro div div:first-child { border: none; color: var(--color3); padding-right: 18px; text-align: right; }
#vita-intro div div:nth-child(2) { color: var(--color1); }

#vita-sections { display: none; flex-wrap: wrap; list-style: none; margin-bottom: 18px; }
#vita-sections li { background: var(--color2); color: rgb(255,255,255); cursor: pointer; padding: 9px 27px; transition: all 270ms ease; }
#vita-sections li.active, #vita-nav li:hover { background: rgb(255,255,255); color: var(--color2); }

#vita-nav { display: none/*flex*/; list-style: none; margin-bottom: 18px; }
#vita-nav li { background: var(--color2); color: rgb(255,255,255); cursor: pointer; margin-right: 9px; padding: 9px 27px; transition: all 270ms ease; }
#vita-nav li.active, #vita-nav li:hover { background: rgb(255,255,255); color: var(--color2); }

/* Vita Years*/
.tab-nav { display: flex; list-style: none; width: 100%; }
.tab-nav li { 
					background-color: var(--color2); 
					/* background-image: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.4)); */
					/* background-repeat: no-repeat; */
					/* background-size: 100% 4px; */
					/* background-position: left bottom; */
					box-shadow: inset 3px -3px 3px rgba(0,0,0,0.2);
					color: rgb(255,255,255); cursor: pointer; /*margin-right: 1px;*/ padding: 9px 18px; transition: background-color 270ms ease, color 270ms ease; width: calc(20% - 36px); }
.tab-nav li:last-child { margin-right: 0; }
.tab-nav li.active, #vita-years li.active:hover { background-color: var(--color1); box-shadow: none; color: var(--color3); }
.tab-nav li:hover { background-color: var(--color3); color: var(--color1); }

.vita-year { background-color: var(--color1); display: none; }
.vita-year.active { display: block; }

.vita-year-headline { color: var(--color2); display: none; }
.vita-sub-headline { color: var(--color2); font-family: 'Lato', sans-serif; font-size: 29px; font-weight: 400; line-height: 27px; margin: 0; padding: 45px 27px 27px 27px; }
.vita-list { display: flex; flex-wrap: wrap; padding-bottom: 45px; width: 100%; }
.vita-item { background: rgb(255,255,255); color: var(--color2); line-height: 22px; padding: 9px 18px; transition: all 400ms ease-out; width: 100%; }
.vita-item { background-image: linear-gradient(var(--color4),var(--color4)); background-position: center top; background-size: calc(100% - 36px) 1px; background-repeat: no-repeat; }
/* .vita-item:last-child { background-image: none; } */
/* .vita-item.active { padding: 27px 27px; } */
/* .vita-item.active .vita-arrow { transform: rotate(180deg); } */
.vita-main { align-items: center; display: flex; }
.vita-arrow { background-image: url(../img/arrow.svg); 
				background-position: right center;
				background-repeat: no-repeat; 
				background-size: 11px 7px; 
				display: none;
				height: 7px;
				margin-left: 18px;
				transition: all 270ms ease-out;
				width: 11px; }
.vita-details { display: flex; font-size: 16px; justify-content: space-between; /*margin-top: 11px;*/ }
.vita-details > div:nth-child(2) { font-size: 14px; margin-left: 27px; text-align: right; }
/* .vita-item.active .vita-details { display: block; } */
.vita-title { color: var(--color2); display: inline-block; /*font-family: 'Prata', serif;*/ font-size: 17px; transition: color 180ms ease; }
.vita-title .subtitle { display: none; }
.vita-item:hover .vita-title { color: var(--color3); }
.vita-type { display: inline-block; margin-left: auto; font-size: 14px; font-weight: 700; }

#showreel-wrapper { background: var(--color2); box-shadow: var(--shadow1); display: flex; flex-wrap: wrap; justify-content: space-between; padding: 45px; }
#showreel-wrapper .video-player { /* height: calc(((((90vw / 100) - 108px) * 82) / 16) * 10); max-height: calc(((((1280px / 100) * 82) - 171px) / 16) * 10); */ width: 100%; }
#showreel-wrapper #showreel-main { /* height: calc(((((90vw / 100) - 108px) * 82) / 16) * 10); max-height: calc(((((1280px / 100) * 82) - 171px) / 16) * 10); */ width: 82%; }

#showreel-info { /*border: 1px solid var(--color3); border-bottom: none; border-top: none;*/ color: var(--color3); display: flex; font-size: 16px; font-weight: 400; justify-content: space-around; line-height: 22px; margin-top: 18px; }
/* #showreel-info div { margin:0 9%; } */
#showreel-info div { border-right: 1px dotted var(--color3); text-align: center; padding: 9px; width: calc(((100% - 3px) / 4 ) - 18px ); }
#showreel-info div:last-child { border-right: none; }

#showreel-info > div:nth-child(3):before { content: 'Jahr: '; }
#showreel-info > div:last-child:before { content: 'Rolle: '; }

/* #showreel-info div:last-child { text-align: right; } */
#showreel-info span { color: var(--color3); font-weight: 700; }

.showreel-section { background: none; display: flex; flex-direction: column; height: auto; min-height: 100%; overflow: hidden; transition: height 540ms ease-out, width 540ms ease-out; width: 0; }
.showreel-section.active { width: 18%; }
/* #showreel-nav { background: none; display: flex; flex-direction: column; height: auto; width: 18%; } */
#showreel-tabs .tab-nav { justify-content: flex-end; }
/* #showreel-tabs .tab-nav li > span { background-image: url(../img/showreel-icon.svg); background-repeat: no-repeat; // background-size: 45px 45px; // background-position: 0 center; display: block; line-height: 39px; padding: 9px 0 11px 38px; } */
#showreel-tabs .tab-nav li > span { display: block; line-height: 39px; padding: 9px 0 9px 0; }
/* #showreel-tabs .tab-nav li.active > span { background-position: 0 bottom; line-height: 18px; padding: 18px 0 0 38px; transition: all 540ms ease-out, background-position 900ms ease-out, padding 900ms ease-out, line-height 900ms ease-out; } */
#showreel-tabs .tab-nav li { 
					align-items: flex-end;
					background-color: var(--color3); 
					background-image: linear-gradient(var(--color3),var(--color3));
					background-repeat: no-repeat;
					background-size: 0 1px;
					color: var(--color1); display: flex; justify-content: flex-start; padding: 0 27px 0 18px; transition: all 540ms ease-out, background-size 0s ease-out 0s; transition-delay: 0s; width: calc(((100% - 90px) / 100) * 64); }
					
					/* calc(18% + 45px - 36px) */
					
/* #showreel-tabs .tab-nav li.active { background-size: calc(100% - 63px) 1px; transition: all 540ms ease-out, background-size 540ms ease-out 540ms; transition-delay: 0s; width: calc(((100% - 90px) / 100) * 18); } */
#showreel-tabs .tab-nav li.active { background-size: calc(100% - 63px) 1px; transition: all 540ms ease-out, background-size 540ms ease-out 540ms; transition-delay: 0s; }
#showreel-tabs .tab-nav li:nth-child(2).active { background-size: calc(100% - 36px) 1px; }
/* #showreel-tabs .tab-nav li:first-child { background-position: 45px bottom; box-shadow: inset -3px -3px 3px rgba(0,0,0,0.2); padding: 0 0 0 45px; } */
#showreel-tabs .tab-nav li { background-position: 18px bottom; }
#showreel-tabs .tab-nav li:first-child { background-position: 45px bottom; box-shadow: inset 0 -3px 3px rgba(0,0,0,0.2); padding: 0 0 0 45px; }
#showreel-tabs .tab-nav li:first-child,
#showreel-tabs .tab-nav li:nth-child(2) { width: calc(((100% - 90px) / 100) * 18); }
#showreel-tabs .tab-nav li:last-child { box-shadow: inset 3px -3px 3px rgba(0,0,0,0.2); }

#showreel-tabs .tab-nav li.active, #showreel-tabs .tab-nav li.active:hover { background-color: var(--color2); box-shadow: none; color: var(--color1); }
#showreel-tabs .tab-nav li:hover { background-color: var(--color3); color: var(--color1); }

#showreel-schauspiel .video-item { margin: 0 18px 9px 0; }
#showreel-schauspiel .video-item:last-child { margin-bottom: 0; }
.video-item { border: 2px solid var(--color3); cursor: pointer; flex: 1; /* height: calc((100% - 43px) / 4); height: calc((100% - 68px) / 5); */ margin: 0 0 9px 18px; max-height: calc((100% - 43px) / 4); transition: border-color 450ms ease-out; width: auto; }
.video-item:hover { border-color: var(--color1); }
.video-item:last-child { margin-bottom: 0; }
.video-item.hidden { display: none; }

.video-thumb { align-items: center; background: var(--color3) url(../img/showreel-icon.svg) center/39px no-repeat; display: flex; /*filter: grayscale(100%);*/ height: 100%; justify-content: center; overflow: hidden; /*transition: filter 450ms ease-out;*/ width: 100%; }
.video-thumb img { display: none; min-height: 100%; min-width: 100%; object-fit: cover; }

/* .video-item:nth-child(1) .video-thumb { justify-content: flex-start; } */
.video-thumb.thumb-sturm { background-image: url(../img/showreel/reel-sturm_thumb.jpg); background-size: cover; }
.video-thumb.thumb-dahoam { background-image: url(../img/showreel/reel-dahoam_thumb.jpg); background-size: cover; }
.video-thumb.thumb-lena { background-image: url(../img/showreel/reel-lena_thumb.jpg); background-size: cover; }
.video-thumb.thumb-presse { background-image: url(../img/showreel/reel-presse_thumb.jpg); background-size: cover; }
/* .video-thumb.thumb-presse { background-image: url(../img/showreel/reel-sturm_thumb.jpg); background-size: cover; } */

.video-thumb.thumb-bmw { background-image: url(../img/showreel/reel-bmw_thumb.jpg); background-size: cover; }
.video-thumb.thumb-meta { background-image: url(../img/showreel/reel-meta_thumb.jpg); background-size: cover; }
.video-thumb.thumb-quizbus { background-image: url(../img/showreel/reel-quizbus_thumb.jpg); background-size: cover; }
.video-thumb.thumb-belli { background-image: url(../img/showreel/reel-belli_thumb.jpg); background-size: cover; }
.video-thumb.thumb-palette { background-image: url(../img/showreel/reel-palette_thumb.jpg); background-size: cover; }
.video-thumb.thumb-wilo { background-image: url(../img/showreel/reel-wilo_thumb.jpg); background-size: cover; }
.video-thumb.thumb-fact { background-image: url(../img/showreel/reel-fact_thumb.jpg); background-size: cover; }
/* .video-item:hover .video-thumb { filter: grayscale(0%); } */

.video-thumb.thumb-about-me { background-image: url(../img/showreel/reel-about-me_thumb.jpg); background-size: cover; }
.video-thumb.thumb-about-me2 { background-image: url(../img/showreel/reel-about-me2_thumb.jpg); background-size: cover; }

@media screen and (max-width: 960px)
{
	#showreel-tabs .tab-nav li, 
	#showreel-tabs .tab-nav li:first-child, 
	#showreel-tabs .tab-nav li:nth-child(2), 
	#showreel-tabs .tab-nav li:last-child { width: calc((100% - 18px) / 3); /*width: calc(50% - 4.5px);*/ }
	
	#showreel-tabs .tab-nav li.active { background-size: calc(100% - 54px) 1px; width: calc((100% - 18px) / 3); /*width: calc(50% + 4.5px);*/ }
	#showreel-tabs .tab-nav li:first-child { background-position: 45px bottom; padding: 0 9px 0 45px; }
	#showreel-tabs .tab-nav li:last-child { background-position: 9px bottom; padding: 0 45px 0 9px; text-indent: 9px; }
	
	#showreel-wrapper .video-player { width: 100%; }
	#showreel-wrapper #showreel-main { width: 100%; }
	.showreel-section { flex-direction: row; height: 0; width: 100%; }
	.showreel-section.active { height: 108px; width: 100%; }
	
	#showreel-info { justify-content: space-between; }
	
	/* #showreel-player { order: 3; } */
	#showreel-main { order: 3; }
	#showreel-schauspiel { align-items: flex-end; }
	#showreel-werbung { align-items: flex-start; }
	#showreel-schauspiel .video-item { margin: 0 9px 18px 0; transform: translate(0, 4px); }
	#showreel-schauspiel .video-item:last-child { margin: 0 0 18px 0; }
	.video-item { border-width: 2px; height: 90px; margin: 0 9px 18px 0; max-height: none; width: calc((100% - 43px) / 4); }
	.video-item:last-child { margin-right: 0; }
}

@media screen and (max-width: 720px)
{
	#showreel-wrapper { padding: 18px; }
	/* #showreel-tabs .tab-nav li,  */
	/* #showreel-tabs .tab-nav li:first-child,  */
	/* #showreel-tabs .tab-nav li:last-child { width: calc(50% - 4.5px); } */
	
	/* #showreel-tabs .tab-nav li { text-align: center; } */
	#showreel-tabs .tab-nav li.active { background-size: calc(100% - 27px) 1px; width: calc((100% - 18px) / 3); /*width: calc(50% + 4.5px);*/ }
	#showreel-tabs .tab-nav li:first-child { background-position: 18px bottom; padding: 0 9px 0 18px; }
	#showreel-tabs .tab-nav li:nth-child(2) { background-position: 9px bottom; padding: 0 9px 0 9px; }
	#showreel-tabs .tab-nav li:nth-child(2).active { background-size: calc(100% - 18px) 1px; }
	#showreel-tabs .tab-nav li:last-child { background-position: 9px bottom; padding: 0 18px 0 9px; }
	
	#showreel-info { flex-wrap: wrap; }
	#showreel-info > div { border: none; padding: 0 9px; font-size: 16px; line-height: 22px; text-align: center; width: 100%; }
	#showreel-info > div:first-child { padding-bottom: 9px; font-size: 16px; font-weight: 700; text-align: center; }
	#showreel-info > div:last-child { padding-bottom: 9px; }
}

@media screen and (max-width: 540px)
{
	#vita-years li { font-size: 16px; padding: 9px; text-align: center; width: calc(20% - 18px); }
	#vita-years li .century { display: none; }
	#vita-years li:before { content: '"'; }
	#vita-years li.active .century { display: initial; }
	#vita-years li.active:before { content: ""; }
	
	.showreel-section { flex-wrap: wrap; }
	/* .showreel-section.active { height: 206px; width: 100%; } */
	#showreel-schauspiel .video-item { transform: translate(0, 0); }
	
	.video-item { border-width: 2px; height: 90px; margin: 9px 9px 0 0; width: calc((100% - 53px) / 2); }
	/* .video-item:nth-child(1), .video-item:nth-child(2) { margin: 18px 9px 0 0; } */
	.video-item:nth-child(even) { margin-right: 0; }
}

/* Kunden Logos */
#customers { align-items: center; display: flex; flex-wrap: wrap; list-style: none; margin-top: 45px; justify-content: center; }
#customers li { color: var(--color3); margin: 0 11px; }
#customers li img, #customers li svg { height: auto; max-height: 45px; max-width: 90px; width: auto; }
#customers li:nth-child(2) svg { max-width: 180px; }
#customers li:hover svg#bmw-logo path { fill: #000; }
#customers li:hover svg#bmw-logo path.cls-1 { fill: #0066B1; }
#customers li:hover svg#dcard-logo path { fill: #000; }
#customers li:hover svg#dcard-logo path.cls-1{ fill:#5a1465; }
#customers li:hover svg#dcard-logo path.cls-2{ fill:#f68712; }
#customers li:hover svg#dcard-logo path.cls-3{ fill:#f89c35; }
#customers li:hover svg#dcard-logo path.cls-4{ fill:#fab25f; }
#customers li:hover svg#dcard-logo path.cls-5{ fill:#fbbd09; }
#customers li:hover svg#dcard-logo path.cls-6{ fill:#fcc834; }
#customers li:hover svg#audi-logo path { fill: #000; }
#customers li:hover svg#vw-logo path { fill: #000; }
#customers li:hover svg#sixt-logo path { fill: #000; }
#customers li:hover svg#sixt-logo path.cls-1 { fill: #ff5f00; }
#customers li:hover svg#wilo-logo path { fill: #009c82; }
#customers li:hover svg#mcd-logo path { fill: #ffbc0d; }
#customers li svg path { fill: var(--color3); }
.bg1 #customers li svg path { fill: var(--color1); }

@media screen and (max-width: 960px)
{
	#customers li img, #customers li svg { height: auto; max-height: 40px; max-width: 72px; width: auto; }
}

@media screen and (max-width: 720px)
{
	#customers li img, #customers li svg { height: auto; max-height: 29px; max-width: 54px; width: auto; }
}

/* Navigation */
#nav-wrapper { margin: 0 auto; max-width: 1280px; left: 0; position: fixed; right: 0; top: 0; width: 90vw; z-index: 3000; }
#nav-bar { box-shadow: var(--shadow1); display: flex; height: var(--nav-height); justify-content: left; margin: 0 auto; max-width: 1280px; transition: background 270ms ease 0s; width: 90vw; z-index: 1000; }
#nav-wrapper.sticky #nav-bar { background: var(--nav-background-color); position: relative; transition: background 270ms ease 90ms; }
#nav-wrapper.sticky.active { transition: background 540ms ease 270ms; }
#nav-wrapper.sticky.active #nav-bar { background: rgba(93,93,93,0.0); transition: background 0s ease 0s; }
#nav-wrapper.active { background-color: rgba(93,93,93,0.0); background-size: 100% 0; height: var(--nav-height-compact); }
#nav-wrapper.active #nav-bar { background-color: rgba(93,93,93,0.0); background-size: 100% 0; height: var(--nav-height-compact); }
#nav-wrapper.active #main-nav, #nav-wrapper.active #main-nav li { height: var(--nav-height-compact); line-height: var(--nav-height-compact); }

#main-nav li#nav-logo a { background: none; color: var(--color3); font-family: 'Prata', serif; font-size: 34px; letter-spacing: -9px; }
#main-nav li#nav-logo a:hover { color: rgb(255,255,255); }
/* #main-nav li#nav-logo a span { vertical-align: text-top; } */

#main-nav-wrapper { width: 100%; }
#main-nav { display: flex; float: none; font-size: 12px; font-weight: 400; height: var(--nav-height); justify-content: left; list-style: none; padding-left: 0; text-transform: uppercase; transition: padding 450ms ease 90ms; }
#nav-wrapper.sticky #main-nav { padding-left: 45px; transition: padding 450ms ease 0s; }
#main-nav li { display: inline-block; float: none; height: var(--nav-height); line-height: var(--nav-height); position: relative; white-space: nowrap; }
#main-nav li.current a { /*background-position: center 72px;*/ background-position: center bottom 22px; background-size: 27px 2px; color: var(--color2); text-decoration: none; transition: background-position 180ms ease-in, background-size .3s ease-in .4s, color .3s ease-in, color .3s ease-in .4s; }
#main-nav li a { background-image: linear-gradient(var(--color1), var(--color1)); background-size: 0 2px; background-repeat: no-repeat; background-position: center 72px; color: rgba(93,93,93,1.0); display: block; font-size: 15px; font-weight: 400; padding: 0 18px; transition: background-position 180ms ease-in, background-size .3s ease-in, color .3s ease-in; }
#nav-wrapper.sticky #main-nav li a { color: var(--color1); }
#nav-wrapper.sticky #main-nav li.current a { color: var(--color2); }
#nav-wrapper.sticky #main-nav li#nav-logo a { color: var(--color1); }
#main-nav li:first-child a { padding-left: 0; }
#nav-wrapper.sticky #main-nav li a:hover, 
#main-nav li a:hover { /*background-position: center 72px;*/ background-position: center bottom 18px; background-size: 0 2px; color: var(--color2); text-decoration: none; transition: background-position 180ms ease-out, background-size .3s ease-out, color .3s ease-out; }
#nav-wrapper.sticky #main-nav li.current a:hover, 
#main-nav li.current a:hover { background-size: 27px 2px; }

#main-nav li ul { display: none; left: 0; list-style: none; position: absolute; top: var(--nav-height); z-index: 800; }
#main-nav li ul li { display: inline; float: none; height: 32px; line-height: 32px; }
#main-nav li ul li a { background: #636363; color: #fff; display: block; font-size: 12px; margin-top: 1px; padding: 0 40px 0 20px; text-align: left; white-space: nowrap; }
#main-nav li ul li a:hover { background: #999; color: #fff; text-decoration: none; }
#main-nav li.current ul li a { color: #fff; }
#main-nav li:hover ul { display: block; }
#main-nav li.has-sub:hover { /*background: url(../images/dropdown-arrow.png) center bottom no-repeat;*/ display: inline-block; }
#main-nav li:hover ul ul { background: #b8a083; display: none; }
#main-nav li:hover ul li:hover ul { display: block; }

.social-nav-wrapper { display: /*flex*/none; align-items: center; justify-content: right; }
#footer .social-nav-wrapper { justify-content: center; margin-top: 9px; }
.social-nav { display: flex; float: none; justify-content: right; list-style: none; z-index: 900; }
.social-nav li { align-items: center; /*border: 1px solid var(--color3);*/ border-radius: 50%; display: flex; height: 32px; justify-content: center; margin: 0 9px 0 0; overflow: hidden; width: 32px; }
.social-nav li a { background-color: /*var(--color3)*/transparent; display: block; }
.social-nav li a:hover { background-color: var(--color2); }
.social-nav li:last-child { margin: 0; transition: margin 450ms ease 90ms; }
#nav-wrapper.sticky .social-nav li:last-child { margin-right: 45px; transition: margin 450ms ease 0s; }
#nav-wrapper.sticky .social-nav li a { background: rgba(255,255,255,0.12); }
#nav-wrapper.sticky .social-nav li a:hover { background: var(--color3); }
.social-nav img { float: left; height: 14px; padding: 18px; }
.social-nav svg { float: left; height: 14px; padding: 18px; }
.social-nav li:last-child svg { height: auto; width: 18px; }

.section-nav-wrapper { display: flex; align-items: center; justify-content: right; }
#footer .section-nav-wrapper { justify-content: center; margin-top: 9px; }
.section-nav { display: flex; float: none; justify-content: right; list-style: none; z-index: 900; }
.section-nav li { align-items: center; /*border: 1px solid var(--color3);*/ border-radius: 50%; display: flex; height: 30px; justify-content: center; margin: 0 9px 0 0; overflow: hidden; width: 30px; }
.section-nav li a { background-color: /*var(--color3)*/transparent; display: block; }
.section-nav li a:hover { background-color: var(--color2); }
.section-nav li:last-child { margin: 0; transition: margin 450ms ease 90ms; }
#nav-wrapper.sticky .section-nav li:last-child { margin-right: 45px; transition: margin 450ms ease 0s, border-color 290ms ease; }
#nav-wrapper.sticky .section-nav li a { background: rgba(255,255,255,0.12); }
#nav-wrapper.sticky .section-nav li a:hover { background: var(--color3); }

.section-arrow { background: transparent url(../img/section-arrow.svg) center/32px no-repeat; border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; cursor: pointer; height: 18px; transition: border-color 290ms ease; width: 18px; }
.section-arrow:hover { border-color: var(--color1); }
.section-arrow:focus { box-shadow: none; outline: none; }
.section-prev { transform: rotate(180deg); }

#mobile-nav-wrapper #mobile-nav li#mobile-nav-headline { 
						background-image: linear-gradient(var(--color3), var(--color3)); 
						background-position: 0 bottom; 
						background-repeat: no-repeat; 
						background-size: 0 0; 
						color: var(--color5); 
						font-family: 'Prata', serif; 
						font-size: 39px; 
						font-weight: 300; 
						height: auto; 
						line-height: 45px; 
						padding-bottom: 45px;
					}

#mobile-nav-trigger { background: transparent; cursor: pointer; float: right; height: var(--nav-height-compact); margin: 0; position: absolute; right: 0; top: 0; width: 40px; -webkit-tap-highlight-color: transparent; }
#mobile-nav-lines { height: 16px; margin: calc((var(--nav-height-compact) - 16px) / 2) 0 0 18px; overflow: hidden; position: relative; width: 20px; }
#mobile-nav-line1 { left: 0; top: 0; }
#mobile-nav-line2 { margin-top: -1px; top: 50%; }
#mobile-nav-line3 { margin-top: -1px; top: 50%; }
#mobile-nav-line4 { bottom: 0; left: 0; }
#mobile-nav-trigger.active #mobile-nav-line1 { left: 10px; /*top: -2px;*/ width: 0; }
#mobile-nav-trigger.active #mobile-nav-line2 { transform: rotate(45deg); }
#mobile-nav-trigger.active #mobile-nav-line3 { transform: rotate(-45deg); }
#mobile-nav-trigger.active #mobile-nav-line4 { /*bottom: -2px;*/ left: 10px; width: 0; }
.mobile-nav-line { background: rgb(255,255,255); height: 2px; position: absolute; transition: all .3s; width: 20px; }
#mobile-nav-trigger:hover .mobile-nav-line { background: var(--color1); }
#nav-bar.inverted-bg .mobile-nav-line { background: rgb(27,27,27); }

/* #mobile-nav-wrapper { transform: scale(22); filter: blur(18px); align-items: center; background-color: rgba(45,45,45,0.9); background-image: url(../images/mobile-nav-bg2.svg); background-repeat: no-repeat; background-size: 2200px 2200px; background-position: center center; box-shadow: #333 0 0 10px; display: flex; height: calc(100% - 60px); justify-content: center; left: 0; margin: 0 0 0 -100%; opacity: 0; overflow: hidden; padding: 0; position: fixed; top: 60px; transition: filter 1600ms linear 200ms, transform 1800ms ease 0s, opacity 1200ms ease 200ms, height .5s ease 0s, top .5s ease 0s, margin 0s ease 1s, width 0s ease 1s; width: 0; z-index: 100; } */

/* #mobile-nav-wrapper { transform: scale(22); filter: blur(18px); align-items: center; background-color: rgba(45,45,45,0.9); background-image: linear-gradient(#303030, #303030), url(../images/mobile-nav-bg4.svg), linear-gradient(#303030, #303030); background-repeat: no-repeat; background-size: 100% calc(50% - 150px), 1280px 300px, 100% calc(50% - 150px); background-position: center top, center center, center bottom; box-shadow: #333 0 0 10px; display: flex; height: calc(100% - 60px); justify-content: center; left: 0; margin: 0 0 0 -100%; opacity: 0; overflow: hidden; padding: 0; position: fixed; top: 60px; transition: filter 1600ms linear 200ms, transform 1800ms ease 0s, opacity 1200ms ease 200ms, height .5s ease 0s, top .5s ease 0s, margin 0s ease 1s, width 0s ease 1s; width: 0; z-index: 100; } */
#mobile-nav-wrapper { 	align-items: center; 
						/* background-color: rgba(45,45,45,0.9);  */
						background-color: rgba(93,93,93, 0.9);
						/* background-image: linear-gradient(#303030, #303030), url(../img/logo-inverted.svg), linear-gradient(#303030, #303030);  */
						/* background-repeat: no-repeat;  */
						/* background-size: 100% calc(50% - 150px), 1280px 300px, 100% calc(50% - 150px);  */
						/* background-position: center top, center center, center bottom;  */
						box-shadow: #333 0 0 10px; 
						display: flex; 
						height: 100%/*calc(100% - var(--nav-height))*/; 
						justify-content: center; 
						left: 0; 
						margin: 0 0 0 -100%; 
						overflow: hidden; 
						padding: 0; 
						position: fixed; 
						top: 0/*var(--nav-height)*/; 
						transition: filter 1600ms linear 200ms, height .5s ease 0s, top .5s ease 0s, margin .5s ease 0s, width 720ms ease-in 0s; 
						width: 0; 
						z-index: 100; }
/* #mobile-nav-wrapper.active { transform: scale(1); filter: blur(0); display: flex; margin: 0; opacity: 1; transition: margin .5s ease 0s, opacity .5s ease 0s, top .5s ease 0s, width .5s ease 0s, height .5s ease 0s; width: 100%; } */
#mobile-nav-wrapper.active { display: flex; margin: 0; transition: margin .5s ease 0s, top .5s ease 0s, width .5s ease 0s, height .5s ease 0s; width: 100%; }
#mobile-nav-wrapper nav { position: absolute; width: 100%; }
#mobile-nav-wrapper #mobile-nav { list-style: none; margin: 0; padding: 0; width: 100%; }
#mobile-nav-wrapper #mobile-nav li { font-size: 18px; line-height: 39px; margin: -1px 0 1px -90vw; padding: 0; text-align: center; text-transform: uppercase; transition-timing-function: ease-out; width: 100%; }
#mobile-nav-wrapper #mobile-nav li:nth-child(1) { margin-top: 0; transition: all 500ms; }
#mobile-nav-wrapper #mobile-nav li:nth-child(2) { transition: all 500ms; }
#mobile-nav-wrapper #mobile-nav li:nth-child(3) { transition: all 500ms; }
#mobile-nav-wrapper #mobile-nav li:nth-child(4) { transition: all 500ms; }
#mobile-nav-wrapper #mobile-nav li:nth-child(5) { transition: all 500ms; }
#mobile-nav-wrapper #mobile-nav li:nth-child(6) { transition: all 500ms; }
#mobile-nav-wrapper #mobile-nav li:nth-child(7) { transition: all 500ms; }
#mobile-nav-wrapper #mobile-nav li:nth-child(8) { transition: all 500ms; }
#mobile-nav-wrapper #mobile-nav li:nth-child(9) { transition: all 500ms; }
#mobile-nav-wrapper.active #mobile-nav li:nth-child(1) { transition: all 550ms; }
#mobile-nav-wrapper.active #mobile-nav li:nth-child(2) { transition: all 600ms; }
#mobile-nav-wrapper.active #mobile-nav li:nth-child(3) { transition: all 650ms; }
#mobile-nav-wrapper.active #mobile-nav li:nth-child(4) { transition: all 700ms; }
#mobile-nav-wrapper.active #mobile-nav li:nth-child(5) { transition: all 750ms; }
#mobile-nav-wrapper.active #mobile-nav li:nth-child(6) { transition: all 800ms; }
#mobile-nav-wrapper.active #mobile-nav li:nth-child(7) { transition: all 850ms; }
#mobile-nav-wrapper.active #mobile-nav li:nth-child(8) { transition: all 900ms; }
/* #mobile-nav-wrapper.active #mobile-nav li:nth-child(9) { transition: all 950ms; } */

#mobile-nav-wrapper.active #mobile-nav li { margin-left: 0; }

#mobile-nav-wrapper #mobile-nav li h2 { background: url(../images/message-headline-divider.png) center bottom no-repeat; border: none; font-size: 32px; font-weight: 200; line-height: 32px; margin: 0 0 20px 0; padding: 0 0 22px 0; text-align: center; }

#mobile-nav-wrapper .inner-wrapper { align-items: center; display: flex; height: 100%; justify-content: center; padding: 0; position: relative; transition: height .5s ease 0s; }

#mobile-nav li a { background-image: linear-gradient(var(--color5), var(--color5)); background-repeat: no-repeat; background-position: center bottom; background-size: 0 2px; color: #fff; display: block; transition: all .3s ease-in; }
#mobile-nav li a:hover { background-size: 27px 2px; text-decoration: none; transition: all .3s ease-out; }
#mobile-nav li.current a { background-size: 27px 2px; text-decoration: none; transition: all .3s ease-out; }
#mobile-nav li ul { display: none; }

/* #mobile-nav-wrapper.inverted { background-color: rgba(220,220,220,0.3); background-image: url(../images/mobile-nav-bg.svg); } */
#mobile-nav-wrapper.inverted { 
								background-color: rgba(255,255,255,0.9); 
								/* background-image: linear-gradient(#fff, #fff), url(../img/logo-inverted.svg), linear-gradient(#fff, #fff);  */
							}
#mobile-nav-wrapper.inverted #mobile-nav li a { color: var(--text-color); }

#mobile-nav-close { align-items: center; cursor: pointer; display: flex; height: 14px; justify-content: center; overflow: visible; position: absolute; right: 0; top: 32px; transition: all .3s ease; width: 14px; }
#mobile-nav-close:hover .stroke { background-color: #D9B282; }
#mobile-nav-close .stroke { background-color: #fff; height: 18px; margin: 0; position: absolute; transition: all .3s ease; width: 2px; }
#mobile-nav-close .stroke:nth-child(1), 
#mobile-nav-wrapper.inverted #mobile-nav-close .stroke:nth-child(1) { transform: rotate(45deg); transition: background-color .1s linear; }
#mobile-nav-close .stroke:nth-child(2), 
#mobile-nav-wrapper.inverted #mobile-nav-close .stroke:nth-child(2) { transform: rotate(-45deg); transition: background-color .1s linear .1s; }
#mobile-nav-close:hover .stroke:nth-child(1), 
#mobile-nav-wrapper.inverted #mobile-nav-close:hover .stroke:nth-child(1) { /*transform: rotate(-45deg);*/ transition: background-color .1s linear; }
#mobile-nav-close:hover .stroke:nth-child(2), 
#mobile-nav-wrapper.inverted #mobile-nav-close:hover .stroke:nth-child(2) { /*transform: rotate(45deg);*/ transition: background-color .1s linear .1s; }

#mobile-nav-wrapper.inverted #mobile-nav-close .stroke { background-color: #333; }
#mobile-nav-wrapper.inverted #mobile-nav-close:hover .stroke { background-color: #D9B282; }


@media screen and (min-width: 960px)
{
	#mobile-nav-trigger { display: none; }
	#mobile-nav-close { display: flex; }
	#main-nav-wrapper { display: block; }
	#nav-wrapper.sticky { background: none; }
	/*.select-prefix { display: inline; }*/
}

@media screen and (max-width: 960px)
{
	#mobile-nav-trigger { display: block; }
	#mobile-nav-close { display: none; }
	#main-nav-wrapper { display: none; }
	#nav-wrapper { box-shadow: var(--shadow1); width: 100%; }
	#nav-wrapper.sticky { background: var(--nav-background-color); }
	#nav-wrapper.sticky.active { background: rgba(93,93,93,0.0); box-shadow: none; }
	#nav-wrapper.sticky.active #nav-bar { background: rgba(93,93,93,0.0); }
	#nav-bar { box-shadow: none; height: var(--nav-height-compact); }
	/*.select-prefix { display: none; }*/
}

@media screen and (min-width: 1260px)
{
	
}

@media screen and (max-width: 1260px)
{
	
}

#imprint { display: none; }
#imprint.active { display: flex; }
#imprint-content { background: var(--color1); box-shadow: var(--shadow1); color: var(--text-color); padding: 9%; }
/* #imprint-link { margin-top: 54px; text-align: center; } */
#imprint-link { color: var(--color1); }

#contact-wrapper { /* background: var(--color1); */ box-shadow: var(--shadow1); display: flex; flex-direction: row; }
/* #contact-wrapper > div { width: calc(50% - 90px); } */
/* #contact-wrapper > div { width: auto; } */
#contact-wrapper h2 { line-height: 45px; margin-top: 9px; }

#contact-agency { align-items: flex-start; background: var(--color3); color: var(--color1); /* border: 2px solid var(--color3); */ display: flex; justify-content: center; padding: 90px; text-align: center; width: 50%; }
#contact-agency h2 { color: var(--color2); }

#contact-direct { align-items: center; background: var(--color1); color: var(--color1); /* border: 2px solid var(--color3); display: flex; */ justify-content: center; padding: 90px; text-align: center; width: 50%; }
#contact-direct h2 { color: var(--color2); }

#contact-info { align-items: center; display: flex; flex-direction: row; justify-content: center; }
/* #contact-info > div { width: 100%; } */

#contact-table { display: inline-block; margin-bottom: 4px; overflow: hidden; transition: height 290ms ease-out; width: 0; }
#contact-table.active { /*width: calc(100% - 36px);*/ width: auto; }
#contact-table > div { display: table-row; }
#contact-table > div:last-child > div:last-child { border: none; }
#contact-table > div > div { display: table-cell; padding: 2px 0; }
#contact-table > div > div:first-child { border: none; color: var(--color2); padding-right: 18px; text-align: right; width: 35%; }
#contact-table > div > div:nth-child(2) { color: var(--color1); }
#contact-table > div > div input[type=text] { /*background: var(--color5);*/ color: var(--color2); border: none; border-bottom: 1px dotted var(--color2); font-size: 16px; width: 270px; }

#contact-text-wrapper { height: auto; overflow: hidden; width: 0; }
#contact-text-wrapper.active { width: 100%; }
#contact-text { border: 1px solid var(--color3); color: var(--color2); height: 110px; padding: 18px; outline: none; overflow: auto; resize: none; width: calc(100% - 38px); }

#contact-buttons { align-items: center; display: flex; justify-content: center; margin: 29px 0; }
#contact-next { margin: 0 1px; min-width: 0; white-space: nowrap; width: 108px; }
#contact-next span { background: url(../img/button-arrow.svg) right -9px center/9px auto no-repeat; overflow: hidden; padding-right: 0; transition: all 270ms ease;  }
#contact-next:hover span { background: url(../img/button-arrow.svg) right center/9px auto no-repeat; padding-right: 18px;  }
#contact-next.active span { background: url(../img/button-arrow-back.svg) -9px center/9px auto no-repeat; overflow: hidden; padding-right: 0; transition: all 270ms ease;  }
#contact-next.active:hover span { background: url(../img/button-arrow-back.svg) left center/9px auto no-repeat; padding-left: 18px; padding-right: 0;  }
#contact-submit { margin: 0 1px; min-width: 0; overflow: hidden; padding: 4px 0; transition: width 290ms ease-out, border 0s; width: 108px; }
#contact-submit.disabled { border-width: 0; margin: 0; padding: 4px 0; width: 0; transition: width 290ms ease-out, border 0s 290ms; }

.contact-alert { border: 1px solid var(--color3); color: var(--color3); font-size: 16px; margin-top: 9px; padding: 2px 18px; }
.contact-alert.success { /* border-color: green; */ }
.contact-alert.error { /* border-color: red; */ }
.contact-alert.success { background: url(../img/success.svg) 9px center/9px auto no-repeat; }
.contact-alert.error { background: url(../img/error.svg) 9px center/9px auto no-repeat; }

@media screen and (max-width: 1190px)
{
	#contact-wrapper { flex-direction: column; }
	#contact-direct, #contact-agency { width: calc(100% - 180px); }
}

@media screen and (max-width: 540px)
{
	#contact-wrapper { flex-direction: column; }
	#contact-direct, #contact-agency { padding: 45px; width: calc(100% - 90px); }
}

/* @media screen and (min-width: 1280px) */
/* { */
	/* #mobile-nav-wrapper {  */
	/* background-image: linear-gradient(rgba(93,93,93, 0.9), rgba(93,93,93, 0.9)), url(../images/mobile-nav-bg4.svg), linear-gradient(rgba(93,93,93, 0.9), rgba(93,93,93, 0.9)), linear-gradient(rgba(93,93,93, 0.9), rgba(93,93,93, 0.9)), linear-gradient(rgba(93,93,93, 0.9), rgba(93,93,93, 0.9));  */
	/* background-size: 100% calc(50% - 150px), 1280px 300px, 100% calc(50% - 150px), calc(50% - 150px) 100%, calc(50% - 150px) 100%;  */
	/* background-position: center top, center center, center bottom, left top, right top; } */
/* } */

.button { /*background: var(--color1);*/ border: 2px solid var(--color3); color: var(--color3); cursor: pointer; display: inline-block; padding: 4px 27px; transition: all 180ms ease; }
.button a { color: var(--color3); display: inline-block; padding: 4px 27px; text-decoration: none; }
.bg1 .button a { color: var(--color1); }
.bg1 #about-text .button a { color: var(--color3); }
.bg1 #about-text .button:hover a { color: var(--color2); }
.button:hover { /*background: var(--color1);*/ border-color: var(--color3); color: var(--color2); }
.button:hover a { color: var(--color2); }

.button.show-more { padding: 0; white-space: nowrap; }
.button.show-more span { background: url(../img/button-arrow.svg) right -9px center/9px auto no-repeat; overflow: hidden; padding-right: 0; transition: all 270ms ease;  }
.button.show-more:hover span { background: url(../img/button-arrow.svg) right center/9px auto no-repeat; padding-right: 18px;  }

@media screen and (max-width: 960px)
{
	.button { display: inline-block; margin: 0 auto; min-width: 135px; text-align: center; /* width: 27%; */ }
}

@keyframes overflowdelay {
  	0% {
		overflow: hidden;
  	}
  	100% {
	 	overflow: visible;
  	}
}