.flip-container {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  margin:0 auto;
}

.card {
  position: relative;
  display:inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}

.card h3, card p {
  display:block; 
} 

.card p, .card button { 
  color:#FFF; 
}

/* GIRA HORIZONTAL */
.flip-container:hover .card {
  transform: rotateY(180deg);
}


/* GIRA VERTICAL 
.flip-container:hover .card {
  transform: rotateX(180deg);
}
*/


.frente, .dorso {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.frente {
  background-color: #dd5599;
  color: #fff;
  display: flex;
}

.dorso {
  background-color: #6ed3ab;
  color: #faebd7;
  /*transform: rotateX(180deg);*/
  transform: rotateY(180deg);
  text-align:center;
}

.dorso p {
  font-size:0.65em;
}

.dorso button { 
  display:block; 
  width:60%; 
  margin:2rem auto 0; 
  border:2px solid #fff;
  background:transparent;
  padding:1em;
  text-transform:uppercase;
}

.dorso button:hover {
  color:#5f127c;
  border-color:#5f127c;
  font-weight:bold;
}