.NavContainer
{	
	width: 100%;
	display: inline-block;
	margin: 0 auto;	
	text-align: center;
	top: 0px;
	z-index: 999;
}

.section, .section1, .section2, .section3, .section4
{		
	position: relative;
	display:block;
	border-radius: 10px;				
	width: 100%;
	margin: 0 auto;			
	background: rgba(0,0,0,0.8);	
	z-index: 10;
}

.sectionBlock
{
	position: relative;
	width: 100%;
	margin: 0 auto;					
	padding: 10px;
	color: #c1c1c1;
	font-size: 1.2em; 
}

#title
{			
	display: block;		  
	margin: 5% 0;
	left: 0;
	right: 0;
	color: #FFF;
	text-align: center;  
	font-family: 'Audiowide', cursive;  
	font-weight: 300;
	font-size: 50px;
	letter-spacing: 10px;			  
	padding-left: 10px;				  
}

#title span
{
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
		
td
{
	padding: 2px;
}

.btn-primary
{
	font-size: 16px;
	
	background: #303030;
	border: 1px solid #303030;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-ms-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}
.btn-primary:hover
{
	color: #0099ff;
	background: #202020;
	border: 1px solid #202020;
}

.ResetOpen
{
	display: block;			
	width: 100%;
	height: 50px;
	background: rgba(0,0,0,0.8);			
	line-height: 50px;
	text-align: center;
	color: #c1c1c1;	
	border-radius: 10px;
}

#Ticker
{
	position: relative;
	display: block;
	width: 100%; 
	margin: 0 auto;			
	text-align: center;
}

#sources
{
	margin: 0 auto;
	text-align: center;
	width: 100%;	

	padding: 0;
    list-style-type: none;
	font-weight: 600;
}

#sources li
{
	margin: 0 auto;
	text-align: center;		
}

#Avatar
{
	display: block;
	left: 0px;
	border: 3px solid #303030;
	/*width: 190px;
	height: 190px;*/
}

/*****************************************************************************************/

@media screen and (max-width:1024px)
{				
	#LISTENERS, #HH, #PEAK, #SESSIONSTART, #Group
	{
		display: none;
	}	
	#title
	{
		top: 2%;
		font-size: 1.2em;
	}
	.section, .section1, .section2
	{
		top: 5% !important;
		position: relative;
		display: block;
		height: auto;
		width: 100%;
	}
	.sectionBlock
	{
		font-size: 1.0em;
	}
	
	#Avatar
	{
		margin: 0 auto;	
	
	}
	
	td
	{
		text-align: center;
	}
}

@media screen and (max-width:550px)
{
	#sources
	{							
		font-size: 0.9em !important;
	}
	#sources li
	{							
		font-size: 0.9em !important;
	}
}

.WebPlayer
{
	position: inherit;
	padding-top: 12px;
	padding-bottom: 15px;
	width: 100% !important;
}		

/***************************************/
/* Effects */

.glitch
{
    width: 190px;
    height: 190px;
    background: url('../images/glitch-0.jpg');
    background-size: cover;
    animation: glitch 10s infinite steps(1);
}

@keyframes glitch {
    0%, 100% {
        background: url('../images/glitch-0.jpg');
        background-size: cover;      
    }

	74% {
        background: url('../images/glitch-1.png');
        background-size: cover; 
        opacity: 1;     
    }
	
	76% {
        background: url('../images/glitch-0.jpg');
        background-size: cover; 
        opacity: 1;     
    }

    93% {
        background: url('../images/glitch-2.png');
        background-size: cover; 
        opacity: 1;     
    }

    94.5% {
        background: url('../images/glitch-3.png');
        background-size: cover;
        opacity: 0;
    }

    96% {
        background: url('../images/glitch-4.png');
        background-size: cover;   
        opacity: 1;        
    }
	
	98% {
        background: url('../images/glitch-1.png');
        background-size: cover;   
        opacity: 1;        
    }
	
}