/* Espaciados usados en la sección */
.pt-20 { padding-top: 20px;   }
.pt-50 { padding-top: 50px;   }
.mb-30 { margin-bottom: 30px; }

/* Imagen y categoría del post */
.blog-img { position: relative; }
.blog-img img { width: 100%; display: block; }
.post-category { position: absolute; left: 0; bottom: 0; }

.post-category a {
  display: inline-block;
  background-color: #f00128;
  color: #fff;
  font-size: 15px;
  padding: 5px 20px;
}

/* Card del post */
.single-blog { border: 1px solid #eee; }
.single-blog:hover img { opacity: .85; }

/* Contenido */
.blog-content { padding: 30px 20px; }
.blog-title h2, .blog-title h4 { font-weight: 600; margin: 0 0 5px; }
.blog-title h3 { font-size: 1.75em; }

/* Meta */
.meta { margin-bottom: 20px; opacity: .85; }
.meta ul { margin: 0; padding: 0; list-style: none; }

/* Botón "Leer más" */
.blog-content a.box_btn {
  display: inline-block;
  background-color: #f00128;
  padding: 5px 15px;
  color: #fff;
  text-transform: capitalize;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  z-index: 2;
  text-decoration: none;
  transition: .5s;
}

.blog-content a.box_btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #B20000;
  left: -100%;
  top: 0;
  transition: .5s;
  z-index: -1;
}

.blog-content a.box_btn:hover::before { left: 0; }

@media (max-width: 767px) {
  .blog-title h3 {
    font-size: 1.5em;
    margin: 15px 0;
  }
}