/*******************************************************************************
							Default configuration (Menü links)
*******************************************************************************/
.flexy-menu {
	width:				100%;
	margin:				0;
	padding:				0;
	margin-top:			150px;							/* Abstand zum oberen Rand. Wie HEAD_HOEHE */
	position:			relative;
	float:				left;
	/*font-family:		Arial; */
	list-style:			none;
/*	background:			#b22a3c;							/* MENUE_HINTERGRUND_FARBE */
	background:			#292929;							/* MENUE_HINTERGRUND_FARBE */

	/* Um Navi über gesamte Breite zu verteilen: */
	display: 				-webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display:				-webkit-flex;  /* für Safari */
	display:				-ms-flexbox;   /* IE 10 */
	display:				flex;          /* alle anderen */

	-webkit-justify-content: space-around;		/* für Safari */
	justify-content:	space-around;				/* Sonstige. Werte: space-between; oder space-around; */
}


.flexy-menu li {
	display:			inline-block;
	font-size:		17px;
	margin:			0;
	padding:			0;
	float:			left;
	line-height:	40px;
	position:		relative;
}

.flexy-menu > li > a
{
	padding:				5px 8px;					/* 1: bestimmt Höhe des Menüs / 2: horiz. Abstand der Menüpunkte */
	color:				#fff;							/* MENÜ_TEXTFARBE */
	text-decoration:	none;
	display:				block;
	/*text-transform:	uppercase;*/
	/*font-weight: 		bold;*/
	-webkit-transition:color 0.2s linear, background 0.2s linear;
	-moz-transition:	color 0.2s linear, background 0.2s linear;
	-o-transition:		color 0.2s linear, background 0.2s linear;
	transition:			color 0.2s linear, background 0.2s linear;
}

.flexy-menu li.active > a
{

	/*color: #333 !important; */				/* Textfarbe von aktiven Menüpunkten */
	text-decoration: underline;
}
.flexy-menu li:hover > a
{
	background: #5B5B5B;						/* Hintergrundfarbe von aktiven Menüpunkten */
	/*color: #333 !important; */				/* Textfarbe von aktiven Menüpunkten */
	/*text-decoration: underline;*/
}
/*----------------------------
	Right alignment (item)
----------------------------*/
.flexy-menu li.right{
	float: right;
}

/*-----------------------------
	Drop down configuration
-----------------------------*/
.flexy-menu ul, 
.flexy-menu ul li ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	z-index: 99999;
	width: 160px;
	background: #d70034;							/* MENUE_HINTERGRUND_FARBE */
	box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.flexy-menu ul {
	top: 30px;							/* Position von eingeblendetem Unterpunkte-Menü */
	left: 0;
}
.flexy-menu ul li ul {
	top: 0;
	left: 100%;
}
.flexy-menu ul li {
	clear:both;
	width:100%;
	border: none;
}
.flexy-menu ul li a
{
	padding:				10px 20px;
	width:				100%;
	color:				#fff;							/* MENÜ_TEXTFARBE */
	text-decoration:	none;
	display:				inline-block;
	float:				left;
	clear:				both;
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:border-box;
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:	color 0.2s linear, background 0.2s linear;
	-o-transition:		color 0.2s linear, background 0.2s linear;
	transition:			color 0.2s linear, background 0.2s linear;
}

/*------------------------------
	Symbol vor Hauptmenüpunkt
------------------------------*/

/*
.flexy-menu i.navi-icon {

	margin-right:			6px;
	margin-top:				5px;
	float:					left;
	background: 			url(../img/navi-icon.png);

	height:					11px;
	width:					11px;
	background-position: 0 0;

}

.flexy-menu li.active i.navi-icon {
   margin-top:				3px;
	background-position: -11px 0;
}
*/
/* Hinweis zu background-position:
0 0 = Pfeil nach rechs
-11px 0 = Pfeil nach unten
*/

/*-----------------------------
	'+'-Zeichen wenn Unterpunkte
-----------------------------*/
.flexy-menu > li .indicator{
	position: absolute;
	color: #fff;							/* MENÜ_TEXTFARBE */
	top: 6px;								/* Y-Position vom '+'-Zeichen */
	right: -12px;
	font-size: 17px;
}
.flexy-menu ul > li .indicator{
	top: 10px;
	right: 8px;
}

.flexy-menu li .indicator {
	color: #fff;							/* MENÜ_TEXTFARBE */
}

/*
.flexy-menu li:hover > .indicator {
	color: #333;
}
*/




/*------------------------------------
	Kollabiertes Menü (Mobile-Modus)
------------------------------------*/

/* Menü-Balken */
.flexy-menu > li.showhide{
	display:			none;
	width:			100%;
	height:			50px;
	cursor:			pointer;
	color:			#d70034;								/* wie MENUE_HINTERGRUND_FARBE */
	/*unnötig wenn Menübalken auch weiss: border-bottom: solid 1px rgba(0, 0, 0, 0.1); */	/* kleine Linie unterhalb des Menü-Balkens */
	background:		#fff;
}


/* Menü-Symbol */
.flexy-menu > li.showhide span.mobile_menue {
	margin-top:				0px;
	margin-right:			25px;
	width:					92px;					/* Breite der Grafik */
	height:					100%;
	float:					left;
	background: 			url(../img/mobile-menue.png);
	background-size: 		auto 100%;
	background-repeat: 	no-repeat;
}

/* Firmen-Logo */
.flexy-menu > li.showhide span.mobile_logo{
	margin-top:				0px;
	margin-right:			auto;
	margin-left:			auto;
	width:					50px;					/* Breite der Grafik */
	height:					100%;
	display:					block;
	background: 			url(../img/mobile-logo.png);
	background-size: 		auto 100%;
	background-repeat: 	no-repeat;
}

/* Firmen-Name */
.flexy-menu > li.showhide span.mobile_firma{
	margin-top:				0px;
	margin-right:			25px;
	width:					92px;					/* Breite der Grafik */
	height:					100%;
	float:					right;
	background: 			url(../img/mobile-firma.png);
	background-size: 		auto 100%;
	background-repeat: 	no-repeat;
}


/*******************************************************************************
							Vertical configuration
*******************************************************************************/
.flexy-menu.vertical{
	width: 200px;
}
.flexy-menu.vertical li{
	width: 100%;
}
.flexy-menu.vertical li a{
	display: inline-block !important;
	width: 100%;
	padding:18px 20px 16px;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
}
.flexy-menu.vertical ul li{
	width: 100%;
}

/*--------------------------------
	Drop down on vertical menu
--------------------------------*/
.flexy-menu.vertical ul, 
.flexy-menu.vertical ul li ul {
	width: 150px;
}
.flexy-menu.vertical ul {
	top: 0;
	left: 100%;
}
.flexy-menu.vertical ul li ul {
	top: 0px;
}

/*---------------------------------
	Vertical menu on right side 
---------------------------------*/
.flexy-menu.vertical.right{
	float: right !important;
}
.flexy-menu.vertical.right ul{
	left: -150px !important;
}

/*------------------------------
	Indicator on vertical menu
------------------------------*/
.flexy-menu.vertical > li .indicator{
	top: 17px;
	right: 15px;
	font-size: 17px;
}
.flexy-menu.vertical ul > li .indicator{
	top: 18px;
	right: 15px;
}


/*-----------------------------------------
				Windows-Breite-Test

Eine Dummy-Klasse, welche in flexy-menue.js
benutzt wird, um zu testen, ob die Seite
im Mobile-Modus ist oder nicht.
-------------------------------------------*/

.mediaTestKlasse {
	display: none;
	float:left;
}


/*****************************************************************************

							RESPONSIVES DESIGN

*****************************************************************************/


@media (max-width: 768px) {
/*@media (max-width: 950px) {*/

	.flexy-menu{
		margin-top: 0px;
		display: inline;					/* nötig um 'display:flex;' wieder aufzuheben */
	}


	.flexy-menu-wrapper.scrollable{
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.flexy-menu.vertical{
		width: 100%;
	}
	.flexy-menu li{
		display: block;
		width: 100%;


      /* Weisse Linie unterhalb des Labels:
			- erste rgba-Anweisung erzeugt unsichtbare Linie am linken Rand (Opacity auf 0.0).
			- zweite rgba-Anweisung gibt Farbe und Transparanz der sichtbaren Linie an.
			- Die beiden %-Werte müssen identisch sein und spezifieren den Abstand der Linie zum linken Rand.
			- Die Länge der Linie kann mit background-size eingestellt werden.
		*/
		background-image: linear-gradient(to right, rgba(0,0,0, 0.0) 10%, rgba(255, 255, 255, 0.5) 10%);
		background-position: left top;
		background-size: 250px 1px;
		background-repeat: no-repeat;

		/*ALTE METHODE: border-bottom: solid 1px rgba(255, 255, 255, 0.5);    */
	}

	.flexy-menu>li:nth-child(2) {
		/* Weisse Linie unterhalb Label verhindern: */
   	background-image:	none;
	}

	.flexy-menu > li > a{
		padding-top:15px;
		padding-bottom:15px;
		padding-left: 25px;
	}
	.flexy-menu a{
		width: 100%;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.flexy-menu ul,
	.flexy-menu ul li ul,
	.flexy-menu.vertical ul,
	.flexy-menu.vertical ul li ul{
		width: 100%;
		left: 0;
		border-left: none;
		position: static;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.flexy-menu ul li {
		border-left: none;
		border-right: none;
	}
	.flexy-menu ul li a,
	.flexy-menu.vertical ul li a	{
		padding-top:10px;
		padding-bottom:10px;
	}
	.flexy-menu ul > li > a{
		padding-left: 40px !important;
	}
	.flexy-menu > li .indicator{
		top: 15px;
		right: 25px;
		font-size: 17px;
	}
	.flexy-menu ul > li .indicator{
		right: 24px;
	}
	.flexy-menu.vertical ul > li .indicator{
		top: 10px;
		right: 15px;
	}
	.flexy-menu > li > ul > li > a{ padding-left: 40px !important; }
	.flexy-menu > li > ul > li > ul > li > a{ padding-left: 60px !important; }
	.flexy-menu > li > ul > li > ul > li > ul > li > a{ padding-left: 80px !important; }


	/*-----------------------------------------
					Windows-Breite-Test
	-------------------------------------------*/

	.mediaTestKlasse {float:none;}

}