.toolbar {
  position: fixed;
  padding: 0 5px;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--mainWhite);
  border-bottom: .1rem solid var(--mainGrey);

  height: 66px;
  z-index: 1000;

  .toolbar-wrapper {
    max-width: 104rem;

    margin: auto;
    height: 100%;
  }

  .toolbar__navigation {
    display: flex;
    height: 100%;
    align-items: center;
  }

  .toolbar__logo {
    a {
      text-decoration: none;
      font-size: 2.5rem;
      font-family: "Nunito";
      font-weight: 900;
      color: var(--mainBlack);

      padding: 6px 6px 6px 0;
      letter-spacing: 2.3px;
      border-radius: 2px;
      display: flex;
      align-items: center;

      span {
        color: var(--mainBlack);
        color: var(--primaryColor);
      }
    }

    .logo {
      font-size: 3rem;
      margin-right: 0.5rem;
    }
  }

  .spacer {
    flex: 1;
  }

  .toolbar_navigation-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;

    li {
      padding-left: 1.7rem;
      display: flex;
      align-self: center;
    }

    a {
      font-family: "Nunito",
        sans-serif;
      color: var(--darkGrey);
      position: relative;
      letter-spacing: 1.2px;
      font-size: 1.6rem;
      font-weight: 500;
      text-decoration: none;
      transition: 0.3s;

      &:hover,
      &:active {
        color: var(--primaryColor);
      }
    }
  }
}

@media (max-width: 1200px) {
  .toolbar-wrapper {
    padding: 0 15px;
  }
}

@media (max-width: 900px) {
  .toolbar {
    height: 66px;

    .toolbar_navigation-items {
      display: none;
    }

    .toolbar-wrapper {
      padding: 0 15px;
    }

    .toolbar__logo {
      a {
        width: 100px;
        font-size: 2rem !important;
        width: 100%;
      }
    }
  }
}

@media (min-width: 900px) {
  .toolbar__toggle-button {
    display: none;
  }

  .toolbar__logo {
    margin-left: 0;
  }
}