.bottom-bar{
position:fixed;
left:0;
bottom:0;
width:100%;
height:48px;
z-index:400;
background-color:var(--mainPrimaryDark);
}
.icons{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	
}
.icons .icon{
	width:calc(20% - 2px);
	float:left;
	height:100%;
	position:relative;
	margin-left:1px;
	margin-right:1px;
}
.icons .icon img{
	top:4px;
	width:40px;
	left:calc(50% - 20px);
	position:absolute;
}
.icons .icon img.normal{
	display:block;
}
.icons .icon img.active{
	display:none;
}
.icons .icon:hover img.normal{
	display:none;
}
.icons .icon:hover img.active{
	display:block;
}
.icons .icon[state='active'] img.normal{
	display:none;
}
.icons .icon[state='active'] img.active{
	display:block;
}

.active-bar{
	top:0;
	background-color:var(--textOnPrimary);
	width:40px;
	height:4px;
	left:calc(50% - 20px);
	position:absolute;
	
}

@media only screen and (min-width: 640px) {

	.bottom-bar{
	left:calc(50% - 320px);
	width:100%;
	max-width:640px;
}
}