/**
 * MENU TOGGLE TYPE
 *
 * Use a Hamburger Icon or a Navigation bar.
 * Please note the slightly different HTML markup (demos).
 *
 */

#toggle-menu {
  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; }
  @media (min-width: 768px) {
    .topnavi__arrow--sub {
      border-right: none;
      border-bottom: 6px solid transparent;
      border-top: 6px solid transparent;
      border-left: 6px solid #fff; } }

/**
 * 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: 768px) {

  
  #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: 768px) {
  .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;
}

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

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

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




/* CSS */

/*Farben für Haus Einkehr

braun:     rgba(180,149,83,1.00)
grün:      rgba(6,115,93,1.00)
            rgba(6,115,93,0.20)


*/


.topnavi { border-bottom: 1px solid rgba(180,149,83,1.00); } 		                           /*Border unter der Navi Desktop ganze Breite*/
/*#toggle-menu {
	background-color:#fafafa;
	border-bottom: 1px solid #666;} */														/*Hintergrundfarbe Navigation oben für Symbol nur mobil*/
.topnavi__lvl--first { background-color:rgba(6,115,93,0.20); } 								/*Hintergrundfarbe hinter den Button  für mobil*/
.topnavi__link--first { background-color:transparent;} 								        /*normal Hintergrund 1. Ebene nur mobil*/
.topnavi__link--sub { background-color:rgba(207,235,218,0.90);} 								/*normal Hintergrund ab 2. Ebene*/
.topnavi__link--first:hover { background-color:rgba(6,115,93,0.90);} 							/*hover 1. Ebene mobil*/
.topnavi__link--sub:hover { background-color:rgba(6,115,93,0.90);} 							/*hover 2. Ebene*/
.topnavi__link--active { background-color:rgba(6,115,93,0.90);} 								/*Aktiv Hintergrund nur mobil*/
.topnavi__lvl--first > .topnavi__item { border-bottom: 1px solid rgba(180,149,83,1.00); } 						/*Border unten 1. Ebene mobil*/
.topnavi__lvl--first .topnavi__item li { border-bottom: 1px solid rgba(180,149,83,1.00); } 					    /*Border unten 2. Ebene */
  
@media only screen and (min-width: 768px) {
.topnavi {background-color:rgba(6,115,93,0.20); } 						   						/*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:transparent;} 										/*Aktiv Hintergrund nur Desktop */
.topnavi__item > ul .topnavi__link--active {background-color: rgba(6,115,93,1.00);}             /*Aktiver Hintergrund 2. Ebene*/

#toggle-menu { border-bottom: 0px solid rgba(180,149,83,1.00); } 											/*ist ausgeblendet für Desktop*/	
.topnavi__lvl--sub { border-top: 1px solid transparent;} 												/*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:rgba(180,149,83,1.00);} 							/*Schrift normal*/
.topnavi__link--active {color:#ffffff;} 											            /*Schrift activ*/
.topnavi__link--first:hover, .topnavi__link--sub:hover {color:#fff;} 							/*Schrift hover*/
/*.topnavi {text-shadow: rgba(50,50,50,0.45) 1px 1px 3px;}*/



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

.topnavi__arrow {border-top: 6px solid rgba(180,149,83,1.00);}
.topnavi__arrow--sub {border-top: 6px solid #666;}
@media (min-width: 768px) {
    .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: 768px) {
.topnavi {
	border-bottom: solid 1px rgba(180,149,83,1.00);
	display:flex;
	align-items: center;
	justify-content: center;
}
.topnavi__lvl--sub {margin-top: 1px;}
}