// roll your own nav

nav {
    width: 100%;
    font-size: 15px;
    text-transform: uppercase;
    .museo-sans-light;
    color: @medium-gray-text;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: @white;
    z-index: 9999999999;

    &.docs {
        background: @gray-background;
    }

    .logo {
        font-size: 0;
        .img-retina('/images/logo-header.png', @project-logo-width, @project-logo-height, no-repeat);
        background-position: 0, center;
        height: @project-logo-height;
        width: @project-logo-width;
        margin-left: 15px;
        &:hover{
          opacity: .6;
        }
      }

    .by-hashicorp{
      &:hover{
        svg{
          line{
            opacity: .4;
          }
        }
      }
    }

    .by-hashicorp{
      color: @project-link-color;

      &:hover{
        color: black;
        svg{
          path,
          polygon{
            fill: black;
          }
          line{
            stroke: black;
          }
        }
      }

      .svg-wrap{
        font-weight: 400;
      }

      svg{
        path,
        polygon{
          fill: @project-link-color;
        }
        line{
          stroke: @project-link-color;
        }
      }
    }

    .vagrant-docs-logo {
        display: block;
        text-indent: -999999px;
        background: url(/images/logo_docs.png) no-repeat 0 0;
        height: 70px;
        width: 350px;
        float: left;
        margin: 10px 20px;
    }

    ul {
        margin: 25px 20px;

        li {
            display: inline;
            margin-left: 15px;
            font-size: 15px;
        }

        li.pill {
            background-color: #48b4fb;
            border-radius: 50px;
            color: #FFF;
            padding: 10px 18px;
        }
    }

    .active-nav {
        color: @blue;
    }

    .contact {

        &:hover {
            background-color: @light-gray-background;
            padding: 10px;
            margin-right: -10px;
            margin-left: 5px;
            .rounded;
        }

        &:active {
            background-color: darken(@light-gray-background, 5%);
        }
    }
}