/* styles for flip cards */


.flip-card {
  background-color: transparent;
  width: 240px;
  height: 400px;
  perspective: 1000px;
  margin: auto;
  cursor: pointer;
}
.flip-card h2 {
	font-weight: 500; 
	font-family: 'Arapey';
}
.flip-card-inner {
  position: relative;
  width: 250px;
  height: 360px;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 5px 9px 13px rgba(0,0,0,0.25);
}
.flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
}
/*  **************************************************
NOTE: The @media (hover: none) tag 
forces TOUCH devices (incapable of hover gestures)
to show (by default) the hover state
of the class(es) in question 
*/
@media (hover: none) {
	.flip-card .flip-card-inner {
		transform: rotateY(180deg);
	}
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-front {
  background-color: #c90;
  color: lemonchiffon;
}
.flip-card-front i {
	color: lemonchiffon;
	font-size: 16vw;
	opacity: 0.75;
	filter: drop-shadow(3px 4px 8px rgba(0,0,0,0.25));
}
.flip-card-back {
  background-color: #c90;
  color: white;
  transform: rotateY(180deg);
  padding: 0.5rem;
}
.flip-card-back p {
	font-size: 14px;
	font-weight: 500; 
	line-height: 1.7;"
}