:root
{
/*	--orange-color		: #F5882E; */
	--orange-color		: #f5762e;

	--page2-img-width	: 447px;
	--page2-img-height	: 580px;
	--page2-img-width-sm	: 313px;
	--page2-img-height-sm	: 406px;

	--page2-img1-width	: 100%;
	--page2-img2-width	: 55%;
	--page2-img2-left	: 0%;
	--page2-img2-top	: 33%; /*190px;*/
	--page2-img3-width	: 55%;
	--page2-img3-left	: 0%;
	--page2-img3-top	: 53%; /*310px;*/
	--page2-img4-width	: 55%;
	--page2-img4-left	: 0%;
	--page2-img4-top	: 76%; /*439px;*/
	--page2-img5-width	: 45%;
	--page2-img5-left	: 55%;
	--page2-img5-top	: 38%; /*220px;*/

	--page3-img-width		: 447px;
	--page3-img-height		: 580px;
	--page3-img-width-sm	: 313px;
	--page3-img-height-sm	: 406px;

	--page3-img1-width	: 100%;
	--page3-img1-top	: 0%;
	--page3-img2-width	: 100%;
	--page3-img2-top	: 31%;
	--page3-img3-width	: 100%;
	--page3-img3-top	: 66%;

	--page4-img-width		: 427px;
	--page4-img-height		: 580px;

	--page4-img1-width	: 100%;
	--page4-img2-width	: 51%;
	--page4-img2-top	: 30%;
	--page4-img3-width	: 50%;
	--page4-img3-top	: 32.5%;
	--page4-img3-right	: 0%;
	--page4-img4-width	: 100%;
	--page4-img4-top	: 49%;
	--page4-img5-width	: 53%;
	--page4-img5-bottom	: 0%;
	--page4-img6-width	: 49%;
	--page4-img6-bottom	: 0%;
	--page4-img6-right	: 0%;

	--page5-img-width		: 427px;
	--page5-img-height		: 580px;

	--page5-img1-width	: 60%;
	--page5-img2-width	: 41%;
	--page5-img2-right	: 0%;
	--page5-img3-width	: 41%;
	--page5-img3-top	: 36%;
	--page5-img3-right	: 0%;
	--page5-img4-width	: 41%;
	--page5-img4-right	: 0%;
	--page5-img4-bottom	: 0%;
	--page5-img5-width	: 30%;
	--page5-img5-left	: 29%;
	--page5-img5-bottom	: 0%;
	--page5-img6-width	: 27.9%;
	--page5-img6-left	: 0%;
	--page5-img6-bottom	: 0%;
}


html
{
	font-family 	: Verdana;
	color       	: #313131;
	font-size	: 16px;
	height		: 100%;
	background	: white;
}

body
{
	display		: flex;
	flex-direction	: column;
	height		: 100%;
	margin		: 0;
}

.content-area
{
	flex		: 1;
	max-width	: 1100px;
	margin		: auto;
}

.content-area::before
{
	content		: " ";
	background-image: url('images/background.jpg');
	position	: absolute;
	left		: 0;
	top		: 0;
	width		: 100%;
	height		: 100%;
	z-index		: -1;
	filter		: opacity(0.9) blur(4px);
	transform	: scale(1.1); 
}

button
{
	border-radius		: 3px;
	background-color	: var(--orange-color);
	color				: white;
	border				: 2px solid var(--orange-color);
	padding				: 10px 20px;
	text-align			: center;
	transition-duration	: 0.4s;
	margin				: 16px 0 !important;
	text-decoration		: none;
	font-size			: 16px;
	cursor				: pointer;
}
button:hover
{
	background-color: white;
	color			: black;
	border			: 2px solid var(--orange-color);
}

.header ul li
{
	display         : inline-block;
	margin-bottom   : 0px;
	margin-right    : 10px;
	font-size		: 20px;
	padding			: 4px;
}
.header ul li.active
{
	border-bottom: 2px solid #272727;
	border-top: 2px solid #272727;
}

.header ul li a,
.header ul li a:visited,
.header ul li a:link
{
	text-decoration	: none;
	color			: #272727;
}

.header
{
	display		: flex;
	height		: 100px;
	background	: var(--orange-color);
	width		: 100%;
	align-items	: flex-end;
}

.dual-page-container
{
	display         : flex;
	flex-direction  : column;
	height          : 100%;
}
.dual-page-container > div:first-child
{
	flex			: 1;
	display			: flex;
	justify-content	: center;
	align-items		: center;
	padding			: 20px;
	min-width		: 500px;
}
.dual-page-container > div:last-child
{
	flex		: 1;
	padding		: 20px 40px 20px 20px;
	display		: flex;
	flex-direction	: column;
	justify-content	: center;
}

.impressum-box
{
	position		: fixed;
	display			: none;
	background		: #000000dd;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 100%;
	z-index			: 200;
	justify-content	: center;
	align-items		: center;
}
.impressum-box.active
{
	display: flex;
}
.impressum-box > div
{
	width		: 80%;
	height		: 80%;
	background	: #ffffff;
	margin		: 20px;
	overflow-y	: auto;
}

.collage-image
{
	position	: absolute;
	object-fit	: contain;
	outline		: 5px solid white;
}

.page2-img-container
{
	position	: relative;
	min-width	: 400px;
	width		: var(--page2-img-width);
	height		: var(--page2-img-height);
}

.page3-img-container
{
	position	: relative;
	min-width	: 400px;
	width		: var(--page3-img-width);
	height		: var(--page3-img-height);
}

.page4-img-container
{
	position	: relative;
	min-width	: 400px;
	width		: var(--page4-img-width);
	height		: var(--page4-img-height);
}

.page5-img-container
{
	position	: relative;
	min-width	: 400px;
	width		: var(--page5-img-width);
	height		: var(--page5-img-height);
}

.page2-img1
{
	width	: var(--page2-img1-width);
}
.page2-img2
{
	width	: var(--page2-img2-width);
	left	: var(--page2-img2-left);
	top		: var(--page2-img2-top);
}
.page2-img3
{
	width	: var(--page2-img3-width);
	left	: var(--page2-img3-left);
	top		: var(--page2-img3-top);
}
.page2-img4
{
	width	: var(--page2-img4-width);
	left	: var(--page2-img4-left);
	top		: var(--page2-img4-top);
}
.page2-img5
{
	width	: var(--page2-img5-width);
	left	: var(--page2-img5-left);
	top		: var(--page2-img5-top);
}

.page3-img1
{
	width	: var(--page3-img1-width);
	top		: var(--page3-img1-top);
}
.page3-img2
{
	width	: var(--page3-img2-width);
	top		: var(--page3-img2-top);
}
.page3-img3
{
	width	: var(--page3-img3-width);
	top		: var(--page3-img3-top);
}

.page4-img1
{
	width	: var(--page4-img1-width);
}
.page4-img2
{
	width	: var(--page4-img2-width);
	top		: var(--page4-img2-top);
}
.page4-img3
{
	width	: var(--page4-img3-width);
	top		: var(--page4-img3-top);
	right	: var(--page4-img3-right);
}
.page4-img4
{
	width	: var(--page4-img4-width);
	top		: var(--page4-img4-top);
}
.page4-img5
{
	width	: var(--page4-img5-width);
	bottom	: var(--page4-img5-bottom);
}
.page4-img6
{
	width	: var(--page4-img6-width);
	bottom	: var(--page4-img6-bottom);
	right	: var(--page4-img6-right);
}

.page5-img1
{
	width	: var(--page5-img1-width);
}
.page5-img2
{
	width	: var(--page5-img2-width);
	right	: var(--page5-img2-right);
}
.page5-img3
{
	width	: var(--page5-img3-width);
	top		: var(--page5-img3-top);
	right	: var(--page5-img3-right);
}
.page5-img4
{
	width	: var(--page5-img4-width);
	right	: var(--page5-img4-right);
	bottom	: var(--page5-img4-bottom);
}
.page5-img5
{
	width	: var(--page5-img5-width);
	left	: var(--page5-img5-left);
	bottom	: var(--page5-img5-bottom);
}
.page5-img6
{
	width	: var(--page5-img6-width);
	left	: var(--page5-img6-left);
	bottom	: var(--page5-img6-bottom);
}

@media (orientation: landscape)
{
	.dual-page-container
	{
		flex-direction: row;
	}
}
/*
@media screen and (max-height: 600px)
{
	.collage-image
	{
		outline	: 3px solid white;
	}

	.page2-img-container
	{
		width		: var(--page2-img-width-sm);
		height		: var(--page2-img-height-sm);
		min-width	: 300px;
	}

	.page3-img-container
	{
		width		: var(--page3-img-width-sm);
		height		: var(--page3-img-height-sm);
		min-width	: 300px;
	}
}
*/


.slideshow-container
{
	max-width	: 1000px;
	position	: relative;
	margin		: auto;
	border		: 8px solid white;
}

.slideshow-side
{
	display			: none;
	animation-name		: fade;
	animation-duration	: 1.5s;
}
.slideshow-side img
{
	width	: 100%;
}

.slideshow-number
{
	color		: #f2f2f2;
	font-size	: 12px;
	padding		: 8px 12px;
	position	: absolute;
	top		: 10px;
}

.slideshow-text
{
	box-sizing	: border-box;
	backdrop-filter	: brightness(0.5);
	color		: #f2f2f2;
	font-size	: 15px;
	padding		: 8px 12px;
	position	: absolute;
	bottom		: 0px;
	width		: 100%;
	text-align	: center;
}

@keyframes fade
{
	from { opacity: .4 }
	to   { opacity: 1 }
}

.textbox
{
	border-radius	: 10px;
	background	: white;
	padding		: 16px;
	opacity		: 0.8;
}









/* .slider used somewhere? */
.slider
{
	height: 100%;
	overflow: hidden;
}

.slider .item
{
	overflow	: hidden;
	position	: relative;
	height		: 100%;
}

.slider .item img
{
	width		: auto;
	height		: 100%;
	position	: relative;
	z-index		: 1;
	left		: 50%;
	transform	: translateX(-50%) scale(1.4);
	opacity		: 0.4;
	filter		: blur(50px) saturate(3);
}