/* Flex-Card flexbox */

.flex-cards {
  display: grid;
}

.flex-card {
  -webkit-perspective: 40rem;
          perspective: 40rem;
}

.flex-card-body {
	min-width: 100%;

	display: -webkit-box;
	display: flex;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-transition: var(0.707s) transform;
			transition: var(0.707s) transform;
			transition: transform 0.6s;
}
.flex-card:hover .flex-card-body,
.flex-card:focus .flex-card-body {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.flex-card-front, .flex-card-back {
	display: flex;
	flex-direction: column;

	-webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
	min-width: 100%;
}

.flex-card-back {
  -webkit-transform: rotateY(-180deg) translate(100%, 0);
          transform: rotateY(-180deg) translate(100%, 0);
}

/* Make it Pretty */
.flex-cards {
  grid-gap: 1.5rem;
  grid-auto-rows: 1fr;
  padding: 3rem;
  background: whitesmoke;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.flex-card {
  margin: auto;
  display: -webkit-box;
  display: flex;
  -webkit-transition: z-index, -webkit-transform calc(var(0.707s) / 4);
  transition: z-index, -webkit-transform calc(var(0.707s) / 4);
  transition: z-index, transform calc(var(0.707s) / 4);
  transition: z-index, transform calc(var(0.707s) / 4), -webkit-transform calc(var(0.707s) / 4);
  -webkit-transition-delay: var(0.707s), 0s;
          transition-delay: var(0.707s), 0s;
  text-decoration: none;
  color: inherit;
  z-index: 0;
}
.flex-card:hover {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  z-index: 1;
}

.flex-card:hover .flex-card-front h3 {
	visibility: hidden;
	display: none;
}

.flex-card:active {
  -webkit-transform: scale(0.975);
          transform: scale(0.975);
}

.flex-card-body {
   -webkit-box-flex: 1;
          flex: 1;
}

.flex-card-front img,
.flex-card-back {

}

.flex-card-front, .flex-card-back {
  display: -webkit-box;
  display: flex;
  box-sizing: border-box;
}

.shadow, .flex-card-front, .flex-card-back {
  /*box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);*/
}

.flex-card-front {
  background-color: #FFF;
  color: #2F3855;
}

.flex-card-front .title_voorkant {
    position: absolute;
    bottom: 10px;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.flex-card-back {
  background-color: white;
  padding: 20px;
}

.flex-card-back h3.title_achterkant {
    font-size: 18px !important;
   	margin-bottom: 15px;
}

.flex-card-back  ul {
    list-style: none;
    padding: 0;
}
.flex-card-back  ul li {
    padding-left: 0.9em;
}
.flex-card-back  ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
	content: "\f105";
    font-style: normal;
    text-decoration: inherit;
	display: inline-block;
    margin-left: -0.9em;
    width: 0.9em;
    color: #E48A28;
}

/* end */