/**
 * 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
 */


/* CSS */



.topnavi { border-bottom: 0px solid transparent; } 												/*Border unter der Navi Desktop ganze Breite*/
.topnavi__lvl--first { background-color:#fafafa; } 												/*Hintergrundfarbe hinter den Button  für mobil*/
.topnavi__link--first { background-color:rgba(240,240,240,0.90);} 								/*normal Hintergrund 1. Ebene nur mobil*/
.topnavi__link--sub { background-color:rgba(255,255,255,0.95);} 								/*normal Hintergrund ab 2. Ebene*/
.topnavi__link--first:hover { background-color:rgba(255,255,255,1.0);} 							/*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(227,6,19,0.88);} 								/*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: 1050px) {
/*.topnavi {background-color:#fafafa; } */															/*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:#fafafa;}*/ 											/*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--sub:last-child {border-bottom:1px solid #666; }
.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:#E30613;} 											            /*Schrift activ*/
@media only screen and (max-width: 1050px) {
    .topnavi__link--active {color:#fff;}}
.topnavi__lvl--sub .topnavi__link--active {color:#fff;}
.topnavi__link--first:hover, .topnavi__link--sub:hover {
	color:#000;
	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: 1050px) {
    .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: 1050px) {
/*.topnavi {
	border-bottom: solid 1px #aaa;
	display:flex;
	align-items: flex-end;
	justify-content:flex-end;
}*/
.topnavi__lvl--sub {margin-top: 1px;}
}



#toggle-menu {
  display: block;
  /*padding: 0.75em 1em;*/
  position: relative;
  /*  text-align: right;*/
}
/*########### Farbe Ende ###########*/





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

.topnavi__arrow--sub {

  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: inline-block;
  vertical-align: middle;
  height: 0;
  width: 0; }
  @media (min-width: 1050px) {
    .topnavi__arrow--sub {
      border-right: none;
      border-bottom: 6px solid transparent;
      border-top: 6px solid transparent;
      border-left: 6px solid transparent; } }

/**
 * MOBILE VIEW
 */
  .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 {
  display: block;
  position: relative; }
  .topnavi__item a {
    display: block;
    position: relative;
    text-decoration: none; }
    .topnavi__item a:hover, .topnavi__item a:focus {
      text-decoration: none; }


.topnavi__link--first {
  padding: 0.75em 1em;
  padding-right: 42px; }


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

.topnavi__link--sub {
  padding: 0.75em 1em;
  padding-right: 42px; }


.topnavi__link--active {
  padding: 0.75em 1em;
  padding-right: 42px; }

ul span.topnavi__label {
  display: none; }

/**
 * DESKTOP VIEW
 */
@media only screen and (min-width: 1050px) {


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

  .topnavi__lvl--first,
  .topnavi__item:hover > input[type="checkbox"] + .topnavi__lvl--sub {
    display: block; }

  .topnavi__item {
    float: left; }

  .topnavi__link--first {
    padding: 0.75em 1em;
    padding-right: 42px; }



  .topnavi__lvl--sub {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000; }
    .topnavi__lvl--sub .topnavi__item {
      float: none; }
    .topnavi__lvl--sub .topnavi__lvl--sub {
      top: 0;
      left: 100%; } }
/**
 * LABELS
 */
.topnavi__label:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.topnavi__label {
  height: 100%;
  padding: 0 .5em;
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0; }



  .topnavi__lvl--sub .topnavi__item:last-child {
    border-width: 0; }


.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; }

@media only screen and (min-width: 1050px) {
  .topnavi__item {
    border-width: 0 1px 0 0; }

  .topnavi__lvl--sub {
    border-width: 0; }

  .topnavi__lvl--sub .topnavi__item {
    border-width: 0 0 1px; } }

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

.topnavi .container {
	padding: 0.75em 25px;
	cursor: pointer;
    display: inline-block;
}

.topnavi .bar1,
.topnavi .bar2,
.topnavi .bar3
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #E30613;
  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);
}

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

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