/*********************/
/* Styling                     */
/*********************/
#nav-top > ul {
  min-height: 46px;
}
#nav-top {
  max-width: 960px;
  /*background: #14436a;*/
  border-radius: 0 8px 0 0;
  border: 1px #000d18 solid;
  background: rgba(20, 67, 106, 0.8);
}
#nav-top li a {
  text-decoration: none;
}
/* horizontal ul */
#nav-top > ul > li {
  padding: 5px 5px;
  border-right: 1px #000d18 solid;
  font-size: 14px;
}
#nav-top > ul > li a {
  text-transform: uppercase;
  color: #B3B3B3;
  padding: 10px;
}
#nav-top ul > li.active > a, 
#nav-top ul > li > a:hover,
#nav-top ul > li > a:focus {
  color: #FF4100;
}
#nav-top span:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #B3B3B3;
  right: -5px; 
}
/* dropdown ul */
#nav-top > ul > li > ul {
  padding-top: 5px;
  margin-left: -5px;
}
#nav-top > ul > li > ul li {
  background: #14436a;
  min-width: 250px;
}
#nav-top > ul > li > ul li:not( :last-child ) {
  border-bottom: 1px #071c2e solid;
}
#nav-top > ul > li > ul li a {
  text-transform: none;
  font-size: 14px;  
  color: #B3B3B3;
  padding: 8px 10px;
}
#nav-top > ul > li > ul li a:hover,
#nav-top > ul > li > ul li a:focus {
  color: #fff;
}
/*********************/
/* Effects                     */
/*********************/
/* li:hover dropdown fading */
#nav-top li ul {
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -khtml-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  opacity: 0; 
}
#nav-top li:hover ul {
  opacity: 1;
}
/* li:hover dropdown slide down */
/*#nav-top li ul {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -khtml-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#nav-top li:hover ul {
  height: 200px !important;
}*/

@media only screen and ( max-width: 780px ) {
  /*********************/
  /* Styling                     */
  /*********************/
  #nav-top { overflow: hidden; }
  #nav-top ul li {clear: both;
    padding: 5px 10px;
    width: 100%;
  }
  #nav-top > ul { display: none;
    margin-top: 0;
    margin-bottom: 5px;
  }
  #nav-top > ul > li {
    font-size: 18px;
    border-top: 1px #000d18 solid;
    border-right: none;
  }
  #nav-top li ul { position: static; }
  #nav-top > ul > li > ul {
    padding-top: 3px;
  }
  #nav-top > ul > li > ul li a {
    font-size: 18px;
  }

  /*#nav-top li ul { height: auto; opacity: 1;}*/

  /*********************/
  /* Button                     */
  /*********************/
  #nav-top > a { text-indent: -9999px; position: relative;
    width: 40px;
    height: 40px;
    margin: 5px 10px;
  }
  #nav-top > a:before,
  #nav-top > a:after { position: absolute; top: 35%; left: 25%; right: 25%; content: '';
    border: 2px solid #fff;
  }
  #nav-top > a:after { top: 60%;}
  #nav-top:not( :target ) > a:first-of-type,
  #nav-top:target > a:last-of-type { display: block; }
  #nav-top:target > ul { display: block; }  
}