/* --plat campagne.css-------------------------------------------------------------------------------------- */
/* --LBOTG variatiant--------------------------------------------------------------------------------------- */

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


/* --hero adjustments--------------------------------------------------------------------------------------- */

.container-fluid .Hero-custom a b:not(.btn, .btn-text, .btn-text-white){
color:#006fcf;
}

.container-fluid .Hero-custom a:not(.btn, .btn-text, .btn-text-white){
color:#ffffff;
}

.container-fluid .Hero-custom a:not(.btn, .btn-text, .btn-text-white):hover{
color:#006fcf;
}

.container-fluid .Hero-custom a b:not(.btn, .btn-text, .btn-text-white):hover{
color:#ffffff!important;
}

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

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

.container-fluid .Hero-custom .row .col-md-6:first-child .button.parbase{
    margin-top: 0!important;
}

.container-fluid .Hero-custom p:last-child{
    margin-bottom: var(--Sz04)!important;
}

/* --flip image--------------------------------------------------------------------------------------------- */

.container-fluid .grid #lounges .container .row .col-md-6 .image .pad img{
  transform: scaleX(-1);
}

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

#usps-twee{
  background: rgb(236, 237, 238);
  background: linear-gradient(0deg, rgba(236, 237, 238) 0%, rgba(255, 255, 255, 1) 80%);

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

#pt-diner-benefit{
 background: rgb(236, 237, 238);
}
#grenspassage{
  background: rgb(236, 237, 238);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(236, 237, 238) 100%);
}
#plat-waarde{
  background: rgb(194, 219, 243);
  background: linear-gradient(0deg, rgba(194, 219, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

#apple-pay{
   background: rgb(236, 237, 238);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 40%, rgba(194, 219, 243) 100%);
}

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

.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;
}

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

/* --BannerC styling---------------------------------------------------------------------------------------- */

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

}

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

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

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

}

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

.container-fluid .ShopBar {
    bottom: -140px;
     transition: bottom 0.5s ease-in-out;
}
.container-fluid .ShopBar.active {
    bottom: 0px;
}

/* --modal image adjustments-------------------------------------------------------------------------------- */

#modal03 .card-img-bg{
    background-size: 110%!important;
}

.container-fluid #modal03 .ModalContent .intro{
    padding-bottom: var(--Sz03)!important;
    padding-top: var(--Sz03)!important;
}

#modal07 .card-img-bg{
    background-size: 110%!important;
}

.container-fluid #modal07 .ModalContent .intro{
    padding-bottom: var(--Sz03)!important;
    padding-top: var(--Sz03)!important;
}

#modal05 .card-img-bg{
    background-position-y: 10% !important;
}

#modal07 .card-img-bg{
    background-position-y: 45% !important;
}

#modal03 .card-img-bg{
    background-position-y: 45% !important;
}


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

/* --plat waarde-------------------------------------------------------------------------------------------- */

#plat-waarde .image{
    cursor: pointer;
    transition: var(--an1);
    z-index: 0;
}

#plat-waarde .image:hover{
    transform: scale(1.07);
    box-shadow: var(--BoxShadow);
    z-index: 10;
}

/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 448px) {
    .container-fluid .ShopBar .image.parbase .CardArt img{
        left: 0!important;
    }
}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 448px) and (max-width: 767px) {
   .container-fluid .ShopBar .image.parbase .CardArt img{
        left: 0!important;
    }
}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  
}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  
}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  
}