.top-nav { 
	padding: 7px 0px 4px 0px; 
	border-bottom: 1px solid rgb(100, 100, 100); 
	background: transparent linear-gradient(135deg, rgb(12, 12, 12) 0px, rgb(71, 71, 71) 100%) repeat scroll 0% 0%; 
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5); 
	margin: 0px auto; 
	min-width: 320px; 
	width: 100%; 
}

.top-nav-right { 
	float: right;
	padding: 0 15px 3px 0;
}

.site-logo {
	margin-top: 4px;
	margin-bottom: 0em;
}
.site-logo-right { 
	float: right;
	margin: 10px 10px 0;
	color: #888; 
	font-size: smaller;
}
.site-logo-left {
	float: left;
}


.list { 
	overflow: hidden; 
	margin: 0px; 
	padding: 0px; 
	//color: rgb(184, 184, 184);
	color: rgb(222, 222, 222);
	text-decoration: none; 
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
}
.list li { 
	float: left;
	list-style-type: none;
}

.list .fa-search { 
	padding: 0 5px 0 10px; 
}

.list li a, .list li > span  { 
	display: block; 
	padding: 0 0.8em; 
	//color: rgb(184, 184, 184);
	color: rgb(255, 255, 255);
	text-decoration: none; 
	//text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); 
	transition: all 0.3s ease 0s;
}
.top-nav-right > .list li a { 
	padding: 0 0.6em; 
}
.list li a:hover { 
	//color: rgb(255, 255, 255); 
	color: rgb(16, 141, 194);
	//color: var(--color-active);
	text-shadow: none; 
}
.list li span { 
	font-size: 16px; 
	line-height: 0.9; 
}


.list li a:hover span.fa-rss {
	color: rgb(252, 176, 74);
	text-shadow: none; 
}

.list li a:hover span.fa-facebook {
	color: rgb(60, 90, 154);
	text-shadow: none; 
}

.list li a:hover span.fa-vk { 
	color: rgb(90, 128, 168);
	text-shadow: none; 
}

.list li a:hover span.fa-odnoklassniki {
	color: rgb(255, 183, 78);
	text-shadow: none; 
}


/* форма для поля поиска в навигации */

.top-nav__form {
  height: 14px;
}

input.top-nav__search {
  display: block;
  margin: 0;
  padding: 0 4px 0 10px;
  background-color: black;
  border: none;
  border-radius: 2px;
  color: white;
}

.top-nav__search:focus {
  outline: none;
  border: none;
  background-color: #ddd;
  color: black;
 }

/* медиа-запросы */

@media all and (min-width: 768px) {


  form.top-nav__form {
    //flex: none;
	margin: 0;
  }

  input.top-nav__search {
    width: 55px;
    transition: width 0.5s, background-color 1s;
  }

  .top-nav__search:focus {
    width: 310px;
  }
}