.color-10 nav a {
	position: relative;
	display: block;
	margin: 5px 5px;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.75em;
	border-radius: 4px;
}

.color-10 nav a:hover,
.color-10 nav a:focus {
	outline: none;
}

/* Эффект 10: замена текста и фона слева */
.cl-effect-10  {
	position: relative;
	z-index: 1;
}

.cl-effect-10 a {
	overflow: hidden;
	margin: 10px 15px;
}
.cl-effect-10 a b {
	display: block;
	padding: 10px 20px;
	background: #ddd;
	color: #141414;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-10 a span {
	display: block;
	padding: 10px 20px;
	background: #141414;
  background: -moz-linear-gradient(top, #141414 0%, #183409 23%, #437e1c 82%, #89bc6a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #141414), color-stop(23%, #183409), color-stop(82%, #437e1c), color-stop(100%, #89bc6a));
  background: -webkit-linear-gradient(top, #141414 0%, #183409 23%, #437e1c 82%, #89bc6a 100%);
  background: -o-linear-gradient(top, #141414 0%, #183409 23%, #437e1c 82%, #89bc6a 100%);
  background: -ms-linear-gradient(top, #141414 0%, #183409 23%, #437e1c 82%, #89bc6a 100%);
  background: linear-gradient(to bottom, #141414 0%, #183409 23%, #437e1c 82%, #89bc6a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#141414', endColorstr='#89bc6a', GradientType=0);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-10 a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 10px 20px;
	width: 90%;
	height: 100%;
	background: #ddd;
	color: #141414;
	content: attr(data-hover);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translateX(-25%);
}

.cl-effect-10 a:hover span,
.cl-effect-10 a:focus span {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

.cl-effect-10 a:hover::before,
.cl-effect-10 a:focus::before {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}
@media screen and (max-width: 750px) {
.color-10 nav a {
	font-weight: 40;
}
}