.card1{
     width:170px;
     height: 225px;
     margin:10px;
     transition-duration: 0.6s;
     transition-property: 'display';
     display:flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     padding:20px;
 
}
.card1 contenedor{
     display:flex;
     flex-direction:column;
     justify-content: center;
     align-items: center;
     border: 1px solid #999;
     box-shadow: 5px 3px 12px gray;

     cursor:pointer;
     transition-duration: 0.6s;
     height: 100%;
     width:100%;
}
.card1:hover  {
     padding:0px;
}
.card1 imagen{
    height:100px;
    width:100%;
    display: flex;    
    justify-content: center;
    overflow: hidden;
}
.card1 imagen img {
    height: 100%;
}
.card1 contenedor titulo {
 width:130px;
 height: 45px;
 background-color: #3683dc;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
      transition-duration: 0.6s;
      font-size: 14px;
      text-align: center;
}
.card1:hover  contenedor titulo {
    width: 165px;
    padding-left:15px;
    padding-right: 15px;
}
.card1 contenedor descripcion {
 width:100%;
 height: 75px;
 max-width: 125px;
 padding:5px;
 font-size:12px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.card1 a{
    text-decoration: none;
}

.card1 a:hover{
    text-decoration: underline;
}

@media only screen and (max-width:600px){
    .card1{
         width:125px;
         height: 165px;
         margin:8px;
    }
    .card1 imagen{
        height:75px;
        width:100%;
    }
    .card1 imagen img {
        height: 100%;
    }
    .card1 contenedor titulo {
     padding:5px;
     height: 25px;
     font-size:10px;
     width:85px;
    }
    .card1:hover  contenedor titulo {
        width: 115px;
        padding-left: 10px;
        padding-right: 10px;
    }    
    .card1 contenedor descripcion {
     padding:3px;
     height: 50px;
     font-size:12px;
    }
    
}