/* --BE Plat benefit.css------------------------------------------------------------------------------------ */

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

/* --hero card shine---------------------------------------------------------------------------------------- */

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

/* --Shine animation---------------------------------------------------------------------------------------- */

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

    50% {
        top: -100%;
        left: -100%;
    }

    100% {
        top: 100%;
        left: 100%;
    }
}

/* --Shopbar card shine------------------------------------------------------------------------------------- */

.container-fluid .ShopBar .image{
    overflow: hidden!important;
    border-radius: var(--BrSmall);
    box-shadow: var(--BoxShadow);
}

.container-fluid .ShopBar .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 */
}

/* --App block styling-------------------------------------------------------------------------------------- */

.container-fluid .App{
  margin-bottom: 0 !important;
}

.ButtonStack img{
   box-shadow: var(--NoBoxShadow);
  transform: scale(1);
  transition: var(--an1);
  z-index: 0;
}
.ButtonStack img:hover{
   box-shadow: var(--BoxShadow);
  transform: scale(1.1);
  z-index: 10;
}

/* --Hero styling------------------------------------------------------------------------------------------- */

.container-fluid .Hero-custom{
  margin-bottom: var(--Sz2)!important;
}

/* --background colors-------------------------------------------------------------------------------------- */

#ask-amex{
  background: rgb(236, 237, 238);
    background: linear-gradient(0deg, rgba(236, 237, 238) 0%, rgba(255, 255, 255, 1) 100%);}

#membership-rewards{
  background: rgb(236, 237, 238);
}

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

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

/* --Juridische blokken------------------------------------------------------------------------------------- */

#juridisch a{
    color:#97999b!important;
}
#juridisch a:hover{
    color:var(--LightBlue)!important;
}
#juridisch-row a{
    color:#97999b!important;
}
#juridisch-row a:hover{
    color:var(--LightBlue)!important;
}
.container-fluid #juridisch-row ul li::before{
    color:#97999b!important;
}

/* --------------------------------------------------------------- */
/* -- Arrow link ------------------------------- V2 - 11/04/23 --- */
/* --------------------------------------------------------------- */
#arrow-link{position: relative; transition: var(--an1);}
#arrow-link:hover{color:#00175a; transition: var(--an1);}
#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);}

/* --------------------------------------------------------------- */
/* -- List B arrow links ----------------------- V1 - 11/04/23 --- */
/* --------------------------------------------------------------- */
.ListB .richtext .modal-hover{color:#006fcf; position: relative; font-weight:bolder;}
.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;}


/* -- Rocket -- */
.rocket{
    transition: top 300ms ease-out;
    position: absolute;
    top: var(--Sz0);
    left:var(--Sz0);
    width: 50px;
}

.thumb.block-hover:hover .rocket{
    top: 5px;
}