/* --------------------------------------------------------------------------------------------------------- */
/* -- safeKey.css ------------------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------- */

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

/* --open layer via img------------------------------------------------------------------------------------- */

#openmodal01 {cursor: pointer;}

#promo-rij .col-md-4 #openmodal01:hover {
  box-shadow: var(--BoxShadow);
  transform: scale(1.1);
  z-index: 10;
}
#promo-rij #openmodal01 {
  transform: scale(1);
  transition: var(--an1);
  z-index: 0;
}

#promo-rij #openmodal01::before{
  content:'';
  position: absolute;
  width: 30%; 
  height: 30%;
  z-index:30;
  background-image: url("https://www.americanexpress.com/content/dam/amex/nl-be/informatie/veiligheid/veilig-betalen/safekey/Play-button-1.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
 top:calc(50% - 15%);
  right:calc(50% - 15%);
   transition:var(--an1);
}

#promo-rij #openmodal01:hover::before{
  content:'';
  position: absolute;
  width: 30%; 
  height: 30%;
  z-index:30;
  background-image: url("https://www.americanexpress.com/content/dam/amex/nl-be/informatie/veiligheid/veilig-betalen/safekey/Play-button-3.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
 top:calc(50% - 15%);
  right:calc(50% - 15%);
   transition:var(--an1);
}

/* --modal video size--------------------------------------------------------------------------------------- */

.container-fluid .ModalContent {height: auto !important; min-height: 0px!important;}
.container-fluid .ModalContent .video.parbase{margin-bottom:0!important;}

/* --background-colors-------------------------------------------------------------------------------------- */

#safekey-vaker {
  background: rgb(236, 237, 238);
  background: linear-gradient(0deg, rgba(236, 237, 238) 0%, rgba(255, 255, 255, 1) 100%);
}

#FAQ {
  background: rgb(194, 219, 243);
  background: linear-gradient(0deg, rgba(194, 219, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

#hoe-werkt-het{
  background: rgb(236, 237, 238);}

#uitleg-image-rij {
  background: rgb(236, 237, 238);
}

/* --FAQ styling-------------------------------------------------------------------------------------------- */

#FAQ .collapsible-panel h3 {
  line-height: 24px !important;
}

.container-fluid .collapsible-panel .border.bordered h3 .accordion-content ol, .container-fluid .collapsible-panel .border.bordered h3 .accordion-content ul{
  font-size:14px!important;
}

#FAQ .col-md-6 .richtext .h3Small{min-height:70px!important; margin-bottom:0;}

#FAQ{
  display: flex;
  align-items: center;
}

.container-fluid  .grid  #FAQ .container .row .col-md-12 div{
  box-shadow: var(--BoxShadow);
  border-radius: 0px;
}

.container-fluid .grid #FAQ .container .row .col-md-6 div.collapsible-panel,
.container-fluid .grid #FAQ .container .row .col-md-6 div.collapsible-panel div,
.container-fluid .grid #FAQ .container .row .col-md-6 div.border,
.container-fluid .grid #FAQ .container .row .col-md-6 div.parbase,
.container-fluid .grid #FAQ .container .row .col-md-6 div.parbase div{
  box-shadow: none!important;
}


 .container-fluid .grid #FAQ .container .row .col-md-12{
  padding: 0px !important;
}

.container-fluid .grid #FAQ .container .row .col-md-12 .stack{
  padding-left: var(--Sz1) !important;
}

/* --hero sizing and text alignment------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 448px) {
  #safekey-hero {padding:60px 0px;}
  .container-fluid .grid #FAQ .container .row .col-md-6:not(:first-child) div.parbase h6{
  padding-top:var(--Sz1);
}
    #FAQ .col-md-6 .richtext div:first-child{min-height:60px!important;}
}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 448px) and (max-width: 767px) {
  #safekey-hero {padding:60px 0px;}
  .container-fluid .grid #FAQ .container .row .col-md-6:not(:first-child) div.parbase h6{
  padding-top:var(--Sz1);
}
  #FAQ .col-md-6 .richtext .h3Small{min-height:30px!important;}
}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  #safekey-hero {padding:60px 0px;}
}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {}
/* --------------------------------------------------------------------------------------------------------- */
@media (min-width: 1280px) {

  #safekey-hero .card-img-bg {
    min-height: 500px;
  }
  .container-fluid .Hero-custom .row .col-md-6:first-child {
  padding-top: var(--Sz5) !important;
  padding-bottom: var(--Sz1) !important;
}
 
}
/* --------------------------------------------------------------------------------------------------------- */