.s_matchid {
	--duration: 700ms;
	--animator-mode: css;
	--animator-in-duration: 1200ms;
	--animator-out-duration: 1200ms;
	--out-delay: 500ms;
    --transform:translateX(-300px);
}

.s_matchid.ani_out,
.s_matchid.ani_init {
	/* transform: translateX(calc(var(--big-radius) * -1)); */
    transform: var(--transform);

}

.s_matchid.ani_in {
    transform:none;
    transition-duration: var(--duration);
}

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

/* s_matchid_content_col */
.s_matchid_content_col {
	--ani-width: var(--content-col-width);
}
.s_matchid_content_col.content {
	--ani-width: var(--content-mid-width);
}

.s_matchid_content_col .s_matchid_content_col_wrap {
	min-width: var(--ani-width);
}

.s_matchid.ani_out .s_matchid_content_col,
.s_matchid.ani_init .s_matchid_content_col {
	/*     transform: translateX(-10%);
 */
	width: var(--big-radius);
}



.s_matchid.ani_in .s_matchid_content_col,
.s_matchid.ani_in .s_matchid_content_col.away::before {
	transition-duration: var(--duration);
}

.s_matchid.ani_in .s_matchid_content_col.away::before {
	border-top-right-radius: 0px;
}

.s_matchid.ani_out .s_matchid_content_col,
.s_matchid.ani_out .s_matchid_content_col.away::before {
	transition-delay: var(--out-delay);
	/* border-top-right-radius: var(--big-radius); */
	width: var(--big-radius);
}

/*s_matchid_logo */

.s_matchid.ani_out .s_matchid_logo,
.s_matchid.ani_init .s_matchid_logo {
	transform: scale(0);
}

.s_matchid.ani_in .s_matchid_logo {
	transition-delay: 500ms;
	transition-duration: 500ms;
}

.s_matchid.ani_out .s_matchid_logo {
	transition-delay: 0ms;
}