head-nav {
  .toolbar-content {
    display: grid;
    grid-template-columns: 20% 1fr 20%;
    justify-items: stretch;
    align-items: center;

    ion-title {
      justify-self: start;

      &.logo-header {
        .toolbar-title {
          font-size: 0;
          width: auto;
          cursor: pointer;
          color: white;
          font-weight: 700;
          font-style: italic;
          padding-left: 0px;
          img{
            max-width: 90%;
          }
        }
      }
    }

    ion-buttons {
      justify-self: end;
    }

    .search {
      justify-self: center;
      @media (min-width: map-get($grid-breakpoints, lg)) {
        display: inline-block;
      }

      display: none;

      vertical-align: middle;

      input {
        width: 500px;
        margin-top: 4px;
        padding: 9px 12px;
        color: color($colors, light);
        background-color: darken(color($colors, brand), 10%);
        border: 0;
        box-shadow: 1px 1px 0 0 rgba(255, 255, 255, .41), inset 1px 1px 3px 0 rgba(0, 0, 0, .10);
      }

      ::-webkit-input-placeholder {

        color: lighten(color($colors, brand), 20%);
        font-style: italic;
        font-weight: 100;
      }

      ::-moz-placeholder {
        color: lighten(color($colors, brand), 20%);
        font-family: 'Ubuntu', sans-serif;
        font-weight: 100;
      }
    }
  }

  .mobile-searchbar > .toolbar-content {
    display: grid;
    grid-template-columns: 100%;
  }

  .search-button {
    @media (min-width: map-get($grid-breakpoints, lg)) {
      display: none;
    }
  }
}