/********************************************************************************************************/
/*         GENERAL STYLE                                                                                */
/********************************************************************************************************/

/*
@font-face {
	font-family: "Futura";
	src: url("./fonts/Futura Book font.ttf");
	font-weight: normal;
}

@font-face {
	font-family: "Futura";
	src: url("./fonts/Futura Heavy font.ttf");
	font-weight: bold;
}

@font-face {
	font-family: "Quicksand";
	src: url("./fonts/Quicksand-Light.otf");
	font-weight: normal;
}

@font-face {
	font-family: "Quicksand";
	src: url("./fonts/Quicksand-Light.otf");
	font-weight: bold;
}

@font-face {
	font-family: "Montserrat";
	src: url("./fonts/Montserrat-Light.otf");
	font-weight: normal;
}

@font-face {
	font-family: "Montserrat";
	src: url("./fonts/Montserrat-Bold.otf");
	font-weight: bold;
}

@font-face {
	font-family: "Metropolis";
	src: url("./fonts/Metropolis-Light.otf");
	font-weight: normal;
}

@font-face {
	font-family: "Metropolis";
	src: url("./fonts/Metropolis-Bold.otf");
	font-weight: bold;
}
*/
@font-face {
	font-family: "Jost";
	src: url("./fonts/Jost-400-Book.otf") format('opentype');
	font-weight: normal;
}

@font-face {
	font-family: "Jost";
	src: url("./fonts/Jost-700-Bold.otf") format('opentype');
	font-weight: bold;
}







body {
  font-family: Jost, Helvetica, Arial, sans-serif;
  margin: 0;
  font-size: 1.5vw;
  background-color: black;
}

body.noscroll {
  /* No scrollbars in Edge. Don't use this for vita and exhibitions, for gallery only! */
  -ms-overflow-style: none;
  /* height: calc(100vh + 1px); */
}

a  {color: #ccc;}
a:visited  {color: #aaa;}


body,p,h1,h2,h3,h4,div,table,tr,td,ul,li {
  color: #ffffff;
}


* {
  box-sizing: border-box;
}





/********************************************************************************************************/
/*         GALLERY STYLE                                                                                */
/********************************************************************************************************/




.row > .column {
  padding: 1% 1%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 33%;
}

/*
.gallerycontainer {
max-width: 60%;
margin-left: auto; 
margin-right: auto; 
}
*/

.gallerycontainer {
		width: 95%;
		position:absolute; 
		left:50%; 
		top:50%; 
		transform: translate(-50%, -50%);
		padding-top: 3vh;  /* not needed in flexgallery */
}


/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 80;
  padding-top: 0px;
  padding-bottom: 0px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0,0,0,0.0);
}

/* Modal Content */
.modal-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(0,0,0,1.0);
  margin: auto;
  padding: 0px;
  width: 100%;
  /* max-width: 1200px; */
  height: inherit;
}

/* The Close Button */
.close {
  color: #eee;
  /* font-family: "MarketSaturday", Helvetica, Arial, sans-serif; */
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  padding: 2vh 2vw 4vh 4vw;
  transition: 0.6s ease;
}

.close > img {
  height: 5vh;
  width: auto;
  -webkit-filter: drop-shadow(0px 1px 3px #000);
  filter: drop-shadow(0px 1px 3px #000);
}

.close:hover,
.close:focus {
  -webkit-filter: drop-shadow(0px 1px 6px #000);
  filter: drop-shadow(0px 1px 6px #000);
}

.mySlides {
  display: none;
  height:90%;
  align-content: center;
}

.myTitles {
  display: none;
  height:10%; 
  align-content: center;
}

.slideImg {
overflow: hidden;
object-fit: contain;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
padding-top:1.2vh;
}

.titleImg {
overflow: hidden;
object-fit: contain;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
padding: 0.7vh 0 0.7vh 0;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  color: #eee;
  cursor: pointer;
  position: absolute;
  color: white;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
/* 2vw for half the vertical padding + 4vw for own height -> 6vw in total */
  top: calc( 50% - 6vw );
/*  top: calc( 50% - (2vw + 4vh) ); */

}

/* Position the "next button" to the right */
.next {
  right: 0;
}
/* Position the "next button" to the right */
.prev {
  left: 0;
}

.prev > img, .next > img {
  height: 4vh;
  width: auto;
  -webkit-filter: drop-shadow(0px 1px 3px #000);
  filter: drop-shadow(0px 1px 3px #000);
}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  -webkit-filter: drop-shadow(0px 1px 6px #000);
  filter: drop-shadow(0px 1px 6px #000);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #eee;
  position: absolute;
  top: 1vh;
  left: 0;
  background-color: rgba(0,0,0,1.0);
}

.numbertext > img {
  height: 5vh;
  width: auto;
}

.caption-container {
  text-align: center;
  /*background-color: rgba(0,0,0,0.95);*/
  padding: 2px 16px;
  color: white;
  font-size: 1vh;
}

.titles {
  display: none;
}

.active,
.titles:hover {
  opacity: 1;
}

.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: inset 0px 0px 20px 20px rgba(255, 255, 255, 0.15), 0px 0px 20px 20px rgba(255, 255, 255, 0.15);
}

.hover-shadow-dark:hover {
  box-shadow: inset 0px 0px 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 20px 20px rgba(0, 0, 0, 0.2);
}

.hover-zindex:hover {
  z-index:2;
}


/*      text modal          */

/* The Text Modal (background) */
.textmodal {
  height: 100vh;
  padding: 1em 3em 3em 3em;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  color: #ffffff;
  display: none;
  z-index: 81;
  overflow: scroll;
  background-color: rgba(0,0,0,0.0);
  text-shadow: 0.1em 0.1em 0.5em black, 0em 0em 2em black;
  text-align: justify;
  white-space: pre-line;
	margin: 0; 
	border: 0;  
	background-image: url('./files/background_blank.jpg'); 
	background-position: right;  
	/* background-attachment: fixed;  causes problem in Opera */
	background-repeat: no-repeat;  
	background-size: 100% 100%;
	min-height: 100vh;
}



/********************************************************************************************************/
/*         VIDEO STYLE                                                                                  */
/********************************************************************************************************/

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  transform: translate(calc((100% - 100vw) / 2), calc((100% - 100vh) / 2));
  z-index: -1;
}










/********************************************************************************************************/
/*         CUSTOM STYLE                                                                                 */
/********************************************************************************************************/

.fullscreen {
  height:100vh;
  width:100vw;
}

li { line-height:150%;
}

.textshadow {
	text-shadow: 0em 0em 2em black;
}

.vita {
	margin: 3em;
	color: #ffffff;
	text-align: justify;
	height:100vh;
}

.vita  > ul  {
	list-style-type:none;
	padding-left:4em;
	padding-right:8em;
}

.vita  > ul  > li {
	padding-bottom:1em;
}

.vita  > ul  > li , .vita  > h1 , .vita  > h2 {
	text-shadow: 0.1em 0.1em 0.5em black;
}

.menuimg {
	height: 100vh;
	width: auto;
}

.menudiv {
	position:fixed; 
	left:50%; 
	transform: translate(-50%, 0);
}

.menudiv > a {
	text-decoration:none;
}

.textdiv {
	position:absolute; 
	left:50%; 
	transform: translate(-50%, 0);
}

.textdiv > a {
	text-decoration:none;
}

/*  begin   for debugging    */
.openerimg {
	position: relative;
	height: 100vh;
	width: auto;
}

.openerimg  > img {
	height: 100%;
	width: auto;
}

.openerdiv {
	height: 100vh;
	width: 100vw;
	display: flex;
	overflow: hidden;
	justify-content: center;
	align-items: center;
}

.openerdiv > a {
	text-decoration:none;
}
/*  end   for debugging    */


/* old
.openerimg {
  background-image: url("./files/Opener_-_Think_And_Act.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
*/

.openertitlemartin {
	/* font-size: 5vh; */
	height: 6vh;
	width: auto;
}

.openertitleenter {
	/* font-size: 2.5vh; */
	height: 4vh;
	width: auto;
}

.canvas {
	margin: 0; 
	border: 0;  
	background-image: url('./files/background_blank.jpg'); 
	background-position: right;  
	background-attachment: fixed;
	background-repeat: no-repeat;  
	background-size: 100% 100%;
	min-height: 100vh;
}


.work_title {
	position: fixed;
	height:2.0em;
	border-radius: 30%;
	background-color: rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);
	top: 1vh;
	left: 1vh;
}

.work_title  img {
	height:2.0em;
	width: auto;
}

#imprintlink {
  position: fixed;
  z-index: 70;
  bottom: 0; 
  right: 0; 
  background-color: rgba(0,0,0,0.2);
  border-radius: 10px;
  box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);
}
#imprintlink img {
	width: 7em;
	height: auto;
	vertical-align: middle;
	filter: drop-shadow(0px 0px 2px #777);
	opacity: 0.8;
}
#imprintlink a {
  text-decoration: none;
}
#imprintlink:hover {
  -webkit-filter: drop-shadow(0px 1px 3px #fff);
  filter: drop-shadow(0px 1px 3px #fff);
}

#homelink, #aboutlink, #backlink {
  position: fixed;
  z-index: 70;
  background-color: rgba(0,0,0,0.2);
  border-radius: 10px;
  box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);
}
#homelink {
  top: 0; 
  right: 0; 
}
#aboutlink {
  top: 1.7em; 
  right: 0; 
}
#backlink {
  top: 3.4em; 
  right: 0; 
}
#backlink.upper {
  top: 1.7em; 
  right: 0; 
}


#homelink img, #aboutlink img, #backlink img  {
	width: 5em;
	height: auto;
	vertical-align: bottom;
	filter: drop-shadow(0px 0px 2px #777);
	opacity: 1;
}
#homelink:hover, #aboutlink:hover, #backlink:hover{
	cursor: pointer;
  -webkit-filter: drop-shadow(0px 1px 3px #fff);
  filter: drop-shadow(0px 1px 3px #fff);
}
#homelink a , #aboutlink a , #backlink a{
  text-decoration: none;
}





.imprint {
  /* font-family: "Biasa", Helvetica, Arial, sans-serif; */
  /* text-transform: uppercase; */
  max-width: 100vw;
}

.imprint > img {
  display: block;
}

.Impressum {
width: 35em; height:auto;
}

.WebProgrammierung {
width: 22em; height:auto; margin-left: 1.6em;
}
.ComingSoon {
width: 12em; height:auto;
}

.MLink:hover {
  -webkit-filter: drop-shadow(0px 1px 3px #fff);
  filter: drop-shadow(0px 1px 3px #fff);
}


#dsgvo {
	width: 100%;
	height: 20em;
	overflow: scroll;
	padding-left: 1.6em;
	padding-right: 1.6em;
	font-size: 70%;
}
#dsgvo a  {color: #bbb;}
#dsgvo a:visited  {color: #999;}




/********************************************************************************************************/
/*         MENUE HOVER STYLE                                                                            */
/********************************************************************************************************/

.chamber {
z-index: 2; position: absolute; display: flex; border-radius: 50%; box-sizing: border-box; padding:0; margin:0; transition: 0.3s; }

/* this is old, hovering now done via javascript */
/* 
.chamber:hover {cursor:pointer; background-color: rgba(50,50,50,0.4); box-shadow:  0 0 1em 1em rgba(50,50,50,0.4);}
*/





/***************************************************/
/***************************************************/
/*          F L E X    G A L L E R Y               */
/***************************************************/
/***************************************************/




#gallery9, #gallery12 {
width: 100vw;
height: auto;
box-sizing: border-box;
padding: 0px;
margin: 0px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
letter-spacing: 0px;
word-spacing: 0px;
font-size:0px;
white-space: nowrap
}

.gallerypic {
height: 22vh;
display: inline-block;
width: 33vh;
padding: 0px;
margin: 1vh;
background-position: center;
background-repeat: no-repeat;
-webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

.bgcontain {
background-size: contain; 
}

.bgcover {
background-size: cover; 
}

.thumbcontain {
object-fit: contain;
width:100%;
height:100%;
}

.thumbcover {
object-fit: cover;
width:100%;
height:100%;
}


#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10,#s11,#s12{
display: none;
height: 0px;
width: 0px;
padding: 0px;
margin: 0px;
font-size:0px;
}

/***************************************************/
/***************************************************/
/*          GALLERY SETTINGS FOR 9 PICS           */
/***************************************************/
/***************************************************/


/* aspect ratio smaller than 3/5 ? */
/* pic width 1/2vw, height 1/6vw */
/* gallery div height 100vh */
@media (max-aspect-ratio: 3/5) {
/* select all separator div's whose id starts with s */
	#gallery9  div[id^="s"] {display: none;}
	#gallery9  #s2,#gallery9  #s4,#gallery9  #s5,#gallery9  #s7  {display: block;}
	#gallery9  .gallerypic {height: 30vw; width: 45vw; margin: 1vw;}
}

/* aspect ratio smaller than 8/9 but greater than 3/5 ? */
/* pic height 1/5vh, width 3/10vh */
/* gallery div height 100vh */
@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 8/9) {
	#gallery9  div[id^="s"] {display: none;}
	#gallery9  #s2,#gallery9  #s4,#gallery9  #s5,#gallery9  #s7 {display: block;}
	#gallery9  .gallerypic {height: 17vh; width: 25.5vh; margin: 1vh;}
}

/* aspect ratio smaller than 3/2 but greater than 8/9 ? */
/* pic width 1/3vw, height 2/9vw */
/* gallery div width 100vw */
@media (min-aspect-ratio: 8/9) and (max-aspect-ratio: 3/2) {
	#gallery9  div[id^="s"] {display: none;}
	#gallery9  #s3,#gallery9  #s6 {display: block;}
	#gallery9  .gallerypic {height: 20vw; width: 30vw; margin: 1vw;}
}

/* aspect ratio smaller than 12/6 but greater than 3/2 ? */
/* pic height 1/3vh, width 1/2vh */
/* gallery div height 100vh */
@media (min-aspect-ratio: 3/2) and (max-aspect-ratio: 12/6) {
	#gallery9  div[id^="s"] {display: none;}
	#gallery9  #s3,#gallery9  #s6 {display: block;}
	#gallery9  .gallerypic {height: 30vh; width: 45vh;margin: 1vh;}
}

/* aspect ratio greater than 12/6 ? */
/* pic height 1/3vh, width 1/2vh */
/* gallery div height 100vh */
@media (min-aspect-ratio: 12/6) {
	#gallery9  div[id^="s"] {display: none;}
	#gallery9  #s3,#gallery9  #s6 {display: block;}
	#gallery9  .gallerypic {height: 30vh; width: 45vh;margin: 1vh;}
}


/***************************************************/
/***************************************************/
/*          GALLERY SETTINGS FOR 12 PICS           */
/***************************************************/
/***************************************************/


/* aspect ratio smaller than 1/2 ? */
/* pic width 1/2vw */
/* gallery div height 100vh */
@media (max-aspect-ratio: 1/2) {
	#gallery12  div[id^="s"]  {display: none;}
	#gallery12  #s2,#gallery12  #s4,#gallery12  #s6,#gallery12  #s8,#gallery12  #s10 {display: block;}
	#gallery12  .gallerypic {height: 30vw; width: 45vw; margin: 1vw;}
}

/* aspect ratio smaller than 2/3 ? */
/* pic height 1/6vh, width 1/4vh */
/* gallery div height 100vh */
@media (max-aspect-ratio: 2/3) {
	#gallery12  div[id^="s"]  {display: none;}
	#gallery12  #s2,#gallery12  #s4,#gallery12  #s6,#gallery12  #s8,#gallery12  #s10 {display: block;}
	#gallery12  .gallerypic {height: 14vh; width: 21vh; margin: 1vh;}
}

/* aspect ratio smaller than 9/8 but greater than 2/3 ? */
/* pic width 1/3vw, height 2/9vw */
/* gallery div width 100vw */
@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 9/8) {
	#gallery12  div[id^="s"]  {display: none;}
	#gallery12  #s3,#gallery12  #s6,#gallery12  #s9 {display: block;}
	#gallery12  .gallerypic {height: 20vw; width: 30vw; margin: 1vw;}
}

/* aspect ratio smaller than 3/2 but greater than 9/8 ? */
/* pic height 1/4vh, width 3/8vh */
/* gallery div height 100vh */
@media (min-aspect-ratio: 9/8) and (max-aspect-ratio: 3/2) {
	#gallery12  div[id^="s"]  {display: none;}
	#gallery12  #s3,#gallery12  #s6,#gallery12  #s9 {display: block;}
	#gallery12  .gallerypic {height: 22vh; width: 33vh; margin: 1vh;}
}

/* aspect ratio smaller than 12/6 but greater than 3/2 ? */
/* pic width 1/4vw, height 1/6vw */
/* gallery div width 100vw */
@media (min-aspect-ratio: 3/2) and (max-aspect-ratio: 12/6) {
	#gallery12  div[id^="s"]  {display: none;}
	#gallery12  #s4,#gallery12  #s8 {display: block;}
	#gallery12  .gallerypic {height: 14.7vw; width: 22vw; margin: 1vw;}
}

/* aspect ratio greater than 12/6 ? */
/* pic height 1/3vh, width 1/2vh */
/* gallery div height 100vh */
@media (min-aspect-ratio: 12/6) {
	#gallery12  div[id^="s"]  {display: none;}
	#gallery12  #s4,#gallery12  #s8 {display: block;}
	#gallery12  .gallerypic {height: 30vh; width: 45vh; margin: 1vh;}
}


















/********************************************************************************************************/
/*         VIEWPORT SPECIFIC STYLES
/********************************************************************************************************/



/* quadratic */
@media (max-aspect-ratio: 3/2) {
	body {
	  font-size: 2vh;
	}
.numbertext {
	padding-left: 0.5vw;
}
.myTitles {
  max-width: 85%;

}
	.openertitlemartin {
		/* font-size: 5vh; */
		height: auto;
		width: 45vw;
	}
	.openertitleenter {
		/* font-size: 2.5vh; */
		height: auto;
		width: 15vw;
	}
	.vita  > ul  {
		padding-left:0em;
		padding-right:0em;
	}
	.vita {
		text-align: left;
	}
	.menuimg {
		height: auto;
		width: 100vw;
	}
	.menudiv {
		left:0%; 
		top:50%; 
		transform: translate(0, -50%);
	}

	.openerimg {
		position: relative;
		height: auto;
		width: 100vw;
	}

	.openerimg  > img {
		height: auto;
		width: 100%;
	}

	/*
	.gallerycontainer {
		max-width: 99%;
		margin-left: auto; 
		margin-right: auto; 
		margin-top: 15%;
	}
	*/
	.gallerycontainer {
			width: 99%;
			left:1%; 
			top:50%; 
			transform: translate(0, -50%);
			padding-top: 0vh;
	}
	.modal-content {
	  width: 100%;
	}
	.textmodal {
	  width: 100%;
	  text-align: left;
	}
	.work_title {
		height:6.0vw;
	}
	.work_title > img {
		height:6.0vw;
	}
	.openertitle > h1 {
		font-size: 5vw;
	}
	.openertitle > h3 {
		font-size: 3vw;
	}
	.caption-container {
	  padding: 2vw 4vw;
	  font-size: 3vw;
	}
	.next {
	  padding: 4vw 2vw 4vw 4vw;
      top: calc( 90% - 3vh );
	}
	.prev {
	  padding: 4vw 4vw 4vw 2vw;
      top: calc( 90% - 3vh );
	}
	.close  {
	  padding: 2vw 2vw 4vw 4vw;
	}
	.slideImg {
		padding-top:1.2vw;
	}
	.Impressum {
	width: 35em; height:auto;
	max-width: 100%;
	}
	.WebProgrammierung {
	width: 22em; height:auto; margin-left: 1.6em;
	max-width: 60%;
	}
	.ComingSoon {
	width: 12em; height:auto;
	max-width: 100%;
	}
/*  
	#aboutlink {
	  top: 0; 
	  right: 6em; 
	}
	#backlink {
	  top: 1.7em; 
	  right: 0; 
	}
*/
.textdiv {
	position:absolute; 
	left:40%; 
	transform: translate(-40%, 0);
}

}


/* portrait */
@media (max-aspect-ratio: 1/1) {
	.numbertext {
		padding-left: 0vw;
	}
	.myTitles {
		  max-width: unset;
	}
	.gallerycontainer {
			max-width: 80%;
			position:absolute; 
			left:0%; 
			top:50%; 
			transform: translate(0, -50%);
	}
	.next {
	  padding: 4vh 2vh 4vh 4vh;
	      top: calc( 90% - 10vh );

	}
	.prev {
		  padding: 4vh 4vh 4vh 2vh;
	      top: calc( 90% - 10vh );
	}
	.close  {
		  padding: 2vh 2vh 4vh 4vh;
	}
	.textdiv {
		position:absolute; 
		left:20%; 
		transform: translate(-20%, 0);
	}

}


/* landscape */
@media (min-aspect-ratio: 3/2) {
	body {
	  font-size: 2.5vh;
	}
	.numbertext {
		padding-left: 1vw;
	}
	.myTitles {
		  max-width: 80%;
	}
	.vita {
		width:150vh;  /* this needs the screen to be 3/2 */
		position:absolute; 
		left:50%; 
		transform: translate(-50%, 0);
	}
	.textmodal {
	  width: 150vh;
	  left: 50%;
	  transform: translate(-50%, 0);
	}
	.menuimg {
		height: 100vh;
		width: auto;
	}
	.menudiv {
		left:50%; 
		top:0%; 
		transform: translate(-50%, 0);
	}
	.openerimg {
		position: relative;
		height: 100vh;
		width: auto;
	}

	.openerimg  > img {
		height: 100%;
		width: auto;
	}

	/*
		.gallerycontainer {
			max-width: 60%;
			margin-left: auto; 
			margin-right: auto; 
		}
	*/
	.gallerycontainer {
			width: 65%;
			left:50%; 
			top:50%; 
			transform: translate(-50%, -50%);
			padding-top: 3vh; /* note needed in flexgallery */
	}
	.work_title {
		height:6vh;
	}
	.work_title > img {
		height:6.0vh;
	}
	.openertitle > h1 {
		font-size: 5vh;
	}
	.openertitle > h3 {
		font-size: 2.5vh;
	}
	.caption-container {
	  padding: 2vh 4vh;
	  font-size: 2vh;
	}
	.slideImg {
		padding-top:1.2vh;
	}
	.prev > a > img, .next > a > img {
	  height: 4vh;
	  width: auto;
	}
	.next {
	  padding: 4vw 2vw 4vw 4vw;
	}
	.prev {
	  padding: 4vw 4vw 4vw 2vw;
	}
	.close  {
	  padding: 2vh 2vw 4vh 4vw;
	}
	.Impressum {
	width: 35em; height:auto;
	}
	.WebProgrammierung {
	width: 22em; height:auto; margin-left: 1.6em;
	}
	.ComingSoon {
	width: 12em; height:auto;
	}
}


@media print {
	body {
	  margin: 2em;
	  font-size: 11pt;
	  background-color: white;
	}

	body,p,h1,h2,h3,h4,div,table,tr,td,ul,li {
	  color: black;
	}
	.canvas {
		background-image: url(''); 
		background-image: unset; 
	}
}