@charset "UTF-8";
/**
 * CONTENTS
 *
 * SETTINGS
 * Config...............Project-level configuration and feature switches.
 * Core.................inuitcss’ core and setup settings.
 * Global...............Project-wide variables and settings.
 *
 * TOOLS
 * Font-size............A mixin which guarantees baseline-friendly line-heights.
 * Clearfix.............Micro clearfix mixin.
 * Hidden...............Mixin for hiding elements.
 * Sass MQ..............inuitcss’ default media query manager.
 *
 * GENERIC
 * Box-sizing...........Better default `box-sizing`.
 * Normalize.css........A level playing field using @necolas’ Normalize.css.
 * Reset................A tiny reset to complement Normalize.css.
 * Shared...............Sensibly and tersely share some global commonalities
 *                      (particularly useful when managing vertical rhythm).
 *
 * ELEMENTS
 * Page.................Set up our document’s default `font-size` and
 *                      `line-height`.
 * Headings.............Very minimal (i.e. only font-size information) for
 *                      headings 1 through 6.
 * Images...............Base image styles.
 * Tables...............Simple table styles.
 *
 * OBJECTS
 * Wrapper..............Page constraint object.
 * Layout...............Generic layout module.
 * Media................Image- and text-like content side by side. The
 *                      poster-child of OOCSS.
 * Flag.................Table-layout-based advancement on the Media object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Block................Image-on-top-of-text object.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 * Table................Classes for manipulating `table`s.
 * Pack.................Pack items into available horizontal space.
 *
 * COMPONENTS
 * Buttons..............An example button component, and how it fits into the
 *                      inuitcss framework.
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacings.............Nudge bits of the DOM around with these spacing
 *                      classes.
 * Responsive-Spacings..Enhances the function of normal spacings for
 *                      responsive usage.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 * Hide.................Helper classes to hide content
 */
/* General
========================================================================== */
/* General
========================================================================== */
/* Fractions
========================================================================== */
/* Ratios
========================================================================== */
/* Breakpoints
========================================================================== */
/*==========================================================================
  #COLORS
  ========================================================================== */
/* Color Palette
========================================================================== */
/* Color Options
========================================================================== */
.c-hero {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-image: url("/themes/cpl/assets/img/jpeg/hero-image-1500x500.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 12rem;
  padding: 1rem;
}
@media (min-width: 46.25em) {
  .c-hero {
    min-height: 30rem;
  }
}

.c-hero__overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}

.c-hero__text {
  flex: 0 1 1200px;
  color: var(--white-color);
  text-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.6);
  z-index: 1;
}
@media (max-width: 46.24em) {
  .c-hero__text h1 {
    font-size: 1.5rem;
  }
  .c-hero__text .u-h3 {
    font-size: 1rem !important;
    margin-bottom: 0;
  }
}
.c-hero__text h1 {
  width: 60%;
}
@media (min-width: 46.25em) {
  .c-hero__text h1 {
    width: 50%;
  }
}

.c-info-blocks {
  background-color: var(--light-grey-color);
}

.c-info-blocks__container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 1rem;
}
@media (min-width: 46.25em) {
  .c-info-blocks__container {
    flex-direction: row;
    padding: 1rem 0;
  }
}

.c-info-blocks__block {
  flex: 1 1 auto;
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid var(--medium-grey-color);
}
@media (min-width: 46.25em) {
  .c-info-blocks__block {
    border-right: 1px solid var(--medium-grey-color);
    border-bottom: none;
  }
}

.c-info-blocks__block:last-of-type {
  border: none;
}

.c-info-blocks__head {
  font-weight: bold;
  text-transform: uppercase;
}

.c-content-block {
  background-repeat: no-repeat;
  background-size: contain;
}
.c-content-block:before {
  position: relative;
}
.c-content-block__container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
  color: var(--white-color);
  transition: all 300ms ease-in-out;
  padding: 12px;
}
.c-content-block__container.is-active {
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 300ms ease-in-out;
}
.c-content-block__container.is-active .c-content-block__heading,
.c-content-block__container.is-active .c-content-block__description,
.c-content-block__container.is-active .c-content-block__button {
  transform: translateY(0);
  transition: all 300ms ease-in-out;
}
.c-content-block__container .c-content-block__heading,
.c-content-block__container .c-content-block__description,
.c-content-block__container .c-content-block__button {
  transition: all 300ms ease-in-out;
  max-width: 100%;
}
.c-content-block__container .c-content-block__heading {
  transform: translateY(-5rem);
}
.c-content-block__container .c-content-block__description {
  transform: translateY(-8rem);
}
.c-content-block__container .c-content-block__button {
  transform: translateY(5rem);
}
@media (max-width: 46.24em) {
  .c-content-block:nth-of-type(even) .c-content-block__container {
    transition-delay: 300ms;
  }
  .c-content-block:nth-of-type(even) .c-content-block__container .is-active {
    transition-delay: 300ms;
  }
  .c-content-block:nth-of-type(even) .c-content-block__container .is-active .c-content-block__heading,
.c-content-block:nth-of-type(even) .c-content-block__container .is-active .c-content-block__description,
.c-content-block:nth-of-type(even) .c-content-block__container .is-active .c-content-block__button {
    transition-delay: 300ms;
  }
  .c-content-block:nth-of-type(even) .c-content-block__container .c-content-block__heading,
.c-content-block:nth-of-type(even) .c-content-block__container .c-content-block__description,
.c-content-block:nth-of-type(even) .c-content-block__container .c-content-block__button {
    transition-delay: 300ms;
  }
}

/*# sourceMappingURL=home.css.map */