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

/* --- CUSTOM -------------------------------------------------------------------------------- */

#AskAmex-Hero.Hero-custom .image.parbase .CardArt img {box-shadow: none; border-radius: 0 !important;}
#AskAmex-Hero.Hero-custom .row .col-md-6:first-child {display: flex; align-items: center;}
#AskAmex-Hero.Hero-custom .row .col-md-6:last-child .image {transform: translateY(0px) translateX(var(--Sz0));}
#AskAmex-Hero.Hero-custom .image.parbase .CardArt img {border-radius: 0 !important;}
.stack > :not(:last-child) {margin-bottom: 0rem!important;}
.BlauwVerloopBottom {background: -webkit-linear-gradient(bottom, rgba(0, 111, 207, 0.25) 0%, rgba(0, 111, 207, 0) 100%);}
.GrijsVerloopTop {background-image: linear-gradient(#ecedee, #fff);}
#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;}
#amex-footer {margin-bottom: 6rem!important;}

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

@media only screen and (max-width: 767px) {
    #AskAmex-Hero.Hero-custom {overflow: hidden;}
    #AskAmex-Hero.Hero-custom .row .col-md-6:last-child .image {transform: translateY(var(--Sz0)) translateX(0px) scale(1.2);}
    #AskAmex-Hero .stack a.btn-app-badge-md.margin-2-l, #AskAmex-Hero .stack a.btn-app-badge-sm.margin-2-l, .App .stack a.btn-app-badge-md.margin-2-l, .App .stack a.btn-app-badge-sm.margin-2-l {margin-left: 0px!important; margin-top: 15px;}
    #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) {
    #AskAmex-Hero.Hero-custom {overflow: hidden;}
    #AskAmex-Hero.Hero-custom .col-md-6:first-child {flex: 0 0 60%; max-width: 60%; padding: 0;}
    #AskAmex-Hero.Hero-custom .col-md-6:first-child .richtext.parbase {padding: 0 0 var(--Sz3) 0;}
    #AskAmex-Hero.Hero-custom .col-md-6:last-child {flex: 0 0 40%; max-width: 40%;}
    #AskAmex-Hero.Hero-custom .row .col-md-6:last-child .image {transform: translateY(-160px) translateX(160px) scale(2.2);}
}

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

@media (min-width: 1024px) and (max-width: 1279px) {
    #AskAmex-Hero.Hero-custom {overflow: hidden;}
    #AskAmex-Hero.Hero-custom .row .col-md-6:last-child .image {transform: translateY(-100px) translateX(160px) scale(1.6);}
}

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

@media (min-width: 1280px) {}

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


@media only screen and (max-width: 767px) {.IconMobile{display: none;}}