@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";
@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/blob.css";
/*2026-02-16 */

.js_hide-contact.is-closed {display: none;}

/* Using a string */
.container-fluid .ModalContent {height:auto!important; max-height: 80vh!important; min-height: 55vh !important;}
.container-fluid .Hero-custom .row .col-md-6:first-child .button.parbase {margin-top: var(--Sz0);}
.container-fluid .App {margin: 0 0;}
#grey-verloop {background-image: linear-gradient(#fff, #ecedee);}

#floatingcta.ShopBar {position: relative; bottom:-130px; transition: bottom 0.5s ease-in-out; -webkit-transform:translateZ(1000px);}
#floatingcta.ShopBar.active {bottom:0px;}

#LargeBackgroundImage::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
}

#LargeBackgroundImage::after {
  content: '';
  display: block;
  width: 70%;
  height: 500px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 12;
  background-image: url("/content/dam/amex/nl/assets/bubl/img/OniShapeWit.svg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
}

.container-fluid .grid .TextPlaat .container .row .col-md-6:first-child {z-index: 3;}

/* --Card animation-- */
.BannerC .image {animation:flip 8s ease-out infinite;overflow: hidden;}
@keyframes flip {
0% {transform: perspective(600px) rotateY(-2deg);}
50% {transform: perspective(600px) rotateY(10deg);}
100% {transform: perspective(600px) rotateY(-2deg);}
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
  .container-fluid h1 {font-size: 32px!important;}
  #LargeBackgroundImage .container {padding:300px 0px 0px 0;}
  #LargeBackgroundImage .container .row .col-md-6:first-child {flex: 0 0 100%!important; max-width:100%!important;}
  #LargeBackgroundImage .container .row .col-md-6:last-child {flex: 0 0 100%!important; max-width:100%!important;}
  .container-fluid .grid #LargeBackgroundImage.TextPlaat, .container-fluid .grid .container .row .col-md-12 {margin-bottom: 0px !important;}
  .container-fluid .App .container .row .col-md-6:last-child {text-align: left;}
  .container-fluid .grid .ListB .container .row .col-md-4 .thumb {border-bottom:1px solid #cccccc; margin-bottom:10px;}
  .card-art.parbase {display: none;}
}
/* -------------------------------------------------------------------------------------------- */

@media (min-width:577px) and (max-width:768px) {
  .container-fluid h1 {font-size: 32px!important;}
  #LargeBackgroundImage .container .row .col-md-6:first-child {flex: 0 0 100%!important; max-width:100%!important;}
  #LargeBackgroundImage .container .row .col-md-6:last-child {flex: 0 0 100%!important; max-width:100%!important;}
  .container-fluid .grid #LargeBackgroundImage.TextPlaat, .container-fluid .grid .container .row .col-md-12 {margin-bottom: 0px !important;}
  .container-fluid .App .container .row .col-md-6:last-child {text-align: left;}
  .container-fluid .grid .ListB .container .row .col-md-4 .thumb {border-bottom:1px solid #cccccc; margin-bottom:10px;}
  .card-art.parbase {display: none;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {
  .container-fluid h1 {font-size: 32px!important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
  .container-fluid h1 {font-size: 32px!important;}
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
  #LargeBackgroundImage .card-img-bg {background-position:center top;}
  .container-fluid h1 {font-size: 40px!important;}
}

/* -------------------------------------------------------------------------------------------- */
/* -- Blue cards adjustments -- */
.invisible, .invisible-xs-up {
  display:none!important;
  opacity: 0;
}
.showcase-card{height:15em!important;}

/* -- Background image banner with swirl -- */
#LargeBackgroundImage {color:#fff;}
#LargeBackgroundImage .container {padding-top:100px; padding-bottom:100px;}
#LargeBackgroundImage .container .row .col-md-6:first-child {flex: 0 0 50%; max-width:50%;}
#LargeBackgroundImage .container .row .col-md-6:last-child {flex: 0 0 50%; max-width:50%;}

/* --------------------------------------------------------------------------------------------- */
/* --- Custom css added on 23-01-23 JE --------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */

/* body, html{overflow-x: hidden; max-width: 100%!important;} */

/* --------------------------------------------------------------------------------------------- */
/* -- Hero adjustments ------------------------------------------------------------------------- */
.Hero-custom .ButtonStack{margin-bottom:var(--Sz0)}
.container-fluid .Hero-custom .row .col-md-6:last-child{pointer-events:none}
.container-fluid .Hero-custom .row .col-md-6:last-child .image .image{transform: translate(0);}
/* -- offer Blob ------------------------------------------------------------------------- */
.Hero-custom .offerBlob{position: relative;left:55%;bottom:-110px;max-width:300px;color:white;font-weight:700!important;pointer-events: none;}
.Hero-custom .offerBlob p{padding:var(--Sz4) var(--Sz2); font-size:14px!important; position:relative;}
.Hero-custom .offerBlob p .points{font-size:16px; font-weight:700;}
.Hero-custom .offerBlob::before{right: 0; -webkit-mask-image:url(/content/dam/amex/nl/assets/bubl/img/blob.png); mask-image:url(/content/dam/amex/nl/assets/bubl/img/blob.png); -webkit-mask-position: center; mask-position: center; content: ''; position: absolute; top: 0; width: 110%; height: 100%; background: #00175a; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; mask-repeat: no-repeat; mask-size: cover; z-index: 0;}
@media (max-width:1023px) {
  /*.Hero-custom .col-md-6:last-child{margin-top:-160px!important;}*/
  .container-fluid .Hero-custom {margin-bottom: var(--Sz4)!important;}
}
@media (min-width:1024px) {
  .container-fluid .Hero-custom {margin-bottom: unset!important;}
}

/* --------------------------------------------------------------------------------------------- */
/* -- 3-steps styling -------------------------------------------------------------------------- */ 
#steps-intro{padding-top:var(--Sz3);}
#steps-intro .image{margin-top:var(--Sz2); margin-bottom:var(--Sz1);}
#steps-intro .image img{box-shadow: var(--BoxShadow); border-radius: 1.1rem; max-width: 40%;}
#steps-intro .image .pad{padding:0!important; display: flex; justify-content: center;}
@media (max-width:767px){
  #steps-intro .image .pad{display:block} 
  #steps-intro .image img{max-width: 80%;}
}
.container-fluid .grid .die-stappen .container .row .col-md-4{padding-bottom:0!important;}
.die-stappen .numberBox p{margin-bottom:0;}
.die-stappen .numberBox .number{font-family: var(--FontA); font-size: 48px!important; color:var(--LightBlue);}
.die-stappen{padding-bottom:var(--Sz2)}
.die-stappen::after{content: ''; position: absolute; bottom: 0; width: 100%; height: 200%; background: #ececec; opacity: .3; z-index: -3; -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 120%; mask-repeat: no-repeat; mask-size: 120%; -webkit-mask-position: center bottom; mask-position: center bottom;}

/* --------------------------------------------------------------------------------------------- */
/* -- Merchant grid ---------------------------------------------------------------------------- */ 
#merchants .merchantWrapper{display: grid; grid-template-columns: 1fr 1fr 1fr;}

/* --------------------------------------------------------------------------------------------- */
/* -- Testimonial styling ---------------------------------------------------------------------- */ 
#testimonial .iconQuote{font-size:120px; position: relative; color:#ececec; z-index: -1; top:0px; left:-20px; height:10px!important;}
#testimonial p:first-child{height:70px;}
#testimonial p.border-bottom{border-bottom: 1.5px solid #ececec; padding-bottom:var(--Sz01)}

/* --------------------------------------------------------------------------------------------- */
/* -- ListB hover ------------------------------------------------------------------------------ */ 
.container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover p.modalLink{color:var(--LightBlue);}
.container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover p.modalLink::after {content: ''; color: var(--LightBlue); display: inline-block; width: 17px; height: 17px; background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue1Right.svg"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: relative; top: 4px; margin-left: 10px; transition: 300ms ease-in-out;}
.container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover:hover p.modalLink::after{margin-left: 15px; transition: 300ms ease-in-out;};

/* --------------------------------------------------------------------------------------------- */
/* -- General styling -------------------------------------------------------------------------- */ 
ol li ul li::before{content: "\25AA"!important;}
.App{margin-top:var(--Sz3)!important;}
@media(max-width:500px){
  .container-fluid h1{font-size:42px!important;}
  .container-fluid h2{font-size:32px!important;}
  #steps-intro h3{font-size:28px!important; line-height: 36px!important;}
}
.container-fluid .grid .ListB .container .row .col-md-4 .thumb{border-bottom:none;}

#amex-footer {margin-bottom: 6rem!important;}