/*
**
**	@User: SKDJ ;
** 
**	grid-row-end: 1;
**	flex-direction: row;
*/


a[id="barlink"]{
	background-color: transparent !important;
}

a[id="barLink"]:hover{
	background-color: transparent !important;
}


#topBarBox{
	position: relative;
	display: flex;
	flex-grow:2;
	left: 0px;
	order: 1;
	
	max-width: 20px;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	
	align-self: flex-start;
	vertical-align: top;
	
	font-size: 0pt;
	
	box-shadow: 2px;	 
	
	white-space: nowrap;			
	z-index: 50;
}


#barBox{
	position: relative;
	display: flex;
	flex-grow:2;
	left: 0px;
	/*order: 1;*/
	
	max-width: 20px;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	
	align-self: flex-start;
	vertical-align: top;
	
	font-size: 0pt;
	
	box-shadow: 2px;	 
	
	white-space: nowrap;			
	z-index: 50;
}


#barLink{
	position: relative;
	display: flex;
	flex-direction: column;
	
	top: 0px;
	left: 0px;
	right: 0px;
	font-size: 10pt;
	width: 100%;
	height: 100%;
	
	align-self: center;
	
	float: center;
	text-align: center;
	align-items: center;
	
	margin: 0px 2px;
		
	white-space: nowrap;
}


#barLink:hover{

	/*border-style: solid purple;*/
	/*float: center;*/
	text-align: center;
		
}

#bar1,#bar2,#bar3{
	position: relative;
	display: flex;
	flex-direction: column;
	top: 0px;
	right: 0px;
	left: 0px;
	width: 97%;
	white-space: pre-wrap;
	text-align: center;
	align-self: center;
	background-color: lawnGreen;
	
	/*border: 1px thin pink;*/
	box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	margin: 2px 0px;
	animation: box-flicker 1.5s infinite alternate;
	width: 20px;
	height: 4px;
}

.bar1:hover, .bar2:hover, .bar3:hover{
	border: 1px solid lawnGreen;
	transform: background 2s ease-in-out;

}