/* body Allgemein */

body{
	font-family:Arial, Helvetica, sans-serif;
	margin: 0px;
	background-color: rgb(59, 58, 56);
	color: white;
	}					
	
	/* Dropdown Menü */
					
	nav{
	width: 100%;
	height:103px;
	background-color:white;			
	}
						
	nav p{
	font-family:Arial;
	color: #222;
	font-size:24px;
	line-height: 55px;
	float: left;
	padding:0px 20px;	
	}		
	
	nav ul{
	float: left;
	}
	
	nav ul li{
	float: left;
	list-style:none;
	position:relative;
	}
	
	nav ul li a{
	display:block;
	font-family:Arial;
	color: #222;
	font-size:14px;
	padding: 22px 14px;
	text-decoration:none;
	}
	
	nav ul li ul{
	display:none;
	position:absolute;
	background-color:white;
	padding:10px;
	border-radius: 0px 0px 4px 4px;
	}
	
	nav ul li:hover ul{
	display:block;
	}
	
	nav ul li ul li{
	width: 180px;
	border-radius: 4px;
	}
	
	nav ul li ul li a{
	padding:12px 14px;
	}
	
	nav ul li ul li a:hover{
	background-color:#f3f3f3;
	}					
	
	/* Sozial Media Buttons */
	
	.social-menu ul {
	text-align:center;
	padding: 50px 0px 20px;
	margin: 0;
	display: flex;
	justify-content: center;
	}
	
	.social-menu ul li {
	list-style: none;
	margin: 0 10px;
	}
	.social-menu ul li .fa {
	color: #000000;
	font-size: 25px;
	line-height: 50px;
	transition: .5s;
	}
	
	.social-menu ul li .fa:hover {
	color: #ffffff;
	}
	.social-menu ul li a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: white;
	text-align: center;
	transition: 0.5s;
	transform: translate(0,0px);
	box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
	}
	
	.social-menu ul li a:hover {
	transform: rotate(0deg) skew(0deg) translate(0, -10px);
	}
	
	.social-menu ul li:nth-child(1) a:hover {
	background-color: #3b5999;
	}
	
	.social-menu ul li:nth-child(2) a:hover {
	background-color: #55acee;
	}
	
	.social-menu ul li:nth-child(3) a:hover {
	background-color: #e4405f;
	}
	
	.social-menu ul li:nth-child(4) a:hover {
	background-color: #cd201f;
	}
	
	.social-menu ul li:nth-child(5) a:hover {
	background-color: #0077B5;
	}
	
	/* Top */			
	#top{
	text-align:center;
	}
	
	#top-image img{
	width: 100%;
	margin-bottom: 16px;
	}
	
	/* Main */			
	#main{
	max-width: 1200px;
	margin: auto;
	padding: 16px;
	text-align: justify;
	line-height: 1.4;
	}
	
	/* Footer */	
	#footer{
	text-align: center;
	padding: 16px;
	}
	
	/* Footer Navigation*/	
	
	#navigation a {
	color: grey;
	padding: 8px;
	}
							
	#navigation a:hover {
	color: rgb(0, 0, 0);
	}
	
	/* Copyright Style */						
	#copyright{
	padding: 16px;
	
	}
	
	/* Dark Mode Button mit Effekt*/	
	.container{
		display:flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		text-align: center;
		min-height: 5vh;
		margin-top:15px;
	
	}
	
	.btn-2{
		width: 140px;
		height:33px;
		border:none;
		color:white;
		border-radius:4px;
		box-shadow:inset 0 0 0 0 #f9e506;
		transition:ease-out 0.3s;
		font-size:1rem;
		outline:none;
		border:3px solid; 
		border-color: #000000;
		background-color:rgb(234, 148, 67);
		position:relative;
		z-index:1;
	}
		
	.btn-2:hover {
		color:#fff;
		cursor:pointer;
	}
	
	.btn-2:before {
		transition: 0.5s all ease;
		position:absolute;
		top:0;
		left: 50%;
		right: 50%;
		bottom: 0;
		opacity: 0;
		content: "";
		background-color:black;
	}
	
	.btn-2:hover:before {
		transition: 0.5s all ease;
		left: 0;
		right: 0;
		opacity: 1;
		z-index: -1;
	}
	
	/* Light Mode */						
	.light-mode{
	background-color:white;
	color: black;
	}	

	/* Teamseite*/	
	.foto{
		margin-bottom: 40px;
		text-align: center;
	}	

	/* Design der Slideshow */


	#slider{
		display: flex; /* Als Flexbox behälter darstellen */
		justify-content: center; /* Inhalt horizontal zentrieren */
		align-items: center; /* Inhalt vertikal zentrieren  */
		height: 90vh; /* Höhe des sliders entspricht 100% des Anzeigebereiches */
		margin:0; /* Entfernt Automatisch erstellte Margin */
	}


	.slideshow{
		width: 95%;  /* 50vw = halbe breite vom Bildschirm */
		height: 95%; /* 50vh = halbe höhe vom Bildschirm */
		box-shadow: 0px 0px 10px grey ; /* Schatten [Horizontaler versastz, Vertikaler versatz, Weichzeichnerradius, Farbe] */
		position: relative; /* Position orientiert sich an Slideshow nicht Gesamtseite*/
		margin:0; 
	}

	.slide{
		position: absolute; /* Position soll fest sein*/
		top: 0; /* Soll bis zum Rand des behälters gehen*/
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden; /* Überstehndes Bild abschneiden*/
		opacity: 0; /* Bilder Transparent*/
		transition: opacity 2s; /* Dauer des übergangs*/
		margin:0; 
	}

	.slide-bild{ /* Bildbreite 100%*/
		width: 100%;
		margin:0; 
	}

	.slide-textbereich{ /* Textbereich Position*/
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		top: 70%;
		background-color: rgba(0, 0, 0, 0.5); /* RGBA = Farbe, Farbe, Farbe, Durchsichtigkeit*/
		color:white; /* Textfarbe für Text insgesammt*/
		text-align: center;     /* Position für Text insgesammt*/
		font-family: sans-serif; /* Schriftart*/
		padding: 0 0 0 0; /* Abstand zum rand [oben, rechts , unten, links]*/
	}

	.slide-ueberschrift {
		font-size: 1.4em;
		margin: 10; /* Abstand zum rand [oben unten, rechts links*/
		justify-content: center;
	}

	.slide-beschreibung {
		font-size: 1em;
		margin: 0; /* Abstand beschreibung*/
		justify-content: center;
	}

	.pfeil {
		position: absolute;  /* Position soll fest sein*/
		top: 0; /* Soll von Oben bis unten klickbar sein*/
		bottom: 0;
		font-size: 50px;    /* Pfeilgröße*/
		font-weight: bold;  /* Fettgedruckt*/
		display: flex;
		justify-content: center; /* Horizontal zentriert*/
		align-items: center; /* Vertikal zentriert*/
		width: 15%; /* Pfeilfläche breite*/
		color: rgba(255, 255, 255, 0.5); /* Pfeilfarbe*/
		user-select: none; /* Textpfeil soll nicht mehr als text angesehen werden*/
		cursor: pointer; /* Mauszeiger Finger*/
	}

	.pfeil:hover{
		color: white;
	}

	.pfeil-links {
		left: 0; /* Pfeilposition*/
	}

	.pfeil-rechts {
		right: 0; /* Pfeilposition*/
	}

	.idikatorenliste {
		position: absolute;
		top: 0;    /* Position Oben*/
		left: 0;   /* von ganz linnks*/
		right: 0;  /* bis ganz rechts*/
		list-style-type: none; /* Listen nummerierung entfernen*/
		font-size: 40px; /* Schriftgröße*/
		display: flex;
		justify-content: center; /* Horizontal zentriert*/
		margin: 0;
		padding: 0;
	}

	.idikator {
		padding: 0 10px; /* Abstand zwischen Punkten [oben unten, rechts links*/
		user-select: none; /* Punkte nicht klickbar*/
		cursor: pointer; /* Mauszeiger Finger*/
		opacity: 0.5; /* Transparent*/
		transition: opacity 2s; /* Dauer des übergangs*/
	}

	.aktiv{
		opacity: 1; /* Punkt Transparent wenn*/
	}

	/* kontakt */			
	#kontakt{
		text-align: center;
		justify-content: center;
		padding-bottom: 50px;
		}

	/* Video */			
	#video{
		text-align: center;
		}