/*----interactief element homepage -----*/

.interactieve-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 1080px;
  margin: auto;
  gap: 0px 10%;
  grid-template-areas:
    "dit-willen-we-bereiken dit-drijft-ons dit-doen-we"
    "price-interactief-element price-interactief-element price-interactief-element"
    "dit-is-ce challenges zo-werken-we";
}

.dit-willen-we-bereiken-interactief {
  grid-area: dit-willen-we-bereiken;
}
.dit-drijft-ons-interactief {
  grid-area: dit-drijft-ons;
}
.dit-doen-we-interactief {
  grid-area: dit-doen-we;
}
.dit-is-ce-interactief {
  grid-area: dit-is-ce;
  margin-top: -150px;
}
.challenges-interactief {
  grid-area: challenges;
}
.zo-werken-we-interactief {
  grid-area: zo-werken-we;
  margin-top: -150px;
}

.dit-willen-we-bereiken-interactief,
.dit-drijft-ons-interactief,
.dit-doen-we-interactief,
.dit-is-ce-interactief,
.challenges-interactief,
.zo-werken-we-interactief {
  display: flex;
  align-content: center;
  flex-direction: column;
  align-items: center;
}

.price-interactief-element {
  grid-area: price-interactief-element;
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

.price-interactief-element {
  content: "";
  background-image: url(http://price-almere.is-een-geweldige-klant.nl/wp-content/uploads/2023/06/Base.svg);
  height: 400px;
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.interactief-content {
  text-align: center;
}

/*active state*/
.price-interactief-element.dit-willen-we-bereiken-interactief-active {
  background-image: url(http://price-almere.is-een-geweldige-klant.nl/wp-content/uploads/2023/06/Groen.svg);
}

.price-interactief-element.dit-drijft-ons-interactief-active {
  background-image: url(http://price-almere.is-een-geweldige-klant.nl/wp-content/uploads/2023/06/Paars.svg);
}
.price-interactief-element.dit-doen-we-interactief-active {
  background-image: url(http://price-almere.is-een-geweldige-klant.nl/wp-content/uploads/2023/06/Blauw.svg);
}
.price-interactief-element.dit-is-ce-interactief-active {
  background-image: url(http://price-almere.is-een-geweldige-klant.nl/wp-content/uploads/2023/06/Roze.svg);
}
.price-interactief-element.challenges-interactief-active {
  background-image: url(http://price-almere.is-een-geweldige-klant.nl/wp-content/uploads/2023/06/Zalmroze.svg);
}
.price-interactief-element.zo-werken-we-interactief-active {
  background-image: url(http://price-almere.is-een-geweldige-klant.nl/wp-content/uploads/2023/06/Geel.svg);
}

.interactief-content {
  margin-top: 12px;
  margin-bottom: 27px;
}

.interactief-icon,
.interactief-titel {
  position: relative;
  top: 0 !important;
  /*transform: translateY(54px);*/
  transition: top 0.3s ease;
  transition: opacity 0.3s ease;
}

.interactief-item {
  position: relative;
  overflow: hidden;
  display: block;
  text-align: center;
}

.interactief-icon,
.interactief-titel,
.interactief-content,
.interactief-button {
  transition: height 0.3s ease;
}

.interactief-item:hover {
  height: auto;
}

.interactief-item > div > img {
  transition: 0.3s ease-in-out;
}

.interactief-item:hover > div > img {
  transform: scale(0.7);
}

.interactief-content-container {
  transition: margin 0.3s ease-out;
}

.interactief-item:hover .interactief-content-container {
  margin-top: -30px;
  transition: margin 0.3s ease-in;
  margin-bottom: 12px;
}

.interactief-item:hover .interactief-icon,
.interactief-item:hover .interactief-titel,
.interactief-item:hover .interactief-content,
.interactief-item:hover .interactief-button {
  height: auto;
}

.interactief-item:hover .interactief-icon,
.interactief-item:hover .interactief-titel {
  /*transform: translateY(0);*/
  top: 0%;
}

.interactief-titel {
  font-size: 21px !important;
}

.interactief-item:first-child,
.interactief-item:nth-child(3) {
  top: 250px;
  transition: top 0.3s ease-in-out;
}

.interactief-item:nth-child(2) {
  top: 150px;
  transition: top 0.3s ease-in-out;
}

.interactief-item:nth-child(2):hover {
  top: 0px;
}

.interactief-item:first-child:hover,
.interactief-item:nth-child(3):hover {
  top: 100px;
}


.interactief-content,
.interactief-button {
opacity: 0;
transition: opacity 0.3s ease;
}

.interactief-item:hover .interactief-content,
  .interactief-item:hover .interactief-button {
	opacity: 1;
	transition: opacity 1s ease;
  }