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

header.HeaderA {

margin-top: 80px !important;}



#TargetMenu {position: fixed; top: 30px; 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}


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


#OntdekDeWereldVanPlatinum {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}





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

.JurGrey {
    background-color: #FAFAFA;
    width: 100%;
    overflow: hidden;
 }
/* ------------------------------------------------------------ */
/**
 * The "shine" element
 */
.icon:after {
  animation: shine 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}
/* Hover state - trigger effect */
/* Active state */
.icon:active:after {
  opacity: 0;
}
@keyframes shine{
  10% {
    opacity: 1;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
  }
}
/* ----------------------bottom shine-------------------*/
#EleV1 section.IntroTekstB .Content {
    width: 70%!important;
}
.bbold {font-weight: 900!important;}

.bottom-shine {
    overflow: hidden;
    position: relative;
    box-shadow: var(--BoxShadow);
    border-radius: 20px;
    overflow: hidden;
    margin: var(--Sz03) 0px var(--Sz04) 0px;
}

#EleV1 section.BannerB .Inside img.CartArt {
    margin: 0px!important;
}
/* ------------------------IEblocker------------------------------------ */
    html.ie {overflow: hidden;}
    html.ie #EleV1 section.IeDetect 
    {position: fixed; top: 0; left: 0; z-index: 200; display: flex;}
/* -------------------------------------------------------------------------------------------- */

    #EleV1 section.IeDetect 
    {display: none; justify-content: center; position: relative; 
    background-color: #FFF; width: 100vw; min-height: 100vh; align-items: center}

    #EleV1 section.IeDetect .Inside 
    {width: 100%; max-width: 1000px; padding: 100px; display: flex; flex-wrap: wrap;}

    #EleV1 section.IeDetect .Inside .Intro  
    {width: 100%; text-align: center; margin-bottom: 50px;}

    #EleV1 section.IeDetect .Inside .Intro img.Logo  
    {width: 80px; height: 80px; margin-bottom: 50px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);}
    
    #EleV1 section.IeDetect .Inside .Download { width: 100%; text-align: center}

    #EleV1 section.IeDetect .Inside .Download a 
    {width: 150px; text-align: center; display: inline-block; color: #006fcf; 
    transition: 300ms; font-weight: 500}

    #EleV1 section.IeDetect .Inside .Download a:hover 
    {color: #00175a}

    #EleV1 section.IeDetect .Inside .Download a img { width: 100%; height: auto}
  
/* -------------------------------------------------------------------------------------------- */
    @media only screen and (max-width: 576px) {}
/* -------------------------------------------------------------------------------------------- */
    @media (min-width:577px) and (max-width:768px) {}
/* -------------------------------------------------------------------------------------------- */
    @media (min-width:769px) and (max-width:1023px) {}
/* -------------------------------------------------------------------------------------------- */
    @media (min-width:1024px) and (max-width:1279px) {}
/* -------------------------------------------------------------------------------------------- */
    @media only screen and (min-width: 1280px) {}
/* -------------------------------------------------------------------------------------------- */