@include breakpoint($mobile-breakpoint) {
  header {
    &.main {
      .logo {
        width: 20%;
      }
    }

    .top-nav{
      li a{
        text-transform: uppercase;
        font-size: 1.563em;

        span{
          @include hidden();
        }
      }
    }
  }


}

@include breakpoint($mobile-and-tablet-breakpoint) {
  body {
    &.nav-open {
      header {
        &.main {
          background-color: $header-bg-nav-open;
        }
      }
    }
  }

  header {
    &.main {
      @include transition(background-color 0.2s ease-in-out);
    }
  }
}

@include breakpoint($tablet-breakpoint) {
  header {
    &.main {
      .logo {
        width: 20%;
      }
    }
  }
}

@include breakpoint($desktop-breakpoint) {
  header {
    &.main {
      position: relative;

      .logo {
        width: 10%;
      }
    }
  }
}