/* -------------------------------------------------------------- */
/* http://callmenick.com/post/simple-responsive-navigation-menu */

body { margin: 0; padding: 0; }   /* takes menu to edges */

/* On clicking */

#nav-trigger {
  display: none;
 z-index:1; position: absolute; top: 0; left: 0; right: 0;
  text-align: left; }

  #nav-trigger span {
    display: inline-block;
padding: 6px 30px;
background-color: #08d;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

    #nav-trigger span:after {
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 5px;
      content: "";
      border-left: solid 10px transparent;
      border-top: solid 10px #fff;
      border-right: solid 10px transparent; }

    #nav-trigger span:hover {
background-color: #0af; }

    #nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
      border-bottom: solid 10px #fff;
      border-right: solid 10px transparent;
}

/* -------------------------------------------------------------- */
/* Full menu */

nav { margin-top: -4px; }

nav#nav-main {
 z-index: 1; position: fixed; top: 0; left: 0; right: 0;
background-color: #08d;
  padding: 0 0; }

  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left; }

nav#nav-main li.right {float: right;}

  nav#nav-main li {
    display: inline-block; }

  nav#nav-main a {
    display: block;
    color: white;
   text-decoration: none;
border-bottom: 0px solid #aaa;
    padding: 4px 16px; }

    nav#nav-main a:hover {
background-color: #0af;
      color: #fff; }

/* -------------------------------------------------------------- */
/* Mobile menu */

nav#nav-mobile {
  position: relative;
  display: none; }

  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
background-color: #08d; }

  nav#nav-mobile li {
    display: block; 
}
   nav#nav-mobile li:last-child {
      border-bottom: none; }

  nav#nav-mobile a {
    display: block;
    color: white;
    margin: 0 0;
   text-decoration: none;
    padding: 4px 0px; }

    nav#nav-mobile a:hover {
background-color: #0af;
      color: #fff; }

/* -------------------------------------------------------------- */
@media all and (max-width: 900px) {
  #nav-trigger {
    display: block; }

  nav#nav-main {
    display: none; }

  nav#nav-mobile {
    display: block; } }