nav{
  position:relative;
  height:64px;
  width:100%;
  z-index:100;
  .logo-link{
    padding:12px;
    text-decoration: none;
    display:block;
    svg{
      vertical-align: middle;
      display:inline-block;
      height:36px;
    }
    .title{
      font-family: $header-font;
      margin-left:16px;
      display:inline-block;
      vertical-align: middle;
      font-size: 24px;
      color: $orange;
      font-weight:300;
    }
  }
  .browse-all-button{
    cursor:pointer;
    padding:15px;
    position:absolute;
    top:0;
    right:0;
  }
  .menu-dropdown{
    position:absolute;
    width:300px;
    right:0;
    top:64px;
    transform: translateX(300px);
    transition: .3s opacity ease, .5s translateX ease;
    background-color: #ffffff;
    border:1px solid #eeeeee;
    overflow-y:scroll;
    display:none;
    &.active{
      display:block;
      transform: translateX(0px);
      opacity:1;
    }
    ul {
      margin:0;
      padding:0;
      list-style: none;
      a{
        text-decoration: none;
        display:inline-block;
        padding:8px;
      }
    }
  }
}

svg.logo {
    fill: $orange;
}
svg.menu-button {
    fill: $orange;
    stroke: transparent;
}
