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

.none {display:none;}
#amex-footer {margin-bottom: 6rem!important;}

.container-fluid h1 {font-size: 42px !important;line-height: 40px !important;}
.container-fluid h2 {font-size: 38px !important; line-height: 35px !important;}
.container-fluid h3 {font-size: 30px !important; line-height: 30px !important;}

@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-90px * 4));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-90px * 4));
  }
}

#numbers .image.parbase .A img {
  animation: zoom-in-zoom-out 6s ease-out infinite;
}

#numbers .image.parbase .B img  {
  animation: zoom-in-zoom-out 6s ease-out infinite;
  animation-delay: 2s;
}

#numbers .image.parbase .C img  {
  animation: zoom-in-zoom-out 6s ease-out infinite;
  animation-delay: 4s;
}

@keyframes zoom-in-zoom-out {
  0% {transform: scale(1, 1);}
  20% {transform: scale(1.2, 1.2);}
  40% {transform: scale(1, 1);}
  60% {transform: scale(1, 1);}
  80% {transform: scale(1, 1);}
  100% {transform: scale(1, 1);}
}

#hero .card-img-bg {
  background-position:center top;
}
#openmodal01,
#openmodal02,
#openmodal03,
#openmodal04 {cursor: pointer;}


#new-merchants #openmodal01 {
  /*! box-shadow: var(--NoBoxShadow); */
  /*! transform: scale(1); */
  /*! transition: var(--an1); */
  /*! z-index: 0; */
}
.container-fluid .grid #new-merchants .container .row .col-md-3 .image .pad img {
  transition: var(--an1);
}
.container-fluid .grid #new-merchants .container .row .col-md-3 .image .pad img:hover {
  transform: scale(1.2);
  transition: var(--an1);
}

#merchants  {
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  max-width: 1240px;
}

#merchants .col-md-12.margin-0-tb > div{
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(150px * 12);
}
#merchants .image {
  height: 90px;
  width: 90px;
    margin:0 20px
}

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

.container-fluid .Hero-custom {margin-bottom:0px;}



.container-fluid .ShopBar.active {
    bottom: 0px;
}

.container-fluid .ShopBar .image.parbase .CardArt {
    height: var(--Sz2) !important;
}
.container-fluid .ShopBar .image.parbase .CardArt img {
  width: auto !important;
height:90px!important;
position: relative;
  box-shadow: var(--NoBoxShadow);
  left:0px;
  top:-30px;
}

.container-fluid .grid #dubbel-kaart .container .row .col-md-6 {
  padding: 0 var(--Sz2);
}

#dubbel-kaart .button{margin:0 auto;}
.container-fluid #dubbel-kaart h6 {
  font-size: 12px !important;
}
#dubbel-kaart{
  background: rgb(194, 219, 243);
  background: linear-gradient(0deg, rgba(194, 219, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);
  text-align:center;
}


#dubbel-kaart .image {
    animation: flip 8s ease-out infinite;
    overflow: hidden;
    box-shadow: var(--BoxShadow)!important;
    max-width: 480px!important;
    border-radius: 16px!important;
}

@keyframes flip {
    0% {
        transform: perspective(600px);
    }

    50% {
        transform: perspective(600px);
    }

    100% {
        transform: perspective(600px);
    }
}

#dubbel-kaart .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%;
    }
}

#terms {padding:var(--Sz2) 0}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
#merchants  {max-width: 567px;}
.container-fluid .ModalContent .container {left: 5px; padding: 0 10px;}
.container-fluid .grid .ListB .thumb h4.display-block .icon {width: 100%;}
  #hero {padding:60px 0px;}
.container-fluid h3,
.container-fluid h2 {font-size: 28px !important; line-height: 32px !important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:577px) and (max-width:768px) {
.container-fluid .ModalContent .container {left: 5px;}
.container-fluid .grid .ListB .thumb h4.display-block .icon {width: 100%;}
  #hero {padding:60px 0px;}
.container-fluid h3,
.container-fluid h2 {font-size: 28px !important; line-height: 32px !important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {
.container-fluid .ModalContent .ListD  {margin-top:30px}
.container-fluid .ModalContent .ListD .container {left: 8px; padding: 0 20px;}
.container-fluid .grid .ListB .thumb h4.display-block .icon {width: 100%;}
  #hero {padding:60px 0px;}
  .container-fluid .ListD .col-md-3 {
  flex: 0 0 25%!important;
  max-width: 25%!important;
}
.container-fluid .ListD .col-md-3:nth-child(3), .container-fluid .ListD .col-md-3:nth-child(4) {
  transform: none!important;
}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
.container-fluid .ModalContent .ListD  {margin-top:30px}
.container-fluid .ModalContent .ListD .container {left: 8px; padding: 0 20px;}
  .container-fluid .ListD .col-md-3 {
  flex: 0 0 25%!important;
  max-width: 25%!important;
}
.container-fluid .ListD .col-md-3:nth-child(3), .container-fluid .ListD .col-md-3:nth-child(4) {
  transform: none!important;
}
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
.container-fluid .ModalContent .ListD  {margin-top:30px}
.container-fluid .ModalContent .ListD .container {left: 0px; padding: 0 20px;}
#hero  {padding:100px 0px;}
#hero .card-img-bg {padding:100px 0px;}
.container-fluid .Hero-custom .hidden-md-down::before {top:0px;}
.container-fluid .grid #dubbel-kaart .container {
  padding-left: 180px;
  padding-right: 180px;
}
}

/* -------------------------------------------------------------------------------------------- */

/*-- merchant modal styling --*/

.ModalCustom .ModalContent .ListD .col-md-3 .image img{box-shadow: var(--SmallBoxShadow); position: relative;}