/** Filter buttons **/

.filter-buttons {
  width: 100%;
  padding-bottom: 20px;
  margin-bottom: 0;
}

.filter-buttons a,
.filter-buttons button {
  display: inline-block;
  background: #fff;
  border: 0;
  color: #232323;
  font-size: 16px;
  font-weight: 400;
  text-transform: initial;
  text-decoration: none;
  padding: 15px 24px;
  box-shadow: 0 3px 12px 1px rgba(1, 1, 1, 0.08);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin: 5px 10px 5px 0;
  cursor: pointer;
  border-radius: 32px;
}

.filter-buttons a:hover,
.filter-buttons button:hover {
  color: #232323;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

.filter-buttons a.active,
.filter-buttons button.active {
  color: #fff;
  background: linear-gradient(to bottom right, #c32d2e, #f18059);
}

.filter-buttons button:focus {
  outline: none;
}

.filter-buttons a.active:hover {
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .filter-buttons {
    white-space: nowrap;
    overflow: scroll;
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 5px;
  }

  .filter-buttons a {
    margin-right: 5px;
    margin-bottom: 0;
  }

  .filter-buttons a:last-child {
    margin-right: 30px;
  }
}

/** Credit card boxes **/

.quick-info-box.credit-card-compare {
  background-color: #fff;
  max-width: 890px;
  padding: 25px 25px 20px;
  margin-top: 0;
  margin-bottom: 20px;
}

.quick-info-box.credit-card-compare .credit-header h3 {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 15px;
}

.quick-info-box.credit-card-compare .wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.quick-info-box.credit-card-compare .credit-card-image {
  width: 190px;
  margin-right: 20px;
  min-height: 85px;
}

.amp .quick-info-box.credit-card-compare .credit-card-image {
  margin: 0 25px 0 0;
}

.quick-info-box.credit-card-compare .credit-card-image img {
  display: block;
  width: 100%;
}

.quick-info-box.credit-card-compare .credit-card-features {
  -ms-flex: 1;
  flex: 1;
}

.quick-info-box.credit-card-compare .credit-card-features ul {
  list-style: none;
  margin: 0 0 20px 22px;
}

.amp .quick-info-box.credit-card-compare .credit-card-features ul {
  margin-top: 15px;
}

.quick-info-box.credit-card-compare .credit-card-features ul li {
  position: relative;
  font-size: 15px;
  margin-bottom: 13px;
  line-height: 1;
}

.quick-info-box.credit-card-compare .credit-card-features ul li:before {
  /* Standard Fontello Icon styling */
  font-family: "font-awesome";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "\e809";
  display: inline-block;
  text-decoration: inherit;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Positioning the icon */
  position: absolute;
  left: -22px;
  top: -1px;
  bottom: 0;
  width: 15px;
  height: 15px;
  font-size: 15px;
  color: #b1b1b1;
}

.quick-info-box.credit-card-compare .credit-card-cta .call-to-action {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
}

.quick-info-box.credit-card-compare .credit-card-cta .call-to-action > a {
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .quick-info-box.credit-card-compare {
    margin: 0 15px 20px;
  }

  .quick-info-box.credit-card-compare .wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .quick-info-box.credit-card-compare .credit-card-image {
    -ms-flex-preferred-size: 35%;
    flex-basis: 35%;
  }

  .quick-info-box.credit-card-compare .credit-card-image {
    width: 100%;
    max-width: 190px;
  }

  .quick-info-box.credit-card-compare .credit-card-features {
    -ms-flex-preferred-size: calc(65% - 20px);
    flex-basis: calc(65% - 20px);
  }

  .amp .quick-info-box.credit-card-compare .credit-card-features {
    -ms-flex-preferred-size: calc(100% - 210px);
    flex-basis: calc(100% - 230px);
  }

  .quick-info-box.credit-card-compare .credit-card-cta {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }

  .quick-info-box.credit-card-compare .credit-card-cta .call-to-action {
    -ms-flex-direction: row;
    flex-direction: row;
    margin-top: 15px;
  }

  .quick-info-box.credit-card-compare .credit-card-cta .call-to-action a {
    width: 50%;
    margin-right: 15px;
  }

  .quick-info-box.credit-card-compare
    .credit-card-cta
    .call-to-action
    a:last-child {
    width: 45%;
    margin-right: 0;
  }
}

@media screen and (max-width: 500px) {
  .quick-info-box.credit-card-compare .credit-header h3 {
    font-size: 21px;
  }

  .quick-info-box.credit-card-compare .credit-card-image {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .quick-info-box.credit-card-compare .credit-card-features {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }

  .quick-info-box.credit-card-compare .credit-card-cta .call-to-action {
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .quick-info-box.credit-card-compare .credit-card-cta .call-to-action a {
    width: 100%;
    margin-right: 0;
  }

  .quick-info-box.credit-card-compare
    .credit-card-cta
    .call-to-action
    a:last-child {
    width: 100%;
  }
}

@media screen and (max-width: 350px) {
  .quick-info-box.credit-card-compare .credit-header h3 {
    font-size: 19px;
  }

  .quick-info-box.credit-card-compare .credit-card-image {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}

/** Load more buttons **/

.load-more-credit-cards a {
  padding: 15px 18px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border-radius: 32px;
  border: 1px solid #bcbdbe;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  hyphens: auto;
  background: none;
  color: #c32d2e;
  text-transform: uppercase;
}

.load-more-credit-cards a:hover {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

.load-more-credit-cards {
  text-align: center;
  padding: 20px 0;
}

.load-more-credit-cards.hidden a {
  display: none;
}

.credit-header p {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: bold;
}

article a .sponsored-label {
  font-size: 12px;
  margin-top: 3px;
  text-align: center;
  display: block;
  color: black;
}

body article a .sponsored-label,
body article a:hover .sponsored-label,
body article a:visited .sponsored-label,
body article a:link .sponsored-label,
body article a:active .sponsored-label {
  text-decoration: none !important;
}

/*--------------------------------------------------------------
# AMP
--------------------------------------------------------------*/

/* hide all tab headings since we use custom buttons */
.amp.kreditvergleich amp-selector[role="tablist"] [role="tab"] {
  display: none;
}

/* hide all tab contents until it is selected */
.amp.kreditvergleich amp-selector[role="tablist"] [role="tabpanel"] {
  max-height: 0px;
  visibility: hidden;
}

/* show selected tab */
.amp.kreditvergleich
  amp-selector[role="tablist"]
  [role="tab"][selected]
  + [role="tabpanel"] {
  max-height: none;
  visibility: visible;
}