.tl {
    width: 100%;
    margin: auto;
    perspective: 800px;
    height: 600px;
    overflow: hidden;
    background: linear-gradient(#222 40%, #333 55% 60%, #444);
    position: relative;
    transform-style: preserve-3d;
    perspective-origin: 50% -10%;
    --fla-tl-scroll: 0px;
    --fla-tl-scale: 1;
}

.tl:before {
    content: '';
    background: linear-gradient(hsl(0deg 0% 13%), hsl(223deg 91% 25% / 0%)), radial-gradient(100% 100% at 50% 50%, rgba(6, 39, 121, 0) 37.5%, hsl(0deg 0.3% 16.42%) 50%), repeating-linear-gradient(0deg, rgba(8, 55, 170, 0) 0 0.95em, #b3b3b3 0.95em 1em), repeating-linear-gradient(90deg, rgba(8, 55, 170, 0) 0 0.9em, #b4b4b4 0.9em 1em) 0.5em 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(-64px);
    width: 100%;
    height: 500%;
    display: block;
    position: absolute;
    background: linear-gradient(hsl(0deg 0% 13%), 
 hsl(223deg 91% 25% / 0%)),
 radial-gradient(100% 100% at 50% 50%, rgb(0 0 0 / 0%) 37.5%, hsl(0deg 0.3% 16.42%) 50%),
 repeating-linear-gradient(0deg, rgba(8, 55, 170, 0) 0 0.95em, rgb(179 179 179 / 25%) 0.95em 1em),
 repeating-linear-gradient(90deg, rgb(0 0 0 / 0%) 0 0.9em, rgb(180 180 180 / 25%) 0.9em 1em) 0.5em 0,
 linear-gradient(90deg,
   black 20%, var(--fla-vermelho) 20%,
   var(--fla-vermelho) 40%, black 40%,
   black 60%, var(--fla-vermelho) 60%,
   var(--fla-vermelho) 80%, black 80%);
}

html.safari .tl:before {
    transform: translate(-50%, -50%) rotateX(91deg) translateZ(-100px);
}


.tl > li {
    width: 200px;
    height: 150px;
    background-color: rgb(189 191 187 / 80%);
    background-size: cover;
    margin: 20px auto;
    box-shadow: 0 0 10px black;
    transition: 0.3s filter, 0.3s opacity, 0.3s background;
    position: absolute;
    top: calc( 50% - 75px );
    left: calc( 50% - 100px );
    opacity: 0;
    filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    flex-direction: column;
    font-size: 11px;
    font-weight: 900;
}

.tl > li img {
	max-height: 100px;
	margin: 10px 0;
	max-width: 180px;
}

.tl > li section {
	display: flex;
	padding: 0 10px 10px 10px;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	align-items: center;
}

.tl > li date {
	font-size: 18px;
	color: var(--fla-vermelho);
}

.tl > li:nth-of-type(3n+2) {
    margin-left: -200px;
}

.tl > li:nth-of-type(3n) {
    margin-left: 200px;
}

.tl > li:nth-of-type() {
    margin-left: 200px;
}

.tl > li:hover {
	/* --fla-tl-scale: 1.1; */
	/* background: rgb(0 0 0 / 65%); */
	/* color: white; */
	background: white;
	background: rgb(220 220 220);
	box-shadow: 0 0 20px 5px rgb(204 204 204 / 50%);
}

.tl > li.active {
	/* background: red; */
}

/* Horizon effect */

.tl > li.horizon {
    opacity: 0;
}

.tl > li.horizon + li {
    opacity: 0.25;
    filter: blur(10px);
}

.tl > li.horizon + li + li {
    opacity: 0.5;
    filter: blur(5px);
}

.tl > li.horizon + li + li + li {
    opacity: 0.75;
    filter: blur(2px);
}

.tl > li.horizon + li + li + li ~ li {
    opacity: 1;
    filter: blur(0px);
}

.tl > li.horizon.first, .tl > li.horizon.first ~ li {
    opacity: 1;
    filter: blur(0px);
}

@media ( max-width: 1000px ) {

	.tl {
		height: 450px;
		perspective: 340px;
	}

	.tl > li,
	.tl > li:nth-of-type(3n),
	.tl > li:nth-of-type(3n+2) {
		margin: auto;
	}

}