body {
     -webkit-animation: bugfix infinite 1s; /* needed for checkbox hack */
}

@-webkit-keyframes bugfix {
     from {
          padding: 0;
     }

     to {
          padding: 0;
     }
}

/* needed for checkbox hack */
h1, p {
     color: white;
}

#nav {
     position: absolute;
     border-bottom: 2px solid #999999;
     width: 100%;
     background-color: #212121;
     z-index: 999;
}

#nav ul {
     display: none;
     width: 100%;
     list-style: none;
     margin: 0px;
     padding: 0px;
}

#nav li.active a {
     background: #404040;
}
#nav li.active li a {
     background: #212121;
}

#nav ul li a {
     display: block;
     padding: 1em;
     background: #212121;
     color: white;
     text-decoration: none;
     border-right: 1px solid #666666;
}

#nav ul li a:hover {
     background: #ff6600;
}

#nav ul li:last-of-type a {
     border-right: 0px;
}

#nav ul li ul li a {
     padding-left: 1.5em;
}

#nav ul li ul li ul li a {
     padding-left: 3.125em;
}

#nav input.trigger {
     position: absolute;
     top: -9999px;
     left: -9999px;
}

#nav input.trigger:checked ~ ul, #nav input.trigger:checked ~ ul li ul {
     display: block !important;
}

@media (min-width: 70em) {
     #nav input.trigger:checked ~ ul, #nav input.trigger:checked ~ ul li ul {
          /* older flexbox */
          display: -webkit-box;
          display: -moz-box;
          display: box;
          -webkit-box-orient: horizontal;
          -moz-box-orient: horizontal;
          box-orient: horizontal;
          /* newer flexbox */
          display: flex;
          flex-direction: row;
     }
}

#nav label {
     position: relative;
     display: block;
     min-height: 2em;
     padding: .45em;
     font-size: 1.1em;
     margin: 0;
     cursor: pointer;
     background: #212121;
     line-height: 2em;
     color: #ffffff;
}

#nav label:after {
     position: absolute;
     right: 1em;
     top: .2em;
     content: "\2261";
     font-size: 1.8em;
     color: white;
}

@media (min-width: 70em) {
     #nav ul {
      /* older flexbox */
          display: -ms-flexbox;
          flex-direction: -ms-row;
          display: -webkit-box;
          display: -moz-box;
          display: box;
          -webkit-box-orient: horizontal;
          -moz-box-orient: horizontal;
          box-orient: horizontal;
      /* newer flexbox */
          display: flex;
          flex-direction: row;
     }

     #nav ul li {
          position: relative;
          text-align: center;
        /* older flexbox */
          -ms-flex: 1;
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          box-flex: 1;
        /* newer flexbox */
          flex: 1;
     }

     #nav ul li ul {
          display: none !important;
          position: absolute;
     /*   original     
          top: 3.0625em; */
          left: 0;
          display: block;
     /*   original
          width: 12.5em; */
          width: 100%;
          z-index: 200;
     }

     #nav ul li ul li {
          text-align: left;
     }

     #nav ul li ul li ul {
          z-index: 300;
          top: 0px;
     /*   original
          left: 12.4em; */
          left: 100%;
     }

     #nav ul li ul li ul li a {
          padding-left: 30px !important;
     }

     #nav ul li:hover > ul {
          display: block !important;
     }

     #nav label {
          display: none;
     }
}

@media screen and (max-width:767px) {
     #nav ul li a {
     font-size: 10px;
     }
}
@media screen and (max-width:498px) {
     #nav ul li ul li {
     display:none;
     }
}