/** * ** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * @version		$id: index.php 2017-05-15
 * @package		SanitärSpartak_Responsive_2017
 * @author		ARWEDIS-Mediengestaltung | http://.arwedis.de
 * @copyright	Copyright (c) 2007 - 2017 ARWEDIS
 * * *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * */

.toggleMenu {
    display:  none;
	float: right;
	font-size: 1.25em;
    background: #C7CCD7;
    padding: 5px 10px;
	border: solid #FFF 1px;
	border-radius: 5px / 100%;
    color: #FFF;
	text-shadow: 2px 3px 6px #416464;
}

.active {
	display: block;
}

.menu_main-navi {
	width: 100%;
	list-style: none;
	*zoom: 1;
}

.menu_main-navi:before,
.menu_main-navi:after {
    content: " "; 
    display: table; 
}

.menu_main-navi:after {
    clear: both;
}
.menu_main-navi li {
	position: relative;
	text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 5px 5px 5px;
	user-select: none;
	outline: none;
	border-radius: 3px / 100%;
	background-image:
		linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
		linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
		linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
		linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
		linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
		linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
	background-repeat: no-repeat;
	background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
	background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
	box-shadow: rgba(0,0,0,.3) 3px 10px 10px -10px;
}

.menu_main-navi li:hover {
	transition: .5s linear;
	background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}

.menu_main-navi li.active {
	background-color: rgba(45, 135, 145, 0.125);
}

.menu_main-navi ul {
	display: block;
	width: 100%;
}

.menu_main-navi a {
	display: block;
	margin: 0;
	padding: 0.75em 0;
	width: 100%;
	color: #446365;
	text-decoration: none;
	text-align: center;
}

.menu_main-navi li {
	position: relative;
	margin: 3px 0;
	padding: 5px 0;
	list-style: none;
}

.menu_main-navi > li > .parent {
    background-image: url("../img/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}

.menu_main-navi li ul {
	position: absolute;
	left: -9999px;
	margin: 0 0 0 1.25em;
	padding: 5px;
	width: 100%;
}

.menu_main-navi > li.hover > ul {
    left: 0;
}

.menu_main-navi li li.hover ul {
	left: 100%;
	top: 0;
}

.menu_main-navi > li.hover > ul , 
.menu_main-navi li li.hover ul {
	position: static;
}

.menu_main-navi li ul li {
	background-color: rgba(45, 135, 145, 0.25);
}

.menu_main-navi li li .parent {
	background-image: url("../img/upArrow.png");
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

.menu_main-navi li li a {
    position: relative;
    z-index:100;
}

.menu_main-navi li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für Tablet                                    *
 *                          ab ~ 690px  690px / 16px = 43.125em                   *
 * ----------------------------------------------------------------------------- */

@media only screen and (min-width: 43.125em) {

	.menu_main-navi ul {

	}

	.menu_main-navi li {
		width: 20%;
		float: left;
	}

	.menu_main-navi ul ul {
		position: relative;
		width: 120%;
		display: inline;

	}
	.menu_main-navi li ul li {
		width: 100%;
		float: none;
		display: flex;
	}

	.menu_main-navi li ul li a {
		margin: 0;
		padding: 0.5em;
		display: block;
		width: 150%;
	}
}