/* TL Timeline Widget — Frontend CSS — prefix: tl-tlw- */

.tl-tlw-wrap { border-radius:8px; overflow:hidden; }
.tl-tlw-inner { position:relative; }

/* VERTICAL */
.tl-tlw-v { display:flex; flex-direction:column; }
.tl-tlw-v .tl-tlw-item { display:flex; gap:20px; position:relative; }
.tl-tlw-v .tl-tlw-dot-wrap { position:absolute; left:0; top:0; display:flex; justify-content:center; flex-shrink:0; }
.tl-tlw-v .tl-tlw-content  { flex:1; }

/* HORIZONTAL */
.tl-tlw-h { display:flex; flex-direction:row; align-items:flex-start; overflow-x:auto; }
.tl-tlw-h .tl-tlw-item     { display:flex; flex-direction:column; align-items:flex-start; flex:1; min-width:120px; position:relative; }
.tl-tlw-h .tl-tlw-dot-wrap { position:absolute; top:0; left:0; display:flex; align-items:center; }
.tl-tlw-h .tl-tlw-content  { width:100%; }

/* MARKER */
.tl-tlw-marker {
	display:flex; align-items:center; justify-content:center;
	flex-shrink:0; position:relative; z-index:1;
	transition:transform .2s, box-shadow .2s;
}
.tl-tlw-item:hover .tl-tlw-marker { transform:scale(1.18); }

/* TYPOGRAPHY */
.tl-tlw-num-inside { font-family:'Courier New',monospace; font-weight:700; line-height:1; text-align:center; pointer-events:none; }
.tl-tlw-num-above  { font-family:'Courier New',monospace; letter-spacing:1px; line-height:1.2; margin-bottom:3px; }
.tl-tlw-title      { font-weight:700; letter-spacing:.5px; line-height:1.3; margin-bottom:5px; text-transform:uppercase; }
.tl-tlw-title a    { color:inherit; text-decoration:none; transition:opacity .15s; }
.tl-tlw-title a:hover { opacity:.8; }
.tl-tlw-desc       { line-height:1.6; }

/* RESPONSIVE */
@media (max-width:767px){
	.tl-tlw-h { flex-direction:column; }
	.tl-tlw-h .tl-tlw-item { padding-right:0 !important; padding-bottom:24px; }
}