.section-hero {
  @whiteHeight: 2560;
  @whiteRatio: 2 / 1;

  min-height: @navbar-height + @padding-large-vertical * 4;
  max-height: 75vh;



  @media (max-width: @screen-xs) and (orientation: portrait ) {
    max-height: 40vh;
  }
  @media (max-width: @screen-sm) and (orientation: portrait ) {
    max-height: 60vh;
  }

  @media (max-width: 1024px) and (orientation: landscape ) {
    max-height: 70vh;
  }

  padding-top: 0;
  padding-bottom: 0;

  background-color: @jumbotron-bg;
  background: @jumbotron-gradient;

  color: @jumbotron-color;


  .frame-type-header {
    z-index: 3;
    padding-top: @jumbotron-padding;
    padding-bottom: @jumbotron-padding/2;
    @media screen and (min-width: @screen-sm) {
      padding-top: @jumbotron-padding *2;
      padding-bottom: @jumbotron-padding *1;
    }
    @media screen and (min-width: @grid-float-breakpoint) {
      padding-top: @jumbotron-padding *3;
      padding-bottom: @jumbotron-padding *1.5;
    }
  }

  header {
    .fadeInUp();
  }

  header *:first-child {
    color: @jumbotron-color;
    margin-bottom: 0;

    & + h2 {
      color: @jumbotron-color;
      font-weight: @headings-font-weight;
    }
  }

  .frame-bgimage {

    height: 75vh;
    width: 100vw;

    @media (max-width: @screen-xs) and (orientation: portrait ) {
      height: 40vh;
    }
    @media (max-width: @screen-sm) and (orientation: portrait ) {
      height: 60vh;
    }


    @media (max-width: 1024px) and (orientation: landscape ) {
      height: 70vh;
    }

    img {
      object-position: 85% bottom;
      @media (max-width: @grid-float-breakpoint-max) and (orientation: portrait ) {
        object-position: 80% bottom
      }
    }
  }

}

// Workaround for IE
.no-object-fit {
  .frame-bgimage {
    .ce-img img {
      height: auto;
      max-height: inherit;
    }}
  .section-hero {
    max-height: 40vw ;
  }
}
