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

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* || Show shopbar js moet worden toegevoegt ||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#floatingcta.ShopBar {position: relative; bottom:-130px; height: 75px; transition: bottom 0.5s ease-in-out;}
#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: 40px; z-index: 2; }
#floatingcta.ShopBar .image.parbase:nth-child(1) img {width: 75px; height: auto; animation: scrolllAnnimation 5s infinite;}
#floatingcta.ShopBar .image.parbase:nth-child(2) {width: 100px; height: 75px;  position: absolute; left: -20px;}
#floatingcta.ShopBar .image.parbase:nth-child(2) img {position: relative; width: 100px; height: auto; box-shadow: var(--BoxShadow); bottom: -35px; border-top-left-radius: 15px; border-top-right-radius: 15px;}
#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; /*! right: -10px; */}
#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;}
}
/* ------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {}
/* ------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {}
/* ------------------------------------------------------------------------------------------- */
@media (min-width: 1280px) {}


.container-fluid .grid:nth-child(1),
.container-fluid .grid:nth-child(2),
.container-fluid .grid:nth-child(3),
.container-fluid .grid:nth-child(4),
.container-fluid .grid:nth-child(5),
.container-fluid .grid:nth-child(6),
.container-fluid .grid:nth-child(7) {display:none;}
.container-fluid .ShopBar {
    height:100px;
    bottom:-100px;
}


.App .container {z-index: 9; position: relative;}

#financial-app {
  background: rgb(194, 219, 243);
  background: linear-gradient(0deg, rgba(194, 219, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.container-fluid .ShopBar .image.parbase {position:relative; width: 90px;}
.container-fluid .ShopBar .image.parbase .CardArt img {bottom:-64px; max-width: 90px !important;height: auto!important; box-shadow:none;}
.container-fluid .ShopBar .container .col-md-12 div .grid .row.pad-3-t.pad-3-b {padding:0 !important;}

.container-fluid .ShopBar .container .col-md-12{position:relative;}

.container-fluid .ShopBar .container .col-md-12 > div {
  position: relative!important;
}

.container-fluid .ShopBar .grid .container .row .col-md-6 {padding:0;}
/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
  .container-fluid .ShopBar .image.parbase .CardArt img {display: none;}
.margin-2-l {
  margin-left: 0rem !important;
} 
.container-fluid h1 {
  font-size: 32px!important;
  line-height: 40px!important;
}
}


/* -------------------------------------------------------------------------------------------- */
@media (min-width:577px) and (max-width:768px) {
  .container-fluid .ShopBar .image.parbase .CardArt img {bottom:0px;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {}

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

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

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