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

/* ----------------------------------------------------------- */
/* -- Custom CSS Compare ES ------- JE - V2 - 30-03-23 ------- */
/* ----------------------------------------------------------- */

/* ----------------------------------------------------------- */
/* -- General styles ----------------------------------------- */
.Hero-custom{padding-bottom:var(--Sz0)!important}
.cards-overview .row, .final-card-overview .row{flex-wrap: nowrap!important;}
.cards-overview .row .col-md-6, .final-card-overview .row .col-md-6{flex:1 1 50%;}
#terms .col-md-12{margin-bottom: 0px!important;}
@media (max-width:1023px) {
  .Hero-custom{padding-bottom:var(--Sz4)!important;}
}

/* -- Font sizing -------------------------------------------- */
.container-fluid h3{font-size:36px!important}
@media (max-width:767px){
  .final-card-overview h3{font-size:24px!important}
}

/* -- Card styling ------------------------------------------- */
@media(min-width:767px){.card-art{max-width:60%; }}
.card-art img{box-shadow:var(--NoBoxShadow)!important; filter: drop-shadow(var(--BoxShadow)); -webkit-filter: drop-shadow(var(--BoxShadow))}

/* ----------------------------------------------------------- */
/* -- First overview ----------------------------------------- */
.cards-overview{margin-top:-200px;}

/* -- Font sizing -------------------------------------------- */
.container-fluid .cards-overview h2{font-size:24px!important;}
@media (max-width:767px) {
  .container-fluid ul, .container-fluid ol{font-size:14px!important;} 
}

/* -- Active state ------------------------------------------- */
.cards-overview.fix{--fixed-height:130px; position: fixed!important; height: var(--fixed-height); top:3.75rem; margin-top:0px; width:100%; z-index: 9; background-color:white; box-shadow:var(--BoxShadow);}

.cards-overview.fix .row{padding-block:var(--Sz0)!important;}
.cards-overview.fix .card-art{max-width:130px; margin-bottom: 0px!important;}
.cards-overview.fix .image{margin-bottom: var(--Sz0)!important;}

.cards-overview.fix .no-fix{display:none;}

.cards-overview.fix .col-md-6 > div{display: flex; gap:var(--Sz0); align-items: center;}
.cards-overview.fix h2{font-size: 18px!important; margin-bottom:var(--Sz03)}

@media (max-width: 767px) {
  .cards-overview.fix{--fixed-height:100px}
  .cards-overview.fix .row{padding-top:var(--Sz0)!important;}
  .cards-overview.fix h2{display:none}
  .cards-overview.fix .card-art{max-width:90px}
  .cards-overview.fix .col-md-6 > div{justify-content: center}
  .cards-overview.fix #btn{display: none;}
  .cards-overview.fix .card-art{position: relative;}
}

.compare-grid-wrapper{margin-top:28rem;}

/* ----------------------------------------------------------- */
/* -- Grid styling ------------------------------------------- */

/* -- Font sizing within the grid ---------------------------- */
.compare-grid-wrapper h3{font-size:32px!important;}
.compare-grid-wrapper h4{font-size:20px!important;}
@media only screen and (max-width: 767px) {
  .compare-grid-wrapper h4{font-size:16px!important; word-wrap: wrap; hyphens: auto;}
  .compare-grid-wrapper h3{font-size:20px!important;}
  .compare-grid-wrapper ul{font-size: 12px!important;}
  .compare-grid-wrapper p{font-size: 12px!important;}
  .compare-grid-wrapper ul li::before{transform: scale(.6)!important; top:2px!important;}
}

/* -- Icon adjustments --------------------------------------- */
.icon-flex{display:flex; gap:var(--Sz01); align-items: center;}
.icon-flex .icon-lg::before{font-size:2rem;}

/* -- Setting the grid --------------------------------------- */
.compare-grid-wrapper .compare-grid .col-md-12 > div {display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}

/* -- Styling of the subject blocks -------------------------- */
.compare-grid-wrapper .compare-grid{box-shadow: var(--SmallBoxShadow); margin-bottom:var(--Sz2)}

/* -- Styling of the cells ----------------------------------- */
.compare-grid-wrapper .compare-grid .col-md-12 > div .richtext{box-shadow: 0 0 1.5pt #ccc; padding: var(--Sz0) var(--Sz1); position: relative;}
@media (max-width: 767px) {
  .compare-grid-wrapper .compare-grid .col-md-12 > div .richtext {padding: var(--Sz01) var(--Sz0)}
}

/* -- Styling No -------------------------------------------- */
.compare-grid-wrapper .compare-grid .richtext > div{height:100%;}
.compare-grid-wrapper .compare-grid .no{position: relative; display: grid; place-items: center; height:100%;}
.compare-grid-wrapper .compare-grid .no p{display: none;}
.compare-grid-wrapper .compare-grid .no{mask-image: url('/content/dam/amex/nl/assets/bubl/img/NoGray.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: 10px; -webkit-mask-image: url('/content/dam/amex/nl/assets/bubl/img/NoGray.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 10px; background-color: red;}

/* -- Resetting unwanted padding ----------------------------- */
.compare-grid-wrapper .compare-grid .container {padding-inline:0;}
.compare-grid-wrapper .compare-grid .col-md-12 {padding-inline:0px!important; padding-left:var(--Sz0)!important;}

@media (max-width: 767px) {
 .container-fluid .compare-grid-wrapper .grid .container .row .col-md-12{margin-bottom:0px!important; padding-inline:0px!important; padding-left:var(--Sz0)!important;}
  .compare-grid-wrapper .compare-grid .row{margin-inline:-10px!important;}
  .container-fluid .grid .compare-grid-wrapper .container .row .col-md-12:not(.compare-grid .col-md-12) {padding-inline:0px!important; margin-left:10px;}
}

/* -- Colouring ---------------------------------------------- */
.compare-grid-wrapper {background-image: -webkit-linear-gradient(bottom, rgba(0, 111, 207, 0.25) 0%, rgba(0, 111, 207, 0) 100%); linear-gradient(bottom, rgba(0, 111, 207, 0.25) 0%, rgba(0, 111, 207, 0) 100%)}
.compare-grid-wrapper .compare-grid{background-color:white;}


/* ----------------------------------------------------------- */
/* -- Final overview ----------------------------------------- */
.final-card-overview{background-color: rgba(0, 111, 207, 0.25);}

/* ----------------------------------------------------------- */
/* -- buttons and links -------------------------------------- */
a{text-decoration: none!important;}
#btn{color:white!important; padding:.5125rem 1.275rem; background-color:var(--LightBlue); border-radius: .25rem; overflow: hidden; position: relative; text-align: center; text-overflow: ellipsis; transition: all .2s ease-in-out; border: 2px solid var(--LightBlue); box-sizing: border-box; font-weight:500; display:inline-block;}
#btn:hover{cursor:pointer; color:var(--LightBlue)!important; transition: all .2s ease-in-out; background-color:transparent;}
#arrow-link::after{content: ""; width: 18px; height: 14px; background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue1Right.svg"); display: inline-block; background-size: contain; background-position: center center; background-repeat: no-repeat; margin-left: var(--Sz02); transition: var(--an2); position: relative; top: 2px;}
#arrow-link:hover::after{background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue2Right.svg"); margin-left: var(--Sz01);}
#arrow-link:hover{color:#00175a;}