<style>
.w3-content,.w3-auto
{
	margin-left:auto;
	margin-right:auto
}
.w3-content
{
	max-width:980px
}
.w3-auto
{
	max-width:1140px
}
.w3-display-container:hover .w3-display-hover
{
	display:block
}
.w3-display-container:hover span.w3-display-hover
{
	display:inline-block
}
.w3-display-hover
{
	display:none
}
.object-container 
{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.objectSlide
{
	position: relative;
	display: block;
	transition: transform 1.5s;
	width: 100%;
	height: 100%;
}
.objectSlide img
{
	border: 2px solid #C0C0C0;
	border-radius: 10px;
}

.bottom-right 
{
	color: black;
	font-family: "Tahoma";
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	position: absolute;
	bottom: 8px;
	right: 60px;
	padding: 4px 10px;
	background-color: #C0C0C0
}
.boosty
{
	position: fixed;
	top: 250px;
	right: 20px;
	text-align: center;
}
.slideshow-container 
{
	position: relative;
	max-width: 1000px;
	margin: auto;
}
.mySlides
{
	display: none;
}
.mySlides img
{
	border: 2px solid #C0C0C0;
	border-radius: 10px;
	vertical-align: middle;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Next & previous buttons */
.prev, .next 
{
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 30px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	text-decoration: none;
}

/* Position the "next button" to the right */
.next 
{
  right: 0;
}
.prev
{
	left: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover 
{
  background-color: #C0C0C0;
  color: black;
}

body {margin:0;}

/* Style the active class, and buttons on mouse-over */
.dropbtn
{
	background-color: transparent;
	font-family: "Tahoma";
	font-size: 14px;
	font-weight: bold;
	color: white;
	text-align: center;
	text-decoration: none;
	border: none;
}
.dropdown 
{
	float: left;
	position: fixed;
	display: inline-block;
	top: 10px;
	left: 40px;
	width: 180px;
	height: 200px;
	border: none;
	background-color: transparent;
	outline: none;
	padding: 2px 2px;
	cursor: pointer;
	text-align: center;
	z-index: +1;
	padding-top: 20px;
}
.dropdown-content
{
	display: none;
	position: absolute;
	min-width: 200px;
	background-color: transparent;
	margin: 4px;
}
.dropdown-content button
{
	color: black;
	padding: 12px 16px;
	display: block;
	width: 200px;
	border: none;
	background-color: #C0C0C0;
	outline: none;
	padding: 2px 2px;
	cursor: pointer;
	font-family: "Tahoma";
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	margin: 4px;
}
.dropdown-content button:hover {background-color: #808080;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {color: #FFFFFF;}

.navbar 
{
	overflow: hidden;
	position: fixed;
	top: 10px;
	left: 0;
	width: 230px;
	height: 100%;
	z-index: +1;
	background-color: transparent;
	padding-top: 20px;
}

.navbar .btn, .navbardropbtn
{
	padding: 6px 8px 6px 16px;
	border: none;
	outline: none;
	display: block;
	padding: 2px 2px;
	cursor: pointer;
	width: 100%;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: white;
	text-align: left;
	text-decoration: none;
	margin: 2px;
	background: none;
}

.navbar .btn:hover, .navbardropdown:hover .navbardropbtn
{
	color: white;
	background-color: #C0C0C0;
}
.navbardropdown 
{
	float: left;
	overflow: hidden;
	width: 210px;
	border: none;
	outline: none;
	padding: 2px 2px;
	cursor: pointer;
	text-align: center;
}
.navbardropdown-content
{
	display: none;
	padding-left: 8px;
}
.navbardropdown-content button
{
	color: white;
	border: none;
	outline: none;
	cursor: pointer;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: white;
	text-align: center;
	text-decoration: none;
}
.navbardropdown-content button:hover
{
	color: white;
	background-color: #C0C0C0;
	cursor: pointer;
}
.navbardropdown:hover .navbardropdown-content 
{
  display: block;
}

#currentpage
{
	background-color: #C0C0C0;
	color: white;
}
.active 
{
  background-color: green;
  color: white;
}

.siteNav
{
	overflow: hidden;
	position: relative;
	background-color: #C0C0C0;
	width: 200px;
	float: center;
    justify-content: center;
    align-items: center;
}
.siteNav a 
{
	display: block;
	float: left;
	color: white;
	text-align: center;
	text-decoration: none;
	font-size: 26pt;
	width: 30px;
}

.siteNav a:hover 
{
  background-color: #808080;
  color: black;
}

.siteNav a.active 
{
  background-color: #808080;
  color: yellow;
}

.main 
{
	padding: 16px;
	margin-top: 70px;
	margin-left: 100px;
	height: 1000px;
}

.mainMidLinks 
{
	padding: 10px;
	margin-top: 30px;
	height: 1000px;
}

.disclaimer
{
	margin-left: 140px;
	color: white;
	text-align: left;
	font-size: 14pt;

}
.header
{
	position: fixed;
	top: 0px;
	width: 100%;
	height:60px;
	background-color: black;
	z-index: +1;
}
.footer
{
	position: relative;
	bottom: 10px;
}

/* Style Language */
.navLangbtn
{
	padding: 2px;
	font-family: "Lato", sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: white;
	text-align: center;
	text-decoration: none;
	border: none;
	margin: 2px;
	z-index: +1;
	background: none;
}
.navLang
{
	position: fixed;
	overflow: hidden;
	display: block;
	top: 5px;
	right: 0px;
	width: 100px;
	height: 250px;
	background-color: transparent;
	cursor: pointer;
	text-align: center;
	padding-top: 20px;
	z-index: +1;
}
.navLang-content
{
	display: none;
	position: absolute;
	min-width: 80px;
	margin: 2px;
}
.navLang-content button
{
	color: white;
	padding: 12px 16px;
	display: block;
	width: 70px;
	border: 2px;
	border-style: solid;
	border: 2px solid green;
	padding: 4px 4px;
	border-radius: 4px;
	background-color: black;
	outline: none;
	cursor: pointer;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	margin: 2px;
}
	.navLang-content button img
	{
		width: 20px;
		height: auto;
	}

.navLang-content button:hover
{
	background-color: #C0C0C0;
	color: red;
}

.navLang:hover .navLang-content {display: block;}

.navLang:hover .navLangbtn {color: #FFFFFF;}

#currentlang
{
	border: 2px solid red;
	padding: 4px 4px;
	font-style: italic;
	color: red;
}

.links
{
	text-decoration: none;
	text-align: center;
	align: center;
	width: 200px;
	height: auto;
}
.links a {text-decoration: none;}
.links a:hover
{
	font-style: italic;
	text-shadow: 4px 2px red;
	text-decoration: none;
}

p1
{
	font-family: "Tahoma";
	font-size: 22px;
	font-weight: bold;
	color: orange;
	text-decoration: none;
}
p1:hover
{
	font-style: italic;
	text-shadow: 4px 2px red;
	text-decoration: none;
}

p2
{
	font-family: "Tahoma";
	font-size: 28px;
	font-weight: bold;
	color: #FF9900;
}

p3
{
	font-family: "Tahoma";
	font-size: 20px;
	font-weight: bold;
	color: #00FFFF;
	text-align: center;
}
p4
{
	font-family: "Tahoma";
	font-size: 18pt;
	font-weight: bold;
	color: #00FFFF;
	text-align: center;
}
p5
{
	font-family: "Tahoma";
	font-size: 24pt;
	font-weight: bold;
	color: #FF9900;
	text-align:center;
}
p6
{
	font-family: "Tahoma";
	font-size: 16pt;
	font-weight: bold;
	color: yellow;
}
p7
{
	font-family: "Tahoma";
	font-size: 22px;
	font-weight: bold;
	color: yellow;
	text-decoration: none;
}
p8
{
	font-family: "Tahoma";
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}
p9
{
	font-family: "Tahoma";
	font-size: 22px;
	font-weight: bold;
	color: gray;
	text-decoration: none;
}
p9:hover
{
	font-style: italic;
	text-shadow: 4px 2px red;
	text-decoration: none;
}
p10
{
	font-family: "Tahoma";
	font-size: 14pt;
	font-weight: bold;
	color: yellow;
	text-decoration: underline;
}
h1
{
	font-family: "Tahoma";
	font-size: 12pt;
	font-weight: bold;
	color: #C0C0C0;
}

h2
{
	font-family: "Tahoma";
	font-size: 22pt;
	font-weight: bold;
	color: yellow;
}

/* Style Überschrift */
h3
{
	font-family: "Tahoma";
	font-size: 30pt;
	font-weight: bold;
	color: #FF9900;
	text-align:center;
}

h4
{
	font-family: "Tahoma";
	font-size: 30pt;
	font-weight: bold;
	color: #FFFFFF;
	text-align:center;
}

h5
{
	font-family: "Tahoma";
	font-size: 18pt;
	font-weight: bold;
	color: yellow;
}

/* Style Image Container */
.image-container img
{
	display: block;
    margin:0 auto;
    background-color: rgb(173, 173, 237);
    border-radius: 8px;
    transform-origin: 50% 65%;
    transition: transform 2s;
}
.image-container img:hover
{
    transform:scale(1);
}
.gallery {
	--size: 30em;
	/* control the size */
	
	--gap: 1em;
	/* control the gap */
	
	--zoom: 0.8;
	/* control the scale factor */
	
	display: grid;
	gap: var(--gap);
	width: calc(2.2*var(--size) + 2.2*var(--gap));
	aspect-ratio: 1;
	grid-template-columns: repeat(2, auto);
}

.gallery figure {
	margin: 0;
	padding: 0;
	position: relative;
}

.gallery figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
	opacity: 0;
	background: rgb(0 0 0 / 0.3);
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
	opacity: 1;
}

.gallery > figure img {
	width: 0;
	height: 0;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
	cursor: pointer;
	filter: grayscale(100%);
	transition: 0.6s linear;
	border-radius: 50%;
}

.gallery figure:hover img,
.gallery figure:focus img {
	filter: grayscale(0);
	width: calc(var(--size)*var(--zoom));
	height: calc(var(--size)*var(--zoom));
	border-radius: 8px;
}
#videoPlayer
{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
}
.videoshow-container 
{
	position: relative;
	max-width: 900px;
	margin: auto;
}
.videoSlide
{
	width: 845px;
	height: auto;
}
.prevVid, .nextVid 
{
	cursor: pointer;
	position: absolute;
	margin-top: -28px;
	padding: 16px;
	top: 50%;
	width: auto;
	color: white;
	font-size: 24px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	text-decoration: none;
}
.prevVid
{
	left: 0;
}
.nextVid
{
	right: 0;
}

.prevVid:hover, .nextVid:hover 
{
  background-color: #C0C0C0;
  color: black;
}

ul
 {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
    border: 0;
    background-color: transparent;
  }
li
 {
	display: inline-block;
	float: left;
	margin: 0.5em; 
    border: 0;
    background-color: transparent;
 }
 .createLink
 {
	font-family: "Tahoma";
	font-size: 18px;
	font-weight: bold;
	color: yellow;
	text-align: center;
	background-color: transparent;
	text-decoration: none;
	display: inline-block;
 }
 .createLink:hover
 {
	 color: red;
 }
/* Style index.php */
.navLang-contentIndex
{
	display: grid;
	grid-template-columns: auto auto auto;
	padding: 10px;
	margin-top: 10px;
	margin-left: 20%;
}
.navLang-contentIndex button
{
	color: #FFFFFF;
	padding: 12px 16px;
	width: 70px;
	border: 2px;
	border-style: solid;
	border: 2px solid green;
	padding: 4px 4px;
	border-radius: 4px;
	background-color: black;
	outline: none;
	cursor: pointer;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	margin: 2px;
}
.navLang-contentIndex button img
{
	width: 20px;
	height: auto;
}

.navLang-contentIndex button:hover
{
	background-color: #C0C0C0;
	color: red;
}

.indexMenu
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 380px;
	width: 700px;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	background: #585858;
	opacity: 0.8;
	border-radius: 8px;
}
.button1
{
	border: 4px;
	border-style: solid;
	border-color: green;
	outline: none;
	padding: 8px 8px;
	background-color: #C0C0C0;
	width: 400px;
	cursor: pointer;
	font-family: "Tahoma";
	font-size: 22px;
	font-weight: bold;
	color: black;
	text-align: center;
	border-radius: 8px;
	text-decoration: none;
}
.button1:hover
{
	background-color: #808080;
	color: white;
	font-style: italic;
	text-shadow: 3px 3px green;
}
.button2
{
	border: 4px;
	border-style: solid;
	border-color: red;
	outline: none;
	padding: 8px 8px;
	background-color: #C0C0C0;
	width: 400px;
	cursor: pointer;
	font-family: "Tahoma";
	font-size: 22px;
	font-weight: bold;
	color: black;
	text-align: center;
	border-radius: 8px;
	text-decoration: none;
}
.button2:hover
{
	background-color: #808080;
	color: white;
	font-style: italic;
	text-shadow: 3px 3px red;
}
.confirm
{
	overflow: hidden;
	padding: 8px 8px;
}
.mobileSlide
{
	display: none;
}
.desktopVersion
{
	display: initial;
}
.mobileVersion
{
	display: none;
}
.indexText
{
	display: none;
}
.cookieText
{
	display: block;
	z-index: +1;
}
.row 
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.row img 
{
    width: 400px;
    height: 300px;
    border: 4px solid #C0C0C0;
	border-radius: 6px;
    -webkit-filter: sepia(100%);
	filter: grayscale(100%);
    transition-duration: 0.5s;
}

.row img:hover 
{
    border: 4px solid #00FFFF;
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter: none;
    filter: none;
}
@media screen and (max-width: 1280px)
{
	.navbar 
	{
		width: 140px;
	}

	.navbar .btn, .navbardropbtn
	{
		font-family: "Lato", sans-serif;
		font-size: 10px;
	}

	.navbardropdown-content button
	{
		font-size: 10px;
	}
	.navLang
	{
		position: fixed;
		display: inline-block;
		top: 10px;
		right: 20px;
		width: 80px;
	}
	.navLangbtn
	{
		font-size: 12px;
		margin: 2px;
	}
	.navLang-content
	{
		min-width: 60px;
		float: right;
		right: 0;
	}
	.navLang-content button
	{
		width: 50px;
		margin: 2px;
		font-size: 10px;
	}
	.navLang-content button img
	{
		width: 20px;
		height: auto;
	}
	#videoPlayer
	{
		display: none
	}
	.videoshow-container 
	{
		max-width: 500px;
	}
	video.videoSlide 
	{
		width: 500px;
		height: auto;
	}
	.gallery
	{
		display: none;
	}
	.mobileSlide
	{
		display: initial;
	}
	.slideshow-container {max-width: 500px;}
	.mySlides img
	{
		border-radius: 6px;
		width: 500px;
		height: auto;
	}
	.bottom-right 
	{
		font-size: 10px;
		right: 55px;
	}
	.prev, .next 
	{
		margin-top: -28px;
		padding: 16px;
		font-size: 20px;
	}
	p5{font-size: 16pt;}
	p1{font-size: 16px;}
	p2{font-size: 18px;}
	p3{font-size: 16pt;}
	p4{font-size: 12pt;}
	h1{font-size: 10pt;}
	h2{font-size: 12pt;}
	h3{font-size: 16pt;}
	h4{font-size: 14pt;}
	p6{font-size: 16pt;}
	.createLink{font-size: 18px}
	.button1
	{
		border-color: green;
		padding: 4px 4px;
		width: 220px;
		font-size: 14px;
		border-radius: 4px;
	}
	.button2
	{
		padding: 4px 4px;
		width: 220px;
		font-size: 14px;
		border-radius: 4px;
	}
	.confirm
	{
		margin-top: 40px;
	}
	.indexText
	{
		display: initial;
		margin-top: 60px;
	}
	
}
@media screen and (max-width: 500px)
{
	.navLang-contentIndex
	{
		display: grid;
		grid-template-columns: auto auto auto;
		padding: 10px;
		margin-top: 10px;
		margin-left: 5%;
	}
	.navLang-contentIndex button
	{
		width: 50px;
		margin: 2px;
		font-size: 10px;
	}
	.navLang-contentIndex button img
	{
		width: 20px;
		height: auto;
	}

	.indexMenu
	{
		height: 350px;
		width: 350px;
		border-radius: 4px;
	}
	.desktopVersion
	{
		display: none;
	}
	.mobileVersion
	{
		display: initial;
	}
	.row img 
	{
		width: 300px;
		height: 150px;
	}
	.main 
	{
		padding: 6px;
		margin-top: 80px;
		height: 740px;
	}

	.header
	{
		top: 0px;
		width: 100%;
		height:50px;
	}
	.footer
	{
		bottom: 10px;
		margin: auto;
		padding: 10px;
		float: center;
	}
	.dropbtn
	{
		font-size: 12px;
	}
	.dropdown
	{
		top: 10px;
		left: 10px;
		width: 80px;
		font-size: 12px;
	}
	.dropdown-content
	{
		min-width: 80px;
		padding: 0;
	}
	.dropdown-content button
	{
		width: 80px;
		font-size: 10px;
		margin: 2px;
	}
	.navLang
	{
		position: fixed;
		display: inline-block;
		top: 10px;
		right: 20px;
		width: 80px;
	}
	.navLangbtn
	{
		font-size: 12px;
		margin: 2px;
	}
	.navLang-content
	{
		min-width: 60px;
		float: right;
		right: 0;
	}
	.navLang-content button
	{
		width: 50px;
		margin: 2px;
		font-size: 10px;
	}
	.navLang-content button img
	{
		width: 20px;
		height: auto;
	}
	.main 
	{
		padding: 16px;
		margin-top: 50px;
		margin-left: 0px;
		height: 1000px;
	}
	#videoPlayer
	{
		display: none;
	}
	.videoshow-container 
	{
		max-width: 320px;
	}
	video.videoSlide 
	{
		width: 300px;
		height: auto;
	}
	.gallery
	{
		display: none;
	}
	.mobileSlide
	{
		display: initial;
	}
	.slideshow-container {max-width: 400px;}
	.mySlides img
	{
		border-radius: 6px;
		width: 300px;
		height: auto;
	}
	.bottom-right 
	{
		font-size: 8px;
		right: 55px;
	}
	.prev, .next 
	{
		margin-top: -28px;
		padding: 16px;
		font-size: 20px;
	}
	p5{font-size: 14pt;}
	p1{font-size: 14px;}
	p2{font-size: 16px;}
	p3{font-size: 14pt;}
	p4{font-size: 10pt;}
	h1{font-size: 8pt;}
	h2{font-size: 10pt;}
	h3{font-size: 14pt;}
	h4{font-size: 12pt;}
	p6{font-size: 14pt;}
	.createLink{font-size: 16px}
	.button1
	{
		border-color: green;
		padding: 4px 4px;
		width: 220px;
		font-size: 12px;
		border-radius: 4px;
	}
	.button2
	{
		padding: 4px 4px;
		width: 220px;
		font-size: 12px;
		border-radius: 4px;
	}
	.confirm
	{
		margin-top: 40px;
	}
	.indexText
	{
		display: initial;
		margin-top: 60px;
	}
	p7
	{
		font-size: 16px;
	}
}


</style>