html {
   min-height:100%;/* make sure it is at least as tall as the viewport */
   position:relative; 
}

body {
   height:100%; /* force the BODY element to match the height of the HTML element */

	background-image: url('Kirche_in_Kirchheim.jpg');
	background-size: cover;
	background-size: center;
	background-repeat: no-repeat;
}

#panel {
   position:absolute;
	margin: auto;
   top:0;
   bottom:0;
   left:0;
   right:0;
   overflow: hidden; /* auto; */

/*	opacity: 0.2;  */
	border:solid 10px #5793C9;
	padding: 10%;
}

#board {
	position: absolute;
	margin: auto;
	top: 0px;
	bottom: 0px;
	left:0;
	right:0;
	height: 75%;
	width:  65%;
	background-color: #5793C9;
	opacity: 0.9;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5), 0 8px 30px 0 rgba(0, 0, 0, 0.3);
	padding: 100px;
}

#textcaption {
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
   font-family: Helvetica;
   font-size: 2.0vmax;
   font-weight: 700;
   color: white;
}

#textinfo {
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
	text-align: center;
   font-family: Helvetica;
   font-size: 1.5vmax;
   font-weight: 400;
   color: white;
}

#livestream {
   display: block;
	margin:  auto;
   width:   320px;
   height:  180px;
   padding:   0px;
   border:    0px;
}

#player {
	display:      none;
	position: relative;
	margin:       auto;
	margin-top:  300px;
	width:       400px;
	height:       60px;
	padding:      10px;
	border:        0px;
	background-color: #004488;
}

#audioctrl {
	width:        100%;
	margin-top:   10px;	
}
/*-------------------------------------------------------*/

*:fullscreen,
:-ms-fullscreen {
	box-sizing: border-box;
	width:  100%;
	height: 100%;
	object-fit: contain;
}

:-webkit-full-screen {
	background: pink;
}

:-moz-full-screen {
	background: yellow;
}

:-ms-fullscreen {
	background: pink;
	witdh: 90%;
	margin: 1em auto;
	object-fit: contain;
}

:fullscreen {
	/* spec */
	
	background: white;
}