/* --------  Burger-menu fancy 1.0  ----------------------------- */


/* Burger-Menu ausblenden, ausser im CMS wird Feld aktiviert */

#burgermenuX-btn {
	display: none;
}
.overlayer-burgermenu,
.burgermenu-nav-section {
	display: block;
}
/* container breite */
.overlayer-burgermenu .container {
/*	max-width: 1000px;*/
	max-width: 1400px;
}
.overlayer-elements,
.overlayer-content{
	color: #fff;
}

.burger-fixnav {
}
.burger-mobile-fixnav {
}



#burgernav-menu-container{
	width: auto;
	min-width: 360px;
    display: block;
}
/* Background positionierung slide or fade basic */
#burgermenu-section {
	height: 100%; 
    position: fixed; 
    top: 0; 
    right: 0;
    background-color: transparent;  /* background color close zufahren */  
    overflow-x: hidden; 
    padding-top: 0; 
    transition: all 0.5s; /* Fade Out sidenav Timer default 0.5 */
}

/* Teaser auf Seite bei Icon-Hover   */
/*
#burgermenu-section.teaser { 
    width: 20px; 
	background: rgba(0,0,0, 0.85);
}
*/

/* FX Effekt  Slide */
.fx-burgermenu-slide{
	width: 0;
	z-index: 9999;
}
/* FX Effekt  Fade */
.fx-burgermenu-fade{
	width: 100%;  
	opacity: 0;
	z-index:-1;
}
.openBurgerMenu .fx-burgermenu-fade{
	z-index: 9999;
}

@media only screen and (max-width: 970px) {
	/* Mobile immer Slide FX */
	.fx-burgermenu-slide, .fx-burgermenu-fade{
		width: 0;
		z-index: 9999;
	}
}

body.openBurgerMenu #burgermenu-section { /*  background color sidenav auffaden */
	background-color: transparent;  
	bottom: 0;
	display: block;
	height: 100%;
	right: 0;
	position: fixed;
	top: 0;
	margin: 0;
	width: 100%;
	z-index: 999;
    overflow-x: hidden; 
    padding-top: 0;
	opacity: 1;
    transition: all 0.5s; /* 0.25 slide In sidenav */
}

/* Background Main Color   */
body.openBurgerMenu #burgermenu-section {
	background: rgba(0,0,0, 0.8);
	bottom: 0;
	display: block;
	height: 100%;
	right: 0;
	position: fixed;
	top: 0;
	margin: 0;
	width: 100%;   /* menu-breite desktop */
    overflow-x: hidden; 
    padding-top: 0; 
    transition: 0.25s;  /* 0.25 dimmer */
    z-index: 999;
}

/* Background Main - Breite Mobile   */
@media only screen and (max-width: 970px) {
	body.openBurgerMenu #burgermenu-section { width: 100%; }
}


/*************************************************************************/
/*   X CLOSE und =  */

.burger-lines-button {
    display: block;
    background: transparent none repeat scroll 0 0;
    border: medium none;
    cursor: pointer;
    float: right;
    margin-bottom: 8px;
    padding: 5px 10px;
    position: fixed;
    right: 30px;
    top: 10px;
    z-index: 1000;
    -webkit-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;
    outline: none !important;
}

.burger-lines-button:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

/*  ICON Lines Color */
.burger-lines {
    background: transparent;
    display: inline-block;
    height: 1px;
    position: relative;
    transition: all 0.3s ease 0s;
    width: 30px; 
}

/*  ICON Lines Color */
.burger-lines:before, .burger-lines:after {
	background: #666 none repeat scroll 0 0;  
	content: "";
	display: inline-block;
	height: 1px;
	right: 0;
	position: absolute;
	transform-origin: 0.28571rem center 0;
	transition: all 0.3s ease 0s;
	width: 30px;
}
.closebutton .burger-lines:before, 
.closebutton .burger-lines:after, 
.closebutton .burger-lines {
     box-shadow: 1px 1px 10px rgb(0 0 0 / 0%);
}
.burger-lines:before {
	top: 5px;
}
.burger-lines:after {
	top: -5px;
}


/*  mobile icon postition */ 
@media only screen and (max-width: 970px) {
	.burger-lines-button { right: 15px; top: 10px;}  
	.burger-lines { height: 2px; width: 30px;}	
	.burger-lines:before, .burger-lines:after { height: 2px; width: 30px;}	
	.burger-lines:before {top: 10px;}
	.burger-lines:after {top: -10px;}	
	.burger-lines-button.x.closebutton {
		right: 3px;
		top: 3px;
	}
}


.burger-lines-button.x.closebutton .burger-lines {
    background: transparent none repeat scroll 0 0;
    outline: none !important;
}
.burger-lines-button.x.closebutton .burger-lines:before, 
.burger-lines-button.x.closebutton .burger-lines:after {
	top: 0;
	margin-right: 0;
	width: 40px;
	transform-origin: 50% 50% 0;	
}




@media only screen and (max-width: 970px) {
	.burger-lines-button.x.closebutton .burger-lines:before, 
	.burger-lines-button.x.closebutton .burger-lines:after {
		width: 30px;
	}
	.burger-button { 
		display: block;
		outline: block;
	}
}

.burger-lines-button.x.closebutton .burger-lines:before {
	transform: rotate3d(0, 0, 1, 45deg);
}
.burger-lines-button.x.closebutton .burger-lines:after {
	transform: rotate3d(0, 0, 1, -45deg);
}
body.openBurgerMenu .burger-lines-button .burger-lines::before, 
body.openSideMenu .burger-lines-button .burger-lines::after {
	background: #fff none repeat scroll 0 0;
}
/* Color X */
.burger-lines-button.x.closebutton .burger-lines::before,
.burger-lines-button.x.closebutton .burger-lines::after {
	background-color: #fff;
}



/*************************************************************************/
/*   NAVIGATION nav-link   */


/* nav link li a  */
.overlayer-burgermenu .navbar-nav li a.nav-link {
	font-size: 180%;
	line-height: 160%;
	color: #fff;
	font-weight: 300;
	padding: 20px 0;
}
.overlayer-burgermenu .navbar-nav li a.nav-link, 
.overlayer-burgermenu .navbar-nav li.dropdown a.nav-link {
	box-shadow: none !important;
	text-shadow: none !important;
}


/* active  */
.overlayer-burgermenu li.active a.nav-link  {
    font-weight: 400 !important;
	transition: all .3s ease-in-out;
	opacity: .8;
}

/* nav hover */
.overlayer-burgermenu .navbar-nav .nav-link:hover {
	transform: translateX(3px);
	transition: all .2s ease-in-out;
}

/* hide before FX */
.overlayer-burgermenu .navbar-nav li {
	float: none;
	opacity: 0;
}




/* nav link li a for MOBILE  */
@media only screen and (max-width: 970px) {
	.overlayer-burgermenu .navbar-nav li a.nav-link {
		font-size: 140%;
	}
}


/*************************************************************************/
/*   Page Content   */

.overlayer-pagecontent {
	color: #fff;
}
.overlayer-pagecontent a {
	color: #ccc;
}

/*************************************************************************/
/*   Animations */


/*  Nav Elemente einfaden */
/*  wenn kein effekt gewuenscht, dann im burger-menu.js zeile 32 wert auf 0 setzen */
.show-navs {
	opacity:0;
    animation: 0.4s ease 0.1s normal forwards 1 fadein;
}	
@keyframes fadein{
    0% { opacity:0;	padding-left: 0%;}
    100% { opacity:1;padding-left: 0%;}
}

/*  Nav Elemente ausblenden  */
.hide-navs {
	opacity:1;
	animation: 0.2s ease 0s normal forwards 1 fadeout;  /* fade out Nav-Elements */
	display: none;
}
@keyframes fadeout{
	0% {opacity:1;padding-left: 0%;}
	100% {opacity:0;padding-left: 0%;}
}

/*  sonstige Elemente im Overlayer einblenden timer 1.5s  */
.overlayer-animation-start{	
}
.overlayer-animation{	
    animation: 1.5s ease 0s normal forwards 1 overlayerAnimation;
	padding-left: 15px;
}	
@keyframes overlayerAnimation{
    0% { opacity: 0; transform: translateX(20px);}
    100% { opacity: 1;transform: translateX(0);}
}

/*  sonstige Elemente im Overlayer ausblenden  */
.overlayer-animation-stop{
    animation: 0.1s ease 0s normal forwards 1 overlayerAnimationStop;
}
@keyframes overlayerAnimationStop{
    0% {opacity:1;}
    100% {opacity:0;}
}




/*************************************************************************/
/*  Dropdown  */


/* show open dropdown */
.burgermenu-nav-section li:not(.megamenu) ul.dropdown-menu{
	position: relative !important;
     transform: unset !important;
    top: unset !important;
    left: unset !important;
	background: transparent;
	box-shadow: none;
	border: 0;
	font-size: 100%;
	padding: 0;
}
@media only screen and (min-width: 970px) {
	/*	Dropdown Ebene 2 open */
/*
	.burgermenu-nav-section li:not(.megamenu) > .dropdown-toggle::after {display: none;}
		Dropdown Ebene 3 close 
	.burgermenu-nav-section li:not(.megamenu) ul.dropdown-menu .dropdown-submenu > ul.dropdown-menu {display: none;}
	.burgermenu-nav-section li:not(.megamenu) ul.dropdown-menu .dropdown-submenu > ul.dropdown-menu.show {display: block;}
*/
}

/*	Dropdown Ebene 2  */
.burgermenu-nav-section .dropdown > .dropdown-menu a.dropdown-item {
    padding: 0.25rem;
	padding-left: 15px;
    font-weight: 300;
    color: #fff;
}

/*	Dropdown Ebene 3  */
.burgermenu-nav-section li:not(.megamenu) ul.dropdown-menu .dropdown-submenu .dropdown-menu {
	padding: 0.25rem;
	padding-left: 30px;
	border: 0;
}

/* dropdown zum aufklappen  */
.overlayer-burgermenu .navbar-nav li.dropdown a.nav-link {
	padding: 10px 0 10px 0;
}



/*************************************************************************/
/*  Megamenu Burgermenu  */

.burgermenu-nav-section ul li.megamenu .dropdown-menu {
    background-color: transparent;
    border: 0;
	opacity: 1;
	box-shadow: none;
	position: relative;
}

.burgermenu-nav-section ul li.megamenu {
	position: relative;
}

@media only screen and (min-width: 970px) {
	
	/* Megamenu Spalten */
	.burgermenu-nav-section ul li.megamenu > .dropdown-menu {
/*
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
*/
        column-count: unset;
		padding: 0;
	}

	/* Megamenu Ebene floaten Colum  */
	.burgermenu-nav-section ul li.megamenu > .dropdown-menu > li {
		width: 100%;
		border: 0;
		outline: 0;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
/*		break-inside: avoid-column;*/
	}
    
/*    burger-menu-megamenu im Bugermenu Spalten als Megamenu - mehrspaltiges Layout */
    .burger-menu-megamenu {
        display: flex !important;
        justify-content: space-around !important;
        flex-direction: row !important;
    }
}

/*	Megamenu Ebene 2  */
.burgermenu-nav-section ul li.megamenu .dropdown > .dropdown-menu a.dropdown-item {
    padding: 0.25rem;
	padding-left: 15px;
    font-weight: 300;
    color: #fff;
	width: 100%;
	
} 

/* Megamenu Ebene 3 */
.burgermenu-nav-section ul li.megamenu .dropdown-menu{
	position: relative !important;
    transform: unset !important;
    top: unset !important;
    left: unset !important;
	padding: 0 0 0 15px;
	font-size: 100%;
	width: 100%;

}
.burgermenu-nav-section ul li.megamenu .dropdown-menu .dropdown-item {
    font-weight: 300;
    color: #fff;
	padding: 0 0 10px 0;
}

/* Megamenu Desktop  */
@media only screen and (min-width: 970px) {
	
	/* show open dropdown */
	.burgermenu-nav-section ul li.megamenu .dropdown-menu {display: block;}
	
	/* hide mainnav dropdown */
/*	.burgermenu-nav-section ul li.megamenu > a {display: none;}*/
	
	/* burger-menu-megamenu -  spalten-Float Maus Hover fix  */
/*
	.overlayer-burgermenu .navbar-nav li.dropdown a.nav-link {
		pointer-events: none;
		cursor: default;
	}
*/
	
	/* hover  megadropdown */
	.burgermenu-nav-section ul li.megamenu .dropdown-menu .dropdown-item:hover{
	}
	/* active megadropdown */
	.burgermenu-nav-section ul li.megamenu .dropdown-menu .active .dropdown-item {
	}

}

/* Megamenu im Burgermenu Spalten Float mit Flex burger-menu-megamenu   */
@media only screen and (min-width: 1280px) {
    .burger-menu-megamenu {
        justify-content: space-between !important;
    }
}