@import url(https://fonts.googleapis.com/css?family=Roboto);
.breakout, .page-node-type-landing-page #block-nppebasebanner {
  position: relative;
  display: table;
  width: 100vw;
  left: 50%; }
  @media screen and (max-width: 767px) {
    .breakout, .page-node-type-landing-page #block-nppebasebanner {
      left: 0; } }
  .breakout > *, .page-node-type-landing-page #block-nppebasebanner > * {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    left: -50%; }
    @media screen and (max-width: 767px) {
      .breakout > *, .page-node-type-landing-page #block-nppebasebanner > * {
        left: 0; } }

.ghost-button, .black-ghost-button, .white-ghost-button, .wide-banners .banner__container--text .button,
.wide-banners .banner__container--text a, .wide-banners.dark-background-banner a, .banner__container--text-container .button, .wide-banners.push-text-right .banner__container--text .button,
.wide-banners.push-text-right .banner__container--text a, .wide-banners.push-text-far-right .banner__container--text .button,
.wide-banners.push-text-far-right .banner__container--text a {
  border-radius: 30px;
  background: transparent;
  color: #000;
  border: 1px solid #000;
  padding: 10px 30px;
  text-transform: uppercase;
  margin: 20px 0 0; }
  .ghost-button:hover, .black-ghost-button:hover, .white-ghost-button:hover, .wide-banners .banner__container--text .button:hover,
  .wide-banners .banner__container--text a:hover, .wide-banners.dark-background-banner a:hover, .banner__container--text-container .button:hover {
    border-radius: 30px;
    color: #fff;
    border-color: #000;
    background-color: #000;
    padding: 10px 30px;
    text-decoration: none; }

.black-ghost-button {
  color: #fff;
  background-color: #000;
  border: 1px solid #000;
  padding: 10px 30px;
  text-transform: uppercase;
  text-decoration: none; }
  .black-ghost-button:hover {
    border-radius: 30px;
    color: #000;
    border-color: #000;
    background-color: #fff;
    padding: 10px 30px;
    text-decoration: none; }

.white-ghost-button, .wide-banners .banner__container--text .button,
.wide-banners .banner__container--text a, .wide-banners.dark-background-banner a {
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  padding: 10px 30px;
  text-transform: uppercase;
  text-decoration: none; }
  .white-ghost-button:hover, .wide-banners .banner__container--text .button:hover,
  .wide-banners .banner__container--text a:hover, .wide-banners.dark-background-banner a:hover {
    border-radius: 30px;
    color: #fff;
    border-color: #000;
    background-color: #000;
    padding: 10px 30px;
    text-decoration: none; }

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }

.container:before, .container:after {
  content: " ";
  display: table; }

.container:after {
  clear: both; }

@media (min-width: 768px) {
  .container {
    width: 750px; } }

@media (min-width: 992px) {
  .container {
    width: 970px; } }

@media (min-width: 1200px) {
  .container {
    width: 1170px; } }

.kss-swatch {
  display: inline-block;
  position: relative;
  margin-bottom: 5px;
  width: 145px;
  height: 140px;
  text-align: center;
  font-size: 1.4rem;
  color: #FFF;
  padding-top: 90px; }
  .kss-swatch.kss-swatch-light {
    border: 1px solid #F6F6F6;
    color: #000; }

.banner__container {
  width: 100%;
  position: relative;
  margin-top: 0;
  max-width: 100vw; }
  @media screen and (max-width: 991px) {
    .banner__container {
      overflow: hidden; } }
  @media screen and (max-width: 767px) {
    .banner__container {
      overflow: hidden; } }
  .banner__container--image .mobile {
    display: none; }
  .banner__container--image .tablet {
    display: none; }
  @media screen and (max-width: 767px) {
    .banner__container--image .mobile {
      display: block; }
    .banner__container--image .desktop {
      display: none; }
    .banner__container--image .tablet {
      display: none; } }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .banner__container--image .mobile {
      display: none; }
    .banner__container--image .desktop {
      display: none; }
    .banner__container--image .tablet {
      display: block; } }
  .banner__container--image img {
    max-width: 100%;
    width: 100%; }
  .banner__container--text-container {
    position: absolute;
    top: 85px;
    left: 0;
    right: 0;
    color: #000;
    padding: 10px; }
    @media screen and (max-width: 767px) {
      .banner__container--text-container {
        max-width: 100vw;
        margin: 0 auto;
        top: 20%;
        text-align: center; } }
    .banner__container--text-container h1, .banner__container--text-container h2 {
      color: #fff;
      margin-top: 0;
      margin-left: 15px; }
      @media screen and (max-width: 767px) {
        .banner__container--text-container h1, .banner__container--text-container h2 {
          margin-left: 0; } }
    @media screen and (max-width: 991px) {
      .banner__container--text-container .button {
        color: #fff;
        border-color: #fff; } }
    .banner__container--text-container--without-background {
      position: relative; }

@media (max-width: 767px) {
  .path-frontpage .banner__container {
    height: 70vh; } }
  @media screen and (max-width: 767px) and (min-width: 768px) and (max-width: 991px) {
    .path-frontpage .banner__container {
      height: 37vh; } }

@media (max-width: 767px) {
    .path-frontpage .banner__container img {
      height: initial;
      min-width: 100%;
      margin: 0 0; } }

.page-node-type-landing-page #block-nppebasebanner .banner__container {
  max-height: 650px;
  overflow-y: hidden;
  margin-top: 0; }

#block-views-block-banner-block-1-6 {
  max-height: 550px;
  overflow-y: visible;
  display: none; }

.page-tear__bottom--white-cream {
  max-height: 500px;
  overflow: hidden; }

.wide-banners {
  max-height: 500px; }
  .wide-banners .banner__container {
    margin: 0 auto 0; }
  .wide-banners .banner__container--text-wrapper {
    float: left;
    width: 100%;
    text-align: left; }
  .wide-banners .banner__container--text {
    color: #000;
    width: 60%;
    max-width: 80%;
    margin: 0 auto; }
    @media screen and (max-width: 991px) {
      .wide-banners .banner__container--text .button,
      .wide-banners .banner__container--text a {
        color: #fff;
        border-color: #fff; } }
    .wide-banners .banner__container--text h1, .wide-banners .banner__container--text h2 {
      color: #000;
      font-weight: 300;
      font-size: 47px;
      line-height: 50px;
      text-transform: none;
      width: 100%;
      display: block;
      margin-top: 10px;
      word-spacing: 0.06em;
      text-align: left;
      text-transform: none;
      color: #fff;
      margin-left: 0; }
    .wide-banners .banner__container--text > div {
      width: 80%;
      margin: 0 auto; }
      @media screen and (max-width: 767px) {
        .wide-banners .banner__container--text > div {
          width: 100%; } }
  .wide-banners.dark-background-banner .banner__container--text {
    color: #000;
    margin: 0 auto; }
  .wide-banners.dark-background-banner h1, .wide-banners.dark-background-banner h2 {
    color: #000; }
    @media screen and (max-width: 767px) {
      .wide-banners.dark-background-banner h1, .wide-banners.dark-background-banner h2 {
        color: #fff; } }
  @media screen and (max-width: 767px) {
    .wide-banners.dark-background-banner div p {
      color: #fff; } }
  .wide-banners.push-text-right .banner__container--text-container, .wide-banners.push-text-far-right .banner__container--text-container {
    text-align: left; }
    @media screen and (max-width: 767px) {
      .wide-banners.push-text-right .banner__container--text-container, .wide-banners.push-text-far-right .banner__container--text-container {
        top: 20%; } }
    .wide-banners.push-text-right .banner__container--text-container .banner__container--text-wrapper, .wide-banners.push-text-far-right .banner__container--text-container .banner__container--text-wrapper {
      text-align: left;
      float: left;
      width: 41.66667%;
      margin-top: 10px;
      margin-left: 12.5%; }
      @media screen and (max-width: 991px) {
        .wide-banners.push-text-right .banner__container--text-container .banner__container--text-wrapper, .wide-banners.push-text-far-right .banner__container--text-container .banner__container--text-wrapper {
          width: 90%;
          margin-top: 120px;
          margin-left: 5%; } }
      @media screen and (max-width: 767px) {
        .wide-banners.push-text-right .banner__container--text-container .banner__container--text-wrapper, .wide-banners.push-text-far-right .banner__container--text-container .banner__container--text-wrapper {
          max-width: 100vw;
          margin: 0 auto; } }
  .wide-banners.push-text-right .banner__container--text, .wide-banners.push-text-far-right .banner__container--text {
    color: #000;
    margin: 0 0 0;
    width: 100%;
    max-width: 100%;
    text-align: left; }
    .wide-banners.push-text-right .banner__container--text h1, .wide-banners.push-text-right .banner__container--text h2, .wide-banners.push-text-far-right .banner__container--text h1, .wide-banners.push-text-far-right .banner__container--text h2 {
      color: #000;
      font-weight: 400;
      font-size: 28px;
      line-height: 33px;
      width: 100%;
      max-width: 100%;
      text-align: left;
      display: block;
      margin-top: 0;
      margin-left: 0;
      word-spacing: 0.06em; }
    @media screen and (max-width: 991px) {
      .wide-banners.push-text-right .banner__container--text, .wide-banners.push-text-far-right .banner__container--text {
        width: 90%;
        max-width: 90%;
        color: #000; }
        .wide-banners.push-text-right .banner__container--text h1, .wide-banners.push-text-right .banner__container--text h2, .wide-banners.push-text-far-right .banner__container--text h1, .wide-banners.push-text-far-right .banner__container--text h2 {
          color: #000;
          font-size: 22px; } }
    .wide-banners.push-text-right .banner__container--text > div, .wide-banners.push-text-far-right .banner__container--text > div {
      width: 100%;
      margin: 0 0 0; }
      @media screen and (max-width: 991px) {
        .wide-banners.push-text-right .banner__container--text > div, .wide-banners.push-text-far-right .banner__container--text > div {
          width: 100%; } }
    @media screen and (max-width: 991px) {
      .wide-banners.push-text-right .banner__container--text .button,
      .wide-banners.push-text-right .banner__container--text a, .wide-banners.push-text-far-right .banner__container--text .button,
      .wide-banners.push-text-far-right .banner__container--text a {
        color: #fff;
        border-color: #fff; } }
  .wide-banners.push-text-right .banner__container--text-container .banner__container--text-wrapper {
    margin-top: 0;
    margin-left: 52%; }
    @media screen and (max-width: 991px) {
      .wide-banners.push-text-right .banner__container--text-container .banner__container--text-wrapper {
        margin-top: 120px;
        margin-left: 0; } }

.custom-heading-banner .banner__container .banner__container--image:after,
#block-nppebasebanner .banner__container .banner__container--image:after,
.with-curved-image .banner__container .banner__container--image:after {
  background-image: url(../assets/down-curve.png);
  background-size: 100% 100%;
  content: "";
  z-index: 1;
  position: absolute;
  bottom: 0px;
  left: 0;
  display: block;
  width: 100vw;
  height: 140px;
  background-repeat: no-repeat;
  background-position: bottom center; }
  @media screen and (max-width: 991px) {
    .custom-heading-banner .banner__container .banner__container--image:after,
    #block-nppebasebanner .banner__container .banner__container--image:after,
    .with-curved-image .banner__container .banner__container--image:after {
      background-size: 100% 100%;
      height: 60px; } }
  @media screen and (max-width: 767px) {
    .custom-heading-banner .banner__container .banner__container--image:after,
    #block-nppebasebanner .banner__container .banner__container--image:after,
    .with-curved-image .banner__container .banner__container--image:after {
      background-size: 100% auto;
      height: 60px; } }

@media screen and (max-width: 991px) {
  .custom-heading-banner .banner__container .banner__container--image img,
  #block-nppebasebanner .banner__container .banner__container--image img,
  .with-curved-image .banner__container .banner__container--image img {
    width: auto;
    height: 100% !important;
    max-width: none;
    min-height: 100% !important;
    margin: 0 0 0 -40% !important; } }

@media screen and (max-width: 991px) {
  .custom-heading-banner .banner__container .banner__container--image .tablet img,
  .custom-heading-banner .banner__container .banner__container--image .mobile img,
  #block-nppebasebanner .banner__container .banner__container--image .tablet img,
  #block-nppebasebanner .banner__container .banner__container--image .mobile img,
  .with-curved-image .banner__container .banner__container--image .tablet img,
  .with-curved-image .banner__container .banner__container--image .mobile img {
    margin: 0 auto !important; } }

.article-detail__container--image.with-curved-image .desktop:after {
  background-image: url(../assets/down-curve.png);
  background-size: 100% 100%;
  content: "";
  z-index: 1;
  position: absolute;
  bottom: 0px;
  left: 0;
  display: block;
  width: 100vw;
  height: 140px;
  background-repeat: no-repeat;
  background-position: bottom center; }
  @media screen and (max-width: 991px) {
    .article-detail__container--image.with-curved-image .desktop:after {
      background-size: 100% 100%;
      height: 60px; } }
  @media screen and (max-width: 767px) {
    .article-detail__container--image.with-curved-image .desktop:after {
      background-size: 100% auto;
      height: 60px; } }

.article-detail__container--image.with-curved-image .tablet:after,
.article-detail__container--image.with-curved-image .mobile:after {
  background-image: url(../assets/down-curve.png);
  background-size: 100% auto;
  content: "";
  z-index: 1;
  position: absolute;
  bottom: 0px;
  left: 0;
  display: block;
  width: 100vw;
  height: 60px;
  background-repeat: no-repeat;
  background-position: bottom center; }
  @media screen and (max-width: 991px) {
    .article-detail__container--image.with-curved-image .tablet:after,
    .article-detail__container--image.with-curved-image .mobile:after {
      background-size: 100% 100%;
      height: 60px; } }
  @media screen and (max-width: 767px) {
    .article-detail__container--image.with-curved-image .tablet:after,
    .article-detail__container--image.with-curved-image .mobile:after {
      background-size: 100% auto;
      height: 60px; } }

.path-frontpage .banner__container--text-wrapper {
  text-align: center; }

.path-frontpage .banner__container--text {
  text-align: center; }
  @media screen and (max-width: 991px) {
    .path-frontpage .banner__container--text {
      color: #fff; } }
  .path-frontpage .banner__container--text h1, .path-frontpage .banner__container--text h2 {
    text-align: center; }
    @media screen and (max-width: 991px) {
      .path-frontpage .banner__container--text h1, .path-frontpage .banner__container--text h2 {
        color: #fff; } }
  @media screen and (max-width: 991px) {
    .path-frontpage .banner__container--text .button,
    .path-frontpage .banner__container--text a {
      color: #fff;
      border-color: #fff; } }

@media screen and (max-width: 991px) {
  .path-frontpage .banner__container {
    height: 90vh; } }

@media screen and (min-width: 768px) and (max-width: 991px) {
  .wide-banners.push-text-far-right .banner__container--text-container .banner__container--text-wrapper {
    margin-top: -40px !important; } }

@media screen and (min-width: 768px) and (max-width: 991px) {
  .wide-banners.push-text-far-right .push-text-right .banner__container--text {
    margin-top: -54px;
    margin-left: 20px; } }

.wide-banners.push-text-far-right .banner__container--text h1, .wide-banners.push-text-far-right .banner__container--text h2,
.wide-banners.push-text-right .banner__container--text h1,
.wide-banners.push-text-right .banner__container--text h2 {
  font-size: 32px;
  line-height: 1.3em;
  text-transform: uppercase; }

.wide-banners.push-text-far-right .banner__container--text p,
.wide-banners.push-text-right .banner__container--text p {
  font-size: 18px; }
  @media screen and (max-width: 991px) {
    .wide-banners.push-text-far-right .banner__container--text p,
    .wide-banners.push-text-right .banner__container--text p {
      font-size: 16px; } }

@media screen and (max-width: 767px) {
  .banner__container--text-container {
    top: 48% !important; } }

.banner__container--text-container h1, .banner__container--text-container h2 {
  font-weight: 400; }

@media (max-width: 767px) {
  .banner__container--text h2 {
    font-size: 24px !important; } }

.banner__container--text h2 {
  font-size: 36px; }