/* ** HEADER ------------------------------------------------ ** */
/** HEADER -> GENERALL **/
body:not(.vshow) .btn-mobile-menu{
	display: none;
}

.container.header {
    width: 100%;
    max-width: unset;
    position: absolute;
    top: 0;
    z-index: 10;

}
	.container.header > .wrapper{
	    padding: 0px 20px;
	    position: relative;
	}
		.container.header > .wrapper #divLogotext{
			margin: 0px;
			width: 100%;
		}
			.container.header #divLogotext .inner-wrapper{
				background: var(--header-grey);
				display: flex;
				position: relative;
				align-items: center;
				margin: 0px;
				padding: 0px 20px;
				min-height: 37px;
			}
			.container.header #divLogotext #header,
			.container.header #divLogotext .flex-wrapper{
				align-items: flex-end;
				flex-direction: row;
				max-width: 1220px;
	    	margin: 0 auto;
			}

			.container.header #divLogotext .flex-wrapper{
					gap: 15px !important;
    			font-size: 14px;
    			line-height: 14px;
			}

			.container.header #divLogotext .inner-wrapper .flex-wrapper > *{
				cursor: pointer;
				padding: 5px 0px;
			}
			.container.header #divLogotext .inner-wrapper .flex-wrapper > *.profile-menu{
				margin-left: 10px;
				cursor: pointer;
			}
			.container.header #divLogotext .inner-wrapper .flex-wrapper > *.login{
				margin-left: 50px;
				cursor: pointer;
			}
			.container.header #divLogotext #logout a{
				cursor: pointer;
			}
			.container.header #divLogotext .inner-wrapper .flex-wrapper > *.login:hover{
				color: var(--primary-color);
			}

/** HEADER -> LOGO **/
#header{
	width: 100%;
	max-width: 160px;
}
#header .content-wrapper{
	width: 100%;
}
	#header .content-wrapper #logo{
		display: inline-block;
	    max-width: 160px;
	    width: 100%;
	}
	#header .content-wrapper #logo img{
		width: 100%;
	}



/** FIXED NAVI-HEADER **/
.container.header{
    top: 0;
    width: 100%;
    z-index: 1500;
}
	.container.header.header--fadeOut{
		animation: fadeOutToTop .4s;
	    animation-fill-mode: both;
	    position: fixed;
	}
	.container.header.header--sticky{
		animation: fadeInFromTop .4s;
		position: fixed;
	}

/*	body[data-token="events"] #divContent{
		margin-top: 390px;
	}*/

	/*body[data-token="events"] #divContent.filterOpen{
		margin-top: 600px;
	}*/


@keyframes fadeInFromTop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeOutToTop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}



/** HEADER -> NAVIGATION **/
.navbar {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    vertical-align: top;
    padding-top: 20px;
    padding-bottom: 14px;
    text-align: right;
    float: none;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
}
.navbar.disappear{
	opacity: 0;
}
.navbar.navbar-default {
	width: 100%;
	max-width: 1260px;
	padding: 28px 20px 20px 20px;
}
	.navbar .navbar-header{
		position: absolute;
		right: 20px;
	}
		.navbar .navbar-header .navbar-toggle{
			padding: 6px 0px;
			background: none;
			border: none;
		}
		.navbar .navbar-header .navbar-toggle.collapsed:before,
		.navbar .navbar-header .navbar-toggle:before{
			content: '\f0c9';
			font-family: fontAwesome;
			font-size: 23px;
			color: #3a3e3f;
		}
		.navbar .navbar-header .navbar-toggle[aria-expanded="true"]:before{
			content: '\f00d' ;
		}
			.navbar .navbar-header .navbar-toggle #navigationToggleLabel,
			.navbar .navbar-header .navbar-toggle .sr-only,
			.navbar .navbar-header .navbar-toggle span.icon-bar{
				display: none;
			}

	.navbar .navbar-collapse{
		height: 0;
		overflow: hidden;
		clear: both;
		width: 100%;
		-webkit-transition:	height 500ms ease;
		-moz-transition:	height 500ms ease;
		-ms-transition:		height 500ms ease;
		-o-transition:		height 500ms ease;
		transition:			height 500ms ease;
	}
		.navbar .navbar-collapse.in{
			height: auto;
			width: fit-content;
			overflow: visible;
		}
		.navbar .navbar-collapse #top-menu{
			padding: 0;
			margin: 0;
		}
		.navbar #navbar-collapse.collapse.in #top-menu{
	    	background: white;
	    	width: 100vw;
	    	margin: 15px -20px 0px;
	    	padding: 0px 20px;
		}
			.navbar #navbar-collapse #top-menu li{
				padding: 20px 0px 20px 0px;
				text-align: left;
			    border-bottom: 1px solid #dadee1;
			    list-style: none;
			}
				.navbar #navbar-collapse #top-menu li:last-child{
					border-bottom: none;
					padding-bottom: 8px;
				}
					.navbar #navbar-collapse #top-menu li a{
						text-decoration: none;
						color: #3a3e3f;
					}
					.navbar #navbar-collapse #top-menu li:hover a{
						color:  var(--primary-color);
					}
					.navbar #navbar-collapse #top-menu li.active a {
					    color: var(--primary-color);
					}


/** HEADER -> NAVIGATION -> NAVPOINTS **/
#divNavPunkt_3928,
#divNavPunkt_eventdetails,
#logoutButton,
#divNavPunkt_4385,
#divNavPunkt_catalog{
	display: none !important;
}




@media only screen and (min-width: 767px){
	/** NAVBAR **/
	.navbar{
		flex-direction: row;
    	align-items: center;
	}
	.navbar .navbar-header .navbar-toggle{
		display: none;
	}

	.navbar #navbar-collapse{
		height: auto;
	}
	.navbar #navbar-collapse.collapse, 
	.navbar #navbar-collapse.collapsing{
		border: none;
	}
		.navbar #navbar-collapse.collapse:not(.in){
			display: block;
			width: fit-content;
			height: auto !important;
		}
			.navbar #navbar-collapse.collapse.in #top-menu{
				width: fit-content;
				padding: 0px;
				margin: 0px;
				border-top: none;
			}

			.navbar #navbar-collapse #top-menu li {
			    border-bottom: none;
			    display: inline-block;
			    font-weight: 500;
			    font-size: 18px;
			    padding: 0px 0px 10px 40px;
			}
				.navbar #navbar-collapse #top-menu li a:hover{
					color: #b70032;
					text-decoration: underline;
				}
}


/* ** HEADER -> LANGUAGE ** */
#naviLanguage {
	display: flex;
}

#naviLanguage .language-container{
	background: #fff;
	padding: 25px;
    z-index: -1;
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% - 5px);
    right: -10px;
    width: 350px;
    transform: translateY(-2em);
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.1s, z-index 0s linear 0.01s;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 30%);
}
	#naviLanguage.open .language-container,
	#naviLanguage.oopen .language-container{
		visibility: visible; 
		opacity: 1;
		z-index: 1;
		transform: translateY(5px);
		transition-delay: 0.1s, 0.1s, 0.1s; 
	}
	#naviLanguage .language-container .label{
		margin-bottom: 15px;
	}
	#naviLanguage .language-container li{
		list-style: none;
		line-height: 30px;
	}
	#naviLanguage .language-container li:hover,
	#naviLanguage .language-container li.active{
		color: var(--primary-color);
	}



/* ** HEADER -> PROFILE ** */
#profile {
	position: relative;
    width: 100%;
	max-height: 40px;
	justify-content: flex-end;
	margin-bottom: 20px;
	font-size: 15px;
}
	#profile #naviLanguage{
		z-index: 2;
	}

	#profile .profile-menu {
		position: relative;
		cursor: pointer;
	}
		#profile .profile-menu .profile-container {
			background: #fff;
			position: relative;
			z-index: -1;
			display: block;
			visibility: hidden;
			opacity: 0;
			position: absolute;
			top: calc(100% - 5px);
			right: -10px;
			width: 380px;
			transform: translateY(-2em);
			transition: all 0.3s ease-in-out 0s, 
						visibility 0s linear 0.1s, 
						z-index 0s 
						linear 0.01s;
		}

		#profile .profile-menu.oopen .profile-container {
			visibility: visible; 
			opacity: 1;
			z-index: 1;
			transform: translateY(5px);
			transition-delay: 0.1s, 0.1s, 0.1s; 
			/* z-index: 1; */
		}
		#profile .profile-card{
			position: relative;
		}

			#naviLanguage .language-card .close,
			#profile .profile-card .close{
				position: absolute;
				width: 39px;
				height: 39px;
				top: 4px;
			  	right: 3px;
			  	cursor: pointer;
			}

			#naviLanguage .language-card .close:before,
			#naviLanguage .language-card .close:after,
			#profile .profile-card .close:before,
			#profile .profile-card .close:after{
				content: "";
				background:  var(--dark-grey);
				width: 2px;
			  	height: 22px;
			  	display: block;
			  	position: absolute;
			}
			#naviLanguage .language-card .close:before,
			#profile .profile-card .close:before{
				transform:  rotate(45deg);
				top: 6px;
				right: 19px;
			}
			#naviLanguage .language-card .close:after,
			#profile .profile-card .close:after{
				transform:  rotate(-45deg);
				top: 6px;
				right: 19px;
			}

			#profile .profile-container .visibility-wrapper,
			#profile .profile-container .availability-wrapper,
			#profile .profile-container .language-wrapper,
			#profile .profile-container .timezone-wrapper{
				display: none;
			}

			#profile .profile-container ul.profile-links {
				padding-left: 0px;
				margin: 0;
			}
				#profile .profile-container ul.profile-links > li:not(#logout){
					background: var(--light-grey);
				}

				#profile .profile-container ul.profile-links > li {
					list-style: none;
					cursor: default;
				}

				#profile .profile-container ul.profile-links > li:not(#logout):not(:first-child){
					border-top: 1px solid var(--grey);
				}

				#profile .profile-container ul li#logout a,
				#profile .profile-container ul.profile-links > li a {
					display: inline-block;
					padding: 20px 40px;
					width: 100%;
				}

				#profile .profile-container ul li#logout a:hover,
				#profile .profile-container ul.profile-links > li a:hover{
					color: var(--primary-color);
				}
					#profile .profile-container ul.profile-links > li a i.fa.fa-sign-out {
						font-size: 21px;
						margin-right: 15px;
						position: relative;
						top: 2px;
					}

			#profile .profile-container .profile-img {
				width: 67px;
				height: 67px;
				border-radius: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: var(--primary-color);
				color: #fff;
				margin: 20px 20px 20px 40px;
			}
			#profile .profile-container .profile-img	img{
				border-radius: 50%;
				width: 100%;
				height: 100%;
				background-size: cover;
			}
				#profile .profile-container .profile-img p {
					font-size: 23px;
			    margin-top: 28px;
			    padding-left: 2px;
				}

			#profile .profile-container .profile-card {
				box-shadow: 0px 3px 6px rgba(0,0,0,.3);
			}
				#profile .profile-container .profile-card .flex-wrapper {
					align-items: center;
					cursor: default;
				}
					#profile .profile-container .profile-card .flex-wrapper .profile-text {
						font-size: 16px;
						margin: 30px 50px 20px 0px;
					}
						#profile .profile-container .profile-card .flex-wrapper .profile-text p {
							line-height: 26px;
							margin: 0;
						}
						#profile .profile-container .profile-card .flex-wrapper .profile-text p#acronym{
							padding-top: 6px;
						}


/** HEADER -> BANNER  **/
#banner {
    height: 200px;
	background: var(--light-grey);
	display: flex;
	align-items: center;
	padding: 20px 20px;
	position: relative;
}
	#banner .banner-section {
		width: 100%;
		max-width: 1240px;
		margin: 0 auto;
	}
		#banner .banner-section .headline-1 {
			margin: 50px 0px 0px 0px
		}

		#banner .banner-section .go-back{
			position: absolute;
			top: 40px;
			color: var(--primary-color);
		}
			#banner .banner-section .go-back i{
				margin-right: 6px;
			}
	


/* ** FOOTER ------------------------------------------------ ** */
#divFooter{
	font-weight: 600;
	font-size: 15px;
	color: var(--white);
}
	#divFooter a{
		color: var(--white);
	}
	#divFooter #lower-footer{
		padding: 40px 30px 20px 30px;
		background: var(--primary-color);
	}
	#divFooter #lower-footer:empty{
		display: none;
	}
	#divFooter #lower-footer .content-wrapper{
		flex-direction: column-reverse;
		max-width: 1230px;
		margin: auto;
		justify-content: space-between;
	}
		#divFooter #lower-footer .content-wrapper > div:first-child{
			padding-bottom: 0px;
			padding-top: 25px;
		}
		#divFooter #lower-footer .content-wrapper > div:last-child{
			display: flex;
			flex-direction: column;
		}
			#divFooter #lower-footer .content-wrapper > div:last-child a{
				margin-bottom: 10px;
			}

			#divFooter #lower-footer .content-wrapper > div:last-child a#ot-sdk-btn.ot-sdk-show-settings, 
			#divFooter #lower-footer .content-wrapper > div:last-child a#ot-sdk-btn.optanon-show-settings{
			    color: var(--white);
			    border: 0 none;
			    font-size: inherit;
			    margin: 0;
			    padding: 0;
			}

				#divFooter #lower-footer .content-wrapper > div:last-child a#ot-sdk-btn.ot-sdk-show-settings:hover, #divFooter #lower-footer .content-wrapper > div:last-child a#ot-sdk-btn.optanon-show-settings:hover {
				    background: none;
				}


@media only screen and (min-width: 767px){
	.container.header #divLogotext .flex-wrapper{
			gap: 40px !important;
			font-size: 15px;
			line-height: 16px;
	}

	.container.header #divLogotext .inner-wrapper .flex-wrapper > *.profile-menu{
		margin-left: 34px;
	}

	#divFooter #lower-footer{
		padding: 20px 15px;
	}
		#divFooter #lower-footer .content-wrapper{
			flex-direction: row;
			align-items: center;
		}
			#divFooter #lower-footer .content-wrapper > div:first-child{
				padding-bottom: 0px;
				padding-top: 0px;
				margin-bottom: 0px;
			}
			#divFooter #lower-footer .content-wrapper > div:last-child{
				display: unset;
				flex-direction: unset;
			}
				#divFooter #lower-footer .content-wrapper > div:last-child a:hover{
					text-decoration: underline;
				}
				#divFooter #lower-footer .content-wrapper > div:last-child a:not(:last-child){
					margin-bottom: unset;
					margin-right: 40px;
				}
}


/*LOGIN - POPUP*/
#login .u2d-popup__body{
	padding: 0px;
}
	#login .u2d-popup__body .popup-header{
	  display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    font-size: 26px;
    line-height: 26px;
    background: var(--header-grey);
	}
	#login .u2d-popup__body .popup-content{
		padding: 15px 30px;
	}
		#login input{
			width: 100%;
			margin:  10px 0px 3px 0px;
		}

		#login #login-btn{
			margin-top:  8px;	
			width: 100%;
			border-width: 2px;
			padding: 8px;
		}

		#login.noPopup #login-btn.disabled{
			background: var(--grey);
    	border: var(--grey);
    	color: white;
    	pointer-events: none;
		}

		#login #registration-btn{
			border-color: var(--primary-color);
	    color: var(--primary-color);
	    padding: 8px;
	    width: 100%;
		}

		#login #forgot-password{
			width: 100%;
	    text-align: center;
	    font-size: 14px;
	    padding-top: 7px;
	    padding-bottom: 34px;
	    color: var(--middle-grey-lighter);
		}

			#login #forgot-password:hover{
				color: var(--prim-red);
			}

		#login #registration-btn:hover{
			background: var(--primary-color);
			color: var(--white);
		}

		#login.noPopup{
			display: flex;
			flex-direction: column;
		}

		#login.noPopup .text{
			margin-bottom: 40px;
		}

		#login.noPopup input{
			background: white;
			height: 43px;
		}

		#login.noPopup input,
		#login.noPopup a{
			max-width: 400px;
		}

@media only screen and (min-width: 767px){
	#login .u2d-popup__body .popup-content{
		padding: 30px 60px;
	}
}