/*
 * NAVIGATION
 */


#main-navigation {
  padding: 0;
  margin: 0;
}


/** ALLE EBENEN **/

#main-navigation ul {
  padding: 0;
  margin: 0;
}

#main-navigation li {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
}

#main-navigation a {
  display: block;
  color: #000168;
  position: relative;
  outline: none;
  text-decoration: none;
  line-height: 2rem;
  padding: 1rem 1rem 1rem 1rem;
}

#main-navigation li.subpages > a {
  /*padding-right: 4.5rem;*/
}

#main-navigation ul.nav-next-level {
  display: none;
  
  /** 1. ANIMATION ** /
  -moz-animation: bounceInDown .3s ease-in;
  -webkit-animation: bounceInDown .3s ease-in;
  animation: bounceInDown .3s ease-in;
  /**/
  /** 2. ANIMATION ** /
  -moz-animation: flipInX .3s ease-in;
  -webkit-animation: flipInX .3s ease-in;
  animation: flipInX .3s ease-in;
  /**/
  /** 3. ANIMATION **/
  -moz-animation: zoomIn .1s ease-in;
  -webkit-animation: zoomIn .1s ease-in;
  animation: zoomIn .1s ease-in;
  /**/
}

#main-navigation i {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 27px;
  height: 27px;
  background: #000168;
  cursor: pointer;
  text-align: center;
  color: white;
  padding: 3px;
  line-height: 1.0;
  
  /* 2. Variante */
  top: 6px;
  right: 0px;
  padding: 3px;
  /**/
  
  /* 3. Variante * /
  border-radius: 50%;
  /**/
}


/** 1. EBENE **/

#main-navigation > li {}

#main-navigation > li > a {
  /*background: #555;*/
}


/** 2. EBENE **/

#main-navigation ul.level2 {}

#main-navigation ul.level2 > li {}

@media (min-width: 992px)
  #main-navigation ul.level2 > li > a {
    background: #21214A;
  }
}

/** 3. EBENE **/

#main-navigation ul.level3 {}

#main-navigation ul.level3 > li {}

@media (min-width: 992px){
  #main-navigation ul.level3 > li > a {
    background: #21214A;
    padding: 1rem 1rem 1rem 1rem;
  }
}



/*** RESPONSIVE ***/

/*@media (max-width: 767px){*/
@media (max-width: 991px){

  #main-navigation {
   /*display: none;*/
  }
  
  /** ALLE EBENEN **/

  #main-navigation li.active > a {
    //background: #999;
    color: #559A7E;
  }
  #main-navigation ul.nav-next-level {
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  #main-navigation li.is-open > ul.nav-next-level {
    display: block;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  #main-navigation li.subpages > i {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  #main-navigation li.is-open > i {
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  #main-navigation li.is-open > ul.nav-next-level {
    display: block;
  }

  /** 1. EBENE **/
  
  #main-navigation > li {    
    border-bottom: 1px solid black;
  }
  
  /** 2. EBENE **/

  #main-navigation ul.level2 > li {
    border-top: 1px solid black;
  }
  #main-navigation ul.level2 > li > a {
    padding-left: 2.5rem;
  }
  
  #main-navigation ul.level2 > li.active > a {
    //background: #999;
    color: #559A7E;
  }
  
  /** 3. EBENE **/

  #main-navigation ul.level3 > li {
    border-top: 1px solid black;
  }
  #main-navigation ul.level3 > li > a {
    padding-left: 5rem;
  }

  #main-navigation ul.level3 > li.active > a {
    //background: #999;
    color: #559A7E;
  }
  
}


/*** DESKTOP ***/

/*@media (min-width: 768px){*/
@media (min-width: 992px){
  
  .navbar-collapse {
    float: left;
  }

  #main-navigation {
    display: block !important;
    margin: 50px 0 0;
  }
  
  /** ALLE EBENEN **/

  #main-navigation ul li a:hover,
  #main-navigation ul li a:focus {
    background: #559A7E;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  #main-navigation li.active > a {
    /*background: #999;*/
    color: #559A7E;
  }
  #main-navigation ul.nav-next-level {
    position: absolute;
    z-index: 10;
    width: 100%;
  }
  #main-navigation li.subpages > i {
    transform: rotate(0deg);
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;

    display: none !important;
  }
  #main-navigation li.subpages:hover > i {
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  #main-navigation li.subpages:hover > ul.nav-next-level,
  #main-navigation li.is-open.subpages:hover > ul.nav-next-level {
    display: block;
  }

  /** 1. EBENE **/

  #main-navigation > li {
    float: left;
    /*width: 20%;*/
    position: relative;
  }
  #main-navigation > li > a {
    /*border-left: 1px solid #aaa;*/
    font-size: 150%;
    margin-right: 4rem;
    padding-left: 0;
    padding-right: 0;
  }
  #main-navigation > li.first > a:after {
    content:"\E88A";
    font-family: 'Material Icons';
    font-size: 130%;
  }
  #main-navigation > li.first > a span {
    display: none;
  }
  #main-navigation > li.first > a {
    /*border-left: none;*/
  }
  #main-navigation > li.last > a {
    margin: 0;
  }
  #main-navigation > li > a:hover,
  #main-navigation > li > a:focus {
    /*background: #eee;*/
    color: #559A7E;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  /** 2. EBENE **/

  #main-navigation ul.level2 {
    /*border-top: 1px solid black;*/
    padding: 30px 0 0;
  }
  #main-navigation ul.level2:after {
    position: absolute;
    top: 10px;
    left: 50px;
    display: inline-block;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #21214A;
    border-left: 20px solid transparent;
    content: '';
  }
  #main-navigation ul.level2 > li {
    /*border-bottom: 1px solid #eee;*/
  }
  #main-navigation ul.level2 > li > a {
    color: white;
  }
  #main-navigation ul.level2 > li.last {
    /*border: none;*/
  }
  #main-navigation ul.level2 > li.active > a {
    background: #559A7E;
    /*color: white;*/
  }
  #main-navigation ul.level2 > li.subpages:hover > i {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  #main-navigation li.last ul.level2 > li.subpages:hover > i {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;    
  }

  /** 3. EBENE **/
  #main-navigation ul.level3 > li > a {
    color: white;
  }
  #main-navigation li.subpages:hover > ul.level3 {
    left: 100%;
    top: 0;
  }
  #main-navigation > li.last.subpages:hover ul.level3 {
    left: -100%;
  }
  #main-navigation ul.level3 > li {
    border-bottom: 1px solid #eee;
  }
  #main-navigation ul.level3 > li.active > a {
    background: #000168;
    color: white;
  }
  
}





#main-navigation .nav-item-118 {
  display: none;
}

@media (min-width: 992px){
#main-navigation ul.level2 {
  width: 200px;
}

#main-navigation .nav-item-60 ul.level2 {
  width: 500px;
}
}

#main-navigation ul.level2 > li.nav-item-notruf-tess {
  position: absolute;
  right: 40px;
  top: 40px;
  max-width: 240px;
}
.nav-item-notruf-tess .tess-teaser .frame {
  padding: 2em; 
}
.nav-item-notruf-tess .tess-teaser .row {
  margin: 0;
  padding: 0;
  border:1px solid #484869;
}
.nav-item-notruf-tess .tess-teaser .row .image {
  margin:8px 0px 8px 0px;
}

.nav-item-notruf-tess .tess-teaser .text-body {
  border:1px solid #484869;
  border-top:0px;
  padding: 16px 12px 0px;
}
.nav-item-notruf-tess .tess-teaser .text-body a {
  padding:0px;
}

.nav-item-notruf-tess .tess-teaser .btn {
  background:#fff;
  color:#21214A;
}