.nav {
	text-align: center;
	overflow: hidden;
	margin: 10px auto;
	width: 480px;
	position: relative; 
}
 .nav a {
	font-weight: bold;
	font-size: 14px;
    display: block;
    position: relative;
	float: left;
	padding: 10px 0 10px;
    width: 20%;
	text-decoration: none;
	color: #0e4d6d;
	-webkit-transition: .7s;
	-moz-transition: .7s;
	-o-transition: .7s;
	-ms-transition: .7s;
	transition: .7s; 
}
.ph-line-nav a:hover {
	
	background: #fff;	
}
.ph-line-nav_2 a:hover {
	color: #fff;
}
.effect {
	position: absolute;
	left: -12.5%;
	-webkit-transition: 0.7s ease-in-out;
	-moz-transition: 0.7s ease-in-out;
	-o-transition: 0.7s ease-in-out;
	-ms-transition: 0.7s ease-in-out;
	transition: 0.7s ease-in-out; 
}

.nav a:nth-child(1):hover ~ .effect {
	left: 10%; 
}
.nav a:nth-child(2):hover ~ .effect {
	left: 30%; 
}
.nav a:nth-child(3):hover ~ .effect{
	left: 50%; 
}
.nav a:nth-child(4):hover ~ .effect{
	left: 70%;	
}
.nav a:nth-child(5):hover ~ .effect {
	left: 90%; 
}

/* ----- Линия -----*/

.ph-line-nav .effect {
	width: 96px;
	height: 4px;
	bottom: 0px;
	background: #000;
	margin-left:-48px;
}
.ph-line-nav_2 .effect {
	width: 96px;
	height: 4px;
	bottom: 0px;
	background: #fff;
	box-shadow: 0 1px 0 white; 
	margin-left:-48px;
}

.ph-line-nav .my_active{
	background: #fff;
	border-bottom: 4px solid #000;
	
}
.ph-line-nav_2 .my_active{
	border-bottom: 4px solid #fff;
	color:#fff;
}