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

/* ------------------------------------------------------------------------- */
/* -- Custom CSS for ES Upgrade page -----------------08-11-22-------------- */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* -- CSS for the comapre table -!!----------------------------------------- */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* -- Placing items in grid ------------------------------------------------ */
.tabel-wrapper{display:grid; grid-template-columns: minmax(270px, 4fr) 5fr; pointer-events:none;}
/* ------------------------------------------------------------------------- */
/* -- Set border radius ---------------------------------------------------- */
.up-first{border-top-right-radius:20px; border-top-left-radius:20px;}
.down-first{border-top-left-radius:20px;}
.down-last{border-bottom-left-radius:20px;}
.up-last{border-bottom-right-radius:20px;}
/* ------------------------------------------------------------------------- */
/* -- Set table styles ----------------------------------------------------- */
.down-intro{background-color:transparent; box-shadow:none!important;}
.label{background-color:white; min-height:120px; box-shadow: 0 0 0 1pt #ccc; padding:20px 30px;}
/* ------------------------------------------------------------------------- */
/* -- Set title styles ----------------------------------------------------- */
.titel-wrapper{display:flex; justify-content:space-between; align-items:end; margin-top:25px;}
.product{color: #00175a; font-size:22px}
/* ------------------------------------------------------------------------- */
/* -- Set Card styles ------------------------------------------------------ */
.tabel-wrapper{position:relative; margin-top:var(--Sz5); margin-bottom:var(--Sz5);}
@media (max-width:500px) {.tabel-wrapper{margin-top:0; margin-bottom:0;}}
.tabel-wrapper .image-wrapper img{filter: drop-shadow(var(--BoxShadow)); margin-top:-80px; max-width: 50%;}
/* ------------------------------------------------------------------------- */
/* -- Less focus on the downgrade ------------------------------------------ */
.down:not(:first-child){text-align: end; background-color:#f2f2f2;}
.down .titel-wrapper{display:block; text-align: end;}
@media (max-width:768px) {.down:not(:first-child){text-align: start;}}
.down-intro{display:grid; align-content: end;}
.tabel-wrapper .down-intro .image-wrapper{display: flex; justify-content: end; align-items: flex-end;}
/* ------------------------------------------------------------------------- */
/* -- More focus on the upgrade -------------------------------------------- */
.label{position: relative;}
.up:not(.up-intro)::before{position: absolute; content:''; height:100%; width:2%; background-color:rgba(0, 0, 0, 0.15); left:-3%; top:0; filter: blur(20px); z-index: 1;}
.up::after{position: absolute; content:''; height:100%; width:2%; background-color:rgba(0, 0, 0, 0.15); right:-3%; top:0; filter: blur(20px); z-index: -1;}
/* ------------------------------------------------------------------------- */
/* -- If the downgrade does not have the benefit --------------------------- */
.no{background-image:url('/content/dam/amex/nl/assets/bubl/img/NoGray.svg'); background-repeat:no-repeat; background-position: 92% 50%;}
/* ------------------------------------------------------------------------- */
/* -- Some padding adjustments --------------------------------------------- */
.titel-wrapper p{margin-bottom: var(--Sz08);}
@media (max-width:500px) {.upgrade-tabel .pad-3-t {padding:0!important;}}
@media (max-width:500px) {.upgrade-tabel {padding:0!important;}}
/* ------------------------------------------------------------------------- */
/* -- Mobile overflow ------------------------------------------------------ */
@media (max-width:768px) and (min-width:500px) {
  .Up .tabel-wrapper{transform: translateX(-55%); transition:var(--an1)}
  .Down .tabel-wrapper{transform: translateX(35%); transition:var(--an1)}
}
@media (min-width:431px) and (max-width:500px) {
  .Up .tabel-wrapper{transform: translateX(-45%) scale(.8); transition:var(--an1)}
  .Down .tabel-wrapper{transform: translateX(25%) scale(.8); transition:var(--an1)}
}
@media (min-width:390px) and (max-width:431px) {
  .Up .tabel-wrapper{transform: translateX(-60%) scale(.8); transition:var(--an1)}
  .Down .tabel-wrapper{transform: translateX(25%) scale(.8); transition:var(--an1)}
}
@media (min-width:345px) and (max-width:390px) {
  .Up .tabel-wrapper{transform: translateX(-70%) scale(.7); transition:var(--an1)} 
  .Down .tabel-wrapper{transform: translateX(15%) scale(.7); transition:var(--an1)}
  .upgrade-tabel{margin-top:-170px}
}
@media (max-width:345px) {
  .Up .tabel-wrapper{transform: translateX(-84%) scale(.7); transition:var(--an1)} 
  .Down .tabel-wrapper{transform: translateX(15%) scale(.7); transition:var(--an1)}
  .upgrade-tabel{margin-top:-170px}
}
@media (max-width:768px) {
  .upgrade-tabel.Up .card-img-bg::before{position: absolute; content:''; height:90%; width:5%; background:gray; top:5%; left:0; z-index:50; filter:blur(100px)}
  .upgrade-tabel.Down .card-img-bg::before{position: absolute; content:''; height:90%; width:5%; background:gray; top:5%; right:0; z-index:50; filter:blur(100px)}
}
/* ------------------------------------------------------------------------- */
/* -- Styling of the switch buttons ---------------------------------------- */
@media (max-width:768px){
  .switch-button{background-color:var(--LightBlue); position: fixed; top:40vh; width:40px; height:60px; z-index:200; cursor: pointer; transition: var(--an1)}
  .switch-button:hover{background-color:#00175a; transition: var(--an1)}
  .switch-button::before{content: ''; height: 20px; width: 20px; position: absolute; z-index: 500; top: 20px; opacity: 1; border-top: 5px solid #fff; border-left: 5px solid #fff; pointer-events: all; transition: var(--an1);}
  .switch-button.switch-down{left:-40px; border-top-right-radius:10px; border-bottom-right-radius:10px; transition: var(--an1)}
  .switch-button.switch-down::before{transform: rotate(-45deg); right: 5px;}
  .switch-button.switch-up{right:-40px; border-top-left-radius:10px; border-bottom-left-radius:10px; transition: var(--an1)}
  .switch-button.switch-up::before{transform: rotate(135deg); right: 10px;}
  .switch-button.switch-up{opacity:0; right:-40px; transition: var(--an1)}
  .switch-button.switch-down{opacity:0; left:-40px; transition: var(--an1)}
  .upgrade-tabel.Switch-active .switch-button{opacity:1; transition: var(--an1);}
  .upgrade-tabel.Switch-active .switch-button.switch-up.active{right:0; transition: var(--an1);}
  .upgrade-tabel.Switch-active .switch-button.switch-down.active{left:0; transition: var(--an1);}
}
/* ------------------------------------------------------------------------- */
/* -- Webkit fixes --------------------------------------------------------- */
.upgrade-tabel .card-img-bg::before, .up:not(.up-intro)::before, .up::after, .tabel-wrapper .image-wrapper img{-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0);}
.tabel-wrapper .down-intro .image-wrapper{-webkit-align-items: flex-end; -webkit-justify-content: flex-end;}
/* ------------------------------------------------------------------------- */
/* -- End CSS for the comapre table -¡¡------------------------------------- */
/* ------------------------------------------------------------------------- */


/* -- CardShine animation -------------------------------------------------- */
.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);
    }
}
.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 */
}

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

/* -- Hero CardShine animation --------------------------------------------- */

.container-fluid .Hero-custom .row .col-md-6:last-child .image{
    overflow: hidden!important;
    border-radius: var(--BrSmall);
    box-shadow: var(--BoxShadow);
}

.container-fluid .Hero-custom .row .col-md-6:last-child .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 */
}

/* -- MR Comparison -------------------------------------------------------- */
@media (min-width:768px){
#MR-compare .col-md-6{background-color:white; border-radius: var(--BrBig); padding:var(--Sz1)}
#MR-compare .col-md-6:last-child{position: relative; box-shadow: var(--SmallBoxShadow)}
#MR-compare .col-md-6:last-child::before{content: ''; position: absolute; bottom: 50px; right: 0; width: 100%; height: 100%; background: var(--LightBlue); -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 120%; mask-repeat: no-repeat; mask-size: 120%; -webkit-mask-position: right bottom; mask-position: right bottom;}
}

@media (max-width:768px){#MR-compare-intro.Sz3Top{padding-top: 0!important;} .App{margin-top:0!important;} #MR-compare .col-md-6{background-color:white; border-radius: var(--BrBig); padding:var(--Sz2)!important;} .col-md-6:last-child{order:1!important;} .col-md-6:first-child{order:2!important; margin-top:var(--Sz2)!important;} .col-md-6:first-child ul{font-size: 14px!important;}}

/* -- Shopbar -- */
.container-fluid .ShopBar.down {
    transition: 0.5s ease-out;
    transform: translateY(140px);
}
.container-fluid .ShopBar {
    transition: 0.5s ease-in;
    transform: translateY(0px);
}

/* -- Mobile optimaisations -- */
@media (max-width:768px){.container-fluid .Hero-custom{padding-bottom: var(--Sz1); margin-bottom: var(--Sz2);} .container-fluid .App .container .row .col-md-6:last-child{text-align: left;}}