/*-- gold-card-voordelen.css --*/
/*-- content/dam/amex/nl-be/voordelen/gold-card --*/
/*-- please check local version before editing --*/

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

/*-- modal-fix ovv klant --*/
.button{max-width:100%;}
.container-fluid .ModalContent .container .row .modal-two .col-md-12.margin-0-tb {padding-top: 0; padding-right: 12px !important; padding-bottom: 0; padding-left: 0; margin: 0 !important; position:relative;}
.container-fluid .ModalContent .btn span{overflow:hidden; text-overflow: ellipsis; max-width:100%; display: inline-block}

/*-- hero-styling --*/
.container-fluid .Hero-custom .row .col-md-6:last-child .image {border-radius:16px!important;}
.Hero-custom {margin-bottom: var(--Sz2)!important;}
.Hero-custom .card-img-bg {transform: rotateX(180deg);}
.Hero-custom .card-img-bg::before {transform: rotateX(180deg)}
#amex-footer {margin-bottom:6rem!important;}
@media (min-width: 1280px) {.Hero-custom .richtext {margin-bottom:5em;}
}

/*-- ListB styling --*/
.ListB .modal-hover::after {content: ''; color: #006fcf; display: inline-block; width: 17px; height: 17px; background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue1Right.svg"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: relative; top: 4px; margin-left: 10px; transition: 300ms ease-in-out;}
.container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover:hover .modal-hover::after {content: ''; color: #006fcf; display: inline-block; width: 17px; height: 17px; background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue1Right.svg"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: relative; top: 4px; margin-left: 15px; transition: 300ms ease-in-out;}

/*-- background colors --*/

/* --------------------------------------------------------------------------------------------------------- */
/* -- Gray Top fx ------------------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------- */
.GrayTop {background: linear-gradient(to bottom, #e3e3e3 0%, #fff 100%); padding: var(--Sz2) 0 var(--Sz01) 0;}
/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {.GrayTop {padding: 0;}}
/* --------------------------------------------------------------------------------------------------------- */
/* -- Gray Bottom fx --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------- */
.GrayBottom {background: linear-gradient(to top, #e3e3e3 0%, #fff 100%); padding: var(--Sz02) 0 var(--Sz1) 0;}
/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {.GrayBottom {padding: 0;}}
/* --------------------------------------------------------------------------------------------------------- */
/* -- Florish fx ------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------- */
.Florish {padding-bottom: var(--Sz2);} .Florish::before {content: ''; position: absolute; bottom: 0; width: 100%; height: var(--Sz4); background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); z-index: -2;} .Florish::after {content: ''; position: absolute; bottom: 0; right:var(--Sz2); width: 80%; height: 100%; background: var(--LightBlue); z-index: -3; -webkit-mask-image: url(https://origin-slgem.americanexpress.com/content/dam/amex/nl/assets/bubl/img/Florish.svg); mask-image: url(https://origin-slgem.americanexpress.com/content/dam/amex/nl/assets/bubl/img/Florish.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 90%; mask-repeat: no-repeat; mask-size: 90%;   -webkit-mask-position: right bottom; mask-position: right bottom;}
/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {.Florish {padding:  calc(var(--Sz2) - var(--Sz01))   0 var(--Sz01) 0;} .Florish::after {right:var(--Sz01); width: 100%; height: 100%; -webkit-mask-size: 100%;  mask-size: 100%; -webkit-mask-position: center bottom; mask-position: center bottom;}}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {.Florish {padding:  0 0 var(--Sz3) 0;} .Florish::after {right:var(--Sz0); width: 75%; height: 100%; -webkit-mask-size: 100%;  mask-size: 100%; -webkit-mask-position: center bottom; mask-position: center bottom;}}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {.Florish {padding:  0 0 var(--Sz4) 0;} .Florish::after {right:var(--Sz0); width: 75%; height: 100%; -webkit-mask-size: 100%;  mask-size: 100%; -webkit-mask-position: center bottom; mask-position: center bottom;}}
/* --------------------------------------------------------------------------------------------------------- */
/* -- Ribbon fx -------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------- */
.Ribbon, .RibbonA {padding-bottom: var(--Sz2);} .Ribbon::after {content: ''; position: absolute; bottom: 0; width: 100%; height: 60%; background: var(--LightBlue); z-index: -3; -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: 40%; mask-repeat: no-repeat; mask-size: 40%;   -webkit-mask-position:  110% bottom; mask-position: 110% bottom;} .TxPl.Ribbon::after {-webkit-mask-size: 40%; mask-repeat: no-repeat; mask-size: 40%;  -webkit-mask-position:  -10% bottom; mask-position: -10% bottom;} .RibbonA::before {content: ''; position: absolute; bottom: 0; width: 100%; height: var(--Sz4); background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); z-index: -2;} .RibbonA::after {content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background: var(--LightBlue); z-index: -3; -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:  center 180%; mask-position: center 180%;}
/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {.Ribbon {padding-top: calc(var(--Sz1) + var(--Sz02)); padding-bottom: var(--Sz1);} .RibbonA {padding-top: calc(var(--Sz1) + var(--Sz02)); padding-bottom: var(--Sz4);} .Ribbon::after {-webkit-mask-size: 80%; mask-size: 80%; -webkit-mask-position:  150% bottom; mask-position: 150% bottom;} .TxPl.Ribbon::after {-webkit-mask-size: 80%; mask-size: 80%;  -webkit-mask-position:  -50% bottom; mask-position: -50% bottom;} .RibbonA::before {height: 50%;} .RibbonA::after {-webkit-mask-size: 120%; mask-size: 120%;  -webkit-mask-position:  center 97%; mask-position: center 97%;}}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {.RibbonA {padding-bottom: var(--Sz4);} .RibbonA::after {-webkit-mask-size: 120%; mask-size: 120%;  -webkit-mask-position:  center 115%; mask-position: center 115%;}}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {.RibbonA {padding-bottom: var(--Sz4);} .RibbonA::after {-webkit-mask-size: 120%; mask-size: 120%;  -webkit-mask-position:  center 135%; mask-position: center 135%;}}



.container-fluid .grid .ListB .container .row .col-md-4 .thumb{
  background: transparent!important;
}
.container-fluid .grid .ListB .container .row .col-md-4 .thumb-block-hover:hover{
  background:#ffffff!important;
}

#pt-diner-benefit{
 background: rgb(236, 237, 238);
}

#tp-hotel-privileges{
  background: rgb(236, 237, 238);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 60%, rgba(236, 237, 238) 100%);
}


#mr-intro{
  background: rgb(236, 237, 238);
}

#drie-rewards{
  background: rgb(236, 237, 238);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 60%, rgba(236, 237, 238) 100%);
}
/*-- juridische blokken --*/
#juridisch a{
    color:#97999b!important;
}
#juridisch a:hover{
    color:var(--LightBlue)!important;
}
.container-fluid #juridisch ul li::before{
    color:#97999b!important;
}

/*-- hero card shine --*/

.container-fluid .Hero-custom .row .col-md-6:last-child .image{
    overflow: hidden;
    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 */

}

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

/*-- shopbalk --*/

#floatingcta.ShopBar {position: relative; bottom:-130px; height: 75px; transition: bottom 0.5s ease-in-out; transform: translateZ(200px);}
#floatingcta.ShopBar.active {bottom:0px;}
#floatingcta.ShopBar .row {position: relative;}
#floatingcta.ShopBar .row .col-md-12 {position: relative; left: 0px !important; top: 0px; height: 75px;}
#floatingcta.ShopBar .image.parbase:nth-child(1) {position: absolute; left: 30px; z-index: 2;}
#floatingcta.ShopBar .image.parbase:nth-child(1) img {width: 70%!important; height: auto!important; animation: scrolllAnnimation 5s infinite; box-shadow: none!important;}
#floatingcta.ShopBar .container .col-md-12 div {justify-content: space-between !important;}
#floatingcta.ShopBar .container .col-md-12 p { padding-left: 110px;}
#floatingcta.ShopBar .ButtonStack {position: relative;}
#floatingcta.ShopBar .ButtonStack img{box-shadow: var(--BoxShadow);}
#floatingcta.ShopBar .ButtonStack a.btn-app-badge-sm.google-play {margin-left: 10px;}
@media only screen and (max-width: 767px) {
#floatingcta.ShopBar {height: 65px;}
#floatingcta.ShopBar .container .col-md-12 p { padding-left: 0px; display: none;}
#floatingcta.ShopBar .container .image {display: none!important}
#floatingcta.ShopBar .container .richtext:nth-child(2) {display: none!important}
.container-fluid .ShopBar .richtext.parbase {margin-left:0px;}
#floatingcta.ShopBar .richtext {opacity: 1; bottom: 3px;}
#floatingcta.ShopBar .ButtonStack {top: -5px; transform: scale(1.09);}
#floatingcta.ShopBar .image.parbase:nth-child(1) {left: 5px;}
#floatingcta.ShopBar .image.parbase:nth-child(1) img {width: 55px;}
#floatingcta.ShopBar .image.parbase:nth-child(2) {width: 90px; height: 65px;  position: absolute; left: -60px; top: -30px;}
}

/*-- ListC styling --*/
.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);
    }

    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 */

}

/*-- Metal gold styling --*/

#metal-gold .image{
    overflow: hidden!important;
    -webkit-filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.25));
    border-radius:20px;
    max-width: 83%;
}

#metal-gold .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 */

}

/* -- Value modal styling -- */
.ModalContent #modal-value-prop img{
    overflow: hidden;
    border-radius: 5%;
    margin-top: var(--Sz1);
    box-shadow: var(--BoxShadow);
    position: relative;
}

.ModalContent #modal-value-prop .row{display: flex; align-items: center!important;}
@media (min-width:1000px){
.ModalContent #modal-value-prop .row .col-md-6:first-child img{max-width: 80%; margin-left: 10%;}}
.ModalContent #modal-value-prop .row .col-md-6:first-child .image{margin-bottom: var(--Sz2)}

#modal-value-prop{background: rgb(236, 237, 238)}
@media only screen and (max-width: 767px) {
    #modal-value-prop{margin-top: var(--Sz1)}}

/* --------------------------------------------------------------- */
/* -- Arrow link ------------------------------- V1 - 08/03/23 --- */
/* --------------------------------------------------------------- */
#arrow-link::after{content: ""; width: 18px; height: 14px; background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue1Right.svg"); display: inline-block; background-size: contain; background-position: center center; background-repeat: no-repeat; margin-left: var(--Sz02); transition: var(--an2); position: relative; top: 2px;}
#arrow-link:hover::after{background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue2Right.svg"); margin-left: var(--Sz01);}

/* -- Amazon prime modal -- */
.amazonPrime .intro img{max-width:50px}
.amazonPrime .BannerHeight .card-img-bg{background-position: 50% 30%}
.container-fluid .amazonPrime .ModalContent .BannerHeight{min-height: 350px!important;}
.container-fluid .amazonPrime .ModalContent .BannerHeight::before{left:0; top:0; height:100%; width:100%; margin-left:1rem; background-image:url("/content/dam/amex/nl-nl/voordelen/gold-card/img/amazon-prime.png"); background-position:top left; background-repeat:no-repeat; background-size:contain; position: absolute; content: ''; z-index: 2;}
.container-fluid .amazonPrime .ModalContent .BannerHeight .dls-black-bg{background-color:transparent!important; background-image:linear-gradient(90deg, black, transparent); opacity: .7;}
.amazonPrime .btn{margin-left:calc(var(--Sz1) - var(--Sz02) - var(--Sz02))}

@media only screen and (max-width: 767px){
.container-fluid .amazonPrime .ModalContent .BannerHeight {
  min-height: 150px !important;
  }
}