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


#floatingcta.ShopBar {position: relative; bottom:-130px; transition: bottom 0.5s ease-in-out;}
#floatingcta.ShopBar.active {bottom:0px;}
.container-fluid .ShopBar .image.parbase .CardArt img {box-shadow:none;}

.Hero-custom {overflow: hidden;}
.container-fluid .Hero-custom {margin-bottom: 0;}
#image1van4 img, #image2van4 img, #image3van4 img, #image4van4 img {display:none;}
#shopsmalllogo img {width:300px !important;}
#shopsmalllogo {position:relative; z-index:1; }
#shopsmalllogo::before {content: ""; position:absolute; z-index: -1; background:#000;  width:560px; height:160px;}
.container-fluid .Hero-custom .hidden-md-up::before,
.container-fluid .Hero-custom .hidden-sm-down::before,
.container-fluid .Hero-custom .hidden-md-down {padding:0px 0px 20px 0px;}
.container-fluid .Hero-custom .hidden-md-up::before,
.container-fluid .Hero-custom .hidden-sm-down::before,
.container-fluid .Hero-custom .hidden-md-down::before {content: ""; background: none;}
.container-fluid .Hero-custom .row .col-md-6:last-child .image {margin-bottom: 30px !important;transform: translateY(0) translateX(0);}
.container-fluid .Hero-custom .row .col-md-6:last-child {display: flex; align-items: center; justify-content: right;}
.container-fluid .Hero-custom  .container .row .col-md-6 .image .pad img {box-shadow:none; border-radius:none;}
.container-fluid .grid .Hero-custom .container .row .col-md-6:first-child .richtext.parbase {position:relative; z-index:1;}
.container-fluid .grid .Hero-custom .container .row .col-md-6:first-child .richtext.parbase::before  {
  content: ""; 
  position:absolute;
  z-index: -2;
  background:#fe645f; 
  width:890px; 
  height:40px;
  bottom:-105px;
  left:-450px;
  animation-name:red-ani;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.Hero-custom .image.parbase:nth-child(1)::before {
  content: ""; 
  position:absolute;
  z-index: -2;
  background:#fcb92d; 
  width:300px; 
  height:185px;
  top:-10px;
  left:-50px;
  animation-name: yllw-ani;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.Hero-custom .image.parbase:nth-child(1)::after {
  content: ""; 
  position:absolute;
  z-index: -3;
  background:#2fbcaf; 
  width:136px; 
  height:450px;
  top:-130px;
  right:10px;
  animation-name: grn-ani;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes red-ani {
  0%   {width:700px;}
  100% {width:890px;}
}

@keyframes yllw-ani {
  0%   {top: -155px; height:330px;}
  100% {top: -10px; height:185px;}
}

@keyframes grn-ani {
  0%   {top: 200px; height:450px;}
  25%  {top: 200px; height:450px;}
  50%  {top: -130px; height:450px;}
  75%  {top: -130px; height:50px;}
  100% {top: -130px; height:50px;}
}

@keyframes grn-ani-mob {
  0%   {top: 200px; height:500px;}
  25%  {top: 200px; height:500px;}
  50%  {top: -350px; height:500px;}
  75%  {top: -350px; height:100px;}
  100% {top: -350px; height:100px;}
}



/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
.container-fluid .grid .Hero-custom .container .row .col-md-6:first-child .richtext.parbase::before  {
  width:590px; 
  height:40px;
  top:-60px;
  left:-450px;
  animation-name: disabled;
}
.container-fluid .Hero-custom .row .col-md-6:last-child {
  align-items: flex-end; 
  justify-content: left;
  margin-top:80px!important;
  }
#shopsmalllogo img {width:200px !important; max-width:200px!important; min-width:200px!important;}
#shopsmalllogo::before {
  width: 576px;
  height: 185px;
  left: -10px;
  top: -12px;
}
.Hero-custom .image.parbase:nth-child(1)::before {
  width:300px; 
  height:185px;
  top:-30px;
  left:-40px;
  animation-name: disabled;
}
.Hero-custom .image.parbase:nth-child(1)::after {
  z-index: 1;
  width:136px; 
  height:450px;
  top:-130px;
  right:-140px;
  animation-name: disabled;
}
.container-fluid .grid .Hero-custom .container .row .col-md-6:first-child .richtext.parbase::before  {
  animation-name: disabled;
}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:577px) and (max-width:768px) {
.container-fluid .grid .Hero-custom .container .row .col-md-6:first-child .richtext.parbase::before  {
  width:890px; 
  height:40px;
  top:-60px;
  left:-450px;}
.container-fluid .Hero-custom .row .col-md-6:last-child {
  align-items: flex-end; 
  justify-content: left;
  margin-top:80px!important;
  }
#shopsmalllogo img {width:200px !important; max-width:200px!important; min-width:200px!important;}
#shopsmalllogo::before {
  width: 576px;
  height: 185px;
  left: -18px;
}
.Hero-custom .image.parbase:nth-child(1)::before {
  width:300px; 
  height:185px;
  top:-50px;
  left:-40px;
  animation-name: disabled;
}
.Hero-custom .image.parbase:nth-child(1)::after {
  z-index: 1;
  width:136px; 
  height:450px;
  top:-130px;
  right:-160px;
  animation-name: disabled;
}
.container-fluid .grid .Hero-custom .container .row .col-md-6:first-child .richtext.parbase::before  {
  animation-name: disabled;
}

}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {
.container-fluid .grid .Hero-custom .container .row .col-md-6:first-child .richtext.parbase::before  {
  width:890px; 
  height:40px;
  top:-90px;
  left:-450px;}
.container-fluid .Hero-custom .row .col-md-6:last-child {
  align-items: flex-end; 
  justify-content: left;
  margin-top:80px!important;
  }
#shopsmalllogo img {width:200px !important;}
#shopsmalllogo::before {
  width: 720px;
  height: 185px;
  left: -18px;
}
.Hero-custom .image.parbase:nth-child(1)::before {
  width:300px; 
  height:185px;
  top:-50px;
  left:-40px;
  animation-name: disabled;
}
.Hero-custom .image.parbase:nth-child(1)::after {
  z-index: 1;
  width:136px; 
  height:450px;
  top:-130px;
  right:-600px;
  animation-name: grn-ani-mob;
}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {}

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



.container-fluid ol li {font-size:12px!important;}
#row4 .image.parbase {position:relative; z-index:1; }
#row4 .image.parbase::before {content: ""; position: absolute; z-index: -2; background:#2fbcaf; width: 570px; height:570px; top:50px; left:-50px;
  animation-name: blck-grn-ani;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;}

#row4 .image.parbase::after {content: ""; position: absolute; z-index: -3; background:#f8b129; width: 285px; height:285px; top:-50px; right:-50px; animation: crescendo 1.5s alternate infinite;}
#row6 .image.parbase {position:relative; z-index:1; }
#row6 .image.parbase::before {content: ""; position: absolute; z-index: -2; background:#fe645f; width: 570px; height:570px; top:-50px; right:-50px; animation: crescendo 1.5s alternate infinite ease-in;}
#row6 .image.parbase::after {content: ""; position: absolute; z-index: -3; background:#f8b129; width: 285px; height:285px; bottom:-50px; left:-50px;
  animation-name: blck-yllw-ani;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;}

@keyframes blck-grn-ani {
  0% {top: -30px;}
  100% {top: 40px;}
}

@keyframes blck-yllw-ani {
  0% {bottom: -50px;}
  100% {bottom: 40px;}
}

@keyframes crescendo {
  0%   {transform: scale(1);}
  100% {transform: scale(1.05);}
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
#row4 .image.parbase::before {width: 100%; height:100%; bottom:-20px; left:-130px; top: auto; animation-name: disabled;}
#row4 .image.parbase::after {width: 100%; height:100%;  top:-30px; right:-30px; animation-name: disabled;}  
#row4, #row4 h6 {padding-top:30px;} 
#row6 .image.parbase::before {width: 100%; height:100%; top:-20px; right:-130px; animation-name: disabled;}
#row6 .image.parbase::after {width: 60%; height:100%; bottom:-30px; left:-30px; animation-name: disabled;}
#row6, #row6 h3 {padding-top:30px;} 
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:577px) and (max-width:768px) {
#row4 .image.parbase::before {width: 524px; height:400px; top:144px; left:-130px; animation-name: disabled;}
#row4 .image.parbase::after {width: 240px; height:240px; top:-30px; right:-30px; animation-name: disabled;}  
#row4, #row4 h6 {padding-top:30px;} 
#row6 .image.parbase::before {width: 524px; height:400px; top:-40px; right:-130px; animation-name: disabled;}
#row6 .image.parbase::after {width: 240px; height:240px; bottom:-30px; left:-30px; animation-name: disabled;}
#row6, #row6 h6 {padding-top:30px;} 
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {
#row4 .image.parbase::before {width: 310px; height:310px; top:40px; left:-40px;}
#row4 .image.parbase::after {width: 240px; height:240px; top:-40px; right:-40px}  
#row6 .image.parbase::before {width: 310px; height:310px; top:-40px; right:-40px;}
#row6 .image.parbase::after {width: 240px; height:240px; bottom:-40px; left:-40px}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
#row4 .image.parbase::before {width: 420px; height:420px; top:40px; left:-40px;}
#row4 .image.parbase::after {width: 240px; height:240px; top:-40px; right:-40px}
#row6 .image.parbase::before {width: 420px; height:420px; top:-40px; right:-40px;}
#row6 .image.parbase::after {width: 240px; height:240px; bottom:-40px; left:-40px}
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {}

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


/* --Video-- */
.container-fluid .grid .ListB .thumb h4.display-block {display: none!important;}
.container-fluid .grid .ListB .thumb p {padding-left: 0;}
.container-fluid .grid .ListB .container .row .col-md-4 .thumb {padding:0;}
.container-fluid .grid .ListB .container .row .col-md-4 .thumb p,
.container-fluid .grid .ListB .container .row .col-md-4 .thumb p img { border-radius: var(--BrSmall);}
.container-fluid .grid .ListB .container .row .col-md-4 {padding: 0 var(--Sz01);}

.container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover {box-shadow: var(--BoxShadow)!important;}
#row8 {position:relative; z-index:1; padding-bottom:20px;}
#row8::before {content: ""; position: absolute; z-index: -2; background:#2fbcaf; width: 570px; height:60px; bottom:0px; left:0px;}
#row8::after {content: ""; position: absolute; z-index: -2; background:#fe6d6a; width: 300px; height:100px; bottom:0px; right:0px;}
#row9 {position:relative; z-index:1;}
#row9::before {content: ""; position: absolute; z-index: -2; background:#2fbcaf; width: 570px; height:60px; top:0px; left:0px;}
#row9::after {content: ""; position: absolute; z-index: -2; background:#fe6d6a; width: 300px; height:200px; top:0px; right:0px;}

/* --Card 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);}
}
.container-fluid .BannerC {
  background:none;
}
.BannerC .image::after{content:' ';position:absolute;height:300%;width:300%;top:0;left:0;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,.5) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%);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,.2)),color-stop(55%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,0)));background:-webkit-linear-gradient(-45deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%);background:-o-linear-gradient(-45deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%);background:-ms-linear-gradient(-45deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%);background:linear-gradient(135deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%)}
@-webkit-keyframes moveafter {
0% {top: -200%; left: -200%;}
50% {top: -100%; left: -100%;}
100% {top: 100%; left: 100%;}
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
#row8::before {width: 300px; height:300px; top:-30px; left:0px;}
#row9::before {width: 0px; height:0px; top:0px; left:0px;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:577px) and (max-width:768px) {
#row8::before {width: 270px; height:270px; top:-30px; left:0px;}
#row9::before {width: 0px; height:0px; top:0px; left:0px;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {
#row8::before {width: 270px; height:60px; bottom:0px; left:0px;}
#row9::before {width: 270px; height:60px; top:0px; left:0px;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {}

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


/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
#row8::before {width: 300px; height:300px; top:-30px; left:0px;}
#row9::before {width: 0px; height:0px; top:0px; left:0px;}
.container-fluid h1 {font-size: 40px !important; line-height: 40px !important;}
.container-fluid h2 {font-size: 30px !important; line-height: 30px !important;}
}
/* -------------------------------------------------------------------------------------------- */

.container-fluid .grid .ModalContent .container .row .col-md-12 {padding: 20px 20px 20px 30px;}
.container-fluid .ModalContent .collapsible-panel .border.bordered h3 .accordion-content p {font-size: 12px !important;}

.container-fluid .ModalContent .collapsible-panel .border.bordered h3 .accordion-content ul li, .container-fluid .ModalContent .collapsible-panel .border.bordered h3 .accordion-content ol {
  font-size: 12px !important;
}

@media (min-width:577px) and (max-width:768px) {
  .ModalContent {width:504px!important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {
  .ModalContent {width:662px!important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
  .ModalContent {width:880px!important;}
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
  .ModalContent {width:1062px!important;}
}

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

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

}