.top-nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;

  .logo {
    height: 100%;
    color: $white;
    svg{
      height: 100%;
      max-height: 100%;
      display: block;
    }
    a{
      svg{
        color: $white !important;
      }
    }
  }
  .top-nav-navbar{
    position: fixed;
    z-index: 1001;
    height: 70px;
    width: 100%;
    padding: $size-small $size-medium;
    @include transition(all 0.5s cubic-bezier(0.77,0.2,0.05,1.0));
    &.scrolled{
      height: 50px;
      background-color: rgba(0, 0, 0, .3);
    }
    @include media-breakpoint-up(lg){
      height: 90px;
      &.scrolled{
        height: 70px;
      }
    }
  }
}
.top-nav-content{
  position: fixed;
  z-index: 999;
  top:0;
  width: 100%;
  height: 100vh;
  background-color: $primary;
  padding: 0 $size-large;
  @include media-breakpoint-up(lg){
    background-image: url("/img/menu_bg.svg");
    background-repeat: no-repeat;
    background-position: -10% calc(100% + 5px);
    background-size: auto 80%;
    padding: 0;
  }
  color: $white;
 // @include transition(transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0));
  @include transition(top 1s cubic-bezier(0.77,0.2,0.05,1.0));
  //@include transformOrigin(0);
  top: -1500px;
  //@include transform(translate(0, -1500px));
  &.open {
    //@include transform(translate(0, 0));
    top: 0;
  }
  nav{
    ul{
      margin-bottom: $size-medium;
      @include media-breakpoint-up(lg){
        margin-bottom: $size-large;
      }
    }
    li{
      margin-bottom: $size-small;
      @include media-breakpoint-up(lg){
        margin-bottom: $size-small*2;
      }
    }
  }
}