/*
$custom-select-padding-y:           $input-btn-padding-y;
$custom-select-padding-x:           $input-btn-padding-x;
$custom-select-indicator-padding:   1rem; // Extra padding to account for the presence of the background-image based indicator
$custom-select-bg-size:             12px 7px; // In pixels because image dimensions
$custom-select-box-shadow:          none;
$custom-select-indicator-color:     $brand-blue;
$custom-select-indicator:           url("../icons/sprite.svg");
$custom-select-background:          escape-svg($custom-select-indicator) no-repeat $custom-select-padding-x center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
*/
.component-hero {
  z-index: 1;
  margin-bottom: 1.875rem; }
  .component-hero--center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .component-hero--left {
    top: 50%;
    left: 2%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
  .component-hero--right {
    top: 50%;
    right: 2%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
  .component-hero--bottom {
    bottom: 5%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .component-hero--top {
    top: 5%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .component-hero__overlay {
    position: absolute; }
  .component-hero__cta:hover, .component-hero__cta:focus {
    color: #071D49;
    background-color: #CCC; }
  .component-hero__cta:focus {
    border-color: #1A89E2;
    outline: 0.125rem solid #1A89E2; }
  @media (max-width: 767.98px) {
    .component-hero__cta {
      margin-top: 1.5rem; } }
  .component-hero__header {
    letter-spacing: 3px; }
    @media (min-width: 768px) and (max-width: 991.98px) {
      .component-hero__header {
        padding-top: 1.5625rem; } }
    @media (max-width: 767.98px) {
      .component-hero__header {
        letter-spacing: 0;
        padding-top: 1.875rem;
        line-height: 1.2;
        font-size: 1.75rem; } }
  .component-hero__body {
    font-weight: normal; }
    .component-hero__body + .component-hero__cta {
      margin-top: 0; }
  @media (min-width: 768px) {
    .component-hero .tablet-overlay .component-hero__header {
      padding-top: 1.5rem; } }
  @media (max-width: 991.98px) {
    .component-hero__overlay.tablet-overlay {
      position: initial;
      -webkit-transform: translate(0);
              transform: translate(0); }
    .component-hero .tablet-overlay .component-hero__cta {
      background-color: #071D49;
      color: #fff; }
    .component-hero .tablet-overlay .component-hero__text,
    .component-hero .tablet-overlay .component-hero__header {
      color: #071D49;
      margin: 0 auto; } }
  @media (max-width: 767.98px) {
    .component-hero__overlay.mobile-overlay {
      position: static;
      -webkit-transform: translate(0);
              transform: translate(0);
      background-color: transparent; }
    .component-hero .mobile-overlay .component-hero__cta {
      background-color: #071D49;
      color: #fff; }
    .component-hero .mobile-overlay .component-hero__text,
    .component-hero .mobile-overlay .component-hero__header {
      color: #071D49; } }