/**
        responsive multi navigation
        copyright harold raduschewski
        www.formularbox.de
*/

.toggle, [id^=drop] {
         display: none;
}

nav{
        line-height: 1.2 !important;
}

nav:after {
          content: "";
          display: table;
          clear: both;
}

nav ul {
          float: left;
          padding: 0;
          margin: 0;
          list-style: none;
          position: relative;
}

nav ul li {
          margin: 0px;
          display: inline-block;
          float: left;
          z-index:99999999;
}

nav a {
          display: block;
          padding: 0 20px;
          font-size: 18px; /* 20px */
          line-height: 60px;
          text-decoration: none;
          /** color :#fff */
}

nav a:hover {
        /** background-color: #3498cc; */
        text-decoration: none;
}

nav ul li ul li:hover {
        /**background: #3498cc;*/
}


nav ul li ul li a:hover{
         /** background-color: #44a8dc; */
}

nav ul ul {
          display: none;
          position: absolute;
          top: 60px;
}

nav ul li:hover > ul {
        display: inherit;
}

nav ul ul li {
          width: 190px;
          float: none;
          display: list-item;
          position: relative;
          /**background: #3498cc;*/
}

nav ul ul ul li {
          position: relative;
          top: -60px;
          left: 190px;
}

li > a:after {
        content: ' +';
}

li > a:only-child:after {
        content: '';
}

/* Media Querie 768px
--------------------------------------------- */

@media all and (max-width : 768px) {

        nav,
        .menu {
                margin: 0; width:100%;
        }

        nav a, nav .toggle {
                border-top:1px solid #fff;
        }

        .toggle + a,
        .menu {
                display: none;
        }

        .toggle {
                  display: block;
                 padding: 0 20px;
                  color: #111;
                  font-size: 20px;
                  line-height: 60px;
                  text-decoration: none;
                  border: none;
                  /** background-color: #44a8dc; */
        }

        .toggle:hover {
                  /** background-color: #44a8dc; */
        }

        [id^=drop]:checked + ul {
                display: block;
        }

        nav ul li {
                  display: block;
                  width: 100%;
        }

        nav ul ul .toggle,
        nav ul ul a {
                padding: 0 40px;
        }

        nav ul ul ul a {
                padding: 0 80px;
        }

        nav a:hover,
         nav ul ul ul a {
                 background-color: #aaa;
         }

        nav ul li ul li .toggle,
        nav ul ul a {
                background-color: #666;
        }

        nav ul ul {
                  float: none;
                  position: static;
                  color: #ffffff;
        }

        nav ul ul li:hover > ul,
        nav ul li:hover > ul {
                display: none;
        }

        nav ul ul li {
                  display: block;
                  width: 100%;
        }

        nav ul ul ul li {
                position: static;
        }
}
/* Media Querie 768px
--------------------------------------------- */

/* Media Querie 330px
--------------------------------------------- */
@media all and (max-width : 330px) {

        nav ul li {
                  display: block;
                  width: 94%;
        }
}
/* Media Querie 330px
--------------------------------------------- */