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

/* Laatste update: 6 oktober 2022 */

.container-fluid .ShopBar {bottom: -140px; transition: bottom 0.5s ease-in-out;}
.container-fluid .ShopBar.active {bottom: 0px;}
#amex-footer {margin-bottom: 6rem!important;}

#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) {}

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