/* 2024-06-18 */

@import "/content/dam/amex/nl/assets/css/global/de-de/v1-0-0/base.css"; 

/* ------------------------------------------------ */
/* -- Amex On tag --------------------------------- */
.kd--amex-on {
  font-size: 48px;
  font-weight: 900;
  color: var(--dark-blue);
}

/* ------------------------------------------------ */
/* -- Logo banner --------------------------------- */
.kd--logo-banner {
  display: inline-block;
  width: 250px;
  mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: var(--light-blue);
  aspect-ratio: 3/1;
}

/* ------------------------------------------------ */
/* -- Banners ------------------------------------- */
.header-logo, .row2-logo {
  margin-inline: auto;
  text-align: center !important;
}

#video.bg-brand--b2::before{
  -webkit-mask-position: right -100px bottom -100px;
  mask-position: right -100px bottom 0px;
}

/* ------------------------------------------------ */
/* -- Erleben custom ------------------------------ */
#row8 .richtext {
  max-width: none;
}
#row8 .card-img-bg {
  background-position: top center;
}
#row8 .col-md-12 {
  align-self: flex-end;
  padding-bottom: var(--Sz2);
}

/* ------------------------------------------------ */
/* -- Hero ---------------------------------------- */
.row2-logo {width: clamp(0px, 300px, 95%);}
.row2-logo img {max-width: 70%!important;}
#vibe-on-hero .col-md-12 {height: 100%;}
#vibe-on-hero .col-md-12 .richtext {align-self: self-end;}
.kd--hero .image:has(#logo--thegutsclub) {align-self: center;}

@media (width < 500px) {
  .image:has(.desktop-visible), .desktop-visible {
    display: none;
  }
}

@media (width >= 500px) {
  .image:has(.mobile-visible), .mobile-visible {
    display: none;
  }
}

/*# sourceMappingURL=custom.css.map */

/* ------------------------------------------------ */
/* -- Intro --------------------------------------- */
.kd--intro .richtext {width:clamp(0px, 120ch, 100%);}

/* ------------------------------------------------ */
/* -- Benefits ------------------------------------ */
small {font-size: 60%!important; line-height:.6;}

/* ------------------------------------------------ */
/* -- row8 ---------------------------------------- */
.btn {max-width: 11rem!important;}