.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive::before {
    display: block;
    content: "";
}

.embed-responsive::before {
    display: block;
    content: "";
}

.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.flip-card {
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card-inner {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
    position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card.active .flip-card-inner, .flip-card.show .flip-card-inner {
    transform: rotateY(180deg);
  }


  .flip-card-front {
    background-color: #fff;
    color: black;
  }

  .flip-card-back {
    background-color: #fff;
    color: white;
    transform: rotateY(180deg);
  }