.menu {
margin: 4px 0px 5px 0px; background: #F9F9F9; box-shadow: 1px 1px 4px 0px #CCCCCC; 
}
/* Dropdown Button */
.dropbtn {
background-color: #F9F9F9;
color: #555555;
padding-left: 10px;
padding-right: 10px;
padding-top: 14px;
padding-bottom: 13px;
font-size: 16px;
font-family: verdana;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn:focus {
outline: 0;
}
.dropbtn  a:link{
color: #555555;
text-decoration:none;
}
.dropbtn  a:visited{
color: #555555;
text-decoration: none;
}
.dropbtn:hover{
color: black;
text-decoration:none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-right{
float: right;
position: relative;
display: inline-block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #E8E8E8;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none;
}
.dropdown-right:hover .dropbtn {
background-color: #E8E8E8;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none;
}

/*--------------- SIDENAV -----------------*/

/* The side navigation menu */
.sidenav {
height: auto; /* 100% Full-height */
max-width: 500px;
width: 0; /* 0 width - change this with JavaScript */
position: absolute; /* Stay in place */
z-index: 1; /* Stay on top */
top: 84px; /* Stay at the top */
left: 0;
white-space: nowrap;
background: #F7F7F7; box-shadow: 2px 2px 4px 0px #CCCCCC;
background-size: 100% 90px; background-repeat: no-repeat; 
background-image: linear-gradient(to bottom, #FEFEFE 1%, #FAFAFA 30%, rgba(247, 247, 247, 0.95) 75%);
overflow-x: hidden; /* Disable horizontal scroll */
overflow-y: hidden;
padding-top: 40px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
 /* The navigation menu links */
.sidenav a {
text-decoration: none;
font-family: verdana;
font-size: 16px;
color: #555555;
display: block;
transition: 0.2s;
}
 /* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
font-weight: bold;
width: 100%;
padding: 14px 10px 13px 10px;
top: 0px;
left: 0px;
font-size: 16px;
}
.sidenav .closebtn:hover {
background-color: #E8E8E8;
}
.sidenav .closebtn2 {
font-weight: bold;
padding: 14px 10px 13px 10px;
font-size: 16px;
text-align: center;
}
.sidenav .closebtn2:hover {
background-color: #E8E8E8;
}
.sidenav .main {
padding: 13px 10px 13px 20px;
font-weight: bold;
}
.sidenav .sub {
padding: 6px 8px 6px 30px;
font-size: 13px;
}
.sidenav  a:hover {
background-color: #E8E8E8;
text-decoration: none;
color: black;
transition: none;
}
.hr-sidenav {
border-color: #CCCCCC;
color: #CCCCCC;
background-color: #CCCCCC;
height:0; 
border:0; 
border-top:1px solid #CCCCCC; 
margin-left: 20px; 
margin-right: 20px;
margin-top: 2px;
margin-bottom: 0px; 
}

/* Оглавление */
.navContents{
display: block;
text-align:center;
color: #444;
padding-top: 14px; padding-left: 8px; padding-right: 8px; padding-bottom: 10px;
text-decoration: none;
font-size: 14px;
}
.navContents-phone{
display: none;
text-align:center;
color: #444;
padding-top: 14px; padding-left: 8px; padding-right: 8px; padding-bottom: 10px;
text-decoration: none;
font-size: 14px;
}
.nav-separator {
margin-left: 12px; margin-right: 12px; margin-bottom: 8px; height: 1px; background: #CCCCCC; border-radius: 5px; 
}
.navLI {
font-size: 14px;
}
.navLI a{
display: block;
color: #444;
padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px;
text-decoration: none;
}
.navLI2 {
font-size: 13px;
padding: 0;
font-style: italic;
}
.navLI2 a{
display: block;
color: #444;
padding-top: 7px; padding-bottom: 7px; padding-left: 30px; padding-right: 12px;
text-decoration: none;
}
/* Change the link color on hover */
.navLI a:hover {
background-color: #E8E8E8;
text-decoration: none;
}
.navLI a:visited{ 
color: #444; text-decoration: none;
}
.navLI a:visited:hover{ 
color: #444; text-decoration: none;
}
/* Change the link color on hover */
.navLI2 a:hover {
background-color: #E8E8E8;
text-decoration: none;
}
.navLI2 a:visited{ 
color: #444; text-decoration: none;
}
.navLI2 a:visited:hover{ 
color: #444; text-decoration: none;
}
.active {
background-color: #4CAF50;
color: white;
}
.collapse-button{
text-align: left;
font-size: 20px;
top: 39px;
padding-left: 13px;
position: relative;
display: none;
}

@media all and (max-width: 1144px){
	.collapse-button{
	display: block;
	}
}
@media all and (max-width: 875px){
	.dropdown-right{
	float: none;
	}
}
@media screen and (max-width: 767px){
	.dropdown{
	display: none;
	}
	.dropdown-right{
	display: none;
	}
	.sidenav{
	white-space: nowrap;
	}
@media screen and (max-width: 479px){
	.sidenav {
	top: 64px; /* Stay at the top */
	}
}