@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";
/* V05-22-V2  */

.Hero-custom {margin-bottom: 0px!important;}
#headerbutton.button.pad-2-t.pad-2-b {display:flex!important;}
.container-fluid .collapsible-panel .border.bordered h3 .accordion-content {background: #ffffff !important;}
.icon {display: inline-flex!important;}
.container-fluid .button {display: block!important;}
#row19 h4 {line-height: 32px!important;}
@media (min-width:769px){
  .Hero-custom .col-md-7:has(.button){
    display:flex;
    column-gap:var(--Sz0);  
  }
}

/* --Fonts-- */
.container-fluid h1, .container-fluid h2, .container-fluid h3, .container-fluid h4, .container-fluid h5, .container-fluid h6 {font-weight: 400 !important; margin-bottom: var(--Sz0);} 
.container-fluid h1, .container-fluid h2, .container-fluid h3 {font-family: var(--FontB);} 
.container-fluid h4, .container-fluid h5, .container-fluid h6 { font-family: var(--FontB); margin-bottom: var(--Sz02) !important;} 
.container-fluid h1 {font-size: 42px !important; line-height: 60px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important; text-transform: uppercase;} 
.container-fluid h2 {font-size: 38px !important; line-height: 45px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} 
.container-fluid h3 {font-size: 37px !important; line-height: 34px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} 
.container-fluid h4 {font-size: 28px !important; line-height: 25px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} 
.container-fluid h5 {font-size: 21px !important; line-height: 19px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} 
.container-fluid h6 {font-size: 14px !important; line-height: 14px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} 


.container-fluid p, .container-fluid ul, .container-fluid ol {font-size: 17px !important; line-height: 1.7 !important; font-weight: 400; font-family: var(--FontB); margin-bottom: var(--Sz0); -webkit-font-smoothing: antialiased !important; font-style: normal !important;} 
.container-fluid p.Large, .container-fluid ul.Large, .container-fluid ol.Large {font-size: 21px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} 
.container-fluid p.Small, .container-fluid ul.Small, .container-fluid ol.Small  {font-size: 14px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} 
.container-fluid strong, .container-fluid b {font-size: 900 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid ul {list-style: none;} 
.container-fluid ul li {position: relative;} .container-fluid ul li::before {position: absolute; content: "\25AA"; color: var(--LightBlue);} .container-fluid ul li::before {left: -19px;} 
.container-fluid ul.Large li::before {left: -22px;} .container-fluid ul.Small li::before {left: -16px;} 
.container-fluid ol {counter-reset: li; list-style: none;} 
.container-fluid ol li {counter-increment: li; position: relative;} 
.container-fluid ol li::before {position: absolute; content: counter(li); color: var(--LightBlue); transform: scale(0.7); transform-origin: left bottom;} 
.container-fluid ol li::before {left: -17px; top: -3px;} .container-fluid ol.Large li::before {left: -20px;} 
.container-fluid ol.Small li::before {left: -15px;} 
.container-fluid ul.Check li {position: relative; padding-left: var(--Sz03);} 
.container-fluid ul.Check li::before {position: absolute; content: ""; background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/CheckBlue1Big.svg"); background-position: center center; background-size: contain; background-repeat: no-repeat; transform: scale(0.8);} 
.container-fluid ul.Check li::before {width: 17px; height: 17px; left: -20px; top: 5px;} .container-fluid ul.Check.Large li::before {width: 21px; height: 21px; left: -25px; top: 6px;} 
.container-fluid ul.Check.Small li::before {width: 14px; height: 14px; left: -17px; top: 4px;} 
.container-fluid ul.Dark li::before, 
.container-fluid ol.Dark li::before {color: white;} 
.container-fluid ul.Dark li, .container-fluid ol.Dark li {color: white;} 
.container-fluid ul.Check.Dark li::before {background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/CheckWitBig.svg");} 


.container-fluid .grid .container .row .col-md-3 .image .pad img {box-shadow: var(--NoBoxShadow);}
.container-fluid .grid .container .row .col-md-3 .margin-3-t {margin-top: var(--Sz4) !important;}

.container-fluid .grid .ListB .thumb h4.display-block .icon {width: 70px; margin-right: 0px;flex-shrink: 0; align-items: flex-start;}
.container-fluid .grid .ListB .thumb p {display:none;}
.container-fluid .grid .ListB .col-md-6.margin-0-tb {margin-bottom:40px!important;}
.container-fluid .grid .ListB .thumb h4.display-block {
  font-size: 16px !important;
  color: var(--Black) !important;
  line-height: 21px !important;
  font-family: var(--FontB);
}
.container-fluid .grid .ListB .thumb h4.display-block b {font-weight: 900!important;}

  
.container-fluid .grid .ListB .thumb h4.display-block {
  align-items: flex-start!important;
}


.container-fluid #row7 ul  {padding-left:0px;}
.container-fluid #row7 ul li::before {content: "";}
.container-fluid #row7 ul li {border-bottom:1px solid #ebebeb; padding:10px 0px 10px 20px;}
.container-fluid #row7 .button.parbase {margin-top:60px;margin-bottom: 60px;}
#row7R ul li:nth-child(4),#row7R ul li:nth-child(5) {border-bottom:1px solid #fff;}
#row8 h3:last-child {font-size:28px!important;}
#row8 h3:last-child b {font-size:37px!important; font-weight: 900!important;}
#row8 img {border-radius: 50%;}
.container-fluid #row11 .table, .container-fluid #row11 .table td, .container-fluid #row11 .table thead th  {text-align: center!important; }
.container-fluid #row11 .table td:first-child  {text-align: left!important; }
#row11 {}
.container-fluid #row11 .table thead {background-color: #ffffff;}
.container-fluid #row11 .collapsible-panel .border.bordered h3 {font-family: var(--FontB); font-size: 14px !important; font-weight: normal !important;}
.container-fluid #row15 .collapsible-panel .border.bordered h3,
.container-fluid #row11 .table thead th {font-size: 14px !important; font-weight: 900 !important; text-transform: unset; line-height: 21px!important;}
.container-fluid #row11 .table tr:first-of-type th {border-top:none;}
.container-fluid #row11 .table td:first-of-type, .table th:first-of-type {border-left: none;}
.container-fluid #row11 .table td:last-of-type, .table th:last-of-type {border-right: none;}
.container-fluid #row11 .table td, .table th { border-bottom: .0625rem solid #ccc;}
#row10 .row,
#row18 .row {
  display: block;
  flex-wrap: inherit;
  padding-top: 30px;
  padding-bottom: 30px;
  min-height: 100px;
}
.container-fluid #row17 h4 {
  font-size: 18px !important;
  line-height: 24px !important;
  -webkit-font-smoothing: antialiased !important;
  font-style: normal !important;
}
.container-fluid #row12 p.Large, .container-fluid ul.Large, .container-fluid ol.Large {font-size: 24px !important;}

#row14 .row {
  display: block;
  flex-wrap: nowrap;
  margin-bottom: 30px;
}

#row19L,
#row19M, 
#row19R {padding-bottom:30px;}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
.container-fluid #row7 .button.parbase {margin-bottom: 60px;}
.container-fluid .grid .TextPlaat, .container-fluid .grid .container .row .col-md-12 {margin-bottom: 0px !important;}
.container-fluid #row11 .container .row .col-md-12 {padding: 0!important;}

#row11 .row,
#row12 .row,
#row13 .row {display: block; flex-wrap: inherit; padding-top: 30px; padding-bottom: 30px;}
.container-fluid .grid .ListB .col-md-6.margin-0-tb {margin-bottom: 5px !important;}
.container-fluid .grid .container .row .col-md-6:last-child {margin-bottom: 5px !important;}
#row7R ul li:nth-child(4),#row7R ul li:nth-child(5) {display: none;}
.container-fluid .grid .container .row .col-md-12:first-child {left: 0px!important;}
#row6 p, h3, .container-fluid #row12 p.Large, .container-fluid ul.Large, .container-fluid ol.Large {text-align: left;}
#row9 img, #row8 img {width:50%; margin:0 auto; display: block;}
.container-fluid .Hero-custom .card-img-tint.card-img-hero-tint.dls-black-bg {background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !important;}
.container-fluid #row11 .table, .container-fluid #row11 .table td, .container-fluid #row11 .table thead th  {text-align: center!important; font-size: 10px!important; line-height: 14px!important;}
.container-fluid #row11 .table td:first-child  {text-align: left!important; }
#row11 {padding:0px 0px;}
#row11 .pad {padding:0px!important;}
.container-fluid #row7 ul li {padding: 10px 0px 10px 0px;}
.container-fluid .grid #row7 .container .row .col-md-12,
.container-fluid .grid #row8 .container .row .col-md-12,
.container-fluid .grid #row9 .container .row .col-md-12,
.container-fluid .grid #row13 .container .row .col-md-12,
.container-fluid .grid #row15 .container .row .col-md-6 {padding: 5px!important;}
.container-fluid .grid #row15 .container .row .col-md-6 p {text-align: left!important;}
.container-fluid .grid #row15 .container .row .col-md-12 {padding: 0 !important;}
.container-fluid h3 {font-size: 28px !important;line-height: 34px !important;}
.container-fluid .grid #row17 .container .row .col-md-12 {padding: 0 !important;}
.container-fluid .grid #row17 h3.body-1{line-height:21px!important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:577px) and (max-width:768px) {
.container-fluid #row7 .button.parbase {margin-bottom: 60px;}
.container-fluid .grid .TextPlaat, .container-fluid .grid .container .row .col-md-12 {margin-bottom: 0px !important;}
.container-fluid #row11 .container .row .col-md-12 {padding: 0!important;}
#row11 .row,
#row12 .row,
#row13 .row {display: block; flex-wrap: inherit; padding-top: 30px; padding-bottom: 30px;}
.container-fluid .grid .ListB .col-md-6.margin-0-tb {margin-bottom: 5px !important;}
.container-fluid .grid .container .row .col-md-6:last-child {margin-bottom: 5px !important;}
#row7R ul li:nth-child(4),#row7R ul li:nth-child(5) {display: none;}
.container-fluid .grid .container .row .col-md-12:first-child {left: 0px!important;}

  .container-fluid .Hero-custom .card-img-tint.card-img-hero-tint.dls-black-bg {background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !important;}
.container-fluid #row11 .table, .container-fluid #row11 .table td, .container-fluid #row11 .table thead th  {text-align: center!important; font-size: 10px!important; line-height: 14px!important;}
.container-fluid #row11 .table td:first-child  {text-align: left!important; }
#row11 {padding:0px 0px;}
#row11 .pad {padding:0px!important;}
.container-fluid #row7 ul li {padding: 10px 0px 10px 0px;}
.container-fluid .grid #row7 .container .row .col-md-12,
.container-fluid .grid #row8 .container .row .col-md-12,
.container-fluid .grid #row9 .container .row .col-md-12,
.container-fluid .grid #row13 .container .row .col-md-12,
.container-fluid .grid #row15 .container .row .col-md-6 {padding: 5px!important;}
.container-fluid .grid #row15 .container .row .col-md-6 p {text-align: left!important;}
.container-fluid .grid #row15 .container .row .col-md-12 {padding: 0 !important;}
.container-fluid h3 {font-size: 28px !important;line-height: 34px !important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {
.container-fluid .grid .ListB .thumb h4.display-block .icon {width: 50%; display:block !important;}
.container-fluid .grid .ListB .thumb h4.display-block {font-size: 12px !important; line-height: 18px!important; }
.container-fluid .grid .ListB .col-md-6.margin-0-tb {margin-bottom: 30px !important;}
.container-fluid .Hero-custom .card-img-tint.card-img-hero-tint.dls-black-bg {background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
.container-fluid .grid .ListB .thumb h4.display-block .icon {width: 50px;}
.container-fluid .grid .ListB .thumb h4.display-block {font-size: 12px !important; line-height: 18px!important; }
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {}

/* -------------------------------------------------------------------------------------------- */
/* -- PromotionBannerA ------------------------------------------------------------------ JE -- */
/* -------------------------------------------------------------------------------------------- */
.PromotionBannerA{
  --_accentColor:#1D286E;
  background-color:var(--_accentColor);
  padding-block: var(--Sz1);
  color:#ffffff;
}

.PromotionBannerA .row > .col-md-12 > div{
  --_flexOffset:var(--Sz2);
  display: flex;
  gap:var(--Sz2);
  flex-wrap:wrap;  
}

.PromotionBannerA .image{
  flex: 1 1 calc(33% - var(--_flexOffset));
  min-width: 270px;
}

.PromotionBannerA .richtext{
  flex: 1 1 calc(66% - var(--_flexOffset));
}

.PromotionBannerA .richtext .DoubleSection{
  display: flex;
  margin-bottom: var(--Sz0);
  max-width: 100%;
  flex-wrap: wrap;
}

.PromotionBannerA .richtext .DoubleSection > div{
  display: grid;  
  direction: column;
  flex:0 0 50%;
  max-width: 50%;
}

.PromotionBannerA .richtext .DoubleSection > div:first-child{
  padding-right:var(--Sz0);  
  border-right: 1px solid #ffffff;  
}

.PromotionBannerA .richtext .DoubleSection > div:last-child{
  padding-left: var(--Sz0);  
}

@media(width <= 900px) {
  .PromotionBannerA .richtext .DoubleSection > div{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .PromotionBannerA .richtext .DoubleSection > div:first-child{
    padding-right:0;
    border-right: none;
    padding-bottom: var(--Sz0);
    margin-bottom: var(--Sz0);
    border-bottom: 1px solid #ffffff;
  }
  .PromotionBannerA .richtext .DoubleSection > div:last-child{
    padding-left: 0;
  }
}

.PromotionBannerA .richtext .highlight{
  font-size: 3.6rem!important;
  line-height:1.1!important;
  font-weight:bold;
  margin-bottom: 0;
}

.PromotionBannerA .richtext .subHighlight{
  font-size: 2.6rem!important;
  line-height:1.1!important;
  font-weight:bold;
}

.PromotionBannerA .richtext .button{
  margin-bottom:0;
  align-self: end;
  max-width:fit-content;
}

.PromotionBannerA .richtext .button > a{
  padding: var(--Sz01) var(--Sz0);
  color:#ffffff;
  background-color: var(--LightBlue);
  border: 2px solid var(--LightBlue);
  border-radius: var(--BrSmall);
  transition: var(--an1);
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.PromotionBannerA .richtext .button > a:hover{
  transition: var(--an1);
  background-color:transparent;
  border-color:#ffffff;
}

.PromotionBannerA .WhiteBorder{
  padding:var(--Sz01);
  border: 2px solid white;
  width:max-content;
}