@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";
/* zakelijk per 1 mei 2023  ------------------------------- */

.container-fluid .Hero-custom {margin-bottom: var(--Sz0)!important;}
.container-fluid .grid .ListD .container .row .col-md-3 .richtext h4, .container-fluid .grid .ListD .container .row .col-md-4 .richtext h4 {color: var(--LightBlue); font-size: 20px !important; font-family: var(--FontA); margin-bottom: 0 !important;}

#KiesUwKaart {background: -webkit-linear-gradient(bottom, rgba(0, 111, 207, 0.25) 0%, rgba(0, 111, 207, 0) 100%);}
#BusinessCards {background: rgba(0, 111, 207, 0.25)}
#CorporateCards {background: rgba(0, 111, 207, 0.25)}

/* FLOATING CTA EN FOOTER  ------------------------------- */
.container-fluid .ShopBar {height: 100px; bottom: -100px; transition: bottom 0.5s ease-in-out;}
.container-fluid .ShopBar.active {bottom: 0px;}
#amex-footer {margin-bottom: 6rem!important;}

/* -- Custom CSS Added -- 020523 ------------------------- */
.container-fluid .grid .ListD .container .row{align-items: flex-start; justify-content: flex-start}
.container-fluid .grid .ListD .container .row .image{margin-bottom:var(--Sz0)!important;}
.container-fluid .grid .ListD .container .row .col-md-4{flex: 1 0 30%; max-width: 33%}

@media (max-width: 767px) {
  .container-fluid .grid .ListD .container .row .col-md-3 .richtext h4, .container-fluid .grid .ListD .container .row .col-md-4 .richtext h4 {font-size: 17px!important;}
}
@media (max-width:500px) {
  .container-fluid .grid .ListD .container .row .col-md-4{flex: 1 0 100%; max-width: 100%; padding-right:var(--Sz2)!important;}
}