/* WHOLE LINEUP */

#hk_overlay [line] {
	/* z-index: 1; */
	display: flex !important;
}

#hk_overlay [line].fadeInInit {
}

#hk_overlay [line].fadeInStart {
	/* z-index: 100; */
	pointer-events: auto;
}

#hk_overlay [line].fadeOutStart {
}

#hk_overlay [line].fadeOutEnd {
}

/* LINEUP BIG  */

#hk_overlay .lineup_big {
	clip-path: inset(0% 0% -70px 0%);
	--lines-delay-default: 0.3s;
	--lines-delay: var(--lines-delay-default);
	--fadout_delay:0s;
}

#hk_overlay .lineup_big.fadeOutEnd,
#hk_overlay .lineup_big.fadeInInit {
	/* 	opacity: 0;
 */
	clip-path: inset(0% 0% 100% 0%);
}

#hk_overlay .lineup_big.fadeInStart {
	transition-duration: 0.6s;
	transition-timing-function: ease-in-out;
	--lines-delay: 0s;
}

#hk_overlay .lineup_big.fadeOutStart {
	--lines-delay: var(--lines-delay-default);
	--fadout_delay:2s;
}



#hk_overlay .tlineup_big_line .tlineup_big_line_name{
	clip-path: inset(0% 0% 0% 0%);
	display: none;
}

/* tlineup_big_line.fadeOutEnd tlineup_big_line_name, */
#hk_overlay .tlineup_big_line.fadeInInit .tlineup_big_line_name{
	/* 	opacity: 0;
 */
	clip-path: inset(0% 100% 0% 0%);
	display: flex;
}

#hk_overlay .tlineup_big_line.fadeInStart .tlineup_big_line_name{
	transition-delay: 0.3s;	
	transition-duration: 0.6s;
	transition-timing-function: ease-in-out;
	display: flex;

}

#hk_overlay .tlineup_big_line.fadeOutStart .tlineup_big_line_name{
	transition-delay: calc(0.3s + var(--fadout_delay));
	clip-path: inset(0% 0% 0% 0%);
	transform: translateX(300px);
	opacity: 0;
}


/* LINEUP BIG PLAYER ANIMATION */

#hk_overlay .lineup_big .lineup_0  .gk .player_wrapper{
	--addDelay:  0.4s;
}

#hk_overlay .lineup_big [line] .player_wrapper {
	/* 	clip-path: inset(-100px 20px -100px -20px);
 */
	/* 	transform: translateX(-100%);
 */
 	clip-path: inset(0% 100% 0% 0%); 
	--addDelay: 0.1s;
}

#hk_overlay .lineup_big.fadeInInit .lineup_0  .player_wrapper.gk ,
#hk_overlay .lineup_big [line].fadeInInit .player_wrapper.common {
	clip-path: inset(0% 100% 0% 0%);
	filter: contrast(0) brightness(4);
	opacity: 1;
}
#hk_overlay .lineup_big.fadeInStart .lineup_0  .player_wrapper.gk,
#hk_overlay .lineup_big [line].fadeInStart .player_wrapper.common {
	clip-path: inset(0% 0% 0% 0%);
	/* 	transition-delay: 0s;
 */
	/*transition-timing-function:cubic-bezier(0.51, 0.02, 0.54, 1);*/
	transition-delay: calc(0.25s * var(--n) + var(--addDelay) + var(--lines-delay));

	transition-duration: 0.5s, 0.5s, 0.6s, 0.3s;
	/* transition-duration: 2.6s, 2.6s,2.6s,2.3s; */

	transition-timing-function: cubic-bezier(0.67, 0, 0.36, 0.99);
	transition-timing-function: ease-in-out;
	transition-property: transform, clip-path, filter, opacity;
}

#hk_overlay .lineup_big [line].fadeOutEnd .player_wrapper {
	/* 	transform: translateX(100%);
 */
}
#hk_overlay .lineup_big.fadeOutStart .lineup_0  .gk .player_wrapper,
#hk_overlay .lineup_big [line].fadeOutStart .player_wrapper.common {
	/* 	transition-delay: calc(0.1s * var(--n));

 */
	--addDelay: 0.1s;
	clip-path: inset(0% 0% 0% 100%);
	transform: translateX(0%);
	opacity: 0;
	transition-duration: 0.6s, 0.6s, 0.6s, 0.6s;
	/* transition-duration: 2.6s, 2.6s,2.6s,2.6s; */

}



/* LINEUP block animation */

#hk_overlay .lineup .tlineup_wrap{
	clip-path: inset(-20% 0% -10% 0%);
	--lines-delay-default: 0.3s;
	--lines-delay: var(
	--lines-delay-default);
	--container-delay: 0.5s;
	/* overflow: hidden; */
	/* max-height: 184px; */
	/* margin-bottom: 10px; */
}

#hk_overlay .lineup.fadeOutEnd .tlineup_wrap,
#hk_overlay .lineup.fadeInInit .tlineup_wrap{
		opacity: 0;
		clip-path: inset(0% 0% 100% 0%);
		clip-path: inset(0% 100% 0% 0%);
		max-height: 0;
		/*filter: contrast(0) brightness(4);*/
		/*filter: contrast(1) brightness(1);*/

}

#hk_overlay .lineup.fadeInStart .tlineup_wrap{
	transition-duration: 0.5s;
	transition-property:max-height, clip-path,opacity,filter;

	transition-duration:0.3s, 0.8s, 0.2s, 0.8s;
	--container-duration:0.3s;
	
	transition-delay:var(--container-duration), var(--container-delay), var(--container-delay), var(--container-delay);
	transition-timing-function: ease-in-out;
	
	--lines-delay: 0s;
}

#hk_overlay .lineup.fadeOutStart .tlineup_wrap{
	--lines-delay: calc(var(--lines-delay-default) + 1s);
	transition-duration: var(--container-duration), 0.8s, 2.7s,1.5s;
	transition-delay:calc(var(--container-delay) + 0.2s) , 0s, 0s, 0s;
	/*transition-delay:0s, 0s, 0s, 0s;*/

	/*filter:unset;*/
	/* clip-path: inset(100% 0% 0% 0%); */

}



/* BOTTONM PLAYER ANIMATION */

#hk_overlay .lineup .lineup_0  .player_wrapper.gk {
	--addDelay:  0.4s;
	
}

#hk_overlay .lineup [line] .player_wrapper {
	 clip-path: inset(0% 100% 0% 0%);
	 --addDelay: 0.0s;
}

#hk_overlay .lineup.fadeInInit .lineup_0  .player_wrapper.gk,
#hk_overlay .lineup [line].fadeInInit .player_wrapper.common {
	clip-path: inset(0% 100% 0% 0%);
	filter: contrast(0) brightness(4);
	opacity: 1;
}
#hk_overlay .lineup.fadeInStart .lineup_0 .player_wrapper.gk,
#hk_overlay .lineup [line].fadeInStart .player_wrapper.common {
	clip-path: inset(0% 0% 0% 0%);
	/*transition-timing-function:cubic-bezier(0.51, 0.02, 0.54, 1);*/
	transition-delay: calc(0.2s * var(--n) + var(--addDelay) + var(--lines-delay) - 0.2s + var(--container-delay));
	transition-duration: 0.4s, 0.4s, 0.5s, 0.3s;
	/* transition-duration: 2.6s, 2.6s,2.6s,2.3s; */
	transition-timing-function: cubic-bezier(0.67, 0, 0.36, 0.99);
	transition-timing-function: ease-in-out;
	transition-property: transform, clip-path, filter, opacity;
}

#hk_overlay .lineup [line].fadeOutEnd .player_wrapper.common {
	/* 	transform: translateX(100%);
 */
}
#hk_overlay .lineup.fadeOutStart .lineup_0  .player_wrapper.gk,
#hk_overlay .lineup [line].fadeOutStart .player_wrapper.common {
	--addDelay: 0.1s;
	clip-path: inset(0% 0% 0% 100%);
	opacity: 0;
	transition-duration: 0.6s, 0.6s, 0.6s, 0.6s;
	/* transition-duration: 2.6s, 2.6s,2.6s,2.6s; */
}


#hk_overlay .lineup_big .gk,
#hk_overlay .lineup .gk{
	visibility: hidden;
}

#hk_overlay .lineup_big .lineup_0  .gk,
#hk_overlay .lineup .lineup_0  .gk{
	visibility: visible;
}