/************************************************
 * full page background
 */
body {
	padding: 0;
	margin: 0;

	overflow: hidden;
}

.kongressbad {
	/* without logo: */
	background: url("img/background_nologo.jpg");
	/* with logo: 
	background: url("img/background.jpg");*/

	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
}

.plain {
	background-color: #555555;
}



/************************************************
 * enter sign
 */
.enter {
	position: fixed;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);
}

.enter img {
	width: 10vw;
	height: auto;

	/* pulsating white shadow */
	/*filter: drop-shadow(0 0 5px white);
	animation: enter-pulse 2s infinite;
	animation-delay: 0.5s;*/
}

/*@keyframes enter-pulse {
	0% {
		filter: drop-shadow(0 0 5px white);
	}

	70% {
		filter: drop-shadow(0 0 20px white);
	}

	100% {
		filter: drop-shadow(0 0 5px white);
	}
}*/

.enter img:hover {
	cursor: pointer;
	filter: drop-shadow(0 0 10px white);
}



/************************************************
 * czirp czrip
 */
 .czirpczirp {
	position: absolute;
	left: 10vw;
	/* with logo:
	bottom: 15vh;*/
	/* without logo: */
	bottom: 5vh;
}

.czirpczirp img {
	width: 20vw;
	/*max-width: 400px;*/
	height: auto;

	z-index: 1;

	/* pulsating black shadow */
	/*filter: drop-shadow(0 0 5px black);
	animation: czirp-pulse 2s infinite;
	animation-delay: 1s;*/
}

/*@keyframes czirp-pulse {
	0% {
		filter: drop-shadow(0 0 5px black);
	}

	70% {
		filter: drop-shadow(0 0 20px black);
	}

	100% {
		filter: drop-shadow(0 0 5px black);
	}
}*/

.czirpczirp img:hover {
	filter: drop-shadow(0 0 10px black);
	cursor: pointer;
}



/************************************************
 * frido
 */
 .frido {
	position: absolute;
	right: 15vw;
	/* with logo:
	bottom: 15vh;*/
	/* without logo: */
	bottom: 10vh;}

.frido img {
	width: 20vw;
	max-width: 400px;
	height: auto;

	opacity: 0.95;

	z-index: 1;

	/* pulsating white shadow */
	filter: drop-shadow(0 0 0 rgba(255, 255, 255, 1));
	animation: frido-pulse 3s infinite;
	animation-delay: 2s;
}

@keyframes frido-pulse {
	0% {
		filter: drop-shadow(0 0 0 rgba(255, 255, 255, 1)) brightness(1.2);
		/*transform: scale(1);*/
	}

	70% {
		filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0));
	}

	100% {
		filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
		/*transform: scale(0.98);*/
	}
}

.frido img:hover {
	/*filter: drop-shadow(0 0 10px white);*/
	cursor: pointer;
}



/************************************************
 * frido animated pointer
 */
 .frido-pointer {
	position: absolute;
	right: 10vw;
	bottom: 20vh;
}

.frido-pointer img {
	width: 10vw;
	height: auto;

	z-index: 1;
}



/************************************************
 * sponsor logos
 */
.sponsor-bar {
	/* without logo: */
	visibility: hidden;

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4vh;
	min-height: 50px;
	/*min-height: 10vh;
	max-height: 10vh;*/

	padding: 2vh;

	background: #FFFFFF;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;

	z-index: 2;
}

.sponsor-bar .sponsor {
	width: auto;
	max-width: 10%;
	height: 100%;

	vertical-align: middle;

	flex: 1 1 auto;
}

.sponsor-bar .sponsor img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}



/************************************************
 * Matterport viewer iframe
 */

 #matterport {
	position: absolute;
	top: 0;
	left: 0;

	visibility: hidden;
	opacity: 0;

	width: 100vw;
	height: 100vh;
 }



 /************************************************
 * flute-video
 */
#flute-video {
	position: absolute;
	top: 0;
	left: 0;

	visibility: hidden;
	opacity: 0;
	
	width: 100vw;
	height: 100vh;

	z-index: 2;
}



/************************************************
 * back button for Matterport viewer and flute video
 */
 .back {
	position: absolute;
	top: 5vh;
	left: 48vw;

	visibility: hidden;
	
	z-index: 3;
}

.back img {
	width: 5vw;
	height: auto;
}

.back img:hover {
	cursor: pointer;
	filter: drop-shadow(0 0 10px white);
}



/************************************************
 * history button for Matterport viewer
 */
.history {
	position: absolute;
	bottom: 5vh;
	left: 30vw;

	visibility: hidden;

	z-index: 3;
}

.history img {
	width: 14vw;
	height: auto;
}

.history img:hover {
	filter: drop-shadow(0 0 10px black);
	cursor: pointer;
}



/************************************************
 * artists button for Matterport viewer
 */
.artists {
	position: absolute;
	bottom: 5vh;
	left: 60vw;

	visibility: hidden;

	z-index: 3;
}

.artists img {
	width: 7vw;
	height: auto;
}

.artists img:hover {
	filter: drop-shadow(0 0 10px black);
	cursor: pointer;
}