/* .basic-header */
.basic-header { background: url(/img/xix-premio-de-investigacion-burdinola.jpg) no-repeat center center; background-size: 100% 100%;}
.basic-header .text-content { display: none;}
.basic-header .bg-content { opacity: 1;}
.basic-header .bg-content.image img { object-fit: contain;}

@media(min-width: 501px) and (max-width: 1100px){
    .basic-header { height: 400px; }
}
@media(min-width: 501px) and (max-width: 676px){
    .basic-header { height: 300px; }
}


/* .description */
.description .text-content p .btn01 { margin-top: 3rem;}

@media(max-width: 1023px){
    .description { padding-top: 3rem;}
    .description .content.flex { flex-wrap: wrap;}
    .description .content.flex > div { width: 100%;}
    .description .image-content { display: block; margin: 3rem 0 0;}
    .description .image-content img { margin: auto;}
}

/* .time-line */
.time-line:after { top: 0; height: 100%;}
.time-line .item .content.flex > div.text-content { text-align: left;}

@media(min-width: 1025px){
    .time-line .item .content.flex > div.image-content { padding: 5rem;}
}
@media(max-width: 1100px){
    .time-line .item .content.flex > div.text-content { padding: 0 3rem !important;}
}
@media(max-width: 1023px){
    .time-line .item .content.flex > div.text-content { padding: 0 3rem !important;}
}



/* a.box */
a.box.flex { align-items: stretch; flex-wrap: nowrap; position: relative; overflow: hidden; width: 100%; text-align: left; background: #fafafa; margin-bottom: 1rem; margin: 0 0 1rem; padding: 0;}
a.box.flex:after { content: ""; position: absolute; top: 0; right: 0; z-index: 1; width: 0; height: 100%; background: #efcd34; transition: width .5s ease;}
a.box.flex > * { position: relative; z-index: 5;}
a.box.flex h3 { width: calc(100% - (20px + 2rem)); font-family: 'apercuregular', sans-serif; font-weight: normal; text-transform: none; padding: 1em; transition: color .5s ease;}
a.box.flex span { justify-content: center; align-items: center; width: calc(20px + 2rem); line-height: 0; color: #fff; background: #efcd34; transition: padding .3s ease; margin: 0;}

@media(hover:hover){
    a.box.flex:hover:after { width: 100%;}
    a.box.flex:hover h3 { color: #fff;}
    a.box.flex:hover span { padding: 1.25rem 1rem .75rem;}
}