MontrealNewTech/website

header {
  box-sizing: border-box;
  height: 55px;
  width: 100%;
  z-index: 1;
  font-size: 80%;

  @include above($small-screen) {
    @include flex-center-between;
  }

  @include above($medium-screen) {
    font-size: 90%;
  }

  .top-bar {
    @include flex-center-between;
    padding: $little-space/2 $med-space 0 $little-space;
  }

  .logo {
    background-color: transparent;
    background-image: image-url('logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px;
    height: 65px;
    transition: background-size 0.5s;
    width: 300px;
    display: none;

    @include above($medium-screen) {
      display: inline-block;
    }
  }

  .mini-logo {
    background-color: transparent;
    background-image: image-url('mini-logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70px;
    height: 50px;
    transition: background-size 0.5s;
    width: 90px;

    @include above($medium-screen) {
      display: none;
    }
  }

  .logo:hover {
    background-size: 290px;
    background-color: transparent;
  }

  .mini-logo:hover {
    background-size: 75px;
    background-color: transparent;
  }

  .menu-toggle {
    float: right;
    @include above($small-screen) {
      display: none;
    }
  }

  ul {
    @include size-reset;
  }

  nav#toggle_menu {
    display: block;
    font-family: $headers;
    padding: $little-space $med-space $little-space $little-space;

    @include on($small-screen) {
      display: none;
      background-color: $background-color;
    }

    li {
      list-style: none;
      text-align: right;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding-bottom: $little-space;
      @include above($small-screen) {
        display: inline;
        padding-left: $med-space;
      }
      @include above($medium-screen) {
        padding-left: $large-space;
      }
    }

    .featured {
      border-radius: $round-border;
      font-size: inherit;
    }
  }
}