.navigation * {
	box-sizing: border-box;
}

.navigation li {
	list-style: none;
}

.navigation a {
	text-decoration: none;
}

.navigation {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 20vh;
	position: relative;
	width: 420; /* 70 * 6 = 420 */
	height: 70px;
}

.navigation ul {
	display: flex;
	margin: 0px;
	padding: 0px;
	position: relative;
}

.navigation ul li {
	position: relative;
	width: 70px;
	height: 70px;
	z-index: 1;
}

.navigation ul li a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #fff;
	text-align: center;
}

.navigation ul li a .icon {
	position: relative;
	line-height: 75px;
	transition: 0.5s;
	font-size: 30px;
}

.navigation ul li.active a .icon {
	font-size: 20px;
	transform: translateY(-6px);
}

.navigation ul li a .text {
	position: absolute;
	font-size: 12px;
	color: #fff;
	bottom: 20px;
	font-weight: 400;
	transition: 0.25s;
	text-transform: uppercase;
	transform: scale(0);
}

.navigation ul li.active a .text {
	transform: scale(1);

}

.navigation ul li.activeHover a .icon {
	font-size: 20px;
	transform: translateY(-6px);

}

.navigation ul li.activeHover a .text {
	transform: scale(1);

}

.navigation .indicator {
	position: absolute;
	left: 0;
	width: 70px;
	height: 70px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
}


.navigation ul li:nth-child(1).active ~ .indicator {
	background: #cc0000;
	transform: translateX(calc(70px * 0));
}

.navigation ul li:nth-child(2).active ~ .indicator {
	background: #1c71d8;
	transform: translateX(calc(70px * 1));
}

.navigation ul li:nth-child(3).active ~ .indicator {
	background: #e5a50a;
	transform: translateX(calc(70px * 2));
}

.navigation ul li:nth-child(4).active ~ .indicator {
	background: #26a269;
	transform: translateX(calc(70px * 3));
}

.navigation ul li:nth-child(5).active ~ .indicator {
	background: #613583;
	transform: translateX(calc(70px * 4));
}

.navigation ul li:nth-child(6).active ~ .indicator {
	background: #63452c;
	transform: translateX(calc(70px * 5));
}



.navigation ul li:nth-child(1).activeHover ~ .indicator {
	background: #f53b57;
	box-shadow: 0 15px 25px #f53b5799;
	transform: translateX(calc(70px * 0));
}

.navigation ul li:nth-child(2).activeHover ~ .indicator {
	background: #3584e4;
	box-shadow: 0 15px 25px #3584e499;
	transform: translateX(calc(70px * 1));
}

.navigation ul li:nth-child(3).activeHover ~ .indicator {
	background: #f5c211;
	box-shadow: 0 15px 25px #f5c21199;
	transform: translateX(calc(70px * 2));
}

.navigation ul li:nth-child(4).activeHover ~ .indicator {
	background: #2ec27e;
	box-shadow: 0 15px 25px #2ec27e99;
	transform: translateX(calc(70px * 3));
}

.navigation ul li:nth-child(5).activeHover ~ .indicator {
	background: #813d9c;
	box-shadow: 0 15px 25px #813d9c99;
	transform: translateX(calc(70px * 4));
}

.navigation ul li:nth-child(6).activeHover ~ .indicator {
	background: #865e3c;
	box-shadow: 0 15px 25px #865e3c99;
	transform: translateX(calc(70px * 5));
}

/* Responsive */
.toggler {
	font-size: 30px;
	display: none;
}
.toggler:hover {
	transform: scale(1.1);
	cursor: pointer;
}
.popover-menu a {
	display: block;
	font-size: 20px;
	padding: 10px;
	text-align: center;
	text-decoration: none;
}

@media screen and (max-width: 600px) {
	.toggler {
		display: block;
	}
	.navigation ul li {
		display: none;
	}
	.navigation .indicator {
		display: none;
	}
}