/**
 * "Under Header" Components
 * Components with the "under-header" class at top of Top Content region,
 * will have the header float over the top of the component.
 */
body:not(.toolbar-horizontal, .toolbar-vertical, .has-status-messages) .field--name-field-content-top .component.under-header:first-child {
  /* Should be -(height of header) so that header overlays this component . */
  margin-top: -70px;
  clear: both;
}
@media (min-width: 1220px) {
  body:not(.header--style-microsite, .toolbar-horizontal, .toolbar-vertical, .has-status-messages) .field--name-field-content-top .component.under-header:first-child {
    margin-top: -120px;
  }
}


/***********************
 * VIEW MODE: FULL
 ***********************/

.field--name-field-content-top .paragraph--view-mode-full,
.field--name-field-content-top .paragraph--view-mode-full.component--with-heading,
.field--name-field-content-prefooter .paragraph--view-mode-full,
.field--name-field-content-prefooter .paragraph--view-mode-full.component--with-heading {
  margin-top: 0;
  margin-bottom: 0;
}

.paragraph--view-mode-full {
  margin-top: 65px;
  margin-bottom: 65px;
  position: relative;
}
.paragraph--view-mode-full.component--full-bleed {
  padding-top: 65px;
  padding-bottom: 65px;
  background-color: #ebebeb;
  margin-top: 0;
  margin-bottom: 0;
}

.paragraph--view-mode-full.component--with-heading {
  margin-top: 40px;
}
.paragraph--view-mode-full.component--with-heading.component--full-bleed {
  margin-top: 0;
  padding-top: 30px;
}

.paragraph--view-mode-full.component--text-black {
  color: #060606;
}
.paragraph--view-mode-full.component--text-white {
  color: #ffffff;
}
  .paragraph--view-mode-full.component--text-white a {
    color: #f9d38c;
  }
  .paragraph--view-mode-full.component--text-white a:hover,
  .paragraph--view-mode-full.component--text-white a:focus {
    color: #f9e39c;
  }

.paragraph--view-mode-full.component--with-caption {
  margin-bottom: 40px;
}
.paragraph--view-mode-full.component--with-caption.component--full-bleed {
  margin-bottom: 0;
  padding-bottom: 40px;
}

.paragraph--view-mode-full.component--divider-top {
  margin-top: 0;
  padding-top: 65px;
  border-top: 2px #e7e3e0 solid;
}

.paragraph--view-mode-full.component--with-heading.component--divider-top {
  padding-top: 40px;
}

  .paragraph--view-mode-full h2.component--heading {
    text-align: center;
    margin-bottom: 40px;
    font-size: 32px;
  }
  @media (min-width: 768px) {
    .paragraph--view-mode-full h2.component--heading {
      font-size: 36px;
    }
  }
  @media (min-width: 1220px) {
    .paragraph--view-mode-full h2.component--heading {
      font-size: 42px;
    }
  }

  .paragraph--view-mode-full.component--full-bleed h2.component--heading {
    margin-bottom: 30px;
  }

  .paragraph--view-mode-full h2.eyebrow {
    margin-bottom: 20px;
    text-align: inherit;
  }

  .paragraph--view-mode-full .field--name-field-component-caption {
    margin-top: 14px;
    font-size: 0.85em;
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px #060606 solid;
  }
    .paragraph--view-mode-full .field--name-field-component-caption p {
      margin-bottom: 0.5em;
    }
    .paragraph--view-mode-full .field--name-field-component-caption p:last-child {
      margin-bottom: 0;
    }

  .paragraph--view-mode-full .more-link {
    margin-top: 12px;
  }

  .paragraph--view-mode-full .microsite-link {
    line-height: 1.1;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .paragraph--view-mode-full.component--hero-hide-box .microsite-link {
    background-color: #060606;
    padding:4px 8px;
  }

    .paragraph--view-mode-full .microsite-link a {
      font-size: 16px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #f9d38c;
    }
    .paragraph--view-mode-full .microsite-link a:hover,
    .paragraph--view-mode-full .microsite-link a:focus {
      color: #f9f3ac;
    }


/***************************
 * VIEW MODE: FULL WITH SLICK CAROUSL
 **************************/

.paragraph--view-mode-full .slick-controls {
  position: absolute;
  bottom: 20px;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

  .paragraph--view-mode-full .slick-arrow {
    cursor: pointer;
    background: transparent url(../../images/arrow-right-white.svg) left center no-repeat;
    border: 0;
    text-indent: -9999px;
    width: 20px;
    height: 20px;
    display: inline-block;
    overflow: hidden;
  }

    .paragraph--view-mode-full .slick-arrow.slick-prev {
      margin-right: 30px;
      background-position: left center;
      transform: rotate(180deg);
    }

    .paragraph--view-mode-full .slick-arrow.slick-next {
      margin-left: 30px;
    }

  .paragraph--view-mode-full .slick-dots-wrapper {}

    .paragraph--view-mode-full ul.slick-dots {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
    }

      .paragraph--view-mode-full ul.slick-dots li {
        padding: 0;
        margin: 0 8px;
      }

        .paragraph--view-mode-full ul.slick-dots button {
          background: none;
          display: block;
          text-indent: -9999px;
          padding: 0;
          border: 2px rgba(255, 255, 255, 0.8) solid;
          border-radius: 50%;
          width: 14px;
          height: 14px;
          cursor: pointer;
        }
        .paragraph--view-mode-full ul.slick-dots button:hover,
        .paragraph--view-mode-full ul.slick-dots button:focus {
          border-color: rgba(255, 255, 255, 1);
        }
        .paragraph--view-mode-full ul.slick-dots li.slick-active button {
          background-color: #fff;
        }

/***********************
 * VIEW MODE: FULL WITH FEATURED CONTENT
 ***********************/

.paragraph--view-mode-full.component--show-featured {
  background-color: #ebebeb;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 0;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .paragraph--view-mode-full.component--show-featured {
    background: #ebebeb url(../../images/backgrounds/bg-featured.png) center top no-repeat;
    background-size: 100% auto;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

  .paragraph--view-mode-full.component--show-featured .content-wrap {
    position: relative;
  }

  .paragraph--view-mode-full.component--show-featured .node--view-mode-featured {
    margin-left: auto;
    margin-right: auto;
  }

  /* Adjust slick controls when shown on featured components. */
  .paragraph--view-mode-full.component--show-featured .slick-controls {
    bottom: 0;
    left: 60%;
    transform: translateX(0);
  }

    .paragraph--view-mode-full.component--show-featured .slick-arrow {
      background: transparent url(../../images/arrow-right-black.svg) left center no-repeat;
    }

      .paragraph--view-mode-full.component--show-featured ul.slick-dots button {
        border: 2px rgba(6, 6, 6, 0.8) solid;
      }
      .paragraph--view-mode-full.component--show-featured ul.slick-dots button:hover,
      .paragraph--view-mode-full.component--show-featured ul.slick-dots button:focus {
        border-color: rgba(6, 6, 6, 1);
      }
        .paragraph--view-mode-full.component--show-featured ul.slick-dots li.slick-active button {
          background-color: #060606;
        }


/**********************
 * VIEW MODE: FULL WITH CHART STYLE
 **********************/

.component--style-chart.component--full-bleed {
  background-color: #ebebeb;
}

  .component--style-chart .body-wrap {
    background-color: #fff;
  }

    .component--style-chart .field--name-field-component-eyebrow {
      text-transform: uppercase;
      color: #019de0;
      border-bottom: 1px #019de0 solid;
      margin-bottom: 10px;
      font-size: 0.85em;
    }

    .component--style-chart.paragraph--view-mode-full.component--full-bleed h2.component--heading {
      text-align: left;
      margin-top: 12px;
      margin-bottom: 12px;
      font-family: mrs-eaves-xl-serif, serif;
      font-size: 30px;
      line-height: 1.2;
      font-weight: 700;
    }