.servicio-card {display: flex; flex-direction: column; margin: 1rem auto; box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.2); margin-bottom: 1.6%; background: #fff; line-height: 1.4; font-family: sans-serif; border-radius: 5px; overflow: hidden; z-index: 0;}
.servicio-card a {color: inherit;}
.servicio-card a:hover {color: #8CC63F;}
.servicio-card:hover .photo {-webkit-transform: scale(1.3) rotate(3deg); transform: scale(1.3) rotate(3deg);}
.servicio-card .meta { position: relative; z-index: 0; height: 200px;}
.servicio-card .photo {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s;}
.servicio-card .details, .servicio-card .details ul {margin: auto; padding: 0; list-style: none;}
.servicio-card .details {position: absolute; top: 0; bottom: 0; left: -100%; margin: auto; transition: left 0.2s; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 10px; width: 100%; font-size: 0.9rem;}
.servicio-card .details a {-webkit-text-decoration: dotted underline; text-decoration: dotted underline;}
.servicio-card .details ul li {display: inline-block;}
.servicio-card .details .author:before {font-family: FontAwesome; margin-right: 10px; content: "\f007";}
.servicio-card .details .date:before {font-family: FontAwesome; margin-right: 10px; content: "\f133";}
.servicio-card .details .tags ul:before {font-family: FontAwesome; content: "\f02b"; margin-right: 10px;}
.servicio-card .details .tags li {margin-right: 2px;}
.servicio-card .details .tags li:first-child { margin-left: -4px;}
.servicio-card .description {padding: 1rem; background: #fff; position: relative; z-index: 1;}
.servicio-card .description h1, .servicio-card .description h2 {font-family: Poppins, sans-serif;}
.servicio-card .description h1 {line-height: 1; margin: 0; font-size: 1.7rem;}
.servicio-card .description h2 {font-size: 1rem; font-weight: 300; text-transform: uppercase; color: #a2a2a2; margin-top: 5px;}
.servicio-card .description .read-more {text-align: right;}
.servicio-card .description .read-more a {color: #8CC63F; display: inline-block; position: relative;}
.servicio-card .description .read-more a:after {content: "\f061"; font-family: FontAwesome; margin-left: -10px; opacity: 0; vertical-align: middle; transition: margin 0.3s, opacity 0.3s;}
.servicio-card .description .read-more a:hover:after { margin-left: 5px; opacity: 1;}
.servicio-card p {position: relative; margin: 1rem 0 0;}
.servicio-card p:first-of-type {margin-top: 1.25rem;}
.servicio-card p:first-of-type:before {content: ""; position: absolute; height: 5px; background: #8CC63F; width: 35px; top: -0.75rem; border-radius: 3px;}
.servicio-card:hover .details {left: 0%;}

@media (min-width: 640px) {
  .servicio-card {
    flex-direction: row;
    max-width: 100%;
  }
  .servicio-card .meta {
    flex-basis: 40%;
    height: auto;
  }
  .servicio-card .description {
    flex-basis: 60%;
  }
  .servicio-card .description:before {
    -webkit-transform: skewX(-3deg);
            transform: skewX(-3deg);
    content: "";
    background: #fff;
    width: 30px;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    z-index: -1;
  }
  .servicio-card.alt {
    flex-direction: row-reverse;
  }
  .servicio-card.alt .description:before {
    left: inherit;
    right: -10px;
    -webkit-transform: skew(3deg);
            transform: skew(3deg);
  }
  .servicio-card.alt .details {
    padding-left: 25px;
  }
}