body {
  font-family: 'Grandstander', sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #6c6c6c;
}
.btn-primary {
  color: #fff;
  background-color: #879ecc;
  border-color: #879ecc;
}
.btn-check:focus+.btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: #d47e73;
  border-color: #d47e73;
  box-shadow: 0 0 0 0.25rem;
}
.btn-check:focus+.btn-primary, .btn-primary:hover {
  color: #fff;
  background-color: #d47e73;
  border-color: #d47e73;
  box-shadow: 0 0 0 0.25rem;
}

.card {
position: relative;
display: block;
flex-direction: column;
width: 300px;
height: 360px;
background: #fff;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
float:left;
text-align: center;
margin-right:20px;
margin-bottom:20px;
/* transition: property duration transition-timing-function delay;  */
transition-property: color;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
transition-delay: 0.15s;
/*JS*/
/*JS*/
}
.cardcuentos {
position: relative;
display: block;
flex-direction: column;
width: 300px;

background: #fff;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
float:left;
text-align: center;
margin-right:20px;
margin-bottom:20px;
/* transition: property duration transition-timing-function delay;  */
transition-property: color;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
transition-delay: 0.15s;
/*JS*/
/*JS*/
}
.cardfiles {
position: relative;
display: block;
flex-direction: column;
width: 230px;

background: #fff;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
float:left;
text-align: center;
margin-right:20px;
margin-bottom:20px;
/* transition: property duration transition-timing-function delay;  */
transition-property: color;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
transition-delay: 0.15s;
/*JS*/
/*JS*/
}
.card.hover {
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
transition-delay: 0s;

}
.card__head {
position: relative;
padding-top: 70%;
}
.card__image {
background: url("https://25yearslatersite.com/wp-content/uploads/2020/05/rickandmorty_s4e8acid.jpg") no-repeat center/cover;
position: absolute;
/*usar las 4 propiedades indica que ocupe todo el espacio*/
top: 0;
left: 0;
right: 0;
bottom: 0;
transform-origin: top center;
/* transition: property duration transition-timing-function delay;  */
transition-property: transform;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
transition-delay: 0.15s;
}
.card__image::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
//background: linear-gradient(30deg, rgba(26, 42, 99, 0.85), rgba(26, 42, 99, 0.5));
opacity: 0 ;
background-color: rgba(0,0,0,0.5);
/* transition: property duration transition-timing-function delay;  */
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
transition-delay: 0.15s;
}
.card.hover .card__image {
transition-delay: 0s;
}
.card.hover .card__image::after {
opacity: 1;
transition-delay: 0s;
}
.card__author {
position: absolute;
padding: 2em;
left: 0;
bottom: 0;
color: #fff;
/* transition: property duration transition-timing-function delay;  */
transition-property: transform;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
transition-delay: 0.15s;
}
.card__link {
position: relative;
padding: 1em 6em 3em;
bottom: -1em;

}
.card_enlace {
color:#4a7bbb;
text-decoration:none;
margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 900;
  line-height: 1.2;
  font-size: 1.6rem;
 
}
.card_enlace:hover {

color:#fff;
transition-property: transform;
transition-duration: 1.4s;
transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
transition-delay: 5s;
cursor: pointer;

}
.card.hover .card__author {
transition-delay: 0s;
}
.card__body {
position: relative;
padding: 1em 0.3em 3em;
/* transition: property duration transition-timing-function delay;  */
transition-property: transform;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
transition-delay: 0.15s;
min-height: 164px;
}
.card.hover .card__body {
transition-delay: 0s;
}
.card__foot {
position: absolute;
left: 2em;
bottom: 1.5em;
cursor: pointer;
}

.author {
display: flex;
align-items: center;
justify-content: space-around;
}
.author__image {
width: 30px;
}
.author__content {
margin-left: 1em;
}
.author__content p {
margin: 0;
text-shadow: 2px 0px 10px #201f1f;
}
.default-footer {
background-color: #EFEFEF;
  margin-top: 100px;
  min-height: 300px;
  color: #7E7E7E;
display: clean;
}
a {
text-decoration: none;
}

#vista {
float: left;
width: 100%;
margin-bottom: 2em;
}

#vista_btn {
color: #0d6efd;
float: right;
width: 200px;
height: 2em;
padding-top: 0.45em;
text-align: center;
display: table-cell;
vertical-align: bottom;
border-radius: 8px;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
cursor: pointer;
}

#vista_btn:hover {
background-color: #eee;
}

.listado { float: left; width: 100%; display: inline; padding: 0 }
.listado li { clear: both; width: 100%; height: 3.5em; max-height: 3.5em; padding: 0.5em; background-color: #879ecc; border-radius: 0.25rem }
.listado img { float: left; height: 2.5em; margin: 0 1em 1em 0 }
.listado_titulo { display: table; height: 2.5em }
.listado_titulo > div { display: table-cell; vertical-align: middle; line-height: 1.2em }
.listado_titulo a {  width: auto; color: #fff !important; vertical-align: middle; cursor: pointer }
.nav-link, .nav-link svg { font-size: 1.3em }
.aviso { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 0.95em }
.aviso a { color: #888 !important }
.aviso a:hover { color: #555 !important }