:root {
	--color-text: #fff;
	--color-bg-dark: hsla(212,99%,11%,1);
	--color-bg-light: hsla(204,98%,58%,1);
	--color-dark-blue: hsla(212,99%,11%,1);
	--color-light-blue: hsla(204,98%,58%,1);
	--color-textshadow: hsla(0,0%,0%,.25);
	--left-text-color: hsla(216,22%,32%,1);
	--left-text-color-light: hsla(216,22%,37%,1);
	--left-text-color-dark: hsla(216,22%,27%,1);
	--color-light-blue: hsla(208,57%,69%,1);
	--right-background-color: hsla(207,97%,27%,1);
	--music-player-color: hsla(27,93%,39%,1);
	--music-player-text-color: hsla(0,0%,100%,0.5);
	--music-player-color-hover: hsla(27,93%,49%,1);
	--music-player-text-color-hover: hsla(0,0%,100%,1);
}

	* {
		box-sizing: border-box;
	}

	html,
	body {
		color: var(--color-text);
		font-size: 1em;
		font-weight: 300;
		line-height: 1.4;
		font-family: Sans-serif;
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 100vh;
		width: 100vw;
	}

	body {
		font-family: 'Poppins', sans-serif;
		background: radial-gradient(
			ellipse at bottom,
			var(--color-bg-light),
			var(--color-bg-dark)
		) no-repeat;
		font-size: 1rem;
		opacity: 0;
	}

	::-moz-selection {
		background: transparent;
		text-shadow: none;
	}

	::selection {
		background: transparent;
		text-shadow: none;
	}

	canvas,
	iframe,
	img,
	svg,
	video {
		vertical-align: middle;
	}

	audio {
		display: none;
		z-index: 1;
	}

	.hidden {
		display: none !important;
	}

	.invisible {
		visibility: hidden;
	}

	h1, h2, h3, h4, h5, h6, .headline {
		margin: 0;
		padding: 0;
		font-weight: 300;
	}

	h1 {
		font-family: 'Qwigley';
		font-size: 4rem;
		text-align: center;
	}
	h2 {
		font-size: 2.5rem;
		text-align: center;
	}
	h3 { font-size: 2.0rem; }
	h4 { font-size: 1.50rem; }
	h5 { font-size: 1.25rem; }
	h6 { font-size: 1rem; }

	.textshadow {
		text-shadow: 0px 2px 1px var(--color-textshadow);
	}

	.text-center {
		text-align: center;
	}

	.layout {
		z-index: 1041;
		display: flex;
		flex-wrap: wrap;
	}

	.layout .wood {
		position: absolute;
		top: 0px;
		height: 100vh;
		z-index: 1050;
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
	}

	.layout .wood-left {
		left: 0px;
		background-image: url('../img/wood_left.png');
		background-position: top right;
		width: 400px;
		-webkit-perspective: 980px;
		perspective: 980px;
	}

	.layout .wood-left .inner {
		margin-right: 20px;
	}

	.layout .wood-right {
		right: 0px;
		background-image: url('../img/wood_right.png');
		background-position: top left;
		width: 400px;
	}
	.layout .wood-right .inner {
		margin-left: 10px;
	}

	.layout .column {
		box-sizing: border-box;
		flex: 1;
		height: 100vh;
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
	}

	.layout .column-left,
	.layout .column-right {
		color: var(--left-text-color);
		flex: 0 0 380px;
	}

	.layout .column-center {
		color: #fff
		overflow: hidden;
	}

	.layout .column-center .background {
		background-image: url('../img/bg2.jpg');
		background-position: bottom right;
		box-sizing: border-box;
		position: absolute;
		height: 102%;
		width: 102%;
		top: -1%;
		left: -1%;
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
	}

	.layout .column-center .background-overlay {
		position: absolute;
		background: radial-gradient(
			ellipse,
			hsla(217, 66%, 20%,0),
			hsla(217, 66%, 10%,1)
		) no-repeat;
		height: 102%;
		width: 102%;
		top: -1%;
		left: -1%;
		overflow: hidden;
	}

	.layout #backgroundmusictoggle {
		position: absolute;
		bottom: 16px;
		left: calc(50% - 1.5rem + 10px);
		width: 3rem;
		height: 3rem;
		line-height: 3rem;
		padding: 0px;
		text-align: center;
		font-size: 1.25rem;
		cursor: pointer;
		color: var(--music-player-text-color);
		background-color: rgba(0,0,0,.55);
		box-shadow: inset 0 3px 10px -2px rgba(0,0,0,.5), 0 1px 3px -1px rgba(255,255,255,0.5);
		border-radius: 50%;
		transition: .4s;
		transform: scale(0.8);
	}

	.layout #backgroundmusictoggle:hover {
		color: var(--music-player-text-color-hover);
		transform: scale(1);
	}

	.layout #backgroundmusictoggle.active {
		background-color: transparent; /* var(--music-player-color-hover); */
		box-shadow: none;
		color: var(--music-player-text-color-hover);
		left: calc(8% + 10px); /*0.5rem;*/
		transform: scale(1);
	}

	.layout #backgroundmusictoggle.active:hover {
		color: var(--music-player-text-color);
	}

	.layout #musiccopyright {
		position: absolute;
		pointer-events:none;
		opacity: 0;
		bottom: 16px;
		left: calc(8% + 10px);
		right: calc(8% - 10px);
		height: 3rem;
		line-height: 1rem;
		padding: 0.5rem 0;
		color: #fff;
		background-color: rgba(0,0,0,.55);
		box-shadow: inset 0 3px 10px -2px rgba(0,0,0,.5), 0 1px 3px -1px rgba(255,255,255,0.5);
		border-radius: 1.5rem;
		text-align: center;
		font-size: 1rem;
		transition-delay: 0s;
	}

	.layout #musiccopyright.active {
		opacity: 1;
		transition-delay: 0.1s;
		transition-property: opacity;
		transition-duration: 0.4s;
		pointer-events:auto;
	}

	.layout #musiccopyright a {
		color: var(--music-player-text-color);
		text-decoration: none;
		transition: .4s;
		font-weight: 300;
		font-size: 0.7rem;
	}

	.layout #musiccopyright a:hover {
		color: var(--music-player-text-color-hover);
	}

	.layout #claim {
		z-index: 2;
		position: absolute;
		bottom: 96px;
		left: calc(12.5% + 10px);
		width: 75%;
		pointer-events:none;
	}

	.layout #zapfen {
		z-index: 2;
		position: absolute;
		bottom: -28px;
		left: calc(10px + 60px);
		width: 200px;
		pointer-events:none;
	    -webkit-filter: drop-shadow(0px 12px 16px rgba(0,0,0,0.3));
	    filter: drop-shadow(0px 12px 16px rgba(0,0,0,0.3));
	}

	.layout #noten {
		z-index: 2;
		position: absolute;
		top: 220px;
		left: calc(10% - 10px);
		width: 80%;
		pointer-events:none;
	    -webkit-filter: drop-shadow(0px 12px 16px rgba(0,0,0,0.3));
	    filter: drop-shadow(0px 12px 16px rgba(0,0,0,0.3));
	}

	.layout #nuesse {
		z-index: 2;
		position: absolute;
		top: -64px;
		left: calc(10px + 60px);
		width: 200px;
		pointer-events:none;
		transform: rotate(10deg);
	    -webkit-filter: drop-shadow(0px 12px 16px rgba(0,0,0,0.3));
	    filter: drop-shadow(0px 12px 16px rgba(0,0,0,0.3));
	}

	.layout #anhaenger {
		z-index: 1;
		position: absolute;
		top: 16px;
		right: -0px;
		width: 290px;
		pointer-events:none;
	}

	.layout #tanne {
		z-index: 1;
		position: absolute;
		bottom: -32px;
		left: -64px;
		width: 200px;
		pointer-events:none;
	    -webkit-filter: drop-shadow(0px 12px 16px rgba(0,0,0,1));
	    filter: drop-shadow(0px 12px 16px rgba(0,0,0,1));
	}

	.layout #tanne2 {
		z-index: 1;
		position: absolute;
		top: -32px;
		left: -16px;
		width: 400px;
		pointer-events:none;
	    -webkit-filter: drop-shadow(0px 12px 16px rgba(0,0,0,1));
	    filter: drop-shadow(0px 12px 16px rgba(0,0,0,1));
	}

	.layout #tanne3 {
		z-index: 2;
		position: absolute;
		top: -32px;
		left: -32px;
		width: 700px;
		pointer-events:none;
		transform: rotate(40deg);
	    -webkit-filter: drop-shadow(0px 12px 16px rgba(0,0,0,1));
	    filter: drop-shadow(0px 12px 16px rgba(0,0,0,1));
	}

	.layout #tanne4 {
		z-index: 1;
		position: absolute;
		bottom: -136px;
		left: calc(50% - 10px - 200px);
		width: 400px;
		pointer-events:none;
		transform: rotate(-20deg);
	    -webkit-filter: drop-shadow(0px 12px 16px rgba(0,0,0,1));
	    filter: drop-shadow(0px 12px 16px rgba(0,0,0,1));
	}

	.snow {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		pointer-events:none;
		z-index: 1042;
	}

	.text-blur-in {
		opacity: 0;
		-webkit-animation: text-blur-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		animation: text-blur-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	}

	@-webkit-keyframes text-blur-in {
		100% {
			opacity: 1.0;
			-webkit-filter: blur(0);
		}
		0% {
			opacity: 0;
			-webkit-filter: blur(12px);
		}
	}
	@keyframes text-blur-in {
		100% {
			opacity: 1.0;
			filter: blur(0);
		}
		0% {
			opacity: 0;
			filter: blur(12px);
		}
	}

	.ken-burns-bg {
		-webkit-animation-name: ken-burns-bg-move;
		-moz-animation-name: ken-burns-bg-move;
		animation-name: ken-burns-bg-move;
		-webkit-animation-duration: 15s;
		-moz-animation-duration: 15s;
		animation-duration: 15s;
		-webkit-animation-timing-function: ease-in-out;
		-moz-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
		-moz-animation-direction: alternate;
		animation-direction: alternate;
		-webkit-transform-origin: 50% 50% 0;
		-moz-transform-origin: 50% 50% 0;
		transform-origin: 50% 50% 0;
	}

	@-webkit-keyframes ken-burns-bg-move {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(1.25);
		}
	}

	@-moz-keyframes ken-burns-bg-move {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(1.25);
		}
	}

	@keyframes ken-burns-bg-move {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(1.25);
		}
	}

.card {
	-webkit-filter: drop-shadow(0px 12px 16px rgba(0,0,0,0.3));
	filter: drop-shadow(0px 12px 16px rgba(0,0,0,0.3));
	z-index: 10;
	-webkit-perspective: 1980px;
	perspective: 1980px;
	position: absolute;
	left: calc(50% - 218px);
	bottom: calc(50% - 313px);
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	transition-duration: 2s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition-delay: initial;
	-webkit-transform: rotate(-10deg) translate(0, 0);
	transform: rotate(-10deg) translate(0, 0) scale(0.8);
	-webkit-animation: cardIn 2s cubic-bezier(0.87, -0.41, 0.19, 1.44);
	animation: cardIn 2s alternate cubic-bezier(0.87, -0.41, 0.19, 1.44);
	z-index: 1051;
}

.card:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.card.is-opened {
	-webkit-transform: rotate(0deg) translate(50%, calc(50% - 313px) );
	transform: rotate(0deg) translate( 50%, calc(50% - 313px) );
}

.card.is-opened .card-page-front {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.card,
.card-page {
	width: 438px;
	height: 625px;
}

.card-page {
	transition: -webkit-transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	position: absolute;
	outline: none;
}

.card-page-front {
	-webkit-transform-origin: 0 50% 0;
	transform-origin: 0 50% 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	z-index: 2;
}

.card-page-outside,
.card-page-inside {
	position: absolute;
	-webkit-backface-visibility: hidden;
}

.card-page-outside {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 6px solid #ffffff;
	background-image: url('../img/card_front.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	width: 100%;
	height: 100%;
	font-size: 3rem;
	display: -webkit-box;
	display: -moz-box;
	display: box;
	display: -moz-flex;
	display: flex;
	box-pack: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
	-ms-flex-pack: center;
	box-align: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-items: center;
	-ms-flex-align: center;
	text-align: center;
}

.card-page-inside,
.card-page-bottom {
	background-color: #d4d1d0;
	display: -webkit-box;
	display: -moz-box;
	display: box;
	display: -moz-flex;
	display: flex;
	box-pack: center;
	color: #404040;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
	-ms-flex-pack: center;
	box-align: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-items: center;
	-ms-flex-align: center;
	text-align: center;
}

.card-page-inside {
	background-image: url('../img/card_inside.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	border: none !important;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.card-page-bottom {
	z-index: 1;
	border: none !important;
	background-image: url('../img/card_inside_2.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	display: block;
	text-align: left;
	padding: 30px 20px;
	line-height: 1.4rem;
}

@-webkit-keyframes cardIn {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-10deg) translate(0, -100%) scale(0.1);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(-10deg) translate(0, 0) scale(0.8);
  }
}

@keyframes cardIn {
  0% {
    opacity: 0;
    transform: rotate(-180deg) translate(-100%, -100%) scale(0.1);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotate(-10deg) translate(0, 0) scale(0.8);
  }
}

.card.ie11,
.card.ie11 * {
	transition-duration: 0s;
}

.card.ie11 .card-page-inside {
	backface-visibility: hidden;
}

.card.ie11.is-opened {
	transform: rotate(0deg);
	left: 50%;
}

.card.ie11.is-opened .card-page-inside {
	backface-visibility: visible;
}

hr {
	border: 0;
	background-color: rgba(0,0,0,.25);
	margin: 12px 0;
	padding: 0;
	height: 1px;
	overflow: hidden;
}