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

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

#TargetMenu {
    position: fixed;
    top: 30px !important;
    left: 0;
    width: 100%;
    z-index: 10;
}

header.HeaderA {
    margin-top: 80px !important;
}

/* ------------------------------------------------------------ */
#HaalAllesUitUwAwardmijlen {
    position: relative
}

#HaalAllesUitUwAwardmijlen .BackgroundOverlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--Blue1);
    width: 100%;
    height: 100%;
    opacity: 0.1
}

#HaalAllesUitUwAwardmijlen .IntroTekstB,
#HaalAllesUitUwAwardmijlen .ListB {
    position: relative
}

/* ------------------------------------------------------------ */
#JuridischeInformatie {
    background-color: var(--Gray3);
}

#JuridischeInformatie section.ContentBoxC .Inside {
    background-color: var(--Gray3);
    display: flex;
    justify-content: space-between;
    padding: var(--Sz04);
    border-radius: 10px;
    color: var(--Gray1);
}

#JuridischeInformatie section.ContentBoxC .Inside .ColumnBox {
    padding: var(--Sz04)
}

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


#TargetMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10
}

/* ------------------------------------------------------------ */
#CtoActionBar {
    background-color: var(--Wit);
    width: 100%;
    height: auto;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: var(--BoxShadow);
    z-index: 5
}

/* ------------------------------------------------------------ */
section.ShopBarA .Inside a.Card {
    display: flex !important;
    cursor: pointer !important;
}

/* ------------------------------------------------------------ */
#OntdekDeWereldVanPlatinum {
    margin-top: var(--Sz02);
    z-index: 4;
}

#OntdekDeWereldVanPlatinum a.TxLink {
    color: var(--Wit);
    margin-left: var(--Sz04);
}

/* ------------------------------------------------------------ */
#VerzekeringsBackground {
    background-color: var(--Gray3)
}

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


#JuridischeInformation.ContentBoxC {
    color: var(--Gray2) !important;
}

#JuridischeInformation.ContentBoxC ul {
    padding-left: 20px;
    margin-top: -10px !important
}

#JuridischeInformation.ContentBoxC a {
    color: var(--Gray2) !important;
    text-decoration: underline;
}

#JuridischeInformation.ContentBoxC a:hover {
    text-decoration: none;
}

/* ------------------------------------------------------------ */
#AmexHistoryBackground {
    background-image: linear-gradient(#1845BD, #3498E0);
    color: var(--Wit);
    position: relative;
}

#AmexHistoryBackground::after {
    content: '';
    display: block;
    width: 100%;
    height: 500px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-image: url("http://conceptenzo.tech/AmexElements/img/OniShapeWit.svg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
}

#AmexHistoryBackground .IntroTekstB,
#AmexHistoryBackground .ContentBoxA,
#AmexHistoryBackground .ContentBoxB {
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------ */
#BeleefExperiences {
    margin-top: 0px !important
}

#BeleefExperiences .Inside .TekstContent {
    align-self: center
}

/* ------------------------------------------------------------ */
#Stappen.ContentBoxE .ColumnBox {
    text-align: center;
}

#Stappen.ContentBoxE .ColumnBox .IconBox {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(#3498E0, #1845BD);
    display: inline-block;
    border-radius: 100px;
    margin-bottom: var(--Sz04);
}

#Stappen.ContentBoxE .ColumnBox .IconBox img {
    margin: 25px;
    width: 50px;
    height: 50px;
    object-fit: contain;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

/* ------------------------------------------------------------ */
section#MorePadding.ContentBoxD .ColumnBox {
    margin-bottom: var(--Sz03);
}

#ClusterA,
#ClusterB,
#ClusterC {
    background-color: var(--Wit);
    background-image: linear-gradient(#FFF, #EAF5FC);
    box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid var(--Wit);
    position: relative;
    width: 100%;
    overflow: hidden
}

#ClusterA,
#ClusterC {
    z-index: 2
}

#ClusterB {
    z-index: 3
}

.VerzekeringExplained.Even {
    background-color: #FAFAFA;
    width: 100%;
    overflow: hidden
}

.VerzekeringExplained.Odd {
    background-color: var(--Gray3);
    width: 100%;
    overflow: hidden
}


.GreyBackground-gradient {
    background-image: linear-gradient(#1845BD, #3498E0);
    color: #fff;
}

.GreyBackground-gradient-second {
    background-image: linear-gradient(var(--Wit), var(--Gray3));
}

#EleV1 section.BannerB .Inside {
    width: 800px;
}

#EleV1 section.BannerB .Inside .float-two {
    float: left;
    width: 47%;
    margin-right: 6%;
    transform: scale(1);
    transition: 300ms;
}

#EleV1 section.BannerB .Inside .float-two:hover {
    transform: scale(1.1);
}

#EleV1 section.BannerB .Inside .float-two.last {
    margin-right: 0%;
}

#EleV1 section.BannerB .TekstContent .float-two p {
    text-align: center !important;
}

#EleV1 section.BannerG .CardBox .ContentEra .ImageContainer,
#EleV1 section.BannerG .CardBox .ContentEra .TextBox {
    width: 50%;
}

#EleV1 section.BannerG .CardBox .ContentEra img {
    width: 70%;
    border-radius: 8px;
    margin-bottom: 20px;
}

#EleV1 section.MenuA .swiper-slide[style] {
    width: auto !important;
}

.swiper-wrapper {
    justify-content: center;
}

.img-log {
    width: 70%;
    margin-top: 30px;
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {

    #EleV1 section.BannerG .CardBox .ContentEra .ImageContainer,
    #EleV1 section.BannerG .CardBox .ContentEra .TextBox {
        width: 100%;
    }

    #EleV1 section.BannerG .CardBox .ContentEra img {
        width: 100%;
    }

    #EleV1 section.BannerB .Inside .float-two {
        float: none;
        width: 100%;
        margin-right: 0%;
        padding: var(--Sz04) var(--Sz03);
    }

    #EleV1 section.BannerB .Inside img.CartArt {
        border-radius: 10px;
    }

    #JuridischeInformatie section.ContentBoxC .Inside {
        display: block;
        padding: 0;
    }

    #JuridischeInformatie section.ContentBoxC .Inside .ColumnBox {
        padding: var(--Sz04) var(--Sz04) 0 var(--Sz04);
        margin-bottom: 0
    }
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:577px) and (max-width:768px) {

    #EleV1 section.BannerG .CardBox .ContentEra .ImageContainer,
    #EleV1 section.BannerG .CardBox .ContentEra .TextBox {
        width: 100%;
    }

    #EleV1 section.BannerG .CardBox .ContentEra img {
        width: 100%;
    }

    #EleV1 section.BannerB .Inside .float-two {
        float: none;
        width: 100%;
        margin-right: 0%;
        padding: var(--Sz04) var(--Sz03);
    }

    #EleV1 section.BannerB .Inside img.CartArt {
        border-radius: 10px;
    }

    #JuridischeInformatie section.ContentBoxC .Inside {
        display: block;
        padding: 0;
    }

    #JuridischeInformatie section.ContentBoxC .Inside .ColumnBox {
        padding: var(--Sz04) var(--Sz04) 0 var(--Sz04);
        margin-bottom: 0
    }
}

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

    #EleV1 section.BannerG .CardBox .ContentEra .ImageContainer,
    #EleV1 section.BannerG .CardBox .ContentEra .TextBox {
        width: 100%;
    }

    #EleV1 section.BannerG .CardBox .ContentEra img {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
    #EleV1 setion.ListJ {
        padding: 0 var(--Sz1) !important;
    }
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
    #EleV1 setion.ListJ {
        padding: 0 var(--Sz1) !important;
    }
}

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

/* ------------------------------------------------------------------------------------------------ */
#EleV1 section.BannerB .TekstContent .float-two p {
    text-align: left;
    font-size: 15px;
}

#EleV1 section.BannerB .TekstContent .float-two ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#EleV1 section.BannerB .TekstContent .float-two ul li {
    position: relative;
    padding-left: 25px;
    text-align: left;
    font-size: 15px;
}

#EleV1 section.BannerB .TekstContent .float-two ul li span {
    font-size: 12px;
    color: var(--Gray1);
}

#EleV1 section.BannerB .TekstContent .float-two ul li::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0px;
    top: 4px;
    background-image: url("http://conceptenzo.tech/AmexElements/img/CheckBlue1Big.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}




#Amex-HistoryBackground {
    background-image: linear-gradient(#1845BD, #1845BD);
    position: relative;
}

#Amex-HistoryBackground::after {
    content: '';
    display: block;
    width: 100%;
    height: 500px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;

}

#Amex-HistoryBackground .IntroTekstB,
#Amex-HistoryBackground .ContentBoxA,
#Amex-HistoryBackground .BannerG {
    position: relative;
    z-index: 2;
}

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

/*-------BannerB-----------*/

.StatusMiles {
    background: var(--Gray3);
}

#EleV1 section.IntroTekstA .Content {
    width: 100%;
}

#EleV1 section.IntroTekstA .Content h4 {
    font-size: 23px;
    font-weight: 900;
    color: var(--Black);
}



/* ------------------------------------------------------------------------------------------ */
/*  Media Queries --------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 576px) {
    header.HeaderF .Inside {
        padding: var(--Sz04);
        flex-wrap: wrap;
    }

    header.HeaderF .Inside .ImageContent {
        width: 100%;
    }

    header.HeaderF .Inside .TekstContent {
        width: 100%;
    }
}

/* ------------------------------------------------------------------------------------------ */
@media (min-width:577px) and (max-width:768px) {
    header.HeaderF .Inside .ImageContent {
        width: 100%;
    }

    header.HeaderF .Inside .TekstContent {
        width: 100%;
    }
}

/* ------------------------------------------------------------------------------------------ */
@media (min-width:769px) and (max-width:1023px) {
    header.HeaderF .Inside .ImageContent {
        width: 100%;
    }

    header.HeaderF .Inside .TekstContent {
        width: 100%;
    }
}

/* ------------------------------------------------------------------------------------------ */
@media (min-width:1024px) and (max-width:1279px) {
    header.HeaderF .Inside .ImageContent {
        width: 50%;
    }

    header.HeaderF .Inside .TekstContent {
        width: 50%;
    }
}

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

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