/* @group Cards
------------------------------------ */
.cards h2 { color: var(--timeline-text); font-size: 2.8em; font-weight: 400; letter-spacing: 4.48px; line-height: 1.143em; margin: 0 0 5.4rem; }
.cards h2 em { display: block; font-weight: 300; }
.card { margin-bottom: 4rem; cursor: pointer; }
.card .box { color: var(--timeline-title); background: var(--bg-card); padding: 1.9rem 3.6rem 3.5rem; border-radius: 6rem; box-shadow: 0 .3rem .6rem rgba(68,93,108,.36); position: relative; overflow: hidden; cursor: pointer; }
.card .img-box { height: 28rem; max-width: 28rem; width: 28rem; border-radius: 100%; margin: 0 6rem 2.1rem 0; position: relative; left: 50%; transform: translate(-50%, 0); cursor: pointer; }
.card .link-circle { text-align: right; }
.card .box > .visible { text-align: right; height: 8rem; margin: 0 0 1.7rem; }
.card .link-circle { color: var(--timeline-title); }
.card .link-circle svg { stroke: var(--timeline-title); }
.card h4 { font-size: .9em; font-weight: 700; letter-spacing: 1.44px; line-height: 1.339em; }
.card p { font: 500 1.3em / 1.542em var(--bilo-font); letter-spacing: 2.08px; }
.card .absolute-list { position: absolute; top: 14.3rem; left: .5rem; background: var(--bg-card); width: 7rem; height: 26rem; text-align: center; }
.card .absolute-list i { font-size: 1.7em; display: block; margin: 0 0 1.5rem; }
.card .absolute-list .icon-x4 { font-size: 2.9em; margin: 0 0 1.5rem; }

/* .card[data-state="closed"] .box { animation: closeMost 1s 1 cubic-bezier(1,.2,0,.4) forwards; cursor: pointer; }
.card[data-state="open"] .box { animation: openMost 2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; cursor: pointer; }
.card[data-state="closed"] a { pointer-events: none; } */

.card .play-video { color: var(--light-grey); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); z-index: 4; text-transform: uppercase; text-shadow: 0px 0px .3rem rgba(68,93,108,.6); display: none;; }
.card .play-video i svg { stroke: var(--light-grey); -webkit-filter: drop-shadow( 3px 3px 2px rgba(68,93,108,.6)); filter: drop-shadow( 3px 3px 2px rgba(68,93,108,.6)); }
.card video[data-state="stopped"] + .play-video .no-visible { display: none; }
.card video[data-state="playing"] + .play-video .visible { display: none; }
.card video[data-state="playing"] + .play-video { opacity: 0; }

@media only screen
and (min-width : 961px) {
    .cards h2 { font-size: 3.6em; letter-spacing: 5.76px; line-height: 1.167em; margin: 0 0 4.6rem; }
    .card .box { padding: 1.7rem 3.3rem 1rem 5.2rem; }
    .card .img-box { height: 31.8rem; width: 31.8rem; max-width: 31.8rem; margin: 0 0 2.2rem; margin-right: 6rem; }
    .card .absolute-list { background: none; }

    .card .box > .visible { margin: 0 0 1.3rem; }
    .card h4 { font-size: .8em; letter-spacing: 1.28px; line-height: 1.5em; margin: .4rem 0 .8rem; }
    
    .card .absolute-list { left: 1.2rem; width: 5.6rem; height: auto; }
    .card .absolute-list h4 { margin: 0 0 1rem; }
    
    .card .info-table .col-12-3 { padding: 0 1rem; min-height: 8.6rem; text-align: left; }
    .card .info-table .col-12-3::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: .1rem; background: var(--bg-bar); opacity: .25; }
    .cards:not(.cards-small):not(.cards-big) .card .play-video { padding-right: 4rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 1920px) {
    .cards .col-xl-12-10 .row { max-width: 138rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .card .img-box::after { content: ''; position: absolute; top: 0; left: 1.5rem; content: ''; height: 100%; width: 7.4rem; background: transparent linear-gradient(270deg, rgba(245,245,245,0) 0%, rgba(245,245,245,1) 90%); }
    .card .info-table { display: table; }
    .card .info-table .col-12-3 { display: table-row; }
    .card .info-table h4,
    .card .info-table p { display: table-cell; vertical-align: middle; text-align: left; width: 50%; padding: 0 .7rem; }
    .card .info-table h4 { text-align: right; }
    .cards:not(.cards-small):not(.cards-big) .card .link-circle { font-size: 1.4em; }
    .cards:not(.cards-small):not(.cards-big) .card .box > .visible { margin: -1rem 0 2.7rem; }
    .cards:not(.cards-small):not(.cards-big) .card .medium-3 i { min-height: 10rem; min-width: 8.2rem; margin-left: -1.4rem; }
}
@media only screen
and (min-width : 700px)
and (max-width : 960px) {
    .cards .card { max-width: 39rem; }
}

/* @end */

/* @group Cards - Black
------------------------------------ */
.cards-black .box { background: var(--bg-dark); text-align: right; }

@media only screen
and (min-width : 961px) {
    .cards-black .img-box::after { content: ''; position: absolute; top: 0; left: 0; content: ''; height: 28.9rem; width: 100%; background: transparent linear-gradient(0deg, rgba(245,245,245,0) 0%, rgba(23,23,39,1) 100%); }
    .card-black .absolute-list { background: none; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 1920px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .cards-black .absolute-list { background: var(--bg-dark); }
    .cards-black .img-box::after { background: transparent linear-gradient(270deg, rgba(23,23,39,0) 0%, rgba(23,23,39,1) 90%);   }
}

/* @end */

/* @group Cards - Small
------------------------------------ */

.cards-small .img-box { margin-bottom: 1.5rem; }
.cards-small .medium-3 { position: relative; margin-right: -2rem; }
/* .cards-small .card[data-state="closed"] .medium-3 { animation: upCard 1.2s 1 cubic-bezier(1,.2,0,.4) forwards; }
.cards-small .card[data-state="open"] .medium-3 { animation: downCard .5s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; } */
.cards-small .img-box::after {content: none; }
.cards-small .medium-3 em { color: var(--timeline-text); display: block; font-size: .725em; letter-spacing: 2.08px; line-height: 1.542em; }
.cards-small .medium-3 i .arrow-icon--circle { stroke-dasharray: 115 80; }
@media only screen
and (min-width : 961px) {
    .cards-small .card .box { padding: 5.6rem 3.7rem 2.4rem; }
    /* .cards-small .card[data-state="closed"] a { pointer-events: all; }
    .cards-small .card[data-state="closed"] .box,
    .cards-small .card[data-state="open"] .box { animation: none; } */
    .cards-small .img-box { height: 26rem; width: 26rem; max-width: 26rem; }
    /* .cards-small .card[data-state="closed"] .medium-3 { animation: upCardDesktop 1.2s 1 cubic-bezier(1,.2,0,.4) forwards; }
    .cards-small .card[data-state="open"] .medium-3 { animation: downCardDesktop .5s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; } */
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 1920px) {
    .cards-small .card .box { padding: 7.7rem 4rem 2.8rem; }
    .cards-small .img-box { height: 35.6rem; width: 35.6rem; max-width: 35.6rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .cards-small .card[data-state="open"] .box { padding: 5.6rem 3.7rem 2.4rem; }
    .cards-small .card .img-box { display: none; }
    /* .cards-small .card[data-state="closed"] .img-box { animation: closeDraw 1s 1 cubic-bezier(1,.2,0,.4) forwards; cursor: pointer; margin: 0; } */
    /* .cards-small .card[data-state="open"] .img-box { animation: openDraw 2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; cursor: pointer; } */
    .cards-small .img-box::after { content: none; }
}

/* @end */

/* @group Cards - Big
------------------------------------ */
.cards-big .card { margin-bottom: 2.5rem; }
.cards-big .box { padding: 1.9rem 3.6rem 2.6rem; }
.cards-big .img-box { margin-bottom: 3rem; }
.cards-big .medium-3 { margin-right: -2rem; }

.cards-big .card[data-state="closed"] .box,
.cards-big .card[data-state="open"] .box { animation: none; }
.cards-big .card[data-state="closed"] a { pointer-events: all; }

@media only screen
and (min-width : 961px) {
    .cards-big > .row { max-width: 138rem; }
    .cards-big .img-box { height: 44rem; width: 44rem; max-width: 44rem; margin-bottom: 2.1rem; }
    .cards-big .box { padding: 3.3rem 5.1rem 1rem; }
    .cards-big .box > .visible { margin: 0 0 -3rem; z-index: 2; position: relative; }

    .cards-big .box > .visible { height: 12.5rem; margin: 0 0 -6rem; }
    .cards-big h4 { font-size: 1.2em; letter-spacing: 1.92px; line-height: 1.5em; margin: 1rem 0 1.7rem; }
    
    .cards-big .absolute-list { left: 1.5rem; width: 8.6rem; height: auto; }
    .cards-big .absolute-list h4 { margin: 0 0 2.3rem; }
    .cards-big .absolute-list i { font-size: 2.4rem; margin: 0 0 2.6rem; }
    .cards-big .info-table .col-12-3 { padding: 0 1.5rem; min-height: 11.4rem; text-align: left; }


    .cards-big .medium-3 { font-size: 2.8em; letter-spacing: 4.48px; line-height: 1em; }
    .cards-big .medium-3 i { font-size: 2.7rem; height: 12.5rem; width: 11.4rem; margin-left: -2.8rem; }
    .cards-big .medium-3 i .arrow-icon--circle { stroke-dasharray: 115 80; stroke-dashoffset: 0; }
    .cards-big .medium-3 em { color: var(--timeline-text); display: block; font-size: .643em; letter-spacing: 2.88px; line-height: 1.556em; }
    .cards-big .medium-3 i .arrow-icon--circle { stroke-dasharray: 115 80; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 1920px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .cards-big .medium-3 em { color: var(--timeline-text); display: block; font-size: .725em; letter-spacing: 2.08px; line-height: 1.542em; }
    
}

/* @end */