/*** TIMELINE ***/
:root{
	--dateH: 3rem;
}
.ul-timeline__v1{--col-gap: 2rem;--row-gap: 2rem;--line-w: 0.25rem;display: grid;grid-template-columns: var(--line-w) 1fr;grid-auto-columns: max-content;column-gap: var(--col-gap);list-style: none;width: min(60rem, 90%);margin-inline: auto;}
.ul-timeline__v1::before {content: "";grid-column: 1;grid-row: 1 / span 20;background: var(--orange);border-radius: calc(var(--line-w) / 2);}
.ul-timeline__v1 li:not(:last-child) {margin-bottom: var(--row-gap);}
.ul-timeline__v1 li {grid-column: 2;--inlineP: 1.5rem;margin-inline: var(--inlineP);grid-row: span 2;display: grid;grid-template-rows: min-content min-content min-content;}
.ul-timeline__v1 li .title{--dateH: 3rem;height: var(--dateH);margin-inline: calc(var(--inlineP) * -1);text-align: center;background-color: var(--blue);color: white;font-size: 1.25rem;font-weight: 700;display: grid;place-content: center;position: relative;border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2); padding:0px;}
.ul-timeline__v1 li .title::before{content: "";width: var(--inlineP);aspect-ratio: 1;background: var(--blue);background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);position: absolute;top: 100%;clip-path: polygon(0 0, 100% 0, 0 100%); right: 0;}
.ul-timeline__v1 li .title::after {content: "";position: absolute;width: 2rem;aspect-ratio: 1;background: var(--bgColor);border: 0.3rem solid var(--blue);border-radius: 50%;top: 50%;
transform: translate(50%, -50%);right: calc(100% + var(--col-gap) + var(--line-w) / 2);}
.ul-timeline__v1 li .descr {background: var(--bgColor);position: relative;padding-inline: 1.5rem;padding-top: 20px;padding-block-end: 1.5rem;font-weight: 300;}
.ul-timeline__v1 li .descr::before {content: "";position: absolute;width: 90%;height: 0.5rem;background: rgba(0, 0, 0, 0.5);left: 50%;border-radius: 50%;filter: blur(4px);transform: translate(-50%, 50%);z-index: -1; bottom: 0.25rem;}

.ul-timeline__v2{--col-gap: 2rem;--row-gap: 4rem;--line-w: 0.25rem;display: grid;grid-template-columns: var(--line-w) 1fr;grid-auto-columns: max-content;column-gap: var(--col-gap);list-style: none;width: min(60rem, 90%);margin-inline: auto;}
.ul-timeline__v2::before {content: "";grid-column: 1;grid-row: 1 / span 20;background: var(--orange);border-radius: calc(var(--line-w) / 2);}
.ul-timeline__v2 li:not(:last-child) {margin-bottom: var(--row-gap);}
.ul-timeline__v2 li {grid-column: 2;--inlineP: 1.5rem;margin-inline: var(--inlineP);grid-row: span 2;display: grid;grid-template-rows: min-content min-content min-content;border:2px solid var(--blue);}
.ul-timeline__v2 li .title{--dateH: 3rem;height: var(--dateH);margin-inline: calc(var(--inlineP)*-1);text-align: center;color: var(--blue); font-size: 1.25rem;font-weight: bold;display: grid;place-content: center;position: relative;border-radius: calc(var(--dateH)/2) 0 0 calc(var(--dateH)/2);padding: 0;}
.ul-timeline__v2 li .title::after {content: "";position: absolute;width: 2rem;aspect-ratio: 1;background: var(--blue);border: 0.3rem solid var(--blue);border-radius: 50%;top: 50%;
transform: translate(50%, -50%);right: calc(100% + var(--col-gap) + var(--line-w) / 2);}
.ul-timeline__v2 .descr{padding:10px;}

.timeline__vertical{position:relative;}
.timeline__hr{width: 100%; background-color: var(--orange); border-color: var(--orange) !important;    border-top: 2px solid;border-bottom: 2px solid;}
.timeline__vertical--left, .timeline__vertical--middle, .timeline__vertical--right{z-index:1;}
.timeline__vertical .number { background-color: var(--orange); width: 100px;height: 100px; justify-content: center;align-items: center;text-align: center;color: var(--blue); display: flex;}
.timeline__vertical .title {text-transform: uppercase;color: var(--orange);font-weight: bold;font-size: 20px;}
.timeline__vertical .content {color: white;}
.timeline__vertical--left { text-align: left;}
.timeline__vertical--middle { text-align: center;}
.timeline__vertical--right { text-align: right;}

.ul-timeline__v3{--col-gap: 0px;--row-gap: 10px;--line-w: .25rem; display: grid;grid-template-columns: var(--line-w) 1fr;grid-auto-columns: max-content;column-gap: var(--col-gap);list-style: none;width: min(60rem,90%);margin-inline: auto;z-index: 1;margin-left: 0;}
.ul-timeline__v3::before {content: "";grid-column: 1;grid-row: 1 / span 20;background: var(--orange);border-radius: calc(var(--line-w) / 2);    position: relative;left: 22px;}
.ul-timeline__v3 .number {background-color: var(--blue); width: 40px;height: 40px;min-width: 40px;min-height: 40px;justify-content: center;align-items: center;text-align: center;color: white;margin-right: 40px;padding: 0;display: flex;font-size: 30px !important;}
.ul-timeline__v3 .title {    align-items: center;padding-top: 10px !important;display: flex;}
.ul-timeline__v3 li{position: relative;}


@media (min-width: 40rem) {
  	.ul-timeline__v1,.ul-timeline__v2 {grid-template-columns: 1fr var(--line-w) 1fr;}
  	.ul-timeline__v1::before,.ul-timeline__v2::before { grid-column: 2;}
  	.ul-timeline__v1 li:nth-child(odd),.ul-timeline__v2 li:nth-child(odd) {grid-column: 1;}
  	.ul-timeline__v1 li:nth-child(even),.ul-timeline__v2 li:nth-child(even) { grid-column: 3;}
	.ul-timeline__v1 li:nth-child(2),.ul-timeline__v2 li:nth-child(2) {grid-row: 2/4;}
	.ul-timeline__v1 li:nth-child(odd) .title::before,.ul-timeline__v2 li:nth-child(odd) .title::before {clip-path: polygon(0 0, 100% 0, 100% 100%);left: 0;}
	.ul-timeline__v1 li:nth-child(odd) .title::after,.ul-timeline__v2 li:nth-child(odd) .title::after {transform: translate(-50%, -50%);left: calc(100% + var(--col-gap) + var(--line-w) / 2);}
	.ul-timeline__v1 li:nth-child(odd) .title,.ul-timeline__v2 li:nth-child(odd) .title {border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;}
}