
.vs_root{
	width: 100%;
	height: 100%;

	opacity: 0;

}

.vs-content-container
{
	opacity: 1;
	background-color: rgba( 255,255,255,0.02);
}

.blur-target
{
	height: 100%;
	width: 100%;
  	                
  	                              

}

@keyframes 'versus-wipe'
{
	0%
	{
		opacity: 1;
	}

	50%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 1;
	}

}

#versus-wipe{

	background-color: gradient( linear, 0% 100%, 0% 0%,	
	from( rgba(255, 255, 255, 1)), 
	color-stop( 0.5, rgba(255, 255, 255, 1) ), 
	to( rgba(255, 255, 255, 0.95)) );

	width: 100%;
	height: 100%;

	opacity: 0;
}

#versus-wipe.play{

	animation-name: versus-wipe;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
}

@keyframes 'versus-reveal'
{
	0%
	{
		opacity: 1;
	}

	5%
	{
		opacity: 1;
	}

	95%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 1;
	}

}

.vs_root.vs-show{

	animation-name: versus-reveal;
	animation-duration: 0s;                                                                                  
	animation-timing-function: ease-out;
	animation-iteration-count: 1;

	opacity: 1;
}

.vs_show_hold{

	opacity: 1;
}

.versus-team {

	width: 100%;
	height: 100%;

	horizontal-align: center;

	background-size: 100% 100%;

}



.placeholder {

	vertical-align: center;
	horizontal-align: center;
}

@keyframes 'mine-fade-in'
{
	0%
	{
		opacity: 0;
		brightness: 0;
	}

	50%
	{
		opacity: 1;
		brightness: 1;
	}

	100%
	{
		opacity: 1;
		brightness: 1;
	}
}


#versus-team--MyTeam {

	                                                                    

	                                  

	opacity:1;

	background-color: gradient( linear, 0% 100%, 0% 0%,	
	from( rgba(0, 0, 0, 1)), 
	color-stop( 0.35, rgba(0,0,0, 0.93) ), 
	color-stop( 0.45, rgba(0,0,0, 0.7) ), 
	to( rgba(0,0,0, 0.0)) );

}

#versus-team--MyTeam .charlineup__characters {

	opacity: 0;
	brightness: 0;

}

#versus-team--MyTeam .charlineup__characters.fade-in {

	animation-name: mine-fade-in;

	brightness: 1;
	opacity:1;
}

                                      
	                       
    

.fade-in,
.fade-out{

	animation-duration: 0s;                                                                                 
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
  	                      
}

@keyframes 'enemy-fade-in'
{
	0%
	{
  		           
		brightness: 0;
	}

	100%
	{
  		           
		brightness: 1;
	}
}

@keyframes 'enemy-fade-out'
{
	0%
	{
		opacity: 1;
		brightness: 1;
	}

	10%
	{
		opacity: 1;
		brightness: 1;
	}

	50%
	{
		opacity: 0;
		brightness: 0;

	}
}

#versus-team--EnemyTeam {

	vertical-align:bottom;

	                                                      	
	                         
	                                        
	                                 

}

#versus-team--EnemyTeam.fade-in {

  	                              
  	                                                           
}

#versus-team--EnemyTeam.fade-out {

	animation-name: enemy-fade-out;
	opacity: 0;
}

.vs__model
{
	width: 100%;
	height: 100%;
}


                                         

#id-vs__characterlineup--MyTeam,
#id-vs__characterlineup--EnemyTeam,
{
	width: 100%;
	height: 90%;

}

#id-vs__characterlineup--MyTeam
{
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 15px;
}

#id-vs__characterlineup--EnemyTeam
{
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 15px;
}

.charlineup__characters
{
	width:100%;         
	height:100%;

	horizontal-align: center;
	vertical-align: center;

	brightness: 1;
  	                    
}

.charlineup__player {

	width:100%;
	height:100%;
}


@keyframes 'teamname-fade-in-and-out'
{
	0%
	{
		opacity:0;
		transform:Scale3d(1, 1, 1);
		brightness: 1;
	}

	70%
	{
		opacity:1;
		brightness: 2;
	}

	100%
	{
		opacity:0;
		transform:Scale3d(1.2, 1.2, 1) translatey( 50px );
		brightness: 1;
	}

}

.charlineup__characters__teamname {

	font-size: 68px;
	opacity: 0;
	font-weight: bold;
	font-family: Stratum2 Bold Monodigit, 'Arial Unicode MS';

	width: 100%;
	height: 50%;

	horizontal-align: center;
	vertical-align: bottom;

	position: 0px 300px 0px;

	text-align: center;
	padding: 20px 0px;

  	                                        

	text-transform: uppercase;

	animation-duration: 0s;                                                                                  

}

.charlineup__characters__teamname.fade-in
{
	animation-name: teamname-fade-in-and-out;
	animation-timing-function: ease-out;
	animation-duration: 7s;
	animation-iteration-count: 1;
}


.CT .charlineup__characters__teamname {

	                             
	                              

	color: #6d869c;
}


.TERRORIST .charlineup__characters__teamname {

	                             
	                             

	color: #af9a57;
}

.player__name
{
	-s2-mix-blend-mode: screen;
	color: white;
}


.player__identity{

  	             
	visibility: collapse;

	flow-children:down;

	max-height: 80px;

  	                 

	text-overflow: ellipsis;

	border-radius: 10px;

	padding: 5px;

	vertical-align: center;
	horizontal-align: center;

	transition-property: pre-transform-scale2d,transform,opacity,brightness;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;

  	                      
}

.player__identity__name-avatar{

	flow-children:right;
	horizontal-align:center;
  	                      

}

@keyframes 'identity-fade-in-and-out'
{
	from
	{
		opacity: 0;
	}

	10%
	{
		brightness: 1;
		opacity: 1;
	}

	30%
	{
		brightness: 1;
		opacity: 1;
	}

	to
	{
		brightness: 0;
		opacity: 0;
	}

}

.player__identity.fade-in{

  	           
	visibility: visible;
	animation-name: identity-fade-in-and-out; 
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;	

	brightness: 0;
	opacity: 0;

}

.player__identity.hide{

	visibility: collapse;

}



 .player__name{

	vertical-align: center;
	horizontal-align: right;
	font-size: 26px;
	opacity:1;
	max-width: 220px;
	height: 40px;

	text-align: left;

	                              

	text-shadow:0px 0px 2px 2 black;
	font-family: Stratum2, 'Arial Unicode MS';

	text-overflow: ellipsis;

	margin-left: 10px;

}


.player__avatar{

	height: 40px;
	width: 40px;

	margin-right: 3px;

	                                  
}

.accolade{
	visibility: collapse;
}

.show-accolade .accolade{
	visibility: visible;
}

.accolade--prev {

	color: gray;
	text-transform: lowercase;
	font-weight: bold;
	font-size: 12px;

	text-align: center;

	vertical-align: center;
	horizontal-align: center;

	font-family: Stratum2, 'Noto Sans';
}

.accolade--title {

	color: white;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 17px;

	text-align: center;
	text-overflow: shrink;

	height: 20px;

	vertical-align: center;
	horizontal-align: center;

	font-family: Stratum2, 'Noto Sans';

}

.accolade__desc {

	color: rgb(197, 197, 197);
	font-size: 16px;

	text-align: center;

	vertical-align: center;
	horizontal-align: center;

	font-family: Stratum2, 'Noto Sans';
}

.vs-identity-container{

	width: 100%;
	height: 100%;

	vertical-align: center;
	horizontal-align: center;

	transform: scale3d( 0.95, 0.95, 1 );

	transition-property: transform;
	transition-duration: 0s;                    
	transition-timing-function: ease-in;

}

.vs-identity-container.fade-in {

	transform: scale3d( 0.95, 0.95, 1 );
}

.vs-identity-container.drift {

	transform: scale3d( 1.05, 1.05, 1 ) translateX(-1%);

}



                                       
  
                
 
	            
	             
  	                 

	                      
	                        
 

                   
 
  	                          
  	                  
	              
 

                        
 
  	                          
  	                 
	             
 
  

                                   

.vs_teamline {
	width: 200px;
	height: 100px;
	opacity: 1;
	z-index: 20;
}

.team-select__bg
{
	width:60px;
	height:60px;
  	                 

	vertical-align:center;
	horizontal-align:center;
}

.team-select__bg--t
{
	opacity: 1;
}

.team-select__bg--MyTeam
{
	opacity: 1;
}

                           

.teamglow--MyTeam {
	background-color: gradient( radial, 
	50% 50%, 0% 0%, 35% 35%, 
	from( #B5D4EE35 ), 
	to( #B5D4EE00 ) );	
	-s2-mix-blend-mode: SRGBadditive;
	z-index: -1;

	height: 100%;
	width: height-percentage( 100% );
	horizontal-align: center;
	vertical-align:center;
}

.teamglow--T {
	background-color: gradient( radial, 
	50% 50%, 0% 0%, 35% 35%, 
	from( #EAD18A35 ), 
	to( #EAD18A00 ) );	
	-s2-mix-blend-mode: SRGBadditive;
	z-index: -1;

	height: 100%;
	width: height-percentage( 100% );
	horizontal-align: center;
	vertical-align:center;
}
