
#default-nav {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: fade(@site-color, 90%);
}

#site-navigation {
  display: inline-block;
  float: none;
  clear: both;
  font-family: "Open Sans", sans-serif;
  width: auto;
  vertical-align: middle;
  a {
    color: white;
  }
  ul li:hover > a {
    background: darken(@site-color, 10%);
  }
  ul li a {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0px 1px 0px darken(@site-color, 10%);
    transition: 0.2s all ease;
    &:hover {
      background: darken(@site-color, 10%);
      transition: 0.2s all ease;
    }
  }
  ul > li > a {
    padding: 18px 10px;
  }
  a {
    text-align: left;
  }
  li {
    margin: 0px 20px;
    padding: 0px 0px;
  }
  ul ul {
    opacity: 0;
    margin-top: 20px;
    transition: opacity .2s;
    box-shadow: 0px 2px 4px -2px #000;
    li {
      background: darken(@site-color, 10%);
      transform: translateY(-5px);
      transition: transform ease .2s;
      border-top: solid 1px darken(@site-color, 15%);
      border-bottom: solid 1px darken(@site-color, 5%);
      &:first-child {
        border-top: 0px;
      }
      ul {
        opacity: 0;
        transform: translateX(-5px);
        transition: transform ease .2s, opacity ease .2s;
      }
    }

  }
  ul > li:hover > ul {
    width: 200px;
    margin-top: 0px;
    opacity: 1;
    top: 61px;
    font-weight: 400;
    a {
      color: white;
      &:hover {
        background: @site-color;
      }
    }
    li {
      margin: 0;
      opacity: 1;
      transform: translateY(0px);
      a {
        padding: 10px;
        opacity: 1;
        font-size: 12px;
      }
      &:hover > ul {
        top: 0px;
        opacity: 1;
        transform: translateX(0px);
      }
    }
  }
  ul ul ul {
    margin-left: 1px;
  }
}

#default-nav .slicknav_menu {
  background: @site-color;
  a.slicknav_btn {
    background: lighten(@site-color, 10%);
    span.slicknav_menutxt {
      text-shadow: 0px 1px 0px #000;
    }
  }
}

@media screen and ( max-width: 768px ) {
  #site-navigation {
    display: none;
  }
}

@media screen and ( min-width: 768px ) {
  .slicknav_menu {
    display: none;
  }
}
