@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

/* ОБЩИЕ */
.menu a {
	text-decoration: none;
	font-family: Roboto, sans-serif;
	font-size: 1em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition-duration: 0.2s;
	align-items: center;
	padding: 1rem 1.5rem;
}

.menu img {
	transition-duration: 0.2s;
	/* неактивные: #757575 */
	filter: brightness(0) saturate(100%)
	        invert(45%) sepia(0%)
	        saturate(0%) hue-rotate(201deg)
	        brightness(93%) contrast(88%);
}

.menu a:hover img {
	animation: left-edge 0.7s ease-in-out 1;
	/* ховер: #FFFFFF */
	filter: brightness(0) saturate(100%)
	        invert(100%) sepia(0%)
	        saturate(0%) hue-rotate(0deg)
	        brightness(95%) contrast(100%);
}

/* активная всегда белая */
.menu a.active img {
	filter: brightness(0) saturate(100%)
	        invert(100%) sepia(0%)
	        saturate(0%) hue-rotate(0deg)
	        brightness(95%) contrast(100%);
}

.menu img:hover .menu {
	box-shadow: 0 10px 5px rgb(100 187 241 / 10%);
}

/* контейнер меню */
.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: auto;
	height: 60px;
	padding: 0 15px;
	border-radius: 15px;
	background: #000;
	box-shadow: 0 4px 4px rgba(0,0,0,.1);
}

/* Animations (если используешь точки) */
.menu .dot { animation: dot-anim 8s ease-in-out infinite; }
@keyframes dot-anim { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
@keyframes left-edge { 0%{transform:rotate(0)} 35%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} 100%{transform:rotate(0)} }