@charset "utf-8";
/* CSS Document */
/* Header */

/* Toppanal */
.toppanel {
	display: none;
}
/* Subpanel */
#mySubpanel {
	background-color: #F4F4F4;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.45);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.45);
	padding-bottom: 1px;
	display: flex;
}
.sticky {
	position: fixed;
 	top: 0;
  	width: 100%;
	z-index: 10;
}
/* Logo */	
.logo-style {
	padding-left: 30px; 
}
.logo-style a img {
	position: relative;
	height: 100px;	
	width: auto;
	margin-top: 15px;
	margin-bottom: -45px;
	z-index: 2;
}
.logo_2 {	
	display: none;
}
.sticky .logo {
	display: none;
}
.sticky .logo_2 {
	display: block;
	height: 80px;
	margin-top: 25px;
}
/* Navigation */
.mobil {
 	height: 100%;
 	width: 100%;
 	display: none;
  	position: fixed;
	overflow: scroll;
	z-index: 15;
	top: 0;
  	left: 0;
  	background-color: rgb(0,0,0);
  	background-color: rgba(0,0,0, 0.9);
}
.mobil-logo {
	padding: 50px;
}
.mobil-logo img {
	width: 40%;
	height: auto;
}
.mobil-nav {
	margin-top: 150px;
}
.mobil-nav a {
  	padding: 16px 10px 16px 50px;
  	text-decoration: none;
  	font-size: 50px;
	font-weight: 400;
  	color: #FFFFFF;
  	display: block;
	border-top: 2px solid #FDFDFD;
	background: none;
  	width: 100%;
  	text-align: left;
  	cursor: pointer;
  	outline: none;
}
.mobil-nav .drop-btn {	
  	text-decoration: none;
  	font-size: 50px;
	font-weight: 400;
  	color: #FFFFFF;
  	display: block;
	border: none;
	border-top: 2px solid #FDFDFD;
	background: none;
  	width: 100%;
  	text-align: left;
  	cursor: pointer;
  	outline: none;
}
.mobil-nav .drop-btn a{
	padding: 16px 10px 16px 50px;
	border-top: none;
}
/* On mouse-over */
.mobil-nav a:hover, .drop-btn:hover  {
  	background-color: #e30613;
}
/* Add an active class to the active dropdown button */
.active {
  	background-color: #e30613;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.down-container {
  	display: none;
  	margin-left: 24px;
	font-size: 12px;
	font-weight: 100;
}
/* Optional: Style the caret down icon */
.mobil-nav i {
  	float: right;
  	padding-right: 20px;
	color: rgba(255,255,255,0.80);
	font-size: 80px;
}

.mobil .closebtn {
 	position: absolute;
  	top: 20px;
  	right: 45px;
  	font-size: 150px;
  	cursor: pointer;
  	color: #e30613;
}
.mobil .closebtn:hover {
  	color: #ccc;
}
.style-navigation {		
	width: 100%;
}
.style-navigation .nav-mobil a{
  	display: block;
	float: right;
	font-size: 60px;
	padding: 10px 24px;
	margin: 10px;
	border-radius: 16px;
}
.style-navigation .nav-mobil a:hover{
	background-color: #2E2E2E;
	color: #ffffff;
	transition: 1s all ease; 
}
.style-navigation .nav-button {
	display: none;	
}

/*Table View*/

@media (min-width: 768px){
	/* Toppanal */
	.toppanel {
		background-color: #2E2E2E;
		height: 70px;
		display: flex;
		padding: 5px;
		justify-content: flex-end;
	}
	/* Unsere Vereine */
	.vereine{	
		display: flex;
		padding-right: 10px;
		width: 100%;
		text-align: left;
	}
	.vereinicon {	
		text-align: center;
		margin-top: auto;
		margin-bottom: auto;	
		padding-left: 20px;
		padding-right: 20px;
	}
	.vereinicon img {
		height: auto;
		width: auto;
		max-height: 50px;
		max-width: 160px;
		opacity: 0.8;
	}
	.vereinicon img:hover {
		opacity: 1;
	}
	/* Top-Sponsoren */
	.spon{	
		display: flex;
		padding-right: 10px;
	}
	.sponicon {	
		text-align: center;
		margin-top: auto;
		margin-bottom: auto;	
		padding-left: 20px;
		padding-right: 20px;
	}
	.sponicon img {
		height: auto;
		width: auto;
		max-height: 50px;
		max-width: 160px;
		opacity: 0.9;
	}
	.sponicon img:hover {
		opacity: 1;
	}
	/* Top-Social Media */
	.social {
		display: flex;
		padding-left: 20px;
		padding-right: 10px;
	}
	.socialicon {
		text-align: center;
		margin-top: auto;
		margin-bottom: auto;	
		padding: 10px 10px 0px 10px;
	}
	.socialicon img {
		height: 40px;
		width: auto;
		opacity: 0.8;
	}
	.socialicon img:hover {
		opacity: 1;
	}
		
}

/*Desktop View*/

@media (min-width: 1150px){
	/*Logo*/
	.sticky .logo {
	display: none;
	}
	.logo-style a img{
	position: relative;
	height: 90px;	
	width: auto;
	margin-top: 5px;
	z-index: 2;
	}
	/* Navigation */
	.style-navigation .nav-mobil {
		display: none;
	}
	.style-navigation .nav-button {
		position: relative;
  		display: inline-block;
		float: right;
	}
	.style-navigation .nav-button a {
		text-decoration: none;
		color: #2f322a;
		text-align: center;
		display: block;
		text-transform: uppercase;				
		font-size: 19px;
		font-weight: 600;
		padding: 30px 12px;
		margin: 10px 2px 5px 2px;
	}
	.style-navigation .nav-button a:hover {
		-webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.2);
		box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.2);
		transition: 0.5s all ease;
		border-bottom: 5px inset #e30613;
		margin-bottom: 0px;
	}
	#anmeldung {
		background-color: #e30613;
		color: white;
		border-radius: 20px;
		transition: 0.5s all ease;
	}
	#anmeldung:hover {
		-webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.2);
		box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.2);
		transition: 0.5s all ease;
		border-bottom: 5px inset #e30613;
		margin-bottom: 0px;
		background-color: #F4F4F4;
		color: #2f322a;
		border-radius: 0px;
	}
	.responsive .nav-button a {
		padding: 16px 16px;
		margin: 20px 2px 5px 2px;
	}
	.responsive .nav-button .dropdownbtn {
		padding: 16px 16px;
		margin: 20px 2px 5px 2px;
	}
	.responsive .nav-button .dropdownbtn:focus {
		margin-bottom: 0px;
	}
	
	/* Dropdown */
	.style-navigation .dropdownbtn {
		text-decoration: none;
		color: #2f322a;
		text-align: center;
		display: block;
		text-transform: uppercase;				
		font-size: 19px;
		font-weight: 600;
		padding: 30px 12px;
		margin: 10px 2px 5px 2px;
		outline: none;
		border: none;
		cursor: pointer;
		background-color: #F4F4F4;
	}
	.style-navigation .dropdown-content {
		margin-left: 2px;
		display: none;
		position: absolute;
		overflow: auto;
		background-color: rgba(0,0,0,0.80);
		min-width: 250px;
		width: auto;
		z-index: 5;
		border-bottom: 5px inset #e30613;
	}
	/* Dropdown im Dropdown */
	
	/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
	.style-navigation .dropdown-content .down-container_2 {
		display: block;
		margin-left: 24px;
		font-size: 12px;
		font-weight: 100;
	}
	/* Optional: Style the caret down icon */
	.style-navigation .dropdown-content i {
		float: right;
		padding-right: 20px;
		color: rgba(255,255,255,0.80);
		font-size: 30px;
	}
	/* Dropdown Hover*/
	.nav-button .show {
		display: block;
	}
	
	.style-navigation .dropdownbtn:hover, .dropdownbtn:focus  {
		-webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.2);
		box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.2);
		transition: 0.5s all ease;
		border-bottom: 5px inset #e30613;
		margin-bottom: 0px;
	}
	
	.nav-button .dropdown-content a {
		transition: 0.2s all ease;
		float: none;
		color: #DDDDDD;
		padding: 8px 16px;
		display: block;
		text-align: left;
		font-size: 19px;
		font-weight: 500;
		text-transform: none;
		border: none;
	}	
	.nav-button .dropdown-content .ueberschrift {
		border-bottom: 0.5px solid #FDFDFD;
		margin: 0px 16px;
		padding: 8px 0px;
	}
	.nav-button .dropdown-content a:hover {
		transition: 0.2s all ease;
		border: none;
		background-color: #e30613;
		-webkit-box-shadow: none;
		box-shadow: none;
		margin-bottom: 5px;
	}
	
	.nav-button .dropdown-content .ueberschrift:hover {
		background-color: rgba(0,0,0,0.00);
		border-bottom: 0.5px solid #FDFDFD;
		margin: 0px 16px;
	}
	
	.nav-button .dropdown-content h5 {
		float: none;
		color: #DDDDDD;
		padding: 8px 0px;
		margin: 30px 16px 10px 16px;
		border-bottom: 0.5px solid #FDFDFD;
		display: block;
		text-align: left;
		font-size: 20px;
		font-weight: 500;
		text-transform: uppercase;
	}	
}

/*Desktop Groß View*/

@media (min-width: 1440px){
	/* Logo */
	.logo-style {
		padding-left: 30px;			
	}
}