/* @group Timeline Control
------------------------------------ */
.timeline-controls .container-cronology { max-width: 134.8rem; margin: 0 auto; overflow: hidden; overflow-x: auto; }
.timeline-controls ul { position: relative; display: inline-block; white-space: nowrap; padding: 0 0 .2rem; }
.timeline-controls ul:after { content: ''; background: var(--bg-visit); height: 1.6rem; border-radius: .9rem; position: absolute; bottom: 0; left: 0; width: 100%; }
.timeline-controls li { display: inline-block; font-size: 2em; letter-spacing: 1.2px; line-height: 1.400em; padding: 0 1rem; position: relative; z-index: 2; }
.timeline-controls li:first-child { padding-left: 0; }
.timeline-controls li:nth-child(2) { padding-right: 4.2rem; }
.timeline-controls li:nth-child(3) { padding-right: 8.3rem; }
.timeline-controls li:nth-child(4) { padding-right: 0; }
.timeline-controls li:nth-child(5) { padding-right: 1.4rem; }
.timeline-controls li:nth-child(6) { padding-right: 9.6rem; }
.timeline-controls li:nth-child(7) { padding-right: 18.8rem; }
.timeline-controls li:nth-child(8) { padding-right: 2.1rem; }
.timeline-controls li:nth-child(9) { padding-right: 1.5rem; }
.timeline-controls li:nth-child(10) { padding-right: 1.8rem; }
.timeline-controls li:nth-child(11) { padding-right: 4.3rem; }
.timeline-controls li:nth-child(12) { padding-right: 1.2rem; }
.timeline-controls li:nth-child(13) { padding-right: 1.6rem; }
.timeline-controls li a:after { content: ''; background: var(--bg-white); display: block; height: 1.6rem; width: 1.6rem; border-radius: 100%; overflow: hidden; margin: .8rem auto -.4rem; }
.timeline-controls h2 { color: var(--title-light); font-size: 7em; font-style: italic; letter-spacing: 11.2px; line-height: 1.300em; }
@media only screen
and (min-width : 961px) {
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}

/* @end */

/* @group Timeline Highlight
------------------------------------ */
.timeline-highlight { color: var(--timeline-title); overflow: hidden; }
.timeline-highlight .img-box { height: 52.2rem; max-width: 45.2rem; }
.timeline-highlight .round { height: 45.2rem; border-radius: 100%; }
.timeline-highlight h2 { font-size: 10rem; font-style: italic; letter-spacing: 16px; line-height: 1em; }
.timeline-highlight h3 { font-size: 2.4em; letter-spacing: 3.84px; line-height: 1.335em; margin: 0 0 3.2rem; }
.timeline-highlight h3 em { display: block; }
.timeline-highlight button { color: var(--timeline-title); font: 500 1.4em / 1.286em var(--bilo-font); letter-spacing: 2.24px; text-transform: uppercase; margin: 0 0 3.7rem;     display: flex; align-items: center; }
.timeline-highlight button i { margin-left: 8.6rem; }
.timeline-highlight h4 { font-size: 1.4em; letter-spacing: 2.24px; line-height: 1.286em; margin: 0 0 3.4rem; }
.timeline-highlight p { color: var(--timeline-text); font-size: 2em; line-height: 1.600em; }
.timeline-highlight .no-image h4 { font-size: 2.4em; letter-spacing: 3.84px; line-height: 1.335em; margin: 0 0 5rem; }
.timeline-highlight .no-image h4 em { font-weight: 400; display: block; }
@media only screen
and (min-width : 961px) {
    .timeline-highlight .img-box { margin: 0 auto; }
    .timeline-highlight header { text-align: center; padding: 0; }
    .timeline-highlight h2 { margin: 0 0 1rem; }
    .timeline-highlight header::after { content: ''; display: block; background:var(--timeline-title); height: .1rem; width: 50%; position: relative; }
    .timeline-highlight .subtitle { text-align: right; }
    .timeline-highlight h3 { margin: 3.3rem 0 0; }
    .timeline-highlight h4 { margin: 4.6rem 0 3.4rem; }
    .timeline-highlight .no-image h4 { text-align: right; margin: 2.6rem 6rem 0 0; }

    .timeline-highlight p:first-child { margin-top: 9.8rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
    .timeline-highlight .img-box { height: auto; }
    .timeline-highlight .round { max-height: 33.33333333333333vw; }
}
@media only screen
and (min-width : 1920px) {
    .timeline-highlight header::after { width: 41.66666666666667%; left: 8.333333333333332%; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .timeline-highlight .order-12-3:not(.no-image) { padding: 0; position: relative; }
    .timeline-highlight .round { width: 45.2rem; left: calc(50% - 22.6rem); }
    .timeline-highlight .order-12-3:not(.no-image)::after { content: ''; position: absolute; bottom: 0; left: 0; height: 39.7rem; width: 100%; background: transparent linear-gradient(180deg, rgba(51,51,64,0) 0%, rgba(23,23,39,1) 100%); }
    .timeline-highlight header { margin: -10rem 0 0; }
    .timeline-highlight .no-image + header { margin: 0 0 0; }
    .timeline-highlight header h2 { position: relative; top: -2.5rem; }
    .timeline-highlight .no-image + header h2 { top: 0; }
    .timeline-highlight article { animation: closeDraw .5s 1 cubic-bezier(1,.2,0,.4) forwards; overflow: hidden; }
    .timeline-highlight article[data-state="open"] { animation: openDraw 2s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; }
}

/* @end */

/* @group Timeline Items
------------------------------------ */
.timeline-items { color: var(--timeline-title); overflow: hidden; }
.timeline-items h2 { font-size: 10rem; font-style: italic; letter-spacing: 16px; line-height: 1em; margin: 0 0 1rem; }
.timeline-items .img-box { background: rgba(229,229,229,1); height: 24.2rem; margin: 0 0 3.8rem; }
.timeline-items h3 { font-size: 2.4em; letter-spacing: 3.84px; line-height: 1.335em; margin: 0 0 3.5rem; }
.timeline-items h3 em { display: block; }
.timeline-items h4 { font-size: 1.4em; letter-spacing: 2.24px; line-height: 1.286em; margin: 0 0 1.8rem; }
.timeline-items p { color: var(--timeline-text); font-size: 2em; line-height: 1.600em; }
@media only screen
and (min-width : 961px) {
    .timeline-items .timeline-item { padding: 0 1rem; }
    .timeline-items p { max-width: 34.8rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 1920px) {
    .timeline-items .timeline-item { max-width: 46.8rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .timeline-items .timeline-item { padding: 0; margin: 0 0 5rem; }
}

/* @end */