/* CSS Document */
/* CSS Document - Brussels Airlines Preferred Kaart - BE */

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


/* CSS Custom below*/

/* sticky CTA */
.container-fluid .ShopBar {
    bottom: -140px;
     transition: bottom 0.5s ease-in-out;
}
.container-fluid .ShopBar.active {
    bottom: 0px;
}

/* CSS Sebas Custom below*/


#JuridischeInfo {position: relative;} #JuridischeInfo .row {position: relative; z-index: 2;} #JuridischeInfo::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 50%; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 1;}

/* ------------------------------------------------------------------------------------------------------------------- */

#Sinds1850 {position: relative;} #Sinds1850 .row {position: relative; z-index: 2;} #Sinds1850::before {content: ''; position: absolute; top: 0; left: 0; right:0; width: 100%; height: 100%; z-index: 1; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); mix-blend-mode: overlay;opacity: 0.7;}

/* ------------------------------------------------------------------------------------------------------------------- */

#Tijdperk {position: relative; padding-bottom: calc(var(--Sz1) + var(--Sz1)) !important;} #Tijdperk .row {position: relative; z-index: 2;} #Tijdperk::before {content: ''; position: absolute; bottom: 0; right:0; width: 100%; height: 100%; z-index: 1; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); mix-blend-mode: overlay; opacity: 0.7;} #Tijdperk::after {content: ''; position: absolute; bottom: 0; right:var(--Sz2); width: 90%; height: 100%; background: white; z-index: 1; -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/Florish.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/Florish.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; mask-repeat: no-repeat; mask-size: 100%;   -webkit-mask-position: right bottom; mask-position: right bottom;}

/* --------------------------------------------------------------------------------------------------------- */

#Stappen .IconBox {width: 100px; height: 100px; border-radius: 100px; display: flex; align-items: center; overflow: hidden; margin: 0 auto; margin-bottom: var(--Sz0);} #Stappen .IconBox .icons.parbase div {transform: scale(0.9);}


/* --------------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {#Stappen .IconBox .icons.parbase div {transform: scale(0.9) translateY(-14px) translateX(-4px);} .Hero-custom {margin-bottom: var(--Sz2) !important;} #IntroScroll {margin-bottom: var(--Sz1);} #Voordelen2 {margin-bottom: calc(0px - var(--Sz3));} #JuridischeInfo {margin-top:  calc(0px - var(--Sz2) );} #ExperiencesApp { margin-top: var(--Sz04); margin-bottom: var(--Sz04);} #AwardmijlenSparen, #AwardmijlenUitgeven, #BijkomendeKaarten, #BetalenInWinkels, #Geboorte {padding-top: 0 !important; padding-bottom: 0 !important;} #Verzekeringen1, #Tijdperk {padding-top: 0 !important;} #AmericanPlatinumBestellen { padding-bottom: 0 !important;} #Vraagaan h2 {text-align: center;}#Stappen { padding-bottom: 0 !important; margin-bottom: calc(0px - var(--Sz0));}}

/* --------------------------------------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {}

/* --------------------------------------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {}

/* --------------------------------------------------------------------------------------------------------- */