/* flip-y.css - Efecto flip sobre el eje Y (vertical) */

ul li.demo-row{ /*width: 50%; */ float: left; list-style: none; /*margin-bottom: 30px;*/}
ul li.center{margin:0 25%;}

h3{ font-family: "Encode Sans", sans-serif; font-weight:500; }

.flip-card {
  perspective: 1200px;
  width: 510px;
  height: 300px;
  display: inline-block;
  position: relative;
  padding: 0 10px 10px 10px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.75s cubic-bezier(.4, .2, .2, 1);
  transform-style: preserve-3d;
  position: relative;
}

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

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2px;
}

.flip-card-front {
  background: #fff;
  color: #111;
}
.nombre{
  position: absolute;
  color:#ffffff; 
  font-weight:700; 
  letter-spacing:0.05em;
  text-align: center;
}
.nombre h3 {font-size: 18px;}

.flip-card-back {
  background: #f3f3f3;
  color: #111;
  transform: rotateY(180deg);
}
.flip-card-back .nombre h3, .flip-card-back .nombre a {color: var(--azul);}
.flip-card-back .nombre h3{margin-top: 45px;}
.flip-card-back a:hover{color: #efefef; border-color: #efefef; /*background-color:#00000080;*/}

.flip-card-front img,
.flip-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media only all and (max-width: 30rem){
  #hace ul{ margin-left:0; }
  .flip-card{ width:340px; }
}