/* Titles */
#little_container .nks_title {
    max-width: var(--player-title-max-width, 600px);
}


#little_container .nks_title.fadeInStart{
    transition:all 0.5s;
    max-width: var(--animator-init-width);
}


#little_container .nks_title.fadeOutStart{
    transition:all 0.8s;
    transition-delay:0.55s;
  /*transition-timing-function:ease;*/
  
}

#little_container .nks_title.fadeOutEnd{
    max-width: 0px;
}


/* Titles BG */

#little_container .nks_title            .nks_title_bg{
    background-color:transparent;
    clip-path:inset(0 0% 0 0%);
    --title-bg: var(--bg-color);
}
#little_container .nks_title.fadeOutEnd .nks_title_bg,
#little_container .nks_title.fadeInInit .nks_title_bg{
    clip-path:inset(0% 0% 0% 0%)
}

#little_container .nks_title.fadeInStart .nks_title_bg{
    background-color:transparent;
    animation: 4s infinite  bg_betera_blink;
    animation-iteration-count:1;
    animation-direction: normal;
    animation-delay:0.6s;
    transition-delay: 0.4s;
    transition-duration:0.4s;
    transition-timing-function: cubic-bezier(0.67, 0.03, 0.83, 0.64);
    background-color: var(--title-bg);
}

#little_container .nks_title.fadeOutInit .nks_title_bg{
    animation:none;  
    transition-duration:0s;
    transition-delay: 0s;

  
}
#little_container .nks_title.fadeOutStart .nks_title_bg{
    animation:none;   
    transition-duration:0.5s;
    transition-delay: 0.35s;
    background-color:var(--accent-color);  
    clip-path:inset(0% 0% 0% 0%)
  
}



@keyframes bg_betera_blink {
  0% {  background-color:transparent;  }
  0.1% {  background-color:var(--accent-color);  }
  
  0.9% { background-color:var(--accent-color); }
  
  1.0% { background-color:var(--title-bg);}
  1.9% { background-color:var(--title-bg); }  
  2.0% { background-color:var(--accent-color) }
  2.9% { background-color:var(--accent-color) }
  3.0%{ background-color:var(--title-bg); }
  3.9%{ background-color:var(--title-bg); }
  4.0%{ background-color:var(--accent-color) }
  4.9%{ background-color:var(--accent-color) }
  5.0%{ background-color:var(--title-bg); }
  5.9%{ background-color:var(--title-bg); ; }
  6.0%{ background-color:var(--accent-color) }
  6.9%{ background-color:var(--accent-color) }
  7.0%{ background-color:var(--title-bg);  }
  7.9%{ background-color:var(--title-bg); }
  8.0%{ background-color:var(--accent-color) }
  8.9%{ background-color:var(--accent-color) }  
  9.0%{ background-color:var(--title-bg);  }
  9.9%{ background-color:var(--title-bg); }
  10.0%{ background-color:var(--accent-color) }
  10.9%{ background-color:var(--accent-color) }    
  
   50%{ background-color:var(--title-bg); }

  
  100%{ background-color:var(--title-bg); }
  
}


/* Titles - bg design el1 */

#little_container .nks_title.fadeInInit .nks_title_design_el3,{
  opacity:0;
}

#little_container .nks_title.fadeInStart .nks_title_design_el3{
  transition-delay:1.6s;
  animation: 5s infinite title_design_el_effect;
  animation-delay: 1s;
}
#little_container .nks_title.fadeOutInit .nks_title_design_el3{
    animation:none;
  opacity:1;
  transition-delay:0;
}
#little_container .nks_title.fadeOutStart .nks_title_design_el3{
  animation:none;
  opacity:0;
  transition-duration:0.2s;
  transition-delay:0.3s;
}

@keyframes title_design_el_effect {
  0% { opacity:0; transform:scale(1)  }
  0.9% { opacity:0; transform:scale(1)  }
  
  1.0% { opacity:1; }
  1.9% { opacity:1; }  
  2.0% { opacity:0; }
  2.9% { opacity:0; transform:scale(1)  }
  3.0%{ opacity:1; }
  3.9%{ opacity:1; }
  4.0%{ opacity:0; }
  4.9%{ opacity:0; transform:scale(1) }
  5.0%{ opacity:1;  transform:scale(1) } 
  
  49.9%{ opacity:1; transform:scale(1)  }   
  50.0%{ opacity:0; }
  50.9%{ opacity:0; }  
  51.0%{ opacity:1; transform:scale(1)  }  
  51.9%{ opacity:1; }  
  52.0%{ opacity:0; }    
  52.9%{ opacity:0; }   
  53.0%{ opacity:1; transform:scale(1) }  
  
  100%{opacity:1; }
  
}


/*  Titles - photo bg */

#little_container .nks_title.fadeInInit .nks_title_photo_bg_img,
#little_container .nks_title.fadeOutEnd .nks_title_photo_bg_img{
  opacity:0;  
}

#little_container .nks_title.fadeInStart .nks_title_photo_bg_img{
  transition-delay:0s;
  animation: 5s 1 nks_title_photo_bg_img_blink;
  animation-delay:0s;
  animation-iteration-count: 1;
  /* opacity:1; */
}


#little_container .nks_title.fadeOutStart .nks_title_photo_bg_img{
  transition-duration:0.3s;
  transition-delay:0.4s;
  opacity:0;
}

/*  Titles - photo main */

#little_container .nks_title  .nks_title_photo_img{
  filter: brightness(1);
  clip-path:inset(0 0 0 0);
  visibility:visible;
}


#little_container .nks_title.fadeInInit .nks_title_photo_img{
  filter: brightness(20);
  opacity:0;  
}


#little_container .nks_title.fadeInStart .nks_title_photo_img{
  transition-delay: 0.1s;
  transition-duration:0.6s;
  transition-timing-function:cubic-bezier(0.51, 0.02, 0.54, 1); 
}


#little_container .nks_title.fadeOutEnd .nks_title_photo_img{
  /*clip-path:inset(50% 0 50% 0); */
  /* animation: 5s 1 betera_photo_fadeout; 
  animation-delay:0.0s;
  */
  transition-duration:0.6s;
  /*filter: brightness(20);*/
  transition-delay:0.4s;
  opacity:0;
 
}


@keyframes nks_title_photo_bg_img_blink {
  0% { opacity:0; transform:scale(1)  }
  0.9% { opacity:0; transform:scale(1)  }
  
  1.0% { opacity:1; }
  1.9% { opacity:1; }  
  2.0% { opacity:0; }
  2.9% { opacity:0; transform:scale(1)  }
  3.0%{ opacity:1; }
  3.9%{ opacity:1; }
  4.0%{ opacity:0; }
  4.9%{ opacity:0;}
  5.0%{ opacity:1;} 
  5.9%{ opacity:1;}   
  6.0%{ opacity:0; }
  6.9%{ opacity:0;} 
  15%{opacity:0; }
  100%{opacity:0; }
  
}



@keyframes betera_photo_fadeout {
  0% { opacity:0; transform:scale(1)  }
  0.9% { opacity:0; transform:scale(1)  }
  
  1.0% { opacity:1; }
  1.9% { opacity:1; }  
  2.0% { opacity:0; }
  2.9% { opacity:0; transform:scale(1)  }
  3.0%{ opacity:1; }
  3.9%{ opacity:1; }
  4.0%{ opacity:0; }
  4.9%{ opacity:0;}
  5.0%{ opacity:1;} 
  5.9%{ opacity:1;}   
  14%{opacity:0; }  
  100%{opacity:0; }
  
}


@keyframes bg_betera_photo_blink {
  0% {  background-color:transparent;  }
  0.1% {  background-color:var(--accent-color);  }
  
  0.9% { background-color:var(--accent-color); }
  
  1.0% { background-color: black}
  1.9% { background-color: black }  
  2.0% { background-color:var(--accent-color) }
  2.9% { background-color:var(--accent-color) }
  3.0%{ background-color: black  }
  3.9%{ background-color: black ; }
  4.0%{ background-color:var(--accent-color) }
  4.9%{ background-color:var(--accent-color) }
  5.0%{ background-color: black  }
  5.9%{ background-color: black ; }
  6.0%{ background-color:var(--accent-color) }
  6.9%{ background-color:var(--accent-color) }
  7.0%{ background-color: black  }
  7.9%{ background-color: black ; }
  8.0%{ background-color:var(--accent-color) }
  8.9%{ background-color:var(--accent-color) }  
  
   50%{ background-color: black }

  
  100%{ background-color: black }
  
}

/* Title - Team Logo */

#little_container .nks_title  .nks_title_team_logo {
  transform:none;
}

#little_container .nks_title.fadeInInit .nks_title_team_logo,
#little_container .nks_title.fadeOutEnd .nks_title_team_logo{
  transform:translateY(10px);
  opacity:0;
}

#little_container .nks_title.fadeInStart .nks_title_team_logo{
  transition-delay: 1.5s;
  transition-duration:0.5s;
}

#little_container .nks_title.fadeOutStart .nks_title_team_logo{
  transition-delay:0.2s;
}

/* Title - player Num */
/*
nks_title.fadeInStart nks_title_player_num{
  animation: 5s 1 forwards common_blink_1;  
  animation-delay:1s;
  opacity:0;
}
*/
#little_container .nks_title  .nks_title_player_num {
  transform:none;
}

#little_container .nks_title.fadeInInit .nks_title_player_num,
#little_container .nks_title.fadeOutEnd .nks_title_player_num{
  transform:translateY(10px);
  opacity:0;
}

#little_container .nks_title.fadeInStart .nks_title_player_num{
  transition-delay: 1.5s;
  transition-duration:0.5s;
}

#little_container .nks_title.fadeOutStart .nks_title_player_num{
  transition-delay:0.5s;
}

/* Title - text */
#little_container .nks_title .title_header,
#little_container .nks_title .title_row2,
#little_container .nks_title .title_row3{
  clip-path:inset(0% 0% 0% 0%);
}

#little_container .nks_title .title_header{
  animation: 0.4s 1 forwards common_blink_1;  
  animation-delay:2s;
  opacity:0;
}

#little_container .nks_title.fadeInInit .title_header,
#little_container .nks_title.fadeInInit .title_row2,
#little_container .nks_title.fadeInInit .title_row3{
   clip-path:inset(0% 100% 0% 0%); 
}

#little_container .nks_title.fadeInStart .title_header,
#little_container .nks_title.fadeInStart .title_row2,
#little_container .nks_title.fadeInStart .title_row3{
  transition-delay: 1s;
  transition-duration:0.5s;
  transition-timing-function:cubic-bezier(0.51, 0.02, 0.54, 1);
  
}

#little_container .nks_title.fadeInStart .title_row2{
  transition-delay: 1.2s;
}

#little_container .nks_title.fadeInStart .title_row3{
  transition-delay: 1.6s;
}


#little_container .nks_title.fadeOutStart .title_header,
#little_container .nks_title.fadeOutStart .title_row2,
#little_container .nks_title.fadeOutStart .title_row3{
  transition-delay: 0.0s;
  transition-duration:0.5s;
  
}


#little_container .nks_title.fadeOutEnd .title_header,
#little_container .nks_title.fadeOutEnd .title_row2,
#little_container .nks_title.fadeOutEnd .title_row3{
   clip-path:inset(0% 100% 0% 0%);
}
