/* Estilos del container*/
.cardifyContainer {
  align-items : stretch ;
  align-content: flex-end;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 20px 0;
}

/* Estilos del figure */
.cardifyFigure{
  align-items: center;
  background-color: #f7f7f7;
  border-radius: 5px;
  display: flex;
  flex-flow: column;
  justify-content: center;
	margin: 5%;
  padding: 2.5%;
  position: relative;
  width: 70%;
}

/* Estilos de la imagen */
.cardifyImage{
  width: 100%;
  opacity: 1;
  transition: opacity .5s;
}

/* Estilos de la imagen en hover */
.cardifyFigure:hover .cardifyImage {
  opacity: 0;
  

}

/* Estilos del figcaption */
.cardifyFigcaption {
  /* color: #3a7999; */
	/* font-size: 5em; */
  line-height : 1.2;
  opacity: 0;
  padding : 5% ;
  position : absolute;
  text-align : center ;
  transition : opacity 0.1s; 
  width : 90% ;

}

/* Estilos del ficaption en hover */
.cardifyFigure:hover .cardifyFigcaption {
  opacity: 1;
}

/* Breakpoints */
/* Small */
@media (min-width: 576px) {
  .cardifyFigure{
    margin: 3%;
    padding: 1.75%;
    width: 35%;
  }
}

/* Medium */
@media (min-width: 768px) {
  .cardifyFigure{
    margin: 2.5%;
    padding: 1.25%;
    width: 25%;
  }
}

/* Large */
@media (min-width: 992px) {
  .cardifyFigure{
    padding: 1%;
    width: 18%;
  }
}