/**
 * 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);
\*------------------------------------*/
footer {
  background: #0b131b;
  clear: both;
  color: white;
}

.c-site-footer {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}

.contactBtn {
  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: uppercase;
  -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);
}
.contactBtn a {
  color: #FFFFFF;
  text-decoration: none;
}
.contactBtn:hover, .contactBtn: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);
}
.contactBtn: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);
}

.c-site-footer__left,
.c-site-footer__right {
  width: 50%;
}

.c-site-footer__right {
  border-left: solid 1px white;
}

.c-site-footer__footer-logo {
  padding: 58px 50px 0 20%;
  text-align: left;
}

.c-site-footer__copy,
.c-site-footer__disclaimer {
  padding: 50px 20% 50px 50px;
}

.c-site-footer__copy p {
  font-family: var(--font-family-serif);
  font-size: 0.75rem;
  line-height: 18px;
  margin: 0;
  max-width: 850px;
}

.c-site-footer__disclaimer {
  border-bottom: solid 1px white;
}
.c-site-footer__disclaimer p {
  font-weight: 900;
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
}

.c-site-footer__links {
  padding: 0 10px 50px 20%;
}
.c-site-footer__links h2 {
  color: white;
}
.c-site-footer__links .menu--footer-utility-menu {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
          justify-content: flex-start;
}
.c-site-footer__links .menu--footer-utility-menu li {
  margin-right: 20px;
  list-style-type: none;
}
.c-site-footer__links .menu--footer-utility-menu li:last-child {
  margin-right: 0;
}
.c-site-footer__links .menu--footer-utility-menu li a {
  color: white;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  text-decoration: none;
}
.c-site-footer__links .menu--footer-utility-menu li a:hover {
  text-decoration: underline;
}

.c-site-footer__social {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
          justify-content: flex-start;
  padding: 40px 50px 35px 20%;
  text-align: left;
}
.c-site-footer__social a {
  margin-right: 18px;
}
.c-site-footer__social a.icon {
  color: var(--color-indivisible-blue);
  display: block;
  font-size: 2rem;
  padding: 10px 5px;
}
.c-site-footer__social a.icon:hover, .c-site-footer__social a.icon:active {
  color: white;
  text-decoration: none;
}
.c-site-footer__social a svg {
  margin-top: 10px;
  fill: var(--color-indivisible-blue);
}
.c-site-footer__social a svg:hover, .c-site-footer__social a svg:active {
  fill: white;
  text-decoration: none;
}

/* Mobile Styles */
@media (min-width: 768px) and (max-width: 991px) {
  .c-site-footer__right {
    border-left: solid 1px white;
  }

  .c-site-footer__social {
    padding: 40px 24px 35px 20%;
  }
  .c-site-footer__social a {
    margin-right: 10px;
  }
  .c-site-footer__social a.icon {
    font-size: 1.5rem;
  }
}
@media (max-width: 767px) {
  .c-site-footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }

  .c-site-footer__copy,
.c-site-footer__disclaimer {
    padding: 50px 10%;
  }

  .c-site-footer__disclaimer {
    border-top: solid 1px white;
  }

  .c-site-footer__left,
.c-site-footer__right {
    width: 100%;
  }

  .c-site-footer__links {
    padding: 0 10% 50px 10%;
  }
  .c-site-footer__links .menu--footer-utility-menu {
    -webkit-box-pack: center;
            justify-content: center;
  }
  .c-site-footer__links .menu--footer-utility-menu li a {
    font-size: 0.875rem;
    font-weight: 500;
  }

  .c-site-footer__footer-logo {
    padding: 50px 10% 25px 10%;
    text-align: center;
  }

  .c-site-footer__social {
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    padding: 25px 10% 50px 10%;
    text-align: center;
  }
}
@media (max-width: 424px) {
  .c-site-footer__social a.contactBtn {
    margin-right: 0;
    width: 100%;
  }
}