body{
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       font-family: roboto slab;
}

.container{
       width: 100%;
       display: flex;
       max-width: 1200px;
       flex-wrap: wrap;
       justify-content: center;
       margin: auto;
}

.card{
       width: 330px;
       height: 100%;
       margin: 20px;
       border-radius: 6px;
       overflow: hidden;
       background: #fff;
       box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
       cursor: default;
       transition: all 400ms ease;
}

.card:hover{
       box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
       transform: translateY(-3%);
}

.card img{
       width: 100%;
       height: 220px;
}

.card .contenido {
       padding: 15px;
       text-align: center;
}

.card .contenido p{
       line-height: 1.5;
       color: #6a6a6a;
       text-align: justify;
       font-size: 13px;
}

.card .contenido h3{
       font-weight: 400;
       margin-bottom: 10px;
}

.card .contenido a{
       text-decoration: none;
       display: inline-block;
       padding: 10px;
       margin-top: 5px;
       color: #5ec79c;
       border: 1px solid #5ec79c;
       border-radius: 4px;
       transition: all 400ms ease;
}

.card .contenido a:hover{
    background: #5ec79c;
    color: #fff;
}