/*

	Theme Name: Bluebird Escape Games
	Theme URL: https://blue.crapin.com/
	Description: Bluebird Escape Games 2021 | Virtual Live-Communication.
	Author: DB/M - jm / designbuero-michel.com
	Version: 1.2.0
	Text Domain: bluebird-theme

*/

@charset "UTF-8";
/* CSS Document */
@import url("css/logo.css");
@import url("css/gamemenu.css");
@import url("css/gameprogress.css");
@import url("css/menuBtn.css");
@import url("css/menuhintBtn.css");
@import url("css/backHistBtn.css");
@import url("css/hintBox.css");
@import url("css/image-comparison-slider.css");
@import url("css/flickity.min.css");
@import url("css/moduls.css");
@import url("css/fonts.css");

#bgVideo {
	position: fixed;
	z-index: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */
.rotate.triggeredCSS3 {
	transform: rotate(360deg);
}
.scale.triggeredCSS3 {
	transform: scale(1);
	opacity: 1;
}
.translate.triggeredCSS3 {
	transform: scale3d(1, 1, 1);
	opacity: 1;
}
/* STANDARTS */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

.ani {
	transform: scale(0.5);
	opacity: 0.2;
	transition: 1s;
}

.ani2 {
	transform: scale3d(1, 0.5, 0.5);
	opacity: 0.2;
	transition: 1s;
}
.noani {
	transform: scale(1);
	opacity: 1;
	transition: 1s;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

video {
	position: relative;

	/* Setting width & height to auto prevents the browser from stretching or squishing the video */
	width: auto;
	height: 100%;
	/* Make video to at least 100% wide and tall */
	min-width: 100%;
	max-height: 100%;

	object-fit: cover;
	/* Center the video */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-position: center center;
}

.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.centerSpaceBetween {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.centerL {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}
.centerR {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
.centerBR {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

.centerV {
	display: flex;
	align-items: center;
}
.centerVL {
	display: flex;
	align-items: center;
	justify-content: left;
}
.centerVR {
	display: flex;
	align-items: center;
	justify-content: right;
}

.centerVRR {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

a {
	position: relative;
	width: auto;
	text-shadow: none;
	text-decoration: none;
}
a:after {
	content: "";
	height: 1px;
	width: 0px;
	position: absolute;
	bottom: 0px;
	right: 0px;

	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
a:hover:after {
	width: 100%;
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* Img & Video Sizer */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

img {
	max-width: 100%;
	height: 100%;
	width: 100%;
	display: block;
	position: 50% 50%;
}

/* videos */

.elastic-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.elastic-video iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* Body Elements */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

body,
html {
	max-width: 100%;
	height: auto;
	min-height: 100vh;
	/* mobile viewport bug fix */
	min-height: -webkit-fill-available;
	padding: 0;
	margin: 0;
	overflow-x: visible;
	scroll-behavior: smooth;
}

/* ===================== FBF7ED 3559B2 ================================================================================================ */

.wrap {
	margin-left: auto;
	margin-right: auto;
}

section {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
	height: auto;
}

#PageBackground {
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0px;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

#PageContent {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	min-height: 100vh;
}

footer {
	position: absolute;
	z-index: 100;
	width: 100%;
	height: auto;
	bottom: 0;
}
.classicPage {
	padding: 3vw;
	padding-top: 10vw;
	padding-bottom: 10vw;
}

.nav-container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
	padding: 3vw;
}

.nav-container ul {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
	list-style: none;
	list-style-type: none;
}

.nav-container ul li {
	display: inline-block;
	width: auto;
	height: auto;
	padding-right: 3vw;
	padding-top: 1vw;
	padding-bottom: 1vw;
}
.nav-container ul li:last-child {
	padding-right: 0vw;
}
.nav-container ul li a {
	text-decoration: none;
	opacity: 1;
}
.nav-container ul li a:hover {
	opacity: 0.6;
}
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

@media screen and (max-width: 956px) {
	/* ===================================================================================================================== */
	/* ===================================================================================================================== */
	/* ===================================================================================================================== */
}
@media screen and (max-width: 720px) {
	.wrap {
		margin-left: auto;
		margin-right: auto;
		max-width: 90%;
	}

	.nav-container {
		padding: 5vw;
	}
	.nav-container ul li {
		display: block;
	}

	.classicPage {
		padding: 5vw;

		padding-top: 10vh;
		padding-bottom: 10vh;
	}
	/* ===================================================================================================================== */
	/* ===================================================================================================================== */
	/* ===================================================================================================================== */
}

/**
 * ADDITION DOMINIK
 */
.error-message {
	padding-top: 140px;
	color: red;
	margin: 0 20%;
	text-align: center;
}

.messageBox {
	position: relative;
	max-width: 100%;
	height: 100%;
}

.messageBoxText {
	background-color: rgba(100, 100, 100, 0.2);
	position: relative;
	max-width: 100%;
	padding: 3vw;
}