.lead {
  font-size: 1.25rem !important;
}

.hstack {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  align-self: stretch;

  & > .row {
    width: 100%;
  }
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.gap-15 {
  gap: 15px !important;
}

.gap-30 {
  gap: 30px !important;
}

.gap-60 {
  gap: 60px !important;
}

@media (min-width: 576px) {
  .hstack-sm {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    align-self: stretch;
  }
  .vstack-sm {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    align-self: stretch;
  }
}
@media (min-width: 768px) {
  .hstack-md {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    align-self: stretch;
  }
  .vstack-md {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    align-self: stretch;
  }
}
@media (min-width: 992px) {
  .hstack-lg {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    align-self: stretch;
  }
  .vstack-lg {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    align-self: stretch;
  }
}
@media (min-width: 1200px) {
  .hstack-xl {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    align-self: stretch;
  }
  .vstack-xl {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    align-self: stretch;
  }
}

.box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: var(--box-padding, 15px);
  color: var(--box-color, white);
  background-color: var(--box-bg-color, #255be3);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--box-border-radius, 15px);
  overflow: hidden;

  &.box-keyline {
    border-width: 1px;
    border-style: solid;
  }

  &.hstack {
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
  }

  &.box-citi-ink-blue {
    &:not(.box-keyline) {
      color: white;
      background-color: #0f1632;
    }

    &.box-keyline {
      color: inherit;
      background-color: transparent;
      border-color: #0f1632;
    }
  }
  &.box-citi-blue {
    &:not(.box-keyline) {
      color: white;
      background-color: #255be3;
    }

    &.box-keyline {
      color: inherit;
      background-color: transparent;
      border-color: #255be3;
    }
  }
  &.box-white {
    &:not(.box-keyline) {
      color: currentColor;
      background-color: white;
    }

    &.box-keyline {
      color: inherit;
      background-color: transparent;
      border-color: white;
    }
  }

  & > .box-inset {
    flex-basis: var(--box-inset-flex-basis, 8rem);
    margin: calc(-1 * var(--box-padding, 15px));
    padding: var(--box-padding, 15px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-image: var(--box-inset-background, var(--box-inset-background-2x));
  }
}

.jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 30vh;
  background-image: var(--jumbotron-background, var(--jumbotron-background-2x));
  background-position: center;
  background-size: cover;
	background-color: transparent;
	background-repeat: no-repeat;
	text-align: center;

  &.parallax {
      background-attachment: fixed;
      background-position: 0 0 !important;
  }

  & .hero {
    position: relative;
    bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 30px;

    & h1 {
      font-size: 2.5em;
    }
  }
}

@media (min-width: var(--breakpoint-md, 768px)) {
	.jumbotron {
    margin-bottom: 60px;

    & .hero {
      margin-bottom: calc(60px * -1);
    }
	}
}


@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
  .box > .box-inset {
    background-image: var(--box-inset-background-2x, var(--box-inset-background));
	}

  .jumbotron {
    background-image: var(--jumbotron-background-2x, var(--jumbotron-background));
  }
}