t_little {
	--tlittle-in-delay:0ms;
	--animator-mode: css;
	/* --animator-mode: jquery; */
	--animator-in-duration: 1500ms;
	--animator-out-duration: 1000ms;
	--animator-init-width: 1400px;
	--animator-init-width: 10em;
	--main-container-out-delay: 700ms;
	--main-container-duration: 0.4s;
	--main-container-transition-function: linear;
	--tlittle-in-delay-in-process: 500ms;
	transform: translate3d(0, 0, 0);
	right: 0px;
}

t_little t_little_wrap {
	flex-grow: 1;
}
/* Little Logo */

t_little additions_container {
	flex-grow: 1;
	grid-template-columns: 100%;
	z-index: 1;
}

t_little additions {
	flex-grow: 1;
	/* grid-auto-columns: 1fr; */
	/* grid-auto-columns: 100%; */
	/* min-width: 100%; */
}

t_little tlittle_comp_logo {
	clip-path: inset(0% 0% 0% 0%);
}

t_little.ani_in_process{
	--tlittle-in-delay:var(--tlittle-in-delay-in-process);
}

t_little.ani_in.ani_out tlittle_comp_logo,
t_little.ani_init tlittle_comp_logo {
	clip-path: inset(0% 0% 0% 100%);
}

t_little.ani_in tlittle_comp_logo {
	opacity: 1;
	transition: all var(--main-container-duration);
	transition-timing-function: var(--main-container-transition-function);
}

t_little.ani_out tlittle_comp_logo {
	transition-delay: var(--main-container-out-delay);
}

/* Litttle main container */

t_little .main_title {
	--row-delay: 160ms;
	clip-path: inset(0% 0% 0% 0%);
}

t_little.ani_in.ani_out .main_title,
t_little.ani_init .main_title {
	clip-path: inset(0% 100% 0% 0%);
}

t_little.ani_in .main_title {
	opacity: 1;
	transition: all var(--main-container-duration);
	/* 	transition-timing-function: cubic-bezier(0.33, 0.26, 0.63, 0.65);*/
	transition-timing-function: var(--main-container-transition-function);
}

t_little.ani_out .main_title {
	transition-delay: var(--main-container-out-delay);
}

/* Little skore rows */
t_little teamname {
}

t_little shortname {
	--init-clip-path: inset(0% 0% 0% 0% round var(--radius_big));
	clip-path: inset(0% 0% 0% 0%);
	--in-name-delay-home: 530ms;
	--name-duration: 360ms;
	--in-name-delay-away: calc(var(--row-delay) + var(--in-name-delay-home));
	--name-easing: cubic-bezier(0.25, 0, 0.17, 0.99);
}

t_little shortname.away {
}

t_little.ani_init shortname {
	clip-path: inset(0% 0% 0% 100%);
}

t_little.ani_in shortname {
	opacity: 1;
	transition-duration: var(--name-duration);
	transition-timing-function: var(--name-easing);
}

t_little.ani_in shortname.home {
	transition-delay: var(--in-name-delay-home);
}

t_little.ani_in shortname.away {
	transition-delay: var(--in-name-delay-away);
}

t_little.ani_out shortname {
	clip-path: inset(0% 100% 0% 0%);
	--in-name-delay-home: 420ms;
	--name-duration: 310ms;
}

t_little.ani_in shortname.away {
	/* 	transition-delay: var(--in-delay-away);
 */
}

/* Little colors */

t_little color {
	--box-width: 6px;
	--box-wide-width: 150px;
	--in-color-delay-home: 15ms;
	--in-color-delay-away: calc(var(--row-delay) + var(--in-color-delay-home));
	--color-radius: 5px;
	--init-clip-path: inset(0% 0% 0% 0% round var(--color-radius));
	border-radius: unset;
	--color-easing-start: cubic-bezier(0.43, 0.06, 0.62, 0.98);
	--color-easing-end: cubic-bezier(0.43, 0, 0.58, 1);
	--box-easing-function: cubic-bezier(0.45, 0.62, 0.33, 0.98);
	/* --box-width-start: var(--box-wide-width); */
	/* --box-width-end: var(--box-width); */
	/* 	clip-path: inset(0% 0% 0% 0%); */
}

t_little color color_fx {
	width: var(--box-wide-width);
}

t_little.ani_init color,
t_little.ani_init color_fx {
	animation: none;
}

t_little.ani_in color,
t_little.ani_in color_fx,
t_little.ani_out color,
t_little.ani_out color_fx {
	animation: t_little_color 1s;
	animation-name: t_little_color;
	animation-duration: 860ms;
	animation-iteration-count: 1;
	animation-delay: var(--in-name-delay-home);
	animation-timing-function: var(--color-easing-start);
	opacity: 1;
	animation-fill-mode: forwards;
	/* 	transition: width 1300ms;
 */ /* 	transition: all 0.5s;
	transition-timing-function: ease-out; */
}
t_little.ani_in color_fx,
t_little.ani_out color_fx {
	animation-name: t_little_color_width;
	animation-timing-function: var(--box-easing-function);
}

t_little.ani_in color.home,
t_little.ani_in color.home color_fx {
	animation-delay: var(--in-color-delay-home);
}

t_little.ani_in color.away,
t_little.ani_in color.away color_fx {
	animation-delay: var(--in-color-delay-away);
}

t_little.ani_out_init color,
t_little.ani_out_init color_fx {
	animation: none;
}
t_little.ani_out color,
t_little.ani_out color_fx {
	animation-direction: reverse;
	/* animation-name: t_little_color_out; */
	/* 	--box-width-end: var(--box-wide-width);
	--box-width-start: var(--box-width); */
	/* transform: translateX(calc(var(--box-width) * -1)); */
	/* transition-delay: var(--main-container-out-delay); */
}

@keyframes t_little_color {
	0% {
		/* 		width: var(--box-wide-width);
 */
		transform: translate3d(calc(var(--box-width) * -1), 0, 0);
	}
	60% {
		transform: translate3d(109px, 0, 0);
		/* 		width: calc(var(--box-width) + 5px);
 */
		animation-timing-function: var(--color-easing-end);
	}
	100% {
		transform: translate3d(0px, 0, 0);
		/* 		width: var(--box-width);
 */
	}
}

@keyframes t_little_color_width {
	0% {
		width: var(--box-wide-width);
		/* 		animation-timing-function: --box-easing-function;
 */
	}
	/* 	60% {
		width: calc(var(--box-width) + 6px);
	} */
	100% {
		width: var(--box-width);
	}
}

/* SCORES */
t_little score {
	--score-in-delay-home: 360ms;
	--score-in-delay-away: calc(var(--score-in-delay-home) + var(--row-delay));
	--score-duration: 176ms;
	--score-easing: linear;
}

t_little.ani_init score {
	clip-path: inset(0% 0% 0% 100%);
}

t_little.ani_in score {
	clip-path: inset(0% 0% 0% 0%);
	opacity: 1;
	transition: all;
	transition-duration: var(--score-duration);
	transition-timing-function: var(--score-easing);
}

t_little.ani_in .home score {
	transition-delay: var(--score-in-delay-home);
}

t_little.ani_in .away score {
	transition-delay: var(--score-in-delay-away);
}

t_little.ani_out score {
	clip-path: inset(0% 0% 0% 100%);
	--in-name-delay-home: 420ms;
	--name-duration: 310ms;
}

t_little.ani_in .away score {
	/* 	transition-delay: var(--in-delay-away);
 */
}

/* Little TIME */

t_little .little_time wrap {
	clip-path: inset(0% 0% 0% 0%);
}

t_little.ani_in.ani_out .little_time wrap,
t_little.ani_init .little_time wrap {
	clip-path: inset(0% 100% 0% 0%);
}

t_little.ani_in .little_time wrap {
	opacity: 1;
	transition-property: all;
	transition-duration: var(--main-container-duration);
	transition-delay: 200ms;

	transition-timing-function: var(--main-container-transition-function);
}

t_little.ani_out .little_time wrap {
	transition-delay: calc(var(--main-container-out-delay) - 150ms);
	transition-duration: calc(var(--main-container-duration));
}

/* goal_timeout frame */
.goal_timeout main_title_frame {
	--parent-width: 179px;
	--duration: 170ms;
	--out-delay: 220ms;
	--blink-fx-duration: 190ms;
	--blink-fx-width: 60px;
	--blink-fx-in-delay: 0ms;
	--blink-fx-out-delay: 180ms;
}

.goal_timeout main_title_frame {
}

.goal_timeout.ani_in.ani_out main_title_frame,
.goal_timeout.ani_init main_title_frame {
	clip-path: inset(0% 100% 0% 0%);
}

.goal_timeout.ani_in main_title_frame {
	clip-path: inset(0% 0% 0% 0%);
	transition-property: clip-path;
	transition-duration: var(--duration);
	transition-delay: 0ms;
	transition-timing-function: linear;
}

.goal_timeout.ani_out main_title_frame {
	transition-delay: var(--out-delay);
}

/* goal_timeout frame blink*/

.goal_timeout main_title_frame blink_fx {
	width: var(--blink-fx-width);
	transform-origin: left center;
}

.goal_timeout.ani_in.ani_out main_title_frame blink_fx,
.goal_timeout.ani_init main_title_frame blink_fx {
	transform: none;
}

.goal_timeout.ani_in main_title_frame blink_fx {
	transform: translateX(calc(var(--parent-width) + var(--blink-fx-width)));
	transition-property: transform;
	transition-duration: var(--blink-fx-duration);
	transition-delay: var(--blink-fx-in-delay);
	transition-timing-function: linear;
}

.goal_timeout.ani_out main_title_frame blink_fx {
	transition-delay: var(--blink-fx-out-delay);
}

/* blink bottom */

/* goal_timeout bottom */

.goal_timeout main_title_bottom wrap {
	--parent-width: 179px;
	--duration: 330ms;
	--out-delay: 30ms;
	--blink-fx-duration: 370ms;
	--blink-fx-width: 58px;
	--blink-fx-in-delay: 0ms;
	--blink-fx-out-delay: 0ms;
}

.goal_timeout.ani_in.ani_out main_title_bottom wrap,
.goal_timeout.ani_init main_title_bottom wrap {
	clip-path: inset(0% 100% 0% 0%);
}

.goal_timeout.ani_in main_title_bottom wrap {
	clip-path: inset(0% 0% 0% 0%);
	transition-property: clip-path;
	transition-duration: var(--duration);
	transition-delay: 0ms;
	transition-timing-function: linear;
}

.goal_timeout.ani_out main_title_bottom wrap {
	transition-delay: var(--out-delay);
}

/* goal_timeout bottom  blink */

.goal_timeout main_title_bottom blink_fx {
	--end-transform: translateX(calc(var(--parent-width) + var(--blink-fx-width)));
	width: var(--blink-fx-width);
	transform-origin: left center;
}

.goal_timeout.ani_in.ani_out main_title_bottom blink_fx,
.goal_timeout.ani_init main_title_bottom blink_fx {
	transform: none;
}

.goal_timeout.ani_in main_title_bottom blink_fx {
	transform: var(--end-transform);
	transition-property: transform;
	transition-duration: var(--blink-fx-duration);
	transition-delay: var(--blink-fx-in-delay);
	transition-timing-function: linear;
}

.goal_timeout.ani_out main_title_bottom blink_fx {
	transition-delay: var(--blink-fx-out-delay);
}

/* FOULS */

t_little foul {
	--animator-mode: css;
	--add-pixels: -4px;
	--in-delay:var(--tlittle-in-delay);
	--duration: 176ms;
	--easing: linear;
	--animator-out-duration: var(--duration);
	--animator-out-duration: 200ms;
	display: flex;
	justify-content: flex-end;
}

foul.ani_in,
foul.ani_in {
	visibility: visible;
	transition: all;
	transition-duration: var(--duration);
	transition-timing-function: var(--easing);
	transition-delay:var(--in-delay)
}

foul.ani_init,
foul.ani_out {
/* 	transform: translateX(calc(0px - var(--width) + var(--add-pixels)));
 */	/* 	clip-path: inset(0% 0% 0% 100%); */
 	width: var(--posmargin) !important;  
	visibility: hidden;

}

foul.ani_out {
	transition-delay: var(--out-delay);	
}

/* Little titles */

t_little .tlittle_stat,
t_little .player_title {
	--animator-mode: css;
	--animator-out-duration: 260ms;
	/* transform: translateX(-100px); */
	--duration: 240ms;
	--easeing: linear;
	--in-delay:var(--tlittle-in-delay);
	--out-delay: 0s;
}

t_little .tlittle_stat.ani_in.ani_out,
t_little .tlittle_stat.ani_init,

t_little .player_title.ani_in.ani_out,
t_little .player_title.ani_init {
	transform: translateX(-100%);
	visibility: hidden;
	/* width:0px; */
}
t_little .tlittle_stat.ani_in,
t_little .player_title.ani_in {
	/* width:var(--animator-init-width); */
	visibility: visible;
	transition-property: all;
	transition-duration: var(--duration);
	transition-timing-function: var(--easeing);
	transition-delay:var(--in-delay)

}

t_little .player_title.ani_in sk_title_wrap {
	/* width:calc(var(--animator-init-width) - var(--vgap)); */
}

t_little .tlittle_stat.ani_out,
t_little .player_title.ani_out {
	transition-delay: var(--out-delay);
}

/* Little adds */


/* one_row_elements (!!) add_block */


t_little .one_row_elements add_element {
	--animator-mode: css;
	--animator-out-duration: 270ms;
	/* --animator-in-duration: 300ms; */
	--duration: 240ms;
	--duration: 280ms;
	--easeing: ease-in-out;
	--in-delay:var(--tlittle-in-delay);
	--out-delay: 0s;
	--posmargin: 20px;
	/* z-index: 100; */
}

t_little .one_row_elements add_element.ani_in.ani_out,
t_little .one_row_elements add_element.ani_init {
	width: var(--posmargin) !important; 
	visibility: hidden;

	/* transform: translateX(calc(-100% - 20px) ); */

}

t_little .one_row_elements add_element.ani_in {
	/* width: calc(var(--animator-init-width) + var(--posmargin)); */
	visibility: visible;
	transition-property: all;
	transition-duration: var(--duration);
	transition-timing-function: var(--easeing);
	transition-delay:var(--in-delay);
}

t_little .one_row_elements add_element.ani_out {
	transition-delay: var(--out-delay);
}

/* PLAYER NAME*/



/* PLAYER NAME*/

.player_title player_name {
	/* transform: translateX(-100px); */
	--duration: 220ms;
	--easeing: linear;
	--out-delay: 0s;
	--in-delay: 180ms;
}

/* .player_title.ani_in.ani_out player_name, */
.player_title.ani_init player_name {
	transform: translate3d(0, -30px, 0);
	opacity: 0;
}

.player_title.ani_in player_name {
	transition-property: all;
	transition-duration: var(--duration);
	transition-timing-function: var(--easeing);
	transition-delay: var(--in-delay);
}

.player_title.ani_out player_name {
	transition-delay: var(--out-delay);
}