/**
 * Functions - Calculations
 * Simple functions to help developers calculate different values from percentages to sizing such as REMs.
 *
 * - 01 - Imports
 * - 02 - Target/Container Percentage
 * - 03 - REMs
 */
/*------------------------------------*\
  01 - Imports
\*------------------------------------*/
/*------------------------------------*\
  02 - Target/Container Percentage
  Calculate the percentage of a target size compared to a container size.
  - @param $target: Size of an element needing a calculated percentage.
  - @param $container: Size of the target's container, needed to calculate percentage.
  - @example = width: calc-percent(250, 1000);
\*------------------------------------*/
/*------------------------------------*\
  03 - REMs
  Calculate a size into REM units -- mostly used for font size rendering.
  - @param $size: Size of an element needing a calculated size into REMs.
  - @param $base: Base font size of the site -- defaults to 16px.
  - @example = font-size: calc-rem(24px);
\*------------------------------------*/
/*------------------------------------*\
  02 - Theme
\*------------------------------------*/
/*------------------------------------*\
  04 - Mappings
\*------------------------------------*/
/**
 * Settings - Typography
 * Standard sets of typographical variables and mappings to be of use across the site, for consistency and accuracy.
 *
 * - 01 - Line Heights
 * - 02 - Fonts
 */
/*------------------------------------*\
  01 - Line Heights
\*------------------------------------*/
/*------------------------------------*\
  02 - Fonts
\*------------------------------------*/
/*------------------------------------*\
  03 - Weights
\*------------------------------------*/
/**
 * Mixins - Buttons
 * Standard sets of Button mixins to be of use across the site, for consistency and accuracy.
 *
 * - 01 - Small
 * - 02 - Large Red
 * - 03 - Large Underline Red
 */
/*------------------------------------*\
  01 - Small
\*------------------------------------*/
/*------------------------------------*\
  02 - Large Red
\*------------------------------------*/
/*------------------------------------*\
  03 - Large Underline Red
\*------------------------------------*/
/**
 * Mixins - Media
 * Use these mixins when needing to easily define media styles, such as sizing, positioning, etc.
 *
 * - 01 - Background Image
 * - 02 - Responsive IFrame
 */
/*------------------------------------*\
  01 - Background Image
  Instead of using an inline style to define a background image, and needing to set an HTML image as a background
  image, use this mixin.
  - @param $position: Alignment of the image within it's frame [center, top, bottom] (default = center)
  - @example = @include background-image(center);
\*------------------------------------*/
/*------------------------------------*\
  02 - Responsive IFrame
  When needing an IFrame to be responsive to it's container, and ultimately for mobile devices, use this mixin. This
  mixin needs to be applied to the parent HTML element of the IFrame.
  - @param $width: Sizing width to determine the ratio of sizing needed for the responsive IFrame. [defaults to 16]
  - @param $height: Sizing height to determine the ratio of sizing needed for the responsive IFrame. [defaults to 9]
  - @example = @include responsive-iframe(16, 9);
\*------------------------------------*/
/**
 * Components - Call To Action
 * - 01 - Imports
 * - 02 - General
 * - 03 - Default
 * - 04 - Callout
 * - 05 - Featured
 * - 06 - Full Width
 */
/*------------------------------------*\
  01 - Imports
\*------------------------------------*/
/*------------------------------------*\
  02 - General
\*------------------------------------*/
/*------------------------------------*\
  03 - Default
\*------------------------------------*/
.cta:not(.cta__type--feature):not(.cta__type--full-width) {
  margin: 2rem auto;
}
.cta:not(.cta__type--feature):not(.cta__type--full-width) .cta__body {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.cta:not(.cta__type--feature):not(.cta__type--full-width) .cta__button {
  -webkit-box-flex: 0;
          flex: none;
  margin-left: 1.5rem;
}
.cta:not(.cta__type--feature):not(.cta__type--full-width) .cta__button a {
  background-color: #C84141;
  border: none;
  color: #fff;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: var(--font-size-body);
  font-weight: 800;
  letter-spacing: normal;
  letter-spacing: initial;
  padding: 1rem 1.25rem;
  text-decoration: none;
  text-transform: none;
  text-transform: initial;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.cta:not(.cta__type--feature):not(.cta__type--full-width) .cta__button a a {
  color: #FFFFFF;
  text-decoration: none;
}
.cta:not(.cta__type--feature):not(.cta__type--full-width) .cta__button a:hover, .cta:not(.cta__type--feature):not(.cta__type--full-width) .cta__button a:focus {
  color: #FFFFFF;
  text-decoration: none;
  background-color: #983736;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.cta:not(.cta__type--feature):not(.cta__type--full-width) .cta__button a:focus {
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 767px) {
  .cta:not(.cta__type--feature):not(.cta__type--full-width) .cta__button {
    margin-left: 0;
    margin-top: 1.5rem;
  }
}

/*------------------------------------*\
  04 - Callout
\*------------------------------------*/
.cta__callout {
  -webkit-box-align: center;
          align-items: center;
  background-color: var(--color-indivisible-lite-blue);
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row;
  -webkit-box-pack: justify;
          justify-content: space-between;
  margin-bottom: 2rem;
  margin-top: 1.75rem;
  max-width: 900px;
  padding: 1.5rem 1.75rem;
}
@media (max-width: 767px) {
  .cta__callout {
    -webkit-box-align: initial;
            align-items: initial;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
  }
}
.cta__callout .cta__callout-text {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold-heading);
  line-height: var(--font-line-height-loose);
  margin-bottom: 0;
}

/*------------------------------------*\
  05 - Featured
\*------------------------------------*/
.cta.cta__type--feature {
  margin-bottom: 40px;
  margin-top: 40px;
}
@media (min-width: 992px) {
  .cta.cta__type--feature {
    -webkit-box-align: stretch;
            align-items: stretch;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-flow: nowrap row;
    margin-bottom: 80px;
    margin-top: 80px;
  }
  .cta.cta__type--feature.cta__alignment--0 .cta__media {
    -webkit-box-ordinal-group: 2;
            order: 1;
  }
  .cta.cta__type--feature .cta__media {
    -webkit-box-flex: 0;
            flex: 0 0 48%;
    min-height: 420px;
    overflow: hidden;
    position: relative;
    width: 48%;
  }
  .cta.cta__type--feature .cta__media figure {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}
.cta.cta__type--feature .cta__media img {
  width: 100%;
}
@media (min-width: 992px) {
  .cta.cta__type--feature .cta__media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
}
@media screen and (min-width: 992px) and (-ms-high-contrast: active), (min-width: 992px) and (-ms-high-contrast: none) {
  .cta.cta__type--feature .cta__media img {
    max-width: inherit;
    min-width: 100%;
    min-height: 100%;
    margin: auto;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.cta.cta__type--feature .cta__content {
  padding: 32px;
  position: relative;
}
@media (min-width: 992px) {
  .cta.cta__type--feature .cta__content {
    -webkit-box-flex: 0;
            flex: 0 0 52%;
    padding: 64px;
    width: 52%;
  }
}
.cta.cta__type--feature .cta__content > * {
  position: relative;
  z-index: 1;
}
.cta.cta__type--feature .cta__content:after {
  bottom: 0;
  content: "";
  display: block;
  background-size: auto;
  height: 100%;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 0;
}
.cta.cta__type--feature .cta__header {
  font-size: 3.75rem;
  line-height: 117%;
  margin-bottom: 16px;
  padding-bottom: 16px;
  position: relative;
}
@media (max-width: 767px) {
  .cta.cta__type--feature .cta__header {
    font-size: var(--font-size-campaign-h2);
    line-height: var(--font-line-height-campaign-h2);
  }
}
@media (min-width: 992px) {
  .cta.cta__type--feature .cta__header {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }
}
.cta.cta__type--feature .cta__header:after {
  background-color: #6C9FC2;
  bottom: -2px;
  content: "";
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  width: 48px;
}
.cta.cta__type--feature .cta__description p {
  font-family: "Montserrat", sans-serif;
  font-size: var(--font-size-body-large);
  font-weight: 500;
  line-height: 1.5;
}
.cta.cta__type--feature .cta__button a {
  background-color: #C84141;
  border: none;
  color: #fff;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: var(--font-size-body);
  font-weight: 800;
  letter-spacing: normal;
  letter-spacing: initial;
  padding: 1rem 1.25rem;
  text-decoration: none;
  text-transform: none;
  text-transform: initial;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 16px;
}
.cta.cta__type--feature .cta__button a a {
  color: #FFFFFF;
  text-decoration: none;
}
.cta.cta__type--feature .cta__button a:hover, .cta.cta__type--feature .cta__button a:focus {
  color: #FFFFFF;
  text-decoration: none;
  background-color: #983736;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.cta.cta__type--feature .cta__button a:focus {
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 992px) {
  .cta.cta__type--feature .cta__button a {
    margin-top: 32px;
  }
}
.cta.cta__type--feature.cta__color--dark-blue {
  background-color: #172636;
}
.cta.cta__type--feature.cta__color--dark-blue h2,
.cta.cta__type--feature.cta__color--dark-blue p {
  color: #FFFFFF;
}
.cta.cta__type--feature.cta__color--dark-blue .cta__content:after {
  background: url("../../../img/background-people-shapes--dark-blue.svg") no-repeat bottom right;
}
.cta.cta__type--feature.cta__color--light-blue {
  background-color: #E2ECF3;
}
.cta.cta__type--feature.cta__color--light-blue .cta__content:after {
  background: url("../../../img/background-people-shapes--light-blue.svg") no-repeat bottom right;
}
.cta.cta__type--feature.cta__color--red {
  background-color: #C84141;
}
.cta.cta__type--feature.cta__color--red h2,
.cta.cta__type--feature.cta__color--red p {
  color: #FFFFFF;
}
.cta.cta__type--feature.cta__color--red .cta__header:after {
  background-color: #FFFFFF;
}
.cta.cta__type--feature.cta__color--red .cta__content:after {
  background: url("../../../img/background-people-shapes--red.svg") no-repeat bottom right;
}
.cta.cta__type--feature.cta__color--red .cta__button a {
  background-color: #172636;
}
.cta.cta__type--feature.cta__color--red .cta__button a:hover, .cta.cta__type--feature.cta__color--red .cta__button a:focus {
  background-color: #2D4C6B;
}
.cta.cta__type--feature.cta__color--red .cta__button a:focus {
  outline: auto 2px #2D4C6B;
}

/*------------------------------------*\
  06 - Full Width
\*------------------------------------*/
.cta.cta__type--full-width {
  -webkit-box-align: center;
          align-items: center;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(23, 38, 54, 0.7)), to(rgba(23, 38, 54, 0.7)));
  background: -o-linear-gradient(bottom, rgba(23, 38, 54, 0.7), rgba(23, 38, 54, 0.7));
  background: linear-gradient(0deg, rgba(23, 38, 54, 0.7), rgba(23, 38, 54, 0.7));
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  padding-bottom: 40px;
  padding-top: 40px;
  position: relative;
  z-index: 0;
}
@media (min-width: 992px) {
  .cta.cta__type--full-width {
    min-height: 720px;
    padding-bottom: 80px;
    padding-top: 80px;
  }
}
.cta.cta__type--full-width:before {
  background-color: #172636;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  opacity: 0.7;
  position: absolute;
  right: 50%;
  top: 0;
  width: 100vw;
  z-index: 1;
}
.cta.cta__type--full-width .cta__media {
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  right: 50%;
  top: 0;
  width: 100vw;
  z-index: 0;
}
.cta.cta__type--full-width .cta__media div,
.cta.cta__type--full-width .cta__media article {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.cta.cta__type--full-width .cta__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .cta.cta__type--full-width .cta__media img {
    max-width: inherit;
    min-width: 100%;
    min-height: 100%;
    margin: auto;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.cta.cta__type--full-width .cta__content {
  max-width: 1280px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.cta.cta__type--full-width .cta__content > * {
  margin: auto;
}
.cta.cta__type--full-width .cta__header {
  color: #FFFFFF;
  font-size: var(--font-size-campaign-h2);
  line-height: var(--font-line-height-campaign-h2);
  margin-bottom: 16px;
  padding-bottom: 16px;
  position: relative;
}
@media (min-width: 992px) {
  .cta.cta__type--full-width .cta__header {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }
}
.cta.cta__type--full-width .cta__header:after {
  background-color: #6C9FC2;
  bottom: -2px;
  content: "";
  display: block;
  height: 4px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 48px;
}
.cta.cta__type--full-width .cta__subheader {
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-size: var(--font-size-title);
  font-weight: 600;
}
.cta.cta__type--full-width .cta__subheader p {
  line-height: 1.2;
}
.cta.cta__type--full-width .cta__button a {
  background-color: #C84141;
  border: none;
  color: #fff;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: var(--font-size-body);
  font-weight: 800;
  letter-spacing: normal;
  letter-spacing: initial;
  padding: 1rem 1.25rem;
  text-decoration: none;
  text-transform: none;
  text-transform: initial;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 40px;
}
.cta.cta__type--full-width .cta__button a a {
  color: #FFFFFF;
  text-decoration: none;
}
.cta.cta__type--full-width .cta__button a:hover, .cta.cta__type--full-width .cta__button a:focus {
  color: #FFFFFF;
  text-decoration: none;
  background-color: #983736;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.cta.cta__type--full-width .cta__button a:focus {
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}