#contenedor_cards{
  /* background-image: url('../imagenes/bg_services.jpg'); */
}
.element {
  /* border-right: 1px solid #CCCCCC; */
  /* box-shadow: 3px 8px 17px -13px rgba(0,0,0,0.75); */
  /* border-radius: 5px; */
  /* background-image: url('../imagenes/equipo/1.png'); */
 width: 100% !important;
  float: left;
  height: 30rem;
  /* margin-right: 1.5rem; */
  overflow: hidden;
  position: relative;
  /* width: 220px; */
}

.element:hover .img {
  /* gara */
  /* margin-top: -30rem; */
  width: 100%;
}

/* gara */
.element:hover .description { margin-top: -41rem;}
.element:hover .img { filter: grayscale(100%);}
/* gara hasta aqui */

.element a {
  text-decoration: none;
  color: #000;
}

.img, .description {
  height: 30rem;
}

.element .img {
  width: 100% !important;
margin-top: 0;
/* background: #000000; */

-webkit-transition-property: margin-top;
-webkit-transition-duration: .5s;

-moz-transition-property: margin-top;
-moz-transition-duration: .5s;

-o-transition-property: margin-top;
-o-transition-duration: .5s;

-ms-transition-property: margin-top;
-ms-transition-duration: .5s;

}




.description {
background: #000;
opacity: .7;
color: #fff;
/* font-family: Arial; */
font-size: 12px;

}



.description p {
  padding:0 0 0 5px;
  margin-bottom: 0.18rem;
}

/* Empieza estilos de las tarjetas pero con la información que es */
.description a{
color: #f0f0f0d4;
}

.description a:hover{
  color: white;
  text-decoration: underline;
}


.contenido-atras{
  /* color: #6c757d !important; */
  font-size: .8rem;
  border-bottom: 1px dotted #fff;
  padding-bottom: 1rem;
}


/* ------------------------------------------------ */

@media only screen and (max-device-width : 900px) {
  .element {
    width: 100% !important;
  }

.element { height: 42rem; }
.element:hover .img { margin-top: 0;}
.img, .description { height: 42rem; }
.element .img {
  margin-top: -42rem;
  width: 100%;
  }
}