/* --ES Plat Iberia css------------------------------------------------------------------------------------ */
/* -- Base import -- */
@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";
@import "/content/dam/amex/es/tarjetas/iberia-plus-avios/platinum/webkit-flip-animation-fix.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: translateY(140px);
}
.container-fluid .ShopBar.active {
    transition: 0.5s ease-in;
    transform: translateY(0px);
}

/*-- hero card shine --*/

.container-fluid .Hero-custom .row .col-md-6:last-child .image{
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--BoxShadow);
}

.container-fluid .Hero-custom .row .col-md-6:last-child .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 */

}

/*-- Shine animation --*/
@-webkit-keyframes moveafter {
    0% {top: -200%; left: -200%;}
    50% {top: -100%; left: -100%;}
    100% {top: 100%; left: 100%;}
}

/* --BannerC styling---------------------------------------------------------------------------------------- */

.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);
    }
}

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

}

/* -- 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;}