/*
 * Boxed Hero
 */
.c-hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #b3b3b3;
  padding: calc(6em + 2vh) 24px;
  color: #fff; }
  .c-hero-section__inner {
    position: relative;
    z-index: 5; }
    .c-hero-section__inner > p:first-child {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), 1px 1px 10px rgba(0, 0, 0, 0.8); }
    .c-hero-section__inner .c-button {
      padding: .875rem 1.75rem;
      font-size: .875rem;
      line-height: 1.33333;
      text-shadow: none;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700; }
    .c-hero-section__inner > :last-child {
      margin-bottom: 0; }
  .c-hero-section p {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); }
  .c-hero-section h1 {
    color: inherit;
    font-size: calc(2.2em + .5vw);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin: 0.25rem 0 1.25rem;
    margin-left: -.05em; }
    .c-hero-section h1 strong {
      color: var(--color-primary-light); }
    .c-hero-section h1 + p {
      font-size: calc(1.1em + .35vw);
      line-height: 1.4; }
  .c-hero-section img,
  .c-hero-section video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1; }
  .c-hero-section--boxed {
    color: #222; }
    .c-hero-section--boxed .c-hero-section__inner {
      background: rgba(255, 255, 255, 0.9);
      padding: calc(2em + 2vh);
      max-width: 48rem; }
    .c-hero-section--boxed h1, .c-hero-section--boxed p {
      text-shadow: none !important; }
  .c-hero-section--boxed-border .c-hero-section__inner {
    border-radius: .5rem;
    box-shadow: 4px 7px 15px 5px rgba(0, 0, 0, 0.25); }
  .c-hero-section--lg {
    padding: calc(6em + 2vh) 24px;
    min-height: 80vh; }
  .c-hero-section--dark {
    background: #000; }
    .c-hero-section--dark img:first-of-type {
      opacity: .6; }
  .c-hero-section--skew:after {
    content: '';
    background: rgba(0, 0, 0, 0.6);
    height: 100%;
    display: block;
    position: absolute;
    TOP: 0;
    left: 0;
    z-index: 1;
    margin: auto;
    right: 0;
    max-width: 48rem; }
  @media all and (min-width: 680px) {
    .c-hero-section--skew:after {
      transform: skewX(20deg); } }
  .c-hero-section--tile:after {
    content: '';
    background: url(/templates/modern/_assets/images/gridtile_3x3.png);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 1; }
  .c-hero-section--mask-1:before {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 100%;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    background-image: url(/templates/modern/_assets/images/mask_1.png); }
  .c-hero-section--mask-2:before {
    content: '';
    background-position: bottom center;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    background-image: url(/templates/modern/_assets/images/mask_2.svg);
    background-size: 150% 100%;
    height: 15vh;
    transform: rotateX(180deg); }
  .c-hero-section--mask-3:after {
    content: '';
    background-position: bottom center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    background-image: url(/templates/modern/_assets/images/mask_2.svg);
    background-size: 100% 100%;
    height: 5vh; }
  .c-hero-section--mask-4:before {
    content: '';
    background-size: 100% 5rem;
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 5rem;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='100%25' height='100' viewBox='0 0 100 100' preserveAspectRatio='none' fill='%23ffffff'%3E%3Cpath d='M0 100 C40 0 60 0 100 100 Z'%3E%3C/path%3E%3C/svg%3E"); }
  .c-hero-section--mask-fade:before {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 30vh;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%); }
  .c-hero-section.c-hero-section--mask-2:before {
    background-size: 150% 100%; }
  .c-hero-section.c-hero-section--mask-2:after {
    background-size: 100% 100%; }