/*	Hero Promo 
********************/
.hero-promo {
  border-bottom: 6px solid;
  /*	this component assumes there is always a colour class e.g. .component--col-primary	*/
  display: block;
  position: relative;
  overflow: hidden;
  padding: 230px 0 0 0;
  /*	component-specific styling for secondary button element */
  /* Create colour variations based on page colour class*/
  /*	temporarily include .img-responsive--stretch { } class hero-promo__image*/ }
  @media (max-width: 992px) {
    .hero-promo {
      padding-top: 20%; } }
  @media (max-width: 768px) {
    .hero-promo {
      padding-top: 30%; } }
  @media (max-width: 576px) {
    .hero-promo {
      padding-top: 40%; } }
  .hero-promo .hero-promo__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 
    Image Alignment Focus Modifiers - TOP ( push over top edge )
    */ }
    .hero-promo .hero-promo__image--top, .hero-promo .hero-promo__image--top-0 {
      top: 0%; }
    .hero-promo .hero-promo__image--top-minus-5 {
      top: 0%;
      -ms-transform: translate(0, -5%);
      -moz-transform: translate(0, -5%);
      -webkit-transform: translate(0, -5%);
      transform: translate(0, -5%); }
    .hero-promo .hero-promo__image--top-minus-15 {
      top: 0%;
      -ms-transform: translate(0, -15%);
      -moz-transform: translate(0, -15%);
      -webkit-transform: translate(0, -15%);
      transform: translate(0, -15%); }
    .hero-promo .hero-promo__image--top-minus-25 {
      top: 0%;
      -ms-transform: translate(0, -25%);
      -moz-transform: translate(0, -25%);
      -webkit-transform: translate(0, -25%);
      transform: translate(0, -25%); }
    .hero-promo .hero-promo__image--top-minus-35 {
      top: 0%;
      -ms-transform: translate(0, -35%);
      -moz-transform: translate(0, -35%);
      -webkit-transform: translate(0, -35%);
      transform: translate(0, -35%); }
    @media (max-width: 768px) {
      .hero-promo .hero-promo__image {
        /*	always top align image, without offsets, on mobile	*/
        bottom: auto;
        top: 0px;
        -ms-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0); } }
  .hero-promo .hero-promo__title-textpanel {
    padding: 40px 40px;
    text-decoration: none; }
    @media (max-width: 992px) {
      .hero-promo .hero-promo__title-textpanel {
        padding: 10px 20px; } }
    @media (max-width: 768px) {
      .hero-promo .hero-promo__title-textpanel {
        width: calc(100% - 30px);
        margin-left: 15px;
        padding: 10px 20px; } }
  .hero-promo .hero-promo__title-heading {
    color: #fff;
    margin-top: 0px;
    margin-bottom: 10px; }
    @media (max-width: 992px) {
      .hero-promo .hero-promo__title-heading {
        font-size: 2rem;
        /*	use smaller font-size on tablet and mobile */ } }
  .hero-promo .hero-promo__title-abstract {
    color: #fff;
    margin-top: 0;
    margin-bottom: 30px; }
  .hero-promo .hero-promo__title-textpanel .btn--transparent, .hero-promo:visited .hero-promo__title-textpanel .btn--transparent {
    border: 1px solid #fff;
    color: #fff;
    background: transparent; }
  .hero-promo:hover .hero-promo__title-textpanel .btn--transparent, .hero-promo:focus .hero-promo__title-textpanel .btn--transparent {
    color: #404041;
    background: #fff;
    border: 1px solid #fff; }
  .page-primary-col--orange .hero-promo.component--col-primary {
    /* use  page primary :red */
    background: #d04a02;
    /*	background colour is only shown when image is too short	*/
    border-color: #d04a02; }
    .page-primary-col--orange .hero-promo.component--col-primary .hero-promo__title-textpanel {
      background: #d04a02; }
    .page-primary-col--orange .hero-promo.component--col-primary:hover, .page-primary-col--orange .hero-promo.component--col-primary:focus {
      background: #b13f02;
      border-color: #b13f02; }
      .page-primary-col--orange .hero-promo.component--col-primary:hover .hero-promo__title-textpanel, .page-primary-col--orange .hero-promo.component--col-primary:focus .hero-promo__title-textpanel {
        background: #b13f02; }
    .page-primary-col--orange .hero-promo.component--col-primary:active {
      background: #a63b02;
      border-color: #a63b02; }
      .page-primary-col--orange .hero-promo.component--col-primary:active .hero-promo__title-textpanel {
        background: #a63b02; }
  .page-secondary-col--orange .hero-promo.component--col-secondary {
    /* use page secondary : red*/
    background: #d04a02;
    /*	background colour is only shown when image is too short	*/
    border-color: #d04a02; }
    .page-secondary-col--orange .hero-promo.component--col-secondary .hero-promo__title-textpanel {
      background: #d04a02; }
    .page-secondary-col--orange .hero-promo.component--col-secondary:hover, .page-secondary-col--orange .hero-promo.component--col-secondary:focus {
      background: #b13f02;
      border-color: #b13f02; }
      .page-secondary-col--orange .hero-promo.component--col-secondary:hover .hero-promo__title-textpanel, .page-secondary-col--orange .hero-promo.component--col-secondary:focus .hero-promo__title-textpanel {
        background: #b13f02; }
    .page-secondary-col--orange .hero-promo.component--col-secondary:active {
      background: #a63b02;
      border-color: #a63b02; }
      .page-secondary-col--orange .hero-promo.component--col-secondary:active .hero-promo__title-textpanel {
        background: #a63b02; }
  .page-tertiary-col--orange .hero-promo.component--col-tertiary {
    /* use page tertiary : orange*/
    background: #d04a02;
    /*	background colour is only shown when image is too short	*/
    border-color: #d04a02; }
    .page-tertiary-col--orange .hero-promo.component--col-tertiary .hero-promo__title-textpanel {
      background: #d04a02; }
    .page-tertiary-col--orange .hero-promo.component--col-tertiary:hover, .page-tertiary-col--orange .hero-promo.component--col-tertiary:focus {
      background: #b13f02;
      border-color: #b13f02; }
      .page-tertiary-col--orange .hero-promo.component--col-tertiary:hover .hero-promo__title-textpanel, .page-tertiary-col--orange .hero-promo.component--col-tertiary:focus .hero-promo__title-textpanel {
        background: #b13f02; }
    .page-tertiary-col--orange .hero-promo.component--col-tertiary:active {
      background: #a63b02;
      border-color: #a63b02; }
      .page-tertiary-col--orange .hero-promo.component--col-tertiary:active .hero-promo__title-textpanel {
        background: #a63b02; }
  .page-primary-col--red .hero-promo.component--col-primary {
    /* use  page primary :red */
    background: #e0301e;
    /*	background colour is only shown when image is too short	*/
    border-color: #e0301e; }
    .page-primary-col--red .hero-promo.component--col-primary .hero-promo__title-textpanel {
      background: #e0301e; }
    .page-primary-col--red .hero-promo.component--col-primary:hover, .page-primary-col--red .hero-promo.component--col-primary:focus {
      background: #be291a;
      border-color: #be291a; }
      .page-primary-col--red .hero-promo.component--col-primary:hover .hero-promo__title-textpanel, .page-primary-col--red .hero-promo.component--col-primary:focus .hero-promo__title-textpanel {
        background: #be291a; }
    .page-primary-col--red .hero-promo.component--col-primary:active {
      background: #b32618;
      border-color: #b32618; }
      .page-primary-col--red .hero-promo.component--col-primary:active .hero-promo__title-textpanel {
        background: #b32618; }
  .page-secondary-col--red .hero-promo.component--col-secondary {
    /* use page secondary : red*/
    background: #e0301e;
    /*	background colour is only shown when image is too short	*/
    border-color: #e0301e; }
    .page-secondary-col--red .hero-promo.component--col-secondary .hero-promo__title-textpanel {
      background: #e0301e; }
    .page-secondary-col--red .hero-promo.component--col-secondary:hover, .page-secondary-col--red .hero-promo.component--col-secondary:focus {
      background: #be291a;
      border-color: #be291a; }
      .page-secondary-col--red .hero-promo.component--col-secondary:hover .hero-promo__title-textpanel, .page-secondary-col--red .hero-promo.component--col-secondary:focus .hero-promo__title-textpanel {
        background: #be291a; }
    .page-secondary-col--red .hero-promo.component--col-secondary:active {
      background: #b32618;
      border-color: #b32618; }
      .page-secondary-col--red .hero-promo.component--col-secondary:active .hero-promo__title-textpanel {
        background: #b32618; }
  .page-tertiary-col--red .hero-promo.component--col-tertiary {
    /* use page tertiary : red*/
    background: #e0301e;
    /*	background colour is only shown when image is too short	*/
    border-color: #e0301e; }
    .page-tertiary-col--red .hero-promo.component--col-tertiary .hero-promo__title-textpanel {
      background: #e0301e; }
    .page-tertiary-col--red .hero-promo.component--col-tertiary:hover, .page-tertiary-col--red .hero-promo.component--col-tertiary:focus {
      background: #be291a;
      border-color: #be291a; }
      .page-tertiary-col--red .hero-promo.component--col-tertiary:hover .hero-promo__title-textpanel, .page-tertiary-col--red .hero-promo.component--col-tertiary:focus .hero-promo__title-textpanel {
        background: #be291a; }
    .page-tertiary-col--red .hero-promo.component--col-tertiary:active {
      background: #b32618;
      border-color: #b32618; }
      .page-tertiary-col--red .hero-promo.component--col-tertiary:active .hero-promo__title-textpanel {
        background: #b32618; }
  .page-primary-col--burgundy .hero-promo.component--col-primary {
    /* use  page primary :red */
    background: #a32020;
    /*	background colour is only shown when image is too short	*/
    border-color: #a32020; }
    .page-primary-col--burgundy .hero-promo.component--col-primary .hero-promo__title-textpanel {
      background: #a32020; }
    .page-primary-col--burgundy .hero-promo.component--col-primary:hover, .page-primary-col--burgundy .hero-promo.component--col-primary:focus {
      background: #8b1b1b;
      border-color: #8b1b1b; }
      .page-primary-col--burgundy .hero-promo.component--col-primary:hover .hero-promo__title-textpanel, .page-primary-col--burgundy .hero-promo.component--col-primary:focus .hero-promo__title-textpanel {
        background: #8b1b1b; }
    .page-primary-col--burgundy .hero-promo.component--col-primary:active {
      background: #821a1a;
      border-color: #821a1a; }
      .page-primary-col--burgundy .hero-promo.component--col-primary:active .hero-promo__title-textpanel {
        background: #821a1a; }
  .page-secondary-col--burgundy .hero-promo.component--col-secondary {
    /* use page secondary : red*/
    background: #a32020;
    /*	background colour is only shown when image is too short	*/
    border-color: #a32020; }
    .page-secondary-col--burgundy .hero-promo.component--col-secondary .hero-promo__title-textpanel {
      background: #a32020; }
    .page-secondary-col--burgundy .hero-promo.component--col-secondary:hover, .page-secondary-col--burgundy .hero-promo.component--col-secondary:focus {
      background: #8b1b1b;
      border-color: #8b1b1b; }
      .page-secondary-col--burgundy .hero-promo.component--col-secondary:hover .hero-promo__title-textpanel, .page-secondary-col--burgundy .hero-promo.component--col-secondary:focus .hero-promo__title-textpanel {
        background: #8b1b1b; }
    .page-secondary-col--burgundy .hero-promo.component--col-secondary:active {
      background: #821a1a;
      border-color: #821a1a; }
      .page-secondary-col--burgundy .hero-promo.component--col-secondary:active .hero-promo__title-textpanel {
        background: #821a1a; }
  .page-tertiary-col--burgundy .hero-promo.component--col-tertiary {
    /* use page tertiary : red*/
    background: #a32020;
    /*	background colour is only shown when image is too short	*/
    border-color: #a32020; }
    .page-tertiary-col--burgundy .hero-promo.component--col-tertiary .hero-promo__title-textpanel {
      background: #a32020; }
    .page-tertiary-col--burgundy .hero-promo.component--col-tertiary:hover, .page-tertiary-col--burgundy .hero-promo.component--col-tertiary:focus {
      background: #8b1b1b;
      border-color: #8b1b1b; }
      .page-tertiary-col--burgundy .hero-promo.component--col-tertiary:hover .hero-promo__title-textpanel, .page-tertiary-col--burgundy .hero-promo.component--col-tertiary:focus .hero-promo__title-textpanel {
        background: #8b1b1b; }
    .page-tertiary-col--burgundy .hero-promo.component--col-tertiary:active {
      background: #821a1a;
      border-color: #821a1a; }
      .page-tertiary-col--burgundy .hero-promo.component--col-tertiary:active .hero-promo__title-textpanel {
        background: #821a1a; }
  .page-primary-col--maroon .hero-promo.component--col-primary {
    /* use  page primary :red */
    background: #602320;
    /*	background colour is only shown when image is too short	*/
    border-color: #602320; }
    .page-primary-col--maroon .hero-promo.component--col-primary .hero-promo__title-textpanel {
      background: #602320; }
    .page-primary-col--maroon .hero-promo.component--col-primary:hover, .page-primary-col--maroon .hero-promo.component--col-primary:focus {
      background: #521e1b;
      border-color: #521e1b; }
      .page-primary-col--maroon .hero-promo.component--col-primary:hover .hero-promo__title-textpanel, .page-primary-col--maroon .hero-promo.component--col-primary:focus .hero-promo__title-textpanel {
        background: #521e1b; }
    .page-primary-col--maroon .hero-promo.component--col-primary:active {
      background: #4d1c1a;
      border-color: #4d1c1a; }
      .page-primary-col--maroon .hero-promo.component--col-primary:active .hero-promo__title-textpanel {
        background: #4d1c1a; }
  .page-secondary-col--maroon .hero-promo.component--col-secondary {
    /* use page secondary : red*/
    background: #602320;
    /*	background colour is only shown when image is too short	*/
    border-color: #602320; }
    .page-secondary-col--maroon .hero-promo.component--col-secondary .hero-promo__title-textpanel {
      background: #602320; }
    .page-secondary-col--maroon .hero-promo.component--col-secondary:hover, .page-secondary-col--maroon .hero-promo.component--col-secondary:focus {
      background: #521e1b;
      border-color: #521e1b; }
      .page-secondary-col--maroon .hero-promo.component--col-secondary:hover .hero-promo__title-textpanel, .page-secondary-col--maroon .hero-promo.component--col-secondary:focus .hero-promo__title-textpanel {
        background: #521e1b; }
    .page-secondary-col--maroon .hero-promo.component--col-secondary:active {
      background: #4d1c1a;
      border-color: #4d1c1a; }
      .page-secondary-col--maroon .hero-promo.component--col-secondary:active .hero-promo__title-textpanel {
        background: #4d1c1a; }
  .page-tertiary-col--maroon .hero-promo.component--col-tertiary {
    /* use page tertiary : red*/
    background: #602320;
    /*	background colour is only shown when image is too short	*/
    border-color: #602320; }
    .page-tertiary-col--maroon .hero-promo.component--col-tertiary .hero-promo__title-textpanel {
      background: #602320; }
    .page-tertiary-col--maroon .hero-promo.component--col-tertiary:hover, .page-tertiary-col--maroon .hero-promo.component--col-tertiary:focus {
      background: #521e1b;
      border-color: #521e1b; }
      .page-tertiary-col--maroon .hero-promo.component--col-tertiary:hover .hero-promo__title-textpanel, .page-tertiary-col--maroon .hero-promo.component--col-tertiary:focus .hero-promo__title-textpanel {
        background: #521e1b; }
    .page-tertiary-col--maroon .hero-promo.component--col-tertiary:active {
      background: #4d1c1a;
      border-color: #4d1c1a; }
      .page-tertiary-col--maroon .hero-promo.component--col-tertiary:active .hero-promo__title-textpanel {
        background: #4d1c1a; }
  .page-primary-col--rose .hero-promo.component--col-primary {
    /* use  page primary :red */
    background: #d93954;
    /*	background colour is only shown when image is too short	*/
    border-color: #d93954; }
    .page-primary-col--rose .hero-promo.component--col-primary .hero-promo__title-textpanel {
      background: #d93954; }
    .page-primary-col--rose .hero-promo.component--col-primary:hover, .page-primary-col--rose .hero-promo.component--col-primary:focus {
      background: #b93147;
      border-color: #b93147; }
      .page-primary-col--rose .hero-promo.component--col-primary:hover .hero-promo__title-textpanel, .page-primary-col--rose .hero-promo.component--col-primary:focus .hero-promo__title-textpanel {
        background: #b93147; }
    .page-primary-col--rose .hero-promo.component--col-primary:active {
      background: #ae2e43;
      border-color: #ae2e43; }
      .page-primary-col--rose .hero-promo.component--col-primary:active .hero-promo__title-textpanel {
        background: #ae2e43; }
  .page-secondary-col--rose .hero-promo.component--col-secondary {
    /* use page secondary : red*/
    background: #d93954;
    /*	background colour is only shown when image is too short	*/
    border-color: #d93954; }
    .page-secondary-col--rose .hero-promo.component--col-secondary .hero-promo__title-textpanel {
      background: #d93954; }
    .page-secondary-col--rose .hero-promo.component--col-secondary:hover, .page-secondary-col--rose .hero-promo.component--col-secondary:focus {
      background: #b93147;
      border-color: #b93147; }
      .page-secondary-col--rose .hero-promo.component--col-secondary:hover .hero-promo__title-textpanel, .page-secondary-col--rose .hero-promo.component--col-secondary:focus .hero-promo__title-textpanel {
        background: #b93147; }
    .page-secondary-col--rose .hero-promo.component--col-secondary:active {
      background: #ae2e43;
      border-color: #ae2e43; }
      .page-secondary-col--rose .hero-promo.component--col-secondary:active .hero-promo__title-textpanel {
        background: #ae2e43; }
  .page-tertiary-col--rose .hero-promo.component--col-tertiary {
    /* use page tertiary : red*/
    background: #d93954;
    /*	background colour is only shown when image is too short	*/
    border-color: #d93954; }
    .page-tertiary-col--rose .hero-promo.component--col-tertiary .hero-promo__title-textpanel {
      background: #d93954; }
    .page-tertiary-col--rose .hero-promo.component--col-tertiary:hover, .page-tertiary-col--rose .hero-promo.component--col-tertiary:focus {
      background: #b93147;
      border-color: #b93147; }
      .page-tertiary-col--rose .hero-promo.component--col-tertiary:hover .hero-promo__title-textpanel, .page-tertiary-col--rose .hero-promo.component--col-tertiary:focus .hero-promo__title-textpanel {
        background: #b93147; }
    .page-tertiary-col--rose .hero-promo.component--col-tertiary:active {
      background: #ae2e43;
      border-color: #ae2e43; }
      .page-tertiary-col--rose .hero-promo.component--col-tertiary:active .hero-promo__title-textpanel {
        background: #ae2e43; }
  .hero-promo.component--col-grey {
    /* use  grey from component */
    background: #736b53;
    /*	background colour is only shown when image is too short	*/
    border-color: #736b53; }
    .hero-promo.component--col-grey .hero-promo__title-textpanel {
      background: #736b53; }
    .hero-promo.component--col-grey:hover, .hero-promo.component--col-grey:focus {
      background: #625b47;
      border-color: #625b47; }
      .hero-promo.component--col-grey:hover .hero-promo__title-textpanel, .hero-promo.component--col-grey:focus .hero-promo__title-textpanel {
        background: #625b47; }
    .hero-promo.component--col-grey:active {
      background: #5c5642;
      border-color: #5c5642; }
      .hero-promo.component--col-grey:active .hero-promo__title-textpanel {
        background: #5c5642; }
  .hero-promo .img-responsive--stretch {
    display: block;
    height: auto;
    width: 100%; }

/*	end Hero Promo 
********************/