header.main-header {
  position: relative;
  height: auto;
  min-height: 400px;
  @include media-breakpoint-up(lg) {
    height: 60vh;
    min-height: 900px;
  }
  @include media-breakpoint-up(xxl) {
    min-height: 600px;
  }

  &.landing {
    height: 75vh;
    @include media-breakpoint-down(lg) {
      height: auto;
    }

    .background-overlay {
      background: transparent;
    }
  }

  background-image: linear-gradient(to left top, #231d3c, #442455, #6e2466, #9d1b6c, #ca0067);

  .background-overlay {
    &.default{
      background: transparent;
    }
    background-image: url('/graphic/overlay1.svg');
    background-position: center;
    @include media-breakpoint-up(md) {
      background-attachment: fixed;
    }

    background-size: cover;
    -webkit-background-size: cover;
  }

  .background-base,
  .background-overlay {
    height: 100%;
  }

  .background-base {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-image: url('/graphic/famousagency-background.jpg');
    //@include media-breakpoint-up() {
      background-attachment: fixed;
    //}
    @supports (-webkit-touch-callout: none) {
      background-attachment: scroll !important;
    }
  }

  h1 {
    color: $themeWhite;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: .07;
    line-height: 1.1em;
    letter-spacing: .1em;
    word-spacing: 500px;
    font-size: 19vw;
  }

  h2{
    position: unset;
    font-size: 40px;
    text-align: left;
    span{
      font-size: .7em;
    }
    @include media-breakpoint-down(md) {
      font-size: 35px;
      margin-top: $sizeLarge;
      span{
        font-size: .5em;
      }
    }
  }

  .container-fluid{
    padding: $sizeMedium $sizeLarge;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    @include media-breakpoint-down(md) {
      align-items: center;
      position: relative;
      padding: $sizeMedium calc(5% + 15px);
    }
    @include media-breakpoint-down(xs) {
      padding: $sizeMedium 15px;
    }
  }

  .logo-wrapper{
    flex-basis: 90px;
    flex-shrink: 0;
    @include media-breakpoint-up(sm) {
      flex-basis: 120px;
    }
    @include media-breakpoint-up(lg) {
      flex-basis: 180px;
    }
    svg{
      color: $themeWhite;
    }
    &.logo-color-pink{
      svg{
        color: $themePrimary;
      }
    }
    &.logo-color-white{
      svg{
        color: $themeWhite;
      }
    }
    &.logo-color-black{
      svg{
        color: $themeBlack;
      }
    }
  }

  img{
    display: block;
    width: 90%;
    margin: auto;
  }

  .content{
    position: relative;
    height: 100%;
    color: $themeWhite;
    margin-bottom: $sizeLarge*3;
    p{
      width: 75%;
      font-size: 1.4em;
      margin-top: $sizeLarge;
      margin-bottom: $sizeLarge;
      @include media-breakpoint-down(md) {
        width: auto;
        font-size: 1.1em;
      }
    }
    @include media-breakpoint-up(md) {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    h2{
      @include media-breakpoint-down(md) {
        padding-right: 0;
        padding-left: 0;
      }
    }
  }

  .header-content-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  @include media-breakpoint-up(lg) {
    &:before{
      position: absolute;
      content: "";
      height: calc(100% + #{$sizeLarge*2});
      width: 250px;
      background-color: $themePrimary;
      right: $sizeLarge;
      z-index: 1;
    }
  }

  h2, p{
    text-shadow: 1px 1px 20px $themeBlack;
  }

}