/**
 * MENU TOGGLE TYPE
 *
 * Use a Hamburger Icon or a Navigation bar.
 * Please note the slightly different HTML markup (demos).
 *
 */
/**
 * LABEL FORM
 */
/**
 * COLORS
 *
 * You can assign different colors to the first level and the sublevels,
 * e.g. a transparent bar and colored sublevels (see hamburger demo).
 */
/* first menu level */
/* menu sublevels */
/* active page */
/* miscellaneous */
/**
 * MEASURES
 */
/**
 * MENU TOGGLE TYPE
 */
#toggle-menu {
 /* background-color: #424254;
  color: #fff;*/
  display: block;
  /*padding: 0.75em 1em;*/
  position: relative;
}

/**
 * MENU ARROWS
 */
.topnavi__arrow {
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  /*border-top: 6px solid #fff;*/
  display: inline-block;
  vertical-align: middle;
  height: 0;
  width: 0; }

.topnavi__arrow--sub {
  /*border-top: 6px solid #fff;*/
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: inline-block;
  vertical-align: middle;
  height: 0;
  width: 0; }
  

/**
 * MOBILE VIEW
 */
.topnavi__lvl--first {
  /*background-color: #424254; */}
  .topnavi__lvl--first::after {
    clear: both;
    content: "";
    display: table; }

.topnavi__lvl--first,
.topnavi__lvl--sub {
  margin: 0;
  padding: 0; }

.topnavi__lvl--first,
.topnavi input[type="checkbox"] {
  display: none; }

#toggle:checked + .topnavi__lvl--first,
.topnavi input[type="checkbox"]:checked + .topnavi__lvl--sub {
  display: block; }

.topnavi__item {
  /*color: #fff;*/
  display: block;
  position: relative; }
    .topnavi__item a {
    display: block;
    position: relative;
    text-decoration: none;
    text-align: center;
}
    .topnavi__item a:hover,
    .topnavi__item a:focus {
      text-decoration: none; }

/*.topnavi__item--header {
  background-color: #424254;
  color: #7abcb2;
  display: block;
  font-size: 0.75em;
  padding: 1.5em 1.25em 0.25em; }*/

.topnavi__link--first {
 /* background-color: #424254;
  color: #fff;*/
  padding: 0.65em 0.75em;
  padding-right: 30px; }
  .topnavi__link--first:hover {
   /* background-color: #64908A;
    color: #fff;*/ }

.topnavi__lvl--sub {
  display: none;
  padding-left: 1em; }

.topnavi__link--sub {
 /* background-color: #424254;
  color: #fff;*/
  padding: 0.65em 0.75em;
  padding-right: 30px; }
  .topnavi__link--sub:hover {
   /* background-color: #64908A;
    color: #fff;*/ }

.topnavi__link--active {
  /*background-color: #64908A;
  color: #fff;*/
  padding: 0.65em 0.75em;
  padding-right: 30px; }

ul span.topnavi__label {
  display: none; }


/**
 * LABELS
 */
.topnavi__label:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.topnavi__label {
  /*background-color: #a02a3c;*/
  height: 100%;
  padding: 0 .5em;
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0; }

.topnavi {
  /*border-bottom: 1px solid #64908A;*/ }

#toggle-menu {
  /*border-bottom: 1px solid #64908A;*/ }

.topnavi__lvl--sub {
  /*border-top: 1px solid #64908A;*/ }
  .topnavi__lvl--sub .topnavi__item:last-child {
    border-width: 0; }

.topnavi__item {
  /*border-bottom: 1px solid #64908A*/; }

.topnavi__item--header {
  letter-spacing: 0.2em;
  text-transform: uppercase; }

.topnavi__item a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out; }


/* ############# Navigation Symbol Mobil ############### */

.topnavi .container {
	padding: 0.65em 25px;
	cursor: pointer;
}

.topnavi .bar1,
.topnavi .bar2,
.topnavi .bar3
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  /*background: #cdcdcd;*/
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}


.topnavi .change .bar1 {
    -webkit-transform: rotate(45deg) translate(0, -2px);
    transform: rotate(45deg) translate(0, -2px);
	/*background: #fff;*/
}

.topnavi .change .bar2 {opacity: 0;}

.topnavi .change .bar3 {
    -webkit-transform: rotate(-45deg) translate(0, -2px);
    transform: rotate(-45deg) translate(0, -2px);
	/*background: #fff;*/
}

.navi-wrap {max-width: 1200px; margin: 0 auto; position: relative;}
.maximum_width {
    width: 100%;
    position: absolute;
    z-index: 9999;
}



/* CSS */

/*Farben für id-schmidt.de

Grau:		#666666
Blau:		#3399ff
helgrau:	#eeeeee


*/


.topnavi { border-bottom: 0px solid transparent; } 												/*Border unter der Navi Desktop ganze Breite*/
#toggle-menu {
	/*background-color:#eeeeee;
	border-bottom: 1px solid #666;*/} 															/*Hintergrundfarbe Navigation oben für Symbol nur mobil*/
.topnavi__lvl--first { background-color:rgba(200,200,200,0.60); } 												/*Hintergrundfarbe hinter den Button  für mobil*/
.topnavi__link--first { background-color:rgba(240,240,240,0.60);} 								/*normal Hintergrund 1. Ebene nur mobil*/
.topnavi__link--sub { background-color:rgba(240,240,240,0.90);} 								/*normal Hintergrund ab 2. Ebene*/
.topnavi__link--first:hover { background-color:rgba(255,255,255,.7);} 							/*hover 1. Ebene mobil*/
.topnavi__link--sub:hover { background-color:rgba(255,255,255,1.0);} 							/*hover 2. Ebene*/
.topnavi__link--active { background-color:rgba(200,200,200,0.84);} 								/*Aktiv Hintergrund nur mobil*/
.topnavi__lvl--first > .topnavi__item { border-bottom: 1px solid #666; } 						/*Border unten 1. Ebene mobil*/
/*.topnavi__lvl--first .topnavi__item li { border-bottom: 1px solid #666; }*/ 					    /*Border unten 2. Ebene */
  
@media only screen and (min-width: 999768px) {
.topnavi {background-color:#eeeeee; } 															/*Hintergrund ganze Breite*/
.topnavi__lvl--first {background-color: transparent; } 											/*Hintergrund ganze Breite*/
.topnavi__link--first { background-color: transparent;} 										/*Hintergrundfarbe Navi 1. Ebene nur Desktop*/
.topnavi__link--first:hover { background-color:transparent;} 									/*hover 1. Ebene nur Desktop */
.topnavi__link--active { background-color:rgba(200,200,200,0.64)} 												/*Aktiv Hintergrund nur Desktop */

.topnavi { border-bottom: 0px solid #ddd; } 													/*Border unter der Navi Desktop ganze Breite*/
#toggle-menu { border-bottom: 0px solid transparent; } 											/*ist ausgeblendet für Desktop*/	
.topnavi__lvl--sub { border-top: 1px solid #666;} 												/*Border oben bei Sub-Navigation*/
.topnavi__lvl--first > .topnavi__item { border-bottom: 1px solid transparent; } 				/*Border unten 1. Ebene Desktop*/
}


/*Symbol Navigation mobil*/

.topnavi .bar1, .topnavi .bar2, .topnavi .bar3 { background: #666; } 							/*x für Navi Mobil*/
.topnavi .change .bar1, .topnavi .change .bar3 { background: #333; } 							/*x für Navi Mobil wenn geöffnet*/



/*Schriftfarben*/
.topnavi__link--first, .topnavi__link--sub,
.topnavi__link--sub, .topnavi__item  {color:#555;} 												/*Schrift normal*/
.topnavi__link--active {color:#003366;} 														/*Schrift activ*/
.topnavi__link--first:hover, .topnavi__link--sub:hover {
	color:#999;
	text-shadow: rgba(255,255,255,0.9) 0px 0px 2px;} 											/*Schrift hover*/
.topnavi {text-shadow: rgba(50,50,50,0.45) 1px 1px 3px;}



/*MENU ARROWS*/
.topnavi__label {
	background-color: #bbb;
	transition: all .125s ease-in-out;
  	-webkit-transition: all .125s ease-in-out; }
.topnavi__label:hover { background-color: #ddd; } 												/*Box für Pfeil bei sub-Navigation Desktop + mobil*/

.topnavi__arrow {border-top: 6px solid #666;}
.topnavi__arrow--sub {border-top: 6px solid #666;}
@media (min-width: 999768px) {
    .topnavi__arrow--sub {
		border-left: 6px solid #666;
		border-top: 6px solid transparent;}
	.topnavi__label {background-color:transparent;}
	
}

/*ausblenden 1. Box für mobil*/
.topnavi label .topnavi__label { background-color: transparent;}
.container .topnavi__arrow {border-top: 6px solid transparent;}
.container .topnavi__arrow--sub {border-top: 6px solid transparent;}


/*korrektur position höhe 3. Ebene für Desktop*/
.topnavi__lvl--sub li ul {margin-top: -1px; }


@media (min-width: 999768px) {
.topnavi {
	border-bottom: solid 1px #aaa;
	display:flex;
	align-items: center;
	justify-content: center;
}
.topnavi__lvl--sub {margin-top: 1px;}
}