/* content - dam - amex - nl-nl - campagnes - the-platinum-card - custom.css */

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

/* --------------------------------------------------- */
/* -- Custom Campagne CSS ---------- 070923 -- JE ---- */
/* --------------------------------------------------- */
:root{
    --fade: transform, opacity 700ms ease-in-out;
    --scale:1;
    --font--scale:1;
}

@media(width <= 1280px) {
    :root{
         --font--scale:.7;
    }
}

@media(width <= 769px) {
    :root{
        --scale:.7;
        --font--scale:.55;
    }
}

#amex-header{
    position: absolute;
}

#axp-global-header__GlobalHeader__skipToContent___1Y6sO{
    opacity:0;
}

/* -- Lift footer for floating CTA ------------------- */
#amex-footer {margin-bottom: 6rem!important}

/* -- Change overflow -------------------------------- */
.container-fluid{
    overflow: initial!important;
}
.row{
    margin-inline: auto !important;
}

/* Disable some default padding */
.scroll-guide .container:not(.showcase--container .container, .intro .container){
    max-width: 10000px;
    padding:0px!important;
    margin:0px!important;
}

.container-fluid .grid .scroll-guide .container .row .col-md-12:not(.intro .col-md-12){
  padding:0px 0px 0px 0px!important;
}

.container-fluid .grid .scroll-guide .container .row .col-md-12:not(.intro .col-md-12){
  padding:0px!important;
  left: 0px!important;
  margin-bottom:0px!important;
}

/* -- Font sizing -- */
.container-fluid h1{
    font-size: calc(3rem * var(--font--scale))!important;
}

.container-fluid h2{
    font-size: calc(2.8rem * var(--font--scale))!important;
    line-height: 1.1!important;
}

.container-fluid .ListE h2{
    font-size: calc(2rem * var(--font--scale))!important;
    line-height: 1.1!important;
}

.container-fluid h3{
    font-size: calc(2.4rem * var(--font--scale))!important;
}

/* --------------------------------------------------- */
/* -- Custom Hero ------------------------------------ */
.campagne--hero{
    min-height:100vh;
    display: flex;
    align-items: stretch;
}

@media(width <= 769px) {
    .campagne--hero .container{
        padding-top:var(--Sz4);
    }
}

.campagne--hero .container{
    min-height: 100%!important;
    max-height: 100%;
    display: flex;
    align-items: stretch;
}

.campagne--hero .row{
    align-items: flex-start;
    padding-bottom: 0px;
}
.campagne--hero .col-md-6:first-child{
    align-self: center;
}
.campagne--hero .col-md-6:last-child{
    position: sticky!important;
    top:30vh;
    padding-left:var(--Sz4)!important;
    transform: translateY(150px)
}

@media(width <= 769px) {
    .campagne--hero .col-md-6:last-child{
        position: relative!important;
        top:0;
        transform: translateY(0px)!important;
        padding-right:var(--Sz4)!important;
    }
    
    .campagne--hero .card-img-bg{
        background-position: 70% 50%;
    }

    .campagne--hero .hidden-md-up::before{
        position:absolute;
        inset:0;
        content:'';
        width:100%; height:100%;
        background-color:rgba(0,0,0,.4)
    }
}

.campagne--hero .image img{
    box-shadow: none!important;   
}

.campagne--hero .image{
     max-width: 70vw!important;
}

/* -- Nick Bril profile ------------------------------ */
.nb--profile{
    --_border--size:2px;
    --_border--color:white;
    position: absolute;
    top:80px;
    right:20px;
    z-index: 10;
    display: flex;
    align-items:center;
    cursor: pointer;
}

.nb--label{
    color:white;
    padding: var(--Sz01) var(--Sz0);
    border:var(--_border--size) solid var(--_border--color);
    border-radius: 100px 0px 0px 100px;
    position: relative;
    right:-5px;
    transition:var(--an1);
}

.nb--label span{
    position: relative;
}
.nb--label span::before{
    position: relative;
    display: inline-block;
    content:'';
    width:10px;
    height:10px;
    margin-right:var(--Sz01);
    transform: rotate(45deg);
    border-right: var(--_border--size) solid var(--_border--color);
    border-top: var(--_border--size) solid var(--_border--color);
    transition:var(--an1);
}

.nb--profile--pic{
    transition:var(--an1);
    max-width: calc(100px * var(--scale));
    border-radius: 100%;
    overflow: hidden;
    aspect-ratio: 1;
    z-index: 2;
    outline:var(--_border--size) solid var(--_border--color);
}

.nb--profile--pic img{
    transition:var(--an1);
    scale: 1.1;
}

.nb--profile:hover img{
    transition:var(--an1);
    scale: 1.2;
}

.nb--profile:hover{
    --_border--color: #333;
}

@media(width <= 769px) {
    .nb--label{
        display: none;
    }
}

/* --------------------------------------------------- */
/* -- Nick Bril Modal -------------------------------- */

.ModalCustom#nickModal{
    background: rgba(38, 21, 31, 0.8)!important;
}

.ModalCustom#nickModal .quote{
    position: relative;
    max-width:90ch;
    margin-inline:auto;
    padding:var(--Sz1);
    background-color: #ececec;
    margin-block:var(--Sz0);
    border-radius: var(--BrSmall);
    box-shadow: var(--SmallBoxShadow);
}

.ModalCustom#nickModal .quote::before{
    quotes:  "“" "”" "‘" "’";
    position: absolute;
    top:-40px;
    left: 20px;
    padding:50px 20px 50px 15px;
    border-radius: 100px;
    content:open-quote;
    font-family:Times new roman;
    color:#333;
    background-color:#ececec;
    display: grid;
    place-items: center;
    font-size: 100px;
    letter-spacing: -5px;
}

.ModalCustom#nickModal .quote .row{
    transform: translateX(0px);
}

.ModalCustom#nickModal .quote .richtext, .ModalCustom#nickModal .quote p{
    padding-inline:var(--Sz01);
    margin:0;
    padding-block:0;
    font-size:calc(1.4rem * var(--scale))!important;
}

@media(width <= 769px) {
    .ModalCustom#nickModal .quote{
        margin-top:var(--Sz2);
    }
}

/* --------------------------------------------------- */
/* -- Video Modals ----------------------------------- */

.ModalCustom.vidModal .ModalContent{
    height:auto;
    width: 70%;
}

.vidModal .video.parbase{
    margin-bottom:0!important;
}

.ModalCustom.vidModal .ModalContent .container .videoModalWrapper .row{
    padding: 0!important;
    margin:0!important;
}

.ModalCustom.vidModal .ModalContent .container .videoModalWrapper .row .col-md-12{
    left:0!important;
}

.ModalContent .video-player{
    padding-bottom:100%!important;
}

/* --------------------------------------------------- */
/* -- Showcase --------------------------------------- */

/* -- Showcase items --------------------------------- */
.showcase--item{
    display:flex;
    align-items:center;
}

.container-fluid .grid .showcase--item.TextPlaat{
    margin-bottom: 0px!important;
}

.showcase--item{
    scroll-snap-align: start;
    padding-block:calc(var(--Sz3) * var(--scale));
}

.showcase--item .image{
    position: relative;
}

.showcase--container .grid:last-of-type .showcase--item{
    padding-bottom:calc(var(--Sz5) * 1.5);
}

@media(width <= 769px) {
    .showcase--item{
        padding-block:0px!important;
    }
}

/* -- Add style elements ----------------------------- */
.showcase--container{
    overflow-x:hidden!important;
    overflow-y:hidden;
    position: relative;
}

.showcase--container #itemTwo::after{
    left: 70%;
    top:5%;
    height:60%;
    width:100%;
    position: absolute;
    content: '';
    background-color:var(--LightBlue);
    z-index: -1;
    mask-image: url(/content/dam/amex/nl/assets/bubl/img/AmexWaterMark.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: top left;
    -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/AmexWaterMark.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: top left;
}


.showcase--container #itemThree::after{
    right: 70%;
    top:5%;
    height:60%;
    width:60%;
    position: absolute;
    content: '';
    background-color:#ececec;
    z-index: -1;
}

.showcase--container #itemFive::after{
    right: 50%;
    top:5%;
    height:50%;
    width:100%;
    position: absolute;
    content: '';
    background-color:#ececec;
    z-index: -1;
}

.showcase--container #itemFour::after{
    left: 60%;
    top:5%;
    height:30%;
    width:100%;
    position: absolute;
    content: '';
    background-color:var(--LightBlue);
    z-index: -1;
    mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: top left;
    -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: top left;
}


@media(width <= 768px) {
    .showcase--container #itemTwo::after,
    .showcase--container #itemThree::after,
    .showcase--container #itemFive::after{
        inset:0;
        width: 200%;
        top:0;
        left:-30px;
        height: 40%;
    }
}

/* --------------------------------------------------- */
/* -- Animations ------------------------------------- */

/* -- Fade in ---------------------------------------- */
.showcase--item.JSpassed .col-md-6, .showcase--item.JSpassed .col-md-4{
    transition:var(--fade); 
    opacity:0; transform:translateY(80px); 
    -webkit-transform: translateY(80px);
    animation-name: fade-out; 
    animation-fill-mode:forwards;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
}

.showcase--item.JSpassed.isAnimated .col-md-6, .showcase--item.JSpassed.isAnimated .col-md-4{
    transition:var(--fade); 
    animation-name: fade-up; 
    animation-fill-mode:forwards; 
    animation-timing-function: ease-in-out;
    animation-duration: 500ms;
}

.showcase--item.JSpassed.isAnimated .col-md-6:nth-child(2), .showcase--item.JSpassed.isAnimated .col-md-4:nth-child(2){
    animation-delay: 300ms;
}

.showcase--item.JSpassed.isAnimated .col-md-4:nth-child(3){
    animation-delay: 600ms;
}

@media(width <= 769px) {
   .showcase--item.JSpassed.isAnimated .col-md-6:nth-child(2){
       animation-delay:0ms;
   }

    .showcase--item.JSpassed.isAnimated .col-md-6:nth-child(1){
       animation-delay:300ms;
   }
}

@keyframes fade-up {
    0%{opacity:0; transform:translateY(80px); -webkit-transform: translateY(80px);}
    100%{opacity:1;transform:translateY(0); -webkit-transform: translateY(0);}
}

@keyframes fade-out {
    0%{opacity:1; transform:translateY(0); -webkit-transform: translateY(0);}
    70%{opacity:0; transform:translateY(0); -webkit-transform: translateY(0);}
    100%{opacity:0; transform:translateY(80px); -webkit-transform: translateY(80px);}
}

/*!! If the user prefers no animations *******/
@media (prefers-reduced-motion: reduce) {
    .showcase--item.JSpassed .col-md-6, .showcase--item.JSpassed.isAnimated .col-md-6{
        animation: none!important;
        opacity:1!important;
        transform:translateY(0)!important;
        -webkit-transform: translateY(0)!important;
    }
}

/* -- Scroll guides ---------------------------------- */
.campagne--hero{
    --_size:80px;
    --_arrow--ofset:30px;
}

.campagne--hero::before{
    width:calc(var(--_size)/4.5);
    height:calc(var(--_size)/4.5);
    position:absolute;  
    content:'';
    left:0; right:0;
    margin-inline:auto;
    transform:rotate(45deg);
    top:calc(90svh - (var(--_arrow--ofset) - 30px));
    opacity:1;
    border-right: 4px solid white;
    border-bottom: 4px solid white;
    transition: all 30mms ease-in-out;
    animation: arrowTwo 2s infinite;
    z-index: 2;
    animation-delay: .25s
}

.campagne--hero::after{
    width:calc(var(--_size)/4.5);
    height:calc(var(--_size)/4.5);
    position:absolute;  
    content:'';
    left:0; right:0;
    margin-inline:auto;
    transform:rotate(45deg);
    top:calc(90svh - (var(--_arrow--ofset) - 30px));
    opacity:1;
    border-right: 4px solid white;
    border-bottom: 4px solid white;
    transition: all 30mms ease-in-out;
    animation: arrow 2s infinite;
}

@keyframes arrow{
  0%{
    top:calc(90svh - (var(--_arrow--ofset) - 10px));
    opacity:0;
  }
  50%{
    top:calc(90svh - (var(--_arrow--ofset) - 25px));
    opacity:1;
  }
  90%{
    top:calc(90svh - (var(--_arrow--ofset) - 50px));
    opacity: 0;
  }
  100%{
    top:calc(90svh - (var(--_arrow--ofset) - 10px));
    opacity:0;
  }
}

@keyframes arrowTwo{
  0%{
    top:calc(90svh - (var(--_arrow--ofset) + 10px));
    opacity:0;
  }
  40%{
    top:calc(90svh - (var(--_arrow--ofset) - 5px));
    opacity:1;
  }
  90%{
    top:calc(90svh - (var(--_arrow--ofset) - 30px));
    opacity: 0;
  }
  100%{
    top:calc(90svh - (var(--_arrow--ofset) + 10px));
    opacity:0;
  }
}

/*!! If the user prefers no animations *******/
@media (prefers-reduced-motion: reduce) {
    .campagne--hero::before, .campagne--hero::after{
        animation: none!important;
        opacity:1!important;        
    }
}

@media(width <= 769px) {
    .campagne--hero::after, 
    .campagne--hero::before{
        right:20px;
        left:auto;
    }
}

/* --------------------------------------------------- */
/* -- Aanvraag stappen ------------------------------- */
.Stappen{
    padding-block:calc(var(--Sz2) * var(--scale));
}



.Stappen .col-md-2{
    flex: 1 1 20%!important;
    max-width: max-content;
}

@media(width <= 769px) {
    .Stappen .col-md-2{
        flex: 0 0 50%!important;
        max-width:50%;    
    }
}

@media(width <= 469px) {
    .Stappen .col-md-2{
        flex: 0 0 100%!important;
        max-width:100%;    
    }
}

.Stappen .col-md-2 > .grid{
    min-width:200px;
}

.Stappen h4{
    font-size: calc(1.6rem * var(--font--scale))!important;
    color:#00175a;
}

.Stappen .IconBox{
    margin-bottom: var(--Sz0);
    margin-inline: auto;
    aspect-ratio: 1;
    border-radius: 1000px;
    width:100px;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.Stappen .IconBox .col-md-12, .Stappen .IconBox .container{
    padding:0px!important;
    left: 0!important;
    margin-bottom: 0px!important;
}

.container-fluid .grid .IconBox .container .row .col-md-12{
    padding:0px!important;
}

.container-fluid .grid .IconBox .container .row .col-md-12{
    margin-bottom: 0px!important;
}

.Stappen .IconBox .icon{
    scale: .8;
}

.Stappen p{
    font-size:14px!important;
    color:gray;
    text-wrap: balance;
}

/* -- Floating CTA ----------------------------------- */
.ShopBar.down{
    transform: translateY(100%);
    transition: var(--an1);
}

.ShopBar{
    transform: translateY(0%);
    transition: var(--an1)!important;
    background: color-mix(in oklab, #ececec 90%, var(--LightBlue))!important;  
}

/* --------------------------------------------------- */
/* -- General styling -------------------------------- */
.Terms{padding-block:calc(var(--Sz4) * var(--scale))}
.ListE, .benefitsIntro{
    background-color: rgb(236, 237, 238);
}
.container{
    width:100%;
}

/* -- Buttons ---------------------------------------- */
.button--container{
    margin-top:var(--Sz0);
    display:flex;
    align-items: stretch;    
    gap:var(--Sz0);
}

.button--container p{
    margin-bottom: 0px;
}

.button--container i svg{
    transition: var(--an1);
    width:40px;
    height:40px;
}

.button--container i{
    position: relative;
    background-color:white;
    border: 2px solid var(--LightBlue);
    padding-inline:1.5rem;
    border-radius: var(--BrSmall);
    cursor: pointer;
}

.button--container i::after{
    position: relative;
    display: inline-flex;
    content: 'Video';
    padding-inline:var(--Sz01);
    font-size: 17px;
    font-style: normal;
}

/* --------------------------------------------------- */
/* -- Shining ---------------------------------------- */
.BannerC ul.Check li {display: inline-block; font-size:13px; padding:14px 0px; border-bottom:1px solid #ccc;}
.BannerC ul.Check li::before {background-image: none;}

.BannerC .image {
    animation: flip 8s ease-out infinite;
    overflow: hidden;
}

@keyframes flip {
    0% {
        transform: perspective(600px) rotateY(-2deg) translateZ(0px);
    }

    50% {
        transform: perspective(600px) rotateY(10deg) translateZ(0px);
    }

    100% {
        transform: perspective(600px) rotateY(-2deg) translateZ(0px);
    }
}

.BannerC .image::after {
    content: ' ';
    position: absolute;
    height: 300%;
    width: 300%;
    top: 0px;
    left: 0px;
    z-index: 2;
    -webkit-animation: moveafter 4s infinite linear;
    -moz-animation: moveafter 4s infinite linear;
    animation: moveafter 4s infinite linear;
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(55%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

/*-- Shine animation --*/
@-webkit-keyframes moveafter {
    0% {top: -200%; left: -200%;}
    50% {top: -100%; left: -100%;}
    100% {top: 100%; left: 100%;}
}

.container-fluid .campagne--hero .row .col-md-6:last-child .image {
    overflow: hidden!important; 
    position: relative;
    filter: drop-shadow(var(--BoxShadow));
    -webkit-filter: drop-shadow(var(--BoxShadow));
}

.container-fluid .campagne--hero .row .col-md-6:last-child .image::after {
    content: ' ';
    position: absolute;
    height: 300%;
    pointer-events: none;
    width: 300%;
    top: 0px;
    left: 0px;
    z-index: 2;
    -webkit-animation: moveafter 4s infinite linear;
    -moz-animation: moveafter 4s infinite linear;
    animation: moveafter 4s infinite linear;
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(55%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -- Webkit fixes for *SAFARI ONLY* Only use when flip animation is used on page ---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -- Fix for ShopBar overlap -------------------------------------------------------------------------------------------------------------------------- */
    .container-fluid .ShopBar.down {-webkit-transform: translateZ(400px) translateY(100%);} 
    .container-fluid .ShopBar {-webkit-transform: translateZ(400px) translateY(0%);} 
/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -- Fix for Modal overlap ---------------------------------------------------------------------------------------------------------------------------- */
    .container-fluid .ModalCustom.Open {-webkit-transform: translateZ(400px);} 
/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -- Fix for Amex floating header overlap ------------------------------------------------------------------------------------------------------------- */
    .axp-global-header__dls-module__module___1_EeR .axp-global-header__dls-module__nav___9Aq3L, 
    .axp-global-header__dls-module__module___1_EeR .axp-global-header__dls-module__navMenu___2v96a{-webkit-transform: translateZ(400px);} 
/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -- End of Webkit fixes for *SAFARI*  ---------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */