@charset "utf-8";
/* CSS Document */
/*  _________________  Start Navigation2  _________________________________________  */
#sonderfall #navigation2 {
	display:none;
}
#navigation2 {
	position:relative;
	float:left;
	width:20%;
	overflow: hidden;
	text-align: left;
	z-index:10;
}
#navigation2 .nav ul {
	font-size:1em;
}
#navigation2 ul li {
	float:left;
	left:10px;
	/*top:310px;*/
	width:100%;
	overflow: hidden;
	text-align: left;
}
#navigation2.icon {
	/*padding-top: 1.4em;*/
		padding-top: 0.2em;
}
#navigation2 .icon + span {
	/*margin-top: 2.1em;*/
		margin-top: 0.9em;
	-webkit-transition: margin .5s;
	-moz-transition: margin .5s;
	-o-transition: margin .5s;
	-ms-transition: margin .5s;
	transition: margin .5s;
}
/* Animating the height of the element*/
#navigation2 .nav a {
	height: 4.5em;
}
#navigation2.no-touch .nav a:hover, #navigation2.nav a:active, #navigation2.nav a:focus {
	height: 4.5em;
}
/* Making the text follow the height animation */
#navigation2.no-touch .nav a:hover .icon + span {
	height: 4.5em;
	margin-top: 0em;
	-webkit-transition: margin .5s;
	-moz-transition: margin .5s;
	-o-transition: margin .5s;
	-ms-transition: margin .5s;
	transition: margin .5s;
	border:none;
	overflow:hidden;
}
	
/* Positioning the icons and preparing for the animation*/
#navigation2 .nav i {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0.3em;
	border-radius: 50%;
	font-size: 1em;
	box-shadow: 0 0 0 30px transparent;
	background: rgba(255,255,255,0.1);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: box-shadow .6s ease-in-out;
	-moz-transition: box-shadow .6s ease-in-out;
	-o-transition: box-shadow .6s ease-in-out;
	-ms-transition: box-shadow .6s ease-in-out;
	transition: box-shadow .6s ease-in-out;
}
/* Animate the box-shadow to create the effect */
	.no-touch .nav a:hover i,  .no-touch .nav a:active i,  .no-touch .nav a:focus i {
	box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .4s ease-in-out;
	-moz-transition: box-shadow .4s ease-in-out;
	-o-transition: box-shadow .4s ease-in-out;
	-ms-transition: box-shadow .4s ease-in-out;
	transition: box-shadow .4s ease-in-out;
}

/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
	
#navigation2 .nav li span {
	display: inline-block;
	height: 100%;
}
#navigation2 .nav a {
	padding: 0em;
}
#navigation2 .icon + span {
	margin-left: 1em;
	/*font-size: 0.8em;*/
	font-size: 1em;
}
#navigation2 .nav li span.icon .orchbild {
	width: 20% !important; 
}
#nav_iealt  .nav li span.icon  .icon-orchideen, #navigation2  .nav li span.icon  .icon-orchideen {
	background-image:url(../bilder/sym_frauenschuh_sw.svg);
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:cover;
	
}
/*#navigation2.icon-orchideen {
	background-image:url(../bilder/sym_fauenschuh.svg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position: 0em 0.8em;
}*/

/* Rücknahme Hintergrundfarbe jedes Menu Textes*/
#navigation2 .nav li span {
	background-color:transparent;}
 

/* Adding a left border of 8 px with a different color for each menu item*/

/*#navigation2 .nav li:hover {
	border-left: 8px solid rgba(255, 255, 255, 0.1);
}*/

#navigation2 .nav li:nth-child(12n+1) {
	border-left: 8px solid rgb(255, 51, 51);
}
#navigation2 .nav li:nth-child(12n+2) {
	border-left: 8px solid rgb(255, 204, 102);
}
#navigation2 .nav li:nth-child(12n+3) {
	border-left: 8px solid rgb(255, 255, 153);
}
#navigation2 .nav li:nth-child(12n+4) {
	border-left: 8px solid rgb(144, 153, 136);
}
#navigation2 .nav li:nth-child(12n+5) {
	border-left: 8px solid rgb(95, 121, 71);
}
#navigation2 .nav li:nth-child(12n+6) {
	border-left: 8px solid rgb(206, 194, 99);
}
#navigation2 .nav li:nth-child(12n+7) {
	border-left: 8px solid rgb(153, 153, 103);
}
#navigation2 .nav li:nth-child(12n+8) {
	border-left: 8px solid rgb(255, 255, 153);
}
#navigation2 .nav li:nth-child(12n+9) {
	border-left: 8px solid rgb(255, 204, 102);
}
#navigation2 .nav li:nth-child(12n+10) {
	border-left: 8px solid rgb(255, 51, 51);
}
/*#navigation2 .nav li:nth-child(12n+11) {
	border-left: 8px solid rgb(16, 34, 44);
}
#navigation2 .nav li:nth-child(12n+12) {
	border-left: 8px solid rgb(9, 18, 25);
}*/

/* Adding a hover-effect of same border color for each menu item*/

#navigation2 .nav li:nth-child(12n+1) a:hover {
	background-color:  rgb(255, 51, 51);
}
#navigation2 .nav li:nth-child(12n+2) a:hover {
	background-color:  rgb(255, 204, 102);
}
#navigation2 .nav li:nth-child(12n+3) a:hover {
	background-color: rgb(255, 255, 153);
}
#navigation2 .nav li:nth-child(12n+4) a:hover  {
	background-color: rgb(144, 153, 136);
}
#navigation2 .nav li:nth-child(12n+5) a:hover {
	background-color: rgb(95, 121, 71);
}
#navigation2 .nav li:nth-child(12n+6) a:hover {
	background-color: rgb(206, 194, 99);
}
#navigation2 .nav li:nth-child(12n+7) a:hover {
	background-color: rgb(153, 153, 103);
}
#navigation2 .nav li:nth-child(12n+8) a:hover {
	background-color: rgb(255, 255, 153);
}
#navigation2 .nav li:nth-child(12n+9) a:hover {
	background-color: rgb(255, 204, 102);
}
#navigation2 .nav li:nth-child(12n+10) a:hover {
	background-color: rgb(255, 51, 51);
}
/*#navigation2 .nav li:nth-child(12n+11) a:hover {
	background-color: rgb(16, 34, 44);
}
#navigation2 .nav li:nth-child(12n+12) a:hover {
	background-color: rgb(9, 18, 25);*/



/* make the nav bigger on touch screens */
#navigation2 .touch .nav a {
	padding: 0.8em;
}

/* CSS specific to the 2x5 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {
/* Creating the 2 column layout using floating elements once again 
	.nav li {
	display: block;
	float: left;
	width: 50%;
}
 Adding some padding to make the elements look nicer
	.nav a {
	padding: 0.8em;
}
 Displaying the icons on the left, and the text on the right side using inlin-block
	.nav li span,  .nav li span.icon {
	display: inline-block;
}*/
#navigation2 .nav li span.icon {
	width: 10% !important; 
}
#navigation2 .nav li span.icon .orchbild {
	width: 18% !important; 
}
/*#navigation2 .orchbild {
	background-image:url(../bilder/sym_frauenschuh_sw.svg);
	background-position:  0em 0em;
	}
.nav li .icon + span {
	font-size: 1em;
}
.icon + span {
	position: relative;
	top: -0.2em;
}
 Adaptating to the icons to animate the size and border of the rounded background in a more discreet way 
	.nav li i {
	display: inline-block;
	padding: 8% 9%;
	border: 4px solid transparent;
	border-radius: 50%;
	font-size: 1.5em;
	background: rgba(255,255,255,0.1);
	-webkit-transition: border .5s;
	-moz-transition: border .5s;
	-o-transition: border .5s;
	-ms-transition: border .5s;
	transition: border .5s;
}
 Transition effect on the border color 
	.no-touch .nav li:hover i,  .no-touch .nav li:active i,  .no-touch .nav li:focus i {
	border: 4px solid rgba(255,255,255,0.1);
}
.orchbild {
	background-size:contain;
	background-position: left;
}*/
}
/* ___________________________________________________________  Menusteuerung   _________________________________________ */

/* Unhiding the styled menu link 
#navigation2 .nav .navtoogle {
	margin: 0;
	display: block;
}
 Animating the height of the navigation when the button is clicked 
	
	 When JavaScript is disabled, we hide the menu 
#navigation2 .no-js .nav ul {
	max-height: 40em;
	overflow: hidden;
}
 When JavaScript is enabled, we hide the menu 
#navigation2 .js .nav ul {
	max-height: 0em;
	overflow: hidden;
}
 Displaying the menu when the user has clicked on the button
#navigation2 .js .nav .active + ul {
	max-height: 40em;
	overflow: hidden;
	-webkit-transition: max-height .4s;
	-moz-transition: max-height .4s;
	-o-transition: max-height .4s;
	-ms-transition: max-height .4s;
	transition: max-height .4s;
}
*/
@media (max-width: 32.438em) {
	
#navigation2 .nav a {
    height: 3em;
}

}