@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@media screen and (min-width: 640px) and (max-width: 1439px) {
html, body {
	font-family: 'Open Sans', sans-serif;
	margin-top: 0pt;
	left : 0pt;
	background-image: url(piano_trans2.jpg);
	background-size: cover;
	z-index: 0;

}
#noDisplayBig {

	display: none;
}
#mobileImprint {
	display: none;
}

#Bemerkungen {
	width: 	30em;
	
}
.header {
position: absolute;
margin-left:0;margin-right:5%;
top:0pt;
left:3%;
min-height: 30%;
width: 90%;
/*border: 1pt black dotted**/;

}
nav ul  {
	position: absolute;
	top: 0;
}
nav li {
	display: inline;
	margin-right:2.3em;

}
nav a:link {

	color:black;
	text-decoration: underline;
}
nav a:hover {
	font-weight: bold;

}
.media-menu {
	position: absolute;
	border: 1pt black solid;
	top:21%;
	left:27em;
}
.header img {
	position: absolute;
	left: 90%;
}
.mobMenuBtn {
display: none
}
.mobileMenu {
	display: none;
}



.content-wrapper { 
margin-left:5%;
width:100%;
min-height: 60%;
position: absolute;
top:27%;
/*border: 1pt black dotted;*/0


}

.side-content {
position: relative;
top:0;
/*border: 1pt black dotted;*/
min-height: 70%;
width:25%;

height: auto;
overflow:hidden;
float: left;

}

.text-content {
	position: absolute;
	top:0;
	left:30%;
/*	border:3pt blue dotted;*/
	min-height: auto;
	width:60%;

	height: auto;
	float: left;

}
#footer {
position: absolute;
/*border: 1pt black dotted;*/
width:105%;
min-height: 5%;
left: 0;
background-color: rgba(136,136,136,0.75) ;
align-items: flex-end;
display: none;
font-size: 10pt;

}

#footer a:link, #footer a:visited {
	color: black;
	text-decoration: underline;

}
#footer a:hover {
	color: black;
	text-decoration: none;
}

#footer-right {
	position: absolute;
	left:70%;
}
#imgGalDiv {

	border:1pt black solid;
	width: auto;
	min-width: 100%;
}
.imgtable {
	
	

}
.fixedHeight   {
	height: 350px;
	overflow: hidden;
}
.imgtable td {
	width:230px;
	height: 300px;
	overflow: hidden;
	vertical-align: top;
}

.imgTableAbstand  {
	margin-right: 30px;
	/**margin-bottom: 20px;**/
	vertical-align:top;
	
	}


.resize {
	cursor: pointer;
	animation: resize-bigger 0.1s forwards;
	margin-right: 25px;
	margin-bottom: 0px;
	top:0;
	vertical-align: top;


}
@keyframes resize-bigger {
	0% {
		width: 200px;
		height: auto;
/**		margin-right: 30px;
		margin-bottom: 20px;*//
	}
	100% {
		width: 210px;
		height: auto;
		opacity: 92%;
		

	}
}

.faceout {

	animation: resize-small 0.1s forwards;
}
@keyframes resize-small {
	0% {width: 202px; 
		height:auto;
		margin-right: 25px;		
		margin-top:10px; }

	100% {
		width:200px;
		height:auto;
		margin-right: 30px;
		margin-top:0px;
	}
}

.stage-border-hidden {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 99%;
	background-color: black;

	z-index: 200;
	display: none;	


}
.stage-border-visible {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 99%;
	background-color: rgba(0,0,0,0.93);
	z-index: 1;
	display: block;

}




.stage-central-hidden {
	position: absolute;
	top:30%;
	left:26%;
	width:60%;
	border: white 1pt dotted;
	height: 40%;

	display: none;
}

.stage-central-visible {
	position: fixed;
	/*top:20%;*/
	/*left:26%;*/
	width:60%;
	/*border: white 1pt dotted;*/
	height: 40%;	
	display: block;
	color: black;


}
.image-central {

	z-index: 99;
	position: absolute;
	left:5%;
	
	
}
.image-back{
	/*z-index: 5;*/
	background-color: black;
	opacity: 100%;
	width: 100%;
	height: auto;
	z-index: 99;
	border:1pt yellow dashed;
}

.image-prev-trigger {
left:10%;

	
}
.image-next-trigger {


	left:80%;
}

.image-toggle-trigger {
top:40%;	
background-color: transparent;
color:#FFFFFF;
font-size:45pt;
position: fixed;

}

.image-toggle-trigger:hover  {
cursor: pointer;
color:red;
font-size:45pt;
text-decoration: color;
}

#CloseButton {
background-color: transparent;
color:#FFFFFF;
font-size:38pt;
position: fixed;
right: 10%;
}

#CloseButton:hover {
	cursor: pointer;
}
}