#main-nav { display:none; }
#main-nav ul { list-style-type: none;padding:0; }
#main-nav > ul { padding-left:25px; }
#main-nav a:active, #main-nav a:focus, #main-nav a:hover { text-decoration: none;color:#fff; }

#home-nav a { font-size:18px;color:#3d3d3b;padding:0 10px; }
#home-nav a:hover { color:#5a5a58; }
#home-nav .hide-navpoint { display:none; }

#home-nav ul { display:flex;justify-content:space-around;list-style-type:none;padding:0;margin:0; }
#home-nav li { display:inline-block; }

body.nav-toggled { overflow:hidden; }

#nav-toggle { float:left;padding:43px 0 2px 0;width:12%;z-index: 1000; }
#nav-toggle .menu-bar { height:2px;background:#3d3d3b;display:block;width:20px;margin-bottom:3px }

.level-1 { margin-top: 10px; }


@media screen and (min-width: 768px) {
    body.not-home #nav-toggle { visibility:visible; }
    #nav-toggle { visibility: hidden; }
}

@media screen and (max-width: 767px) {
    #home-nav { display:none; }
}

.nav-open #main-nav a { color:#3d3d3b; }
/*BREAKPOINT AUCH IN MAGISTER-ASSETS/JS/NAVI.JS ANPASSEN*/

  /*MENU BUTTON*/
  .nav-open #nav-toggle .menu-bar { margin:0;height:0;overflow:hidden;opacity:0; }
  .nav-open #nav-toggle .menu-bar:first-child { display:block;margin:9px 0 0 0;height:2px;opacity:1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg); }
  .nav-open #nav-toggle .menu-bar:last-child { display:block;margin:-2px 0 0 0;height:2px;opacity:1;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg); }

  /*LAYOUT*/
  #main-nav { position:absolute;top:80px;z-index:99;background:#bdf7bd;left:0;right:0;display:block;float:none;clear:both;overflow:hidden;max-height:0vh; }
  .nav-open #main-nav { max-height:100vh;transition:max-height 0.5s linear;  }
  #main-nav li.has-children > a:after { content:"\f107";font-family:'FontAwesome';line-height:20px;padding:0 20px;font-size:1.0em; }
  #main-nav li.has-children.open > a:after { content:"\f104";font-family:'FontAwesome';line-height:20px;padding:0 20px;font-size:1.0em; }
  
  /*DARKEN BACKGROUND*/
  #main-area:before { content:"";z-index:10; }
  .nav-open #main-area:before { background: rgba(0,0,0, 0.5);position:absolute;top:80px;right:0;bottom:0;left:0; }

    #main-nav li a:hover { -webkit-box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1);-moz-box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1);box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1); }

  /*LEVEL 1*/
  #main-nav li.level-1 { padding:0;float:none; }
  #main-nav li.level-1 > a { display:block;padding:10px 10px 10px 20px;position:relative; }

  /*LEVEL 2*/
  #main-nav li.level-2 { display:none;float:none;padding:0; }
  #main-nav li.level-1.open li.level-2 { display:block; }
  #main-nav li.level-2 > a { display:block;padding: 10px 10px 10px 50px; }

    #main-nav li.has-children.active:not(.open) a { -webkit-box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1);-moz-box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1);box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1); }
    #main-nav li.has-children.open li.active a { -webkit-box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1);-moz-box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1);box-shadow: inset 3px 0px 0px 0px rgba(119,119,117,1); }

@media screen and (min-width: 768px) {
    #nav-toggle .menu-bar { height:3px;background:#3d3d3b;display:block;width:30px;margin-bottom:6px }
    #main-nav { left:-10px;right:-10px; }
    .nav-open #main-area:before { right:-10px;left:-10px; }
}