.section-hero {

  margin-top: -@navbar-height;
  > .container {
    background: transparent;
    margin-top: inherit;
    @padding-equalizer: floor((200 / 1280 / 1) * 100%);
    @padding-navbar: floor(@navbar-height*1);
    padding-top: calc(~"@{padding-navbar} + @{padding-equalizer}");

    min-height: 85vh;

    @media screen and (min-width: @grid-float-breakpoint) {
      background: transparent linear-gradient(to bottom, rgba(246,249,248,.9) 0%, rgba(246,249,248,0) 33%);
    }

    @media screen and (min-aspect-ratio: 16/10) {
      min-height: inherit;
      @padding-equalizer: floor((150 / 1280 / 1) * 100%);
      @padding-navbar: floor(@navbar-height*1);
      padding-top: calc(~"@{padding-navbar} + @{padding-equalizer}");

    }

    @media screen and (orientation: portrait) {
      min-height: 75vw;

    }

    @media screen and (orientation: portrait) and (max-width: @grid-float-breakpoint-max) {
      min-height: 133vw;
      @padding-navbar: floor(@navbar-height*2);
      padding-top: calc(~"@{padding-navbar} + @{padding-equalizer}");
    }

    &:before, &:after {
      display: none;
    }
    .row {
      display: table;
      height: 100%;
      width: 100%;
    }
    .col {
      display: table-cell;
      float: none;
      height: 100%;
      vertical-align: middle;
    }
  }

  h1 {
    color: @text-color;
  }
  .csc-header {
    br {
      @media screen and (max-width: @grid-float-breakpoint-max) {
        display: none;
      }
    }
  }

}

.hero-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: right center;

  @media screen and (orientation: portrait) {
    background-position: right top;
  }

}

