/* ##################################################
EXO - Menu
################################################## */

/* dropdown buttons for responsive navigation */
.nav-toggle,
.dropdown-toggle,
.btn-toggle               { height:45px; width:45px; position:absolute; cursor:pointer; border:0;margin: 0; padding: 0; display:none;  }
.nav-toggle                    { right:0; top:3rem; }
.nav-toggle:focus              { outline:none; }

/* Position of the Navigation Toggle button*/
.nav-toggle span,
.nav-toggle span:before,
.nav-toggle span:after         { position:absolute; content:''; display:block; width:35px; background-color:#707070; height:4px; right:0; }
.nav-toggle span               { top:16px; }
.nav-toggle span:before        { top:-13px; }
.nav-toggle span:after         { bottom:-13px; }

@media (min-width:540px) {
  .nav-toggle span,
  .nav-toggle span:before,
  .nav-toggle span:after  { width:100%; }
 }
/* Active Nav toggle button */
.nav-toggle.active span        { background:none; }
.nav-toggle.active span:before { top:0; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.nav-toggle.active span:after  { bottom:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);  }

/* secondary dropdown Buttons in Submenu*/
.dropdown-toggle                          { right:0; top:0; z-index:30; }
.dropdown-toggle span         { display:block; height:100%; width:35px; position:relative;  }
.btn-toggle                     { height:100%; width:35px; position:relative;  }
.dropdown-toggle span:after,
.dropdown-toggle span:before,
.btn-toggle:after,
.btn-toggle:before                       { content:''; position:absolute; background-color:#707070; height:2px; left:50%; width:16px;  top:50%; margin:-2px 0 0 -8px;  }
.dropdown-toggle span:after,
.btn-toggle:after               { transform:rotate(-90deg); }
.toggled > .dropdown-toggle span:after,
.toggled > .btn-toggle:after    { transform:rotate(0); background-color:#ffe600;  }
.toggled > .btn-toggle:before   { background-color:#ffe600;  }
.menu, .menu-item { padding:0; margin:0; list-style-type: none; display:inline-block; }
.menu-item a,
.menu-item button  { display:inline-block;text-decoration: none; color:#4B4A4A; position: relative; z-index:1}
.menu-item a:hover,
.menu-item button:hover  { color:#ffe600; }



.seminar-item.headline h5 { margin:0; font-weight:bold; }
.seminar-item.headline.cl-2,
.seminar-item.subline.cl-2 { color:#001588;}




.current-menu-item a,
.organisatorisches #organistaorisches-btn,
.informationen #informationen-btn,
.sonstiges #sonstiges-btn,
.ueber-die-biko  #ueber-btn,
.individuelle-angebote #individuelles-btn  { position: relative; }



.mega-navi .current-menu-item a:before,
.mega-navi .current-menu-item a:hover:before,
.metanavi .current-menu-item a:before,
.metanavi .current-menu-item a:hover:before,
.current_post a:before,
.current_post a:hover:before  {
  content:'';
  position: absolute !important;
left: 0 !important;
right: inherit !important;
top: inherit !important;
bottom: -2px !important;
width: 100% !important;
height: 2px !important;
background-color: #ffe600 !important;
display: block !important; }

.organisatorisches #organistaorisches-btn:before,
.informationen #informationen-btn:before,
.sonstiges #sonstiges-btn:before,
.ueber-die-biko  #ueber-btn:before,
.individuelle-angebote #individuelles-btn:before  {
  content:'';
  position: absolute !important;
left: 0 !important;
right: inherit !important;
top: inherit !important;
bottom: -7px !important;
width: 100% !important;
height: 8px !important;
background-color: #ffe600 !important;
display: block !important; }



.main-navigation                               { margin:10.5rem 0 0 auto; }
.metabox,
.metabox .menu-item,
.seminar-box .menu-item                        { position: static; }
.metabox .menu-item                            { margin:0 2rem; }
#metanavi > .menu-item                         { height: 34px; }
.metabox .menu-item:hover > a,
.metabox .menu-item:hover > button             { color:#4B4A4A; }
.metabox .menu-item:hover > a:after,
.metabox .menu-item:hover > button:before,
.service #service > button:before,
.kontakt #kontakt a:after,
.menu-item > button.toggled:before,
.themenverzeichnis #themenverzeichnis a:after                    { content:''; position: absolute; bottom:-7px; left:0; height:8px; width:100%; background-color:#ffe600; z-index:20; }


#service:after                                 { content:''; position: absolute;height:60px; width: 117px; margin-left: -3rem; margin-top: -3rem; }
.seminar-box > .menu .menu-item:hover > button:before,
.seminar-box > .menu .menu-item button.toggled:before,
.tarif-und-arbeitsrecht #tarif-und-arbeitsrecht-btn:before,
.betriebsrat #betriebsrat-btn:before,
.jav #jav-btn:before,
.sbv #sbv-btn:before,
.sbv #sbv-btn:before,
.kommunikation #kommunikation:before,
.entgelt #entgelt-btn:before,
.wirtschaft #wirtschaft-btn:before,
.gesundheit-und-arbeitsschutz #gesundheit-btn:before,
.weitere-seminare #weitere-seminare-btn:before,
.search #search a:after                       { content:''; position: absolute; bottom:0; left:0; height:8px; width:100%; background-color:#ffe600; z-index:20; }
.metabox #search:hover > a:after,
.search .metabox  #search > a:after           { width:calc(100% - 26px); left:26px; bottom:-7px; }
.metabox .menu-item:last-of-type { margin-right:0; }
.metabox #search a { position: relative; padding-left: 2.6rem; }
.metabox #search span { position: absolute; left: 0px; top: -13px; display:inline-block; width:26px; height:42px; }
.metabox svg { width:100%; height:100%; }
.metabox #search a:hover svg path,
.search #search a svg path { stroke:#4B4A4A; }


.mega-navi { width:100%;  position: absolute; left:0; top: 14.4rem; }

.mega-navi {
padding: 0;
height: 0;
width: 0;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}



.mega-navi:before { content:''; width:200vw; left: -50vw; background-color:#fff; top:2px; position: absolute; display: block; height: 100%; }
.mega-navi .menu,
.mega-navi .menu-item { display:block; }
.mega-navi  button { font-weight:bold; text-align: left; }
.mega-navi > div .menu-item { margin:2rem 0 0 0; }
#seminar-label .mega-navi > div .menu-item { margin:0 0 3rem 0; }
.mega-navi > div .menu-item a:after { display:none; }
.mega-navi > div .menu-item a:hover { color:#ffe600;}

.mega-navi .flex-item { padding:0 2rem; border-left:1px solid #707070; }

@media (min-width:1080px) {
  .mega-navi .flex-item { padding:0 3rem; }
}
.mega-navi .flex-item:first-child { padding-left:0; border:0; }
.mega-navi { width:100%;  position: absolute; left:0; top: 13.8rem; z-index:12;}

.seminar-box { position: absolute; left:0; width:100%; }
.seminar-box > .menu { width:100%; display: -webkit-box; display: -ms-flexbox; display: flex;  }
.seminar-box > .menu .menu-item button,
#seminar-label strong { display:block; padding:1.3rem 0; }
.seminar-box::after {
  content: '';
  height: 1px;
  width: 120vw;
  position: absolute;
  bottom: -1px;
  left: -20vw;
  background-color: #707070;
  z-index: 11;
}
.seminar-box > .menu  .menu-item button:hover { color: #4b4a4a!important; }

#seminar-label {display:none; }
.seminar-box::before {
  content: '';
  height: 100%;
  width: 200vw;
  position: absolute;
  top: 1px;
  left: -50vw;
  background-color: #ffffff;
  z-index: -1;
}
@media (max-width:1080px) {
  #seminar-label { display:none; }
}

@media (min-width:960px) {
  .mega-navi > div .menu-item { margin:1rem 0 0 0; }
  .seminar-box .mega-navi { top: 5.2rem; }
  .mega-navi  button { pointer-events: none; }
  /*li:hover .mega-navi,*/
  .menu-item button.toggled + .mega-navi{
     padding: 6rem 0;
     left:0;
     clip: auto;
     height:auto;
     width:100%;
     opacity:1;
     overflow:visible;
  }
  .mega-navi a { line-height: 1.3!important;}

  /*.seminar-box li:hover .mega-navi,*/
  .seminar-box .menu-item button.toggled + .mega-navi { padding: 3rem 0; left:0;
  clip: auto;
  height:auto;
  width:100%;
  opacity:1;
  overflow:visible;}
  #seminarnavi .flex-item.seminar-service { width:20%; min-width:250px; }
  #seminarnavi .flex-item { width:40%}
  .mega-navi-wrapper { overflow: auto; max-height: calc(100vh - 250px); width: 100%; position: relative; }
  .mega-navi-wrapper > div { padding-bottom:3rem; width: 100%; }
}

@media (max-width:960px) {
  .main-navigation {
    margin: 0;
    position: absolute;
    top: 134px;
    left: -4rem;
    width: calc(100vw + 4rem);
    height: 100vh;
    background-color: #fff;
    display:none;

}

.nav-active .site-header:after  { bottom:inherit; top: 133px;  }
#seminar-label,
.active + .main-navigation,
.seminar-box > .menu,
.seminar-box > .menu li,
.metabox .menu,
.metabox .menu li { display:block; }
.mega-navi {
    padding: 6rem 0;
    left:0;
    clip: auto;
    height:auto;
    width:100%;
    opacity:1;
    overflow:visible;
  }
  .nav-toggle,
  .dropdown-toggle { display:block; }
.mega-navi a { line-height: 1.3!important;}
  #metanavi > .menu-item,
  #seminarnavi > .menu-item { height: auto; margin:0; padding:0 4rem;  width: calc(100% - 4rem); border-bottom: 1px solid #707070; background-color: #fff;}

  .metabox .menu-item > a,
  .metabox .menu-item button,
  .seminar-box .menu-item > a,
  .seminar-box > .menu .menu-item > button,
  .seminar-item.headline h5,
    .seminar-item.subline p { padding:1rem 0; width:100%; text-align:left;  }
  .metabox .menu-item > a:after,
  .metabox .menu-item > button:before,
  .seminar-box > .menu .menu-item > button:before { display:none; }
  .metabox #search a { padding-left:0; }
  .metabox #search span { margin-left:5px; left: inherit; top:0; transform: rotate(180deg); }
  .metabox .menu-item a:hover,
  .metabox .menu-item button:hover,
  .metabox .menu-item button.toggled  { color:#ffe600; }
  .btn-toggle { display: inline-block; top: 0; position: absolute; right: 0rem; }
   button:hover .btn-toggle:after,
   button:hover .btn-toggle:before,
   button.toggled .btn-toggle:after,
   button.toggled .btn-toggle:before, { background-color:#ffe600; }

.flex-item.seminar-service { display:none; }
  .mega-navi { display:none; position: relative; padding: 0; top: 0; border-top: 1px solid #707070; width: calc(100% + 8rem); margin: 0 -4rem;}
  .inner-wrap {width:100%; flex-wrap:wrap }
  .mega-navi .flex-item { border:0; padding: 0 4rem 0 5rem!important; margin:0; width: 100%;}
  #seminarnavi > .menu-item:last-of-type { border:0; }
  .mega-navi .flex-item .menu li { padding-left:1rem;}
  .mega-navi > div .menu-item { margin:0; }
  #service .mega-navi .flex-item::before {
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #707070;
    height: 1px;
}

.mega-navi .inner-wrap .flex-item:last-of-type::before {
  content: '';
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #707070;
  height: 1px;
}

.mega-navi .flex-item > div{ display:none; }
.toggled + .mega-navi,
.seminar-box .toggled + .mega-navi .flex-item >  div,
.mega-navi .flex-item > .toggled + div { display:block; }
.current-menu-item a,
.tarif-und-arbeitsrecht #tarif-und-arbeitsrecht-btn,
.betriebsrat #betriebsrat-btn,
.jav #jav-btn,
.sbv #sbv-btn,
.kommunikation #kommunikation,
.entgelt #entgelt-btn,
.wirtschaft #wirtschaft-btn,
.gesundheit-und-arbeitsschutz #gesundheit-btn,
.weitere-seminare #weitere-seminare-btn,
.service #service > button,
.kontakt #kontakt a,
.themenverzeichnis #themenverzeichnis a  { color:#ffe600; }
}
@media (max-width:540px) {
  .main-navigation { top:115px; }
  .nav-active .site-header:after  { bottom:inherit; top: 114px;  }
}

@media (max-width:440px) {
  #metanavi > .menu-item,
    #seminarnavi > .menu-item { width:100%; }
    .seminar-box::after { left:0; }
}

@media (max-width:380px) {
.main-navigation { top: 117px; }
.nav-active .site-header:after  { bottom:inherit; top: 116px;  }
}
/*#smn-5 .mega-navi { padding: 6rem 0;
left:0;
clip: auto;
height:auto;
width:100%;
opacity:1;
overflow:visible; }*/
.pagination li { margin:0 0.5rem; }