.masthead {
    background-color: $darkgrey-1;

    h1 {
        color: $white;
    }

    & nav a.nav-link {
        color: $white;
        border-bottom: 1px dashed $white;
        font-weight: $bolder;

        &:hover {
            border-bottom: 1px solid $white;
            color: $white;
        }

        &:focus {
            border-bottom: 1px solid $white;
            outline: 2px dotted $ochre-focus;
        }
    }


    & .header__desktop {
        display: none;

        & .app-title {
            & a {
                color: $white;
                border-bottom: none;

                &:focus {
                outline: 2px dotted $ochre;
                }


            }

            &__wrapper {
                position: relative;
                display:inline-block;

                & .mat-chip-list {
                  position: absolute;
                  bottom: calc(100% - 15px);
                  left: calc(100% - 10px);
                  z-index:10;

                  & .mat-chip {
                    white-space: nowrap;
                  }
                }
            }


        }

        @media print, (min-width: 950px) and (max-width:1070px) {
          & .app-title--long .mat-chip-list {
              left: calc(100% - 40px);
          }
        }


        & .app-title--long .app-logo .span-app__color {
          color: white;
          width:380px;
        }

        & .app-title--long .app-logo h1, & .app-title--long .app-logo .h1 {
          font-size: 1.5rem;
        }

        @media print, (min-width:975px) {
          & .app-title--long .app-logo h1, & .app-title--long .app-logo .h1 {
            font-size: 1.5rem;
          }
        }

        @media print, (min-width:1220px) {
          & .app-title--long .app-logo h1, & .app-title--long .app-logo .h1 {
            font-size: 1.65rem;
          }
        }

        @media print, (min-width:1480px) {
          & .app-title--long .app-logo h1,& .app-title--long .app-logo .h1 {
            font-size: 2rem;
          }
        }

        @media print, (min-width:1350px) {
          & .app-title--long .app-logo .span-app__color {
            width:410px;
          }
        }

        @media print, (min-width:1470px) {
          & .app-title--long .app-logo .span-app__color {
            width:475px;
          }
        }


        @media print, (min-width:1670px) {
          & .app-title--long .app-logo .span-app__color {
            width:550px;
          }
        }


        @media print, (min-width:1900px) {
          & .app-title--long .app-logo .span-app__color {
            width:auto;
          }
        }
    }

    & .header-link-area {
        font-size: $header-link-area-font-size;

        @media print,(min-width: 975px){
          font-size: $header-link-area-sm-font-size;
        }

        @media print,(min-width: 1220px){
          font-size: $header-link-area-m-font-size
        }

        @media print,(min-width: 1480px){
          font-size: $header-link-area-l-font-size
        }


      .btn-primary {
          background-color: $darkgrey-1;
          border: 0;
        }

        .bars__icon {
          color: $white;
        }
    }

    & .header__mobile {
        display: block;
        height: 80px;
        padding-top: 15px;

        & #container {
            margin-left: 15px;
            margin-right: 15px;
        }

        & img {
            width: 68px;
        }

        & a {
            border-bottom: none;
        }

        & #nav {
            width:25%;
            display: inherit;
            padding-left: 15px;

            & button.navbar-toggler{
                font-size: $header-link-area-navbar-toggler-font-size;
            }

            & button:focus,& button:active {
                outline: 2px dotted $ochre-focus;
            }
        }

        & #crest{
            width: 50%;
            text-align: center;
        }

        & #links{
            display:flex;
            justify-content: flex-end;
            width: 25%;
            position: relative;
            top: 5px;
            padding-left: 0px;
            padding-right: 15px;
        }
    }
}

@media print, (min-width: 950px) {
  .masthead {
    & .header__desktop {
      display: block;
    }

    & .header__mobile {
      display:none;
    }
  }
}

@media print, (min-width: 667px) and (max-width: 768px) {
  .masthead {
    & .header__mobile {
      & #links{
        top: 5px;
        padding-left: 30px;
      }
    }
  }
}

@media print, (min-width: 950px) and (max-width: 1220px) {
  .masthead {
    & .header__desktop {
      & .header-link-area{
        position: absolute;
        width: auto;
        right: 0;
      }
    }
  }
}

@media print, (min-width: 1200px) and (max-width: 1308px) {
  .masthead {
    & .header__desktop {
      & .col-xl-10{
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
  }
}

@supports (-ms-ime-align: auto) {
  .header__mobile div#links {
    top: -0.3rem !important;
  }

  .header__mobile .popover {
    margin-top: 0.3rem;
  }
}