@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 (max-width: 640px) {
html, body {
	font-family: 'Open Sans', sans-serif;
	margin-top: 0pt;
	left : 0pt;
	background-image: url(piano_trans2.jpg);
	background-size: auto;
	background-repeat: repeat-y;
	z-index: 0;

}
#nodisplay-mobile {
	display: none;

}

#Bemerkungen {
		width: 	12em;
		margin-top: 15%;
		margin-left: 	10%;

}
input  {
	margin-left:10%;
}

.header {
position: absolute;
margin-left:0;margin-right:5%;
top:0pt;
left:0;
min-height: 100%;
width: 100%;
overflow: visible;
/*border: 1pt black dotted**/;

}

.big-nav {
	display: none;

}
nav ul  {
	position: absolute;
	top: 0;
}
nav li {
	display: inline;
	margin-right: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:	0;
	width:40%;
}

.BtnBorder {
	height: auto;
	width:auto;
	padding:1em;
	/*border:1pt black solid;*/
	position: absolute; quotes: 
	top:0;
	right: 2%;

}

.mobMenuBtn {
	position:absolute;
	font-size:22pt;

	top:0;
	left: 0;
	color:#000000;
	text-decoration:none;
}

.BtnBorder a:link, a:visited {

	color:black!IMPORTANT;
}
.mobileMenu {
height:0;
overflow: hidden;
position: absolute;

top: 0;
left: 0;
width: 100%;


transition: all .2s ease-in-out;
}


.mobileNavList {
height:100%;
overflow: hidden;
display: none;
position: absolute;
top:10%;
text-align: center;
width: auto;
line-height: 1.5;
/*border: 1pt black solid;*/
font-size: 26pt;
left:30%;
transition: all .2s ease-in-out;
}

#mobileMenu:target {

display: block;

	width:102%;
height: 110%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(255,255,255,0.9);
text-align: center;
border: none;
z-index: 100;
color:black;
}

.mobileMenu:target a:link, a:visited {
color:#000000;
text-decoration:none;



}


.mobileMenu:target + close {
display: none;
}



.mobileNavList:target + close {
display: none;
height: 0;
}

.mobileMenuClose {
	color:#ffffff;
	display: none;
}


.mobileMenuCloseBtn {
	height: auto;
	overflow: hidden;
	font-size: 26pt;
	position: relative;
	left: 40%;
}
.mobileMenuCloseBtn:target {
	height: auto;
	font-size: 26pt;

	position: absolute;
	right:10%;
}


.mobileMenuCloseBtn:target + close {
	display: none
}

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


}

.side-content {
position: relative;
top:0;
/*border: 1pt black dotted;*/
min-height: 50%;
width:80%;
height: auto;
overflow:hidden;
float: none;

}

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

	height: auto;
	float: left;

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

}

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

}
#footer a:hover {
	color: black;
	text-decoration: nones;
}
#footer-right {
	
	display: none;
}
#imgGalDiv {

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

}
.fixedHeight   {
	height: auto;
	overflow: hidden;
}
.imgtable td {
	width:100%;
	height: auto;
	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: 202px;
		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;
}
}