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

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* || Show shopbar js moet worden toegevoegt ||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#floatingcta.ShopBar {background: var(--LightBlue); 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; top: -60px; z-index: 2; transform: scaleX(-1);}
#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: 85px;}
#floatingcta.ShopBar .container .col-md-12 p, .container-fluid .ShopBar .container .col-md-12 b {color: white !important;}
#floatingcta.ShopBar .ButtonStack {position: relative; right: -10px;}
#floatingcta.ShopBar .ButtonStack a.btn-app-badge-sm.google-play {margin-left: 10px;}
@keyframes scrolllAnnimation {0% {opacity: 0; transform: translateY(0%);} 15% {opacity: 1; transform: translateY(-10px);} 20% {opacity: 1; transform: translateY(-10px) rotate(10deg);} 25% {opacity: 1; transform: translateY(-10px) rotate(-10deg);} 30% {opacity: 1; transform: translateY(-10px) rotate(0deg);} 90% {opacity: 1; transform: translateY(-10px);} 100% {opacity: 0; transform: translateY(0%);}}
/* ------------------------------------------------------------------------------------------- */
@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 .richtext {opacity: 1; bottom: 3px;}
#floatingcta.ShopBar .ButtonStack {top: -5px; transform: scale(1.08);}
#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) {}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* || Hero custom styling |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#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;}
/* ------------------------------------------------------------------------------------------- */
@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);}
}
/* ------------------------------------------------------------------------------------------- */
@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) {}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* || Ask Amex App Block ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
#AskAmexAppBlock.App {margin-bottom: 0;}
#AskAmexAppBlock.App ul.Check {margin-bottom: var(--Sz1);}
#AskAmexAppBlock.App h3 {line-height: 1.2 !important;}
#AskAmexAppBlock.App .col-md-6:last-child .richtext {margin-top: calc(var(--Sz4) + var(--Sz2)); margin-bottom: var(--Sz2);}
/* ------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
#AskAmexAppBlock.App {overflow: hidden;}
#AskAmexAppBlock.App h3 {font-size: 28px !important;}
#AskAmexAppBlock.App .col-md-6:last-child .richtext {margin-top: 0; margin-bottom: 0; padding: var(--Sz1) var(--Sz02);}
#AskAmexAppBlock.App ul.Check {margin: 0; padding: 0; margin-bottom: var(--Sz0);}
#AskAmexAppBlock.App ul.Check li {border-bottom: 0.5px solid rgba(255, 255, 255, 0.2); padding: 10px 0; font-size: 14px;}
#AskAmexAppBlock.App ul.Check li:last-child {border-bottom: 0px solid rgba(255, 255, 255, 0.2);}
#AskAmexAppBlock.App ul.Check.Dark li::before {display: none;}
#AskAmexAppBlock.App .ButtonStack {margin-bottom: var(--Sz1);}
#AskAmexAppBlock.App .image.parbase {transform: scale(1.3) translateY(var(--Sz1));}
}
/* ------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
#AskAmexAppBlock.App {overflow: hidden;}
#AskAmexAppBlock.App .col-md-6:last-child .richtext {margin-top: var(--Sz1); margin-bottom: var(--Sz1);}
#AskAmexAppBlock.App .col-md-6:first-child {flex: 0 0 40%; max-width: 40%; padding: 0;}
#AskAmexAppBlock.App .col-md-6:last-child {flex: 0 0 60%; max-width: 60%;}
#AskAmexAppBlock.App .image.parbase {transform: scale(1.6) translateY(-12%) translateX(-20%);}
}
/* ------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {}
/* ------------------------------------------------------------------------------------------- */
@media (min-width: 1280px) {}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* || footer ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
body {padding-bottom: 120px !important;}