/* content - dam - amex - be - nl - kaarten - blue-kaart - v4 - custom.css */

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


/* CUSTOM */
.Hero-custom .card-img-bg {background-position: 50% 20% !important;}
.container-fluid .ShopBar {bottom: -140px; transition: bottom 0.5s ease-in-out;}
.container-fluid .ShopBar.active {bottom: 0px;}
#amex-footer {margin-bottom: 6rem!important;}
#BlueKaartSinds1850 {position: relative;} #Sinds1850 .row {position: relative; z-index: 2;} 
#BlueKaartSinds1850::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;}
#BlueKaartTijdperk {position: relative; padding-bottom: calc(var(--Sz1) + var(--Sz1)) !important;} 
#BlueKaartTijdperk .row {position: relative; z-index: 2;} 
#BlueKaartTijdperk::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;} 
#BlueKaartTijdperk::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;}
#BlueKaartStappen .IconBox {width: 100px; height: 100px; border-radius: 100px; display: flex; align-items: center; overflow: hidden; margin: 0 auto; margin-bottom: var(--Sz0);} 
#BlueKaartStappen .IconBox .icons.parbase div {transform: scale(0.9);}

/* -- BANNERC -- */
.BannerC .image {animation: flip 8s ease-out infinite; overflow: hidden;}
@keyframes flip {0% {transform: perspective(600px) rotateY(-2deg);} 50% {transform: perspective(600px) rotateY(10deg);} 100% {transform: perspective(600px) rotateY(-2deg);}}

/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    #BlueKaartStappen .IconBox .icons.parbase div {transform: scale(0.9) translateY(-14px) translateX(-4px);} .Hero-custom {margin-bottom: var(--Sz2) !important;} #IntroScroll {margin-bottom: var(--Sz1);} 
    #BlueKaartVoordelen {margin-bottom: calc(0px - var(--Sz3));} 
    #BlueKaartJuridischeInformatie {margin-top:  calc(0px - var(--Sz2) );} 
    #BlueKaartExperiencesApp { margin-top: var(--Sz04); margin-bottom: var(--Sz04);} 
    #BlueKaartBetalenWordtBelonen, #BlueKaartBetalenInWinkels, #BlueKaartGeboorte {padding-top: 0 !important; padding-bottom: 0 !important;} 
    #BlueKaartVerzekeringen, #BlueKaartTijdperk {padding-top: 0 !important;} 
    #BlueKaartBestellen {padding-bottom: 0 !important;} 
    #BlueKaartVraagAan h2 {text-align: center;}
    #BlueKaartStappen { 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) {}
/* --------------------------------------------------------------------------------------------------------- */