/* --ES Gold Iberia css------------------------------------------------------------------------------------ */
/* -- Base import -- */
@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";

/* -- Special styling elements -- */

/* --------------------------------------------------------------------------------------------------------- */
/* -- TextPlaat met watermerk fx --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------- */
.TextPlaat.TxPl.AmexWatermark, .TextPlaat.PlTx.AmexWatermark {padding-top: 100px;} .TextPlaat.TxPl.AmexWatermark::before, .TextPlaat.PlTx.AmexWatermark::before {content: ''; position: absolute;  top: 0; width:  calc(50% - 200px); height: 60%; background: var(--LightBlue);  -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; mask-repeat: no-repeat; mask-size: cover; } .TextPlaat.TxPl.AmexWatermark::before {right: 0;  -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/AmexWaterMark.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/AmexWaterMark.svg); -webkit-mask-position: left top; mask-position: left top;} .TextPlaat.PlTx.AmexWatermark::before {left: 0;  -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/AmexWaterMark.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/AmexWaterMark.svg); -webkit-mask-position: right top; mask-position: right top;}
/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {.TextPlaat.TxPl.AmexWatermark, .TextPlaat.PlTx.AmexWatermark {padding-top: 0px;} .TextPlaat.TxPl.AmexWatermark::before, .TextPlaat.PlTx.AmexWatermark::before {top: 0; width:  100%; height: 30%; -webkit-mask-position: center top; mask-position: center top;}}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {.TextPlaat.TxPl.AmexWatermark, .TextPlaat.PlTx.AmexWatermark {padding-top: 25px;} .TextPlaat.TxPl.AmexWatermark::before, .TextPlaat.PlTx.AmexWatermark::before {content: ''; position: absolute;  top: 0; width:  calc(50% - 100px); height: 30%; background: var(--LightBlue);  -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; mask-repeat: no-repeat; mask-size: cover; }}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {.TextPlaat.TxPl.AmexWatermark, .TextPlaat.PlTx.AmexWatermark {padding-top: 50px;}}

/* --------------------------------------------------------------------------------------------------------- */
/* -- Ribbon fx -------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------- */
.Ribbon, .RibbonA {padding-bottom: var(--Sz2);} .Ribbon::after {content: ''; position: absolute; bottom: 0; width: 100%; height: 60%; background: var(--LightBlue); z-index: -3; -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 40%; mask-repeat: no-repeat; mask-size: 40%;   -webkit-mask-position:  110% bottom; mask-position: 110% bottom;} .TxPl.Ribbon::after {-webkit-mask-size: 40%; mask-repeat: no-repeat; mask-size: 40%;  -webkit-mask-position:  -10% bottom; mask-position: -10% bottom;} .RibbonA::before {content: ''; position: absolute; bottom: 0; width: 100%; height: var(--Sz4); background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); z-index: -2;} .RibbonA::after {content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background: var(--LightBlue); z-index: -3; -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/Ribbon.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 120%; mask-repeat: no-repeat; mask-size: 120%;  -webkit-mask-position:  center 180%; mask-position: center 180%;}
/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {.Ribbon {padding-top: calc(var(--Sz1) + var(--Sz02)); padding-bottom: var(--Sz1);} .RibbonA {padding-top: calc(var(--Sz1) + var(--Sz02)); padding-bottom: var(--Sz4);} .Ribbon::after {-webkit-mask-size: 80%; mask-size: 80%; -webkit-mask-position:  150% bottom; mask-position: 150% bottom;} .TxPl.Ribbon::after {-webkit-mask-size: 80%; mask-size: 80%;  -webkit-mask-position:  -50% bottom; mask-position: -50% bottom;} .RibbonA::before {height: 50%;} .RibbonA::after {-webkit-mask-size: 120%; mask-size: 120%;  -webkit-mask-position:  center 97%; mask-position: center 97%;}}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {.RibbonA {padding-bottom: var(--Sz4);} .RibbonA::after {-webkit-mask-size: 120%; mask-size: 120%;  -webkit-mask-position:  center 115%; mask-position: center 115%;}}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {.RibbonA {padding-bottom: var(--Sz4);} .RibbonA::after {-webkit-mask-size: 120%; mask-size: 120%;  -webkit-mask-position:  center 135%; mask-position: center 135%;}}

/* -- App button styling -- */

.App .ButtonStack img{transform: scale(1); transition: var(--an1);}
.App .ButtonStack img:hover{transform: scale(1.1); transition: var(--an1); box-shadow:var(--BoxShadow)}

/* -- Shopbar -- */
.container-fluid .ShopBar {
    transition: 0.5s ease-out;
    transform: translateZ(200px) translateY(140px);
}
.container-fluid .ShopBar.active {
    transition: 0.5s ease-in;
    transform: translateZ(200px) translateY(0px);
}

/* -- BannerC -- */
.BannerC ul.Check li {display: inline-block; font-size: 15px; padding:12px 0px; border-bottom:1px solid #ccc;}
.BannerC ul.Check li::before {background-image: none;}