/*! Supernews UI - Components */

/***
  name: Section
  description: This component provides all theme specific section styling.

  example: |
    <div class="c-section">
      <h2 class="c-title">Section Title</h2>
      <p class="c-section__text">Textual section content.</p>
    </div>
***/
.c-section,
[class*="c-section--"] {
  padding-top: 40px;
  padding-bottom: 40px;
}
[class*="c-section__text"] {
  max-width: 996px;
  margin-bottom: 36px;
}
[class*="c-section__text"]:last-of-type {
  margin-bottom: 0;
}
[class*="c-section__text"] + [class*="c-button"] {
  margin-top: 36px;
}
.c-section__text-align-center {
  text-align: center;
}
@media screen and (min-width: 900px) {
  .c-section,
  [class*="c-section--"] {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .c-section--banner {
    padding-top: 0;
  }
}
@media screen and (min-width: 600px) {
  [class*="c-section__text"] {
    line-height: 34px;
  }
}

/***
  name: Button
  description: This component provides all theme specific button styling.

  example: |
    <a class="c-button--primary" href="/signup/index.html">Button Text</a>
***/
[class*="c-button"] {
  position: relative;
  display: inline-block;
  min-width: 240px;
  padding: 18px 32px 19px;

  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;

  border: none;
  border-radius: 40px;
  cursor: pointer;
  zoom: 1;
}
[class*="c-button"]:hover,
[class*="c-button"]:focus,
[class*="c-button"]:active {
  color: #fff;
}
.c-button {
  background-color: #d80000;
}
.c-button:hover,
.c-button:focus,
.c-button:active {
  background-color: #b70000;
}

.c-button--color-light-blue {
  background-color: #3cb9da;
}
.c-button--color-light-blue:hover,
.c-button--color-light-blue:focus,
.c-button--color-light-blue:active {
  background-color: #0d7d9a;
}
@media (max-width: 599px) {
  .c-button {
    width: 100%;
    min-width: 100%;
  }
}
/***
  name: Title
  description: This component provides all theme specific title styling.

  examples: |
    <h1 class="c-title--separator">Main Title</h1>
    <h2 class="c-title">Section Title</h2>
***/
[class*="c-title"] {
  font-family: 'Rubik', Arial, Helvetica, sans-serif;
  font-weight: 900;
  color: #333;
}
.c-title--secondary {
  margin-bottom: 15px;
  font-family: 'Rubik One', Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #004055;
}
.c-title--color-lightest {
  color: #fff;
}
.c-title--separator {
  position: relative;
  margin-bottom: 12px;
  padding-bottom: 25px;
}
.c-title--separator:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #ffc500;
  content: "";
}

/***
  name: List
  description: This component provides all theme specific list styling.

  example: |
    <ul class="c-list">
      <li class="c-list__item">Item 1</li>
      <li class="c-list__item">Item 2</li>
      <li class="c-list__item">Item 3</li>
    </ul>
***/
[class*="c-list"] {
  list-style: none;
}
.c-list--color-lightest {
  color: #fff;
}
.c-list--align-center {
  text-align: center;
}
.c-list__item {
  font-size: 1.8rem;
  line-height: 30px;
}
@media screen and (min-width: 600px) {
  .c-list__item {
    font-size: 2.4rem;
    line-height: 36px;
  }
}

/***
  name: Header Navigation
  description: This component provides all styling for the main navigation menu.
***/
[class*="c-nav--"] {
  list-style: none;
}
.c-nav--primary {
  margin: 0;
  text-align: right;
  background: #fff;
}
.c-nav--secondary {
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: right;
}
[class*="c-nav__item"] {
  display: block;
  margin: 0;
  border-bottom: 2px solid #ddd;
}
.c-nav__item-flag {
  display: inline-block;
  margin: 20px 15px;
}
.c-nav__item-signin-signup {
  margin-right: 0;
}
[class*="c-nav__link"] {
  display: block;
  padding: 17px 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: #000;
  letter-spacing: 0.5px;
  border: none;
}
.c-nav__link-image {
  margin: 0;
}
[class*="c-nav__link-flag"] {
  display: block;
  width: 30px;
  height: 20px;
  padding: 0;
  text-indent: -9999px;
  text-align: left;
  border: none;
}
.c-nav__link-flag-de {
  background: url(/imgs/de.png) no-repeat 0 0;
}
.c-nav__link-flag-en {
  background: url(/imgs/us.png) no-repeat 0 0;
}
.c-nav__link-flag-fr {
  background: url(/imgs/fr.png) no-repeat 0 0;
}
.c-nav__link-flag-nl {
  background: url(/imgs/nl.png) no-repeat 0 0;
}
.c-nav__toggler {
  position: absolute;
  top: 0;
  right: 0;
  padding: 17px 16px;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  .c-nav {
    padding: 20px 0 33px;
  }
  .c-nav--primary {
    background: transparent;
  }
  [class*="c-nav__item"] {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 15px;
    border: 0;
  }
  .c-nav__item-flag {
    margin: 0 5px;
  }
  [class*="c-nav__link"] {
    font-size: 1.8rem;
    font-weight: 500;
    text-transform: uppercase;
  }
  .c-nav--bg-dark [class*="c-nav__link"],
  .c-nav--bg-dark [class*="c-nav__link"]:hover {
    color: #fff;
  }
  .c-nav__link-controlpanel {
    margin-left: 20px;
    padding: 0;
  }
  .c-nav__link-underline {
    padding: 0 0 2px;
    border-bottom: 5px solid #F8B731;
  }
  .c-nav__link-underline:hover,
  .c-nav__link-underline:focus,
  .c-nav__link-underline:active {
    color: #000;
    border-color: #e29b07;
  }
  .c-nav__link-image {
    margin-top: 36px;
  }
}
@media screen and (max-width: 899px) {
  .c-nav .o-container {
    padding: 0;
  }
  .c-nav__link-image {
    min-height: 60px;
    padding: 13px 0 10px;
    border-bottom: 2px solid #ddd;
    background: #f3fbfe;
  }
}

/***
  name: Footer
  description: This component provides all styling for the main, default footer.
***/
.c-footer {
  position: relative;
  background: url(/imgs/bg_blue_lines.png) repeat center top;
}
.c-footer__wrap {
  padding: 60px 0 355px;
  background: url(/imgs/image_banner_city_blue.png) no-repeat center bottom;
}
.c-footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.c-footer__nav {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}
.c-footer__nav-item {
  margin: 10px 15px;
  font-size: 1.8rem;
}
.c-footer__nav-link {
  padding-bottom: 2px;
  font-weight: 500;
  color: #333;
  text-transform: uppercase;
  border-bottom: 5px solid #f8b731;
}
.c-footer__nav-link:hover,
.c-footer__nav-link:focus {
  color: #333;
  border-color: #e29b07;
}
.c-footer__social {
  font-size: 0;
}
.c-footer__social-link {
  margin-left: 8px;
  margin-right: 8px
}
.c-footer__text-legal {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 18px;
  text-align: center;
}
@media screen and (min-width: 900px) {
  .c-footer__container {
    flex-direction: row;
  }
  .c-footer__nav {
    margin-bottom: 0;
  }
  .c-footer__social-item:last-of-type .c-footer__social-link {
    margin-right: 0;
  }
}

/***
  name: Card List
  description: This component provides all theme specific card list styling.

  example: |
    <ul class="o-grid u-list--unstyled">
      <li class="o-grid__cell-size-4 c-card">
        <img class="c-card__icon" src="/path/to/image" />
        <h3 class="c-card__title">Title</h3>
        <p class="c-card__content">Text</p>
      </li>
      <li class="o-grid__cell-size-4 c-card">
        <img class="c-card__icon" src="/path/to/image" />
        <h3 class="c-card__title">Title</h3>
        <p class="c-card__content">Text</p>
      </li>
      <li class="o-grid__cell-size-4 c-card">
        <img class="c-card__icon" src="/path/to/image" />
        <h3 class="c-card__title">Title</h3>
        <p class="c-card__content">Text</p>
      </li>
    </ul>
***/
.c-card {
  margin-bottom: 25px;
  color: inherit;
  align-self: baseline;
  text-align: center;
}
.c-card__icon {
  margin-bottom: 18px;
}
.c-card__title {
  margin-bottom: 13px;
  font-family: 'Love Ya Like A Sister';
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: 6px;
  line-height: 1.3;
}
.c-card__text {
  font-size: 1.8rem;
}
.c-card--horizontal {
  margin-bottom: 70px;
}
.c-card--horizontal .c-card__icon {
  display: block;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) {
  .c-card {
    margin-bottom: 15px;
  }
  .c-card__icon {
    margin-bottom: 24px;
  }
  .c-card--horizontal .c-card__icon {
    margin-right: 48px;
  }
}
@media (min-width: 600px) {
  .c-card__title {
    font-size: 3.2rem;
  }
}

/***
  name: Discount Card
  description: This component provides all styling for discount cards.
***/
.c-discount-card,
[class*="c-discount-card--"] {
  width: 100%;
  margin-left: 12px;
  margin-right: 12px;
  padding: 19px 23px 25px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 7.2px;
  box-shadow: 3px 3px 0 0 #108099;
  cursor: pointer;
}
[class*="c-discount-card__"] {
  color: #034357;
}
.c-discount-card__title {
  margin-bottom: 9px;
  font-family: 'Love Ya Like A Sister';
  font-size: 2.2rem;
}
.c-discount-card__discount {
  display: block;
  width: 214px;
  max-width: 100%;
  height: 48px;
  margin: 0 auto 15px;
  padding: 5px;
  font-size: 2.9rem;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  background-color: #1bc3ea;
  border-radius: 5px;
  border: dashed 2.4px #004055;
}
.c-discount-card__discount-price {
  margin-bottom: 14px;
  font-size: 5.2rem;
  font-weight: 300;
}
.c-discount-card__duration {
  font-size: 1.5rem;
  text-transform: uppercase;
}
.c-discount-card__duration:first-of-type {
  margin-bottom: 0;
}
.c-discount-card__price {
  margin-bottom: 19px;
  font-size: 1.6rem;
  font-weight: 300;
  color: #1bc3ea;
  text-transform: uppercase;
  text-decoration: line-through;
}
.c-discount-card__taxes {
  font-size: 1.4rem;
  margin-top: 20px;
}
@media screen and (max-width: 599px) {
  .c-discount-card__discount-price,
  .c-discount-card__duration {
    display: inline-block;
  }
  .c-discount-card--monthly {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 600px) {
  .c-discount-card, [class*="c-discount-card--"] {
    width: 284px;
    min-height: 388px;
  }
  .c-discount-card__title {
    margin-bottom: 17px;
    font-size: 2.8rem;
  }
  .c-discount-card__discount {
    width: 238px;
    margin-bottom: 18px;
  }
  .c-discount-card__discount-price {
    margin-bottom: 10px;
    font-size: 5.8rem;
  }
  .c-discount-card__duration {
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
  .c-discount-card__price {
    margin-bottom: 27px;
  }
}

/***
  name: About Supernews Include
  description: This component provides all styling for the About SN include.
***/
.c-section--about-sn .c-title--secondary {
  text-transform: uppercase;
  letter-spacing: 6px;
}
@media screen and (min-width: 900px) {
  .c-section--about-sn {
    padding-top: 95px;
    padding-bottom: 95px;
  }
  .c-section--about-sn .c-section__text {
    max-width: 691px;
    line-height: 36px;
  }
}

/***
  name: CTA Bar
  description: This component provides all styling for the cta bar.
***/
.c-cta-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 53px;
  padding-bottom: 53px;
}
.c-cta-bar__title {  
  margin-bottom: 24px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
@media (max-width: 899px) {
  /*IE11*/
  .c-cta-bar__title {
    width: 100%;
  }
}
@media (min-width: 900px) {
  .c-cta-bar {
    flex-direction: row;
  }
  .c-cta-bar__title {
    margin-bottom: 0;
    padding-right: 16px;
  }
}

/***
  name: Customer Review Box Slider
  description: This component provides all styling for the customer review box slider.
  note: We are using third party jquery for this box slider. Some classes are auto generated.
***/
#customer-reviews-slider .bx-wrapper {
  box-shadow: none;
  border: none;
  background: none;
}
.bx-wrapper .bx-controls-direction .bx-prev,
.bx-wrapper .bx-controls-direction .bx-next {
  position: absolute;
  top: 50%;
  text-indent: -9999px;
  z-index: 9999;
  outline: 0;
}
#customer-reviews-slider .bx-prev,
#customer-reviews-slider .bx-next {
  width: 25px;
  height: 72px;
  margin-top: -36px;
}
#customer-reviews-slider .bx-prev {
  background: url(/imgs/icon_back_arrow.png) no-repeat 0 0;
  left: -70px;
}
#customer-reviews-slider .bx-next {
  background: url(/imgs/icon_forward_arrow.png) no-repeat 0 0;
  right: -70px;
}
.c-customer-reviews__title {
  margin-bottom: 36px;
  font-family: 'Love Ya Like A Sister';
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 4px;
  line-height: 1.2;
}
.c-customer-reviews__link {
  display: block;
  font-size: 1.8rem;
  text-align: center;
}
.c-customer-reviews__blockquote {
  position: relative;
  margin-bottom: 36px;
  padding-right: 0;
  padding-left: 40px;
}
.c-customer-reviews__blockquote:before,
.c-customer-reviews__blockquote:after {
  position: absolute;
  content: "";
}
.c-customer-reviews__blockquote:before {
  left: 0;
  top: 0;
  width: 30px;
  height: 29px;
  background: url(/imgs/left_quote.png) no-repeat 0 0;
  background-size: contain;
}
.c-customer-reviews__quote {
  font-size: 1.8rem;
  line-height: 1.5em;
  text-align: left;
}
@media (min-width: 900px) {
  #customer-reviews-slider {
    margin-left: 135px;
    margin-right: 135px;
  }
  #customer-reviews-slider .bx-prev {
    left: -100px;
  }
  #customer-reviews-slider .bx-next {
    right: -100px;
  }
  .c-customer-reviews__title {
    font-size: 5.5rem;
  }
  .c-customer-reviews__blockquote {
    padding-left: 100px;
    padding-right: 100px;
  }
  .c-customer-reviews__blockquote:before {
    width: 54px;
  }
  .c-customer-reviews__blockquote:after {
    right: 0;
    bottom: 0;
    width: 56px;
    height: 30px;
    background: url(/imgs/right_quote.png) no-repeat 0 0;
    background-size: contain;
  }
  .c-customer-reviews__quote {
    font-size: 2.4rem;
    text-align: center;
  }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
  #customer-reviews-slider {
    margin-left: 70px;
    margin-right: 70px;
  }
}
@media (max-width: 599px) {
  #customer-reviews-slider .bx-prev,
  #customer-reviews-slider .bx-next {
    display: none;
  }
}