/* BUILD 09: centre the homepage slogan in the yellow band,
   and replace ribbon lead stripes with a red 2x4 brick motif based on the logo. */

/* Hero text centered within the yellow band area on the left side. */
@media (max-width: 920px) {
  .rbh-hero-text {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:127px;
    margin-top:32px;
    padding:0 0 0 2px;
    width:100%;
  }
  .rbh-hero h1 {
    margin:0 auto;
    transform-origin:center center;
  }
}
@media (min-width:701px) and (max-width:920px) {
  .rbh-hero-text {
    min-height:154px;
    margin-top:38px;
  }
}
@media (max-width:370px) {
  .rbh-hero-text {
    min-height:117px;
    margin-top:29px;
    padding-left:1px;
  }
}

/* Replace the red angled stripe with a small red RB-style brick. */
.rbh-ribbon:before {
  background: url('/assets/ribbon-brick-red.svg') center / contain no-repeat !important;
  width: 24px !important;
  height: 18px !important;
  left: -28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Size tuning for smaller ribbon variants. */
.rbh-feature-copy .rbh-ribbon:before,
.rbh-rove-copy .rbh-ribbon:before {
  width: 20px !important;
  height: 15px !important;
  left: -23px !important;
}
.rbh-heading-line .rbh-ribbon:before,
.rbh-clients .rbh-ribbon:before {
  width: 26px !important;
  height: 19px !important;
  left: -31px !important;
}
@media (max-width:640px) {
  .rbh-ribbon:before {
    width: 16px !important;
    height: 12px !important;
    left: -18px !important;
  }
  .rbh-heading-line .rbh-ribbon:before,
  .rbh-clients .rbh-ribbon:before {
    width: 17px !important;
    height: 13px !important;
    left: -19px !important;
  }
  .rbh-feature-copy .rbh-ribbon:before,
  .rbh-rove-copy .rbh-ribbon:before {
    width: 14px !important;
    height: 11px !important;
    left: -16px !important;
  }
}