#navbar ul{
        display: none;
        background-color: white;
        position: absolute;
        top: 100%;
        
      }
      #navbar li:hover ul { display: block; }
      #navbar, #navbar ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #navbar {
        
        margin:5px;
        text-transform:uppercase;
        font-size:130%;
        height: 40px;        
        letter-spacing: 2px;
        font-weight:bold;
        
      }
      #navbar li {
        float: left;
        position: relative;
        height: 100%;
        
      }
      #navbar li a {
        display: block;
        padding: 15px 15px 5px 5px;
        
        min-width: 80px;
        color: black;
        text-decoration: none;
        text-align: left;
        
      }
      
       
      #navbar li a:hover {
        color:white;
      }  
      
      #navbar li.current {
        background-color: #c91e18;
        color: white;  
        margin: 0px 5px;
      }

    #navbar li.current a {color: white; }
      #navbar li.current::after {
        content: ''; 
        position: absolute; /* Абсолютное позиционирование */
        left: 15px; bottom: -20px; /* Положение треугольника */
        border: 10px solid transparent; /* Прозрачные границы */
        border-top: 10px solid #c91e18; /* Добавляем треугольник */
        }
      
      #navbar ul li { float: none; left:0px; margin:5px -5px 5px -5px;}
      #navbar li:hover  { background-color: #c91e18 }     

      
      #navbar ul li:hover { background-color: #c91e18; }

      


      #project ul{
        display: none;
        background-color: white;
        position: absolute;
        top: 100%;
        
      }
      #project li:hover ul { display: block; }
      #project, #project ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #project {
        width:85%;
        margin:0 auto 50px auto;
        text-transform:uppercase;
        font-size:95%;
        height: 40px;        
        letter-spacing: 3px;
        font-weight:bold;
        
      }
      #project li {
        float: left;
        position: relative;
        height: 100%;
        
      }
      #project li a {
        display: block;
        padding: 15px 15px 5px 5px;
        
        min-width: 80px;
        color: black;
        text-decoration: none;
        text-align: left;
        
      }
      
       
      #project li a:hover {
        color: #c91e18;
      }  
      
      #project li.current_project {
        
        color:  #c91e18;  
        margin: 0px 5px;
      }

    #project li.current_project a {color: #c91e18; }
      
      
      #project ul li { float: none; left:0px; margin:5px -5px 5px -5px;}
      #project li:hover  { color: #c91e18 }     

      
      #project ul li:hover { color: #c91e18; }

      

      #menu_footer ul{
        display: none;
        background-color: white;
        position: absolute;
        top: 100%;
        
      }
      #menu_footer li:hover ul { display: block; }
      #menu_footer, #menu_footer ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #menu_footer {
        width:100%;
        margin:0 0 0 0;
        text-transform:uppercase;
        font-size:60%;
        height: 20px;        
        letter-spacing: 2px;
        font-weight:bold;
        
      }
      #menu_footer li {
        float: left;
        position: relative;
        height: 100%;
        
      }
      #menu_footer li a {
        display: block;
        padding: 3px ;
        
        min-width: 80px;
        color: white;
        text-decoration: none;
        text-align: left;
        border-left: 2px solid white;
        padding-left: 10px; /* Расстояние между линией и текстом */
        margin-left: 10px; /* Расстояние от левого края до линии */
      }
      
       
      #menu_footer li a:hover {
        font-weight:bold;
      }  
      
      #menu_footer li.current_menu_footer {
        
        font-weight:bold;
        
      }

    #menu_footer li.current_menu_footer a {font-weight:bold; }
      
      
      #menu_footer ul li { float: none; left:0px; margin:5px -5px 5px -5px;}
      #menu_footer li:hover  { color: #c91e18 }     

      
      #menu_footer ul li:hover { color: #c91e18; }

#breadcrumb {
    height:100px;
    margin-left:-40px; 
}      
.crumbs {
    display: block; 
}
 
.crumbs ul {  
    
}

.crumbs li {  
    display: inline; 
}
 
.crumbs li.first { 
    padding-left: 8px; 
}
 
.crumbs li a, .crumbs li a:link, .crumbs li a:visited { 
    color: #666; 
    display: block;
    float: left; 
    font-size: 100%; 
    
    padding: 3px 17px 15px 25px; 
    position: relative; 
    text-decoration: none; 
}
 
.crumbs li a {
    background-image: url('/media/img_r/bg-crumbs_.png');  
    background-repeat: no-repeat; 
    background-position: left 100% 0; 
    position: relative; 
}
 
.crumbs li a:hover { 
    color: #333; 
    background-position: left 100% -48px; 
    cursor: pointer; 
}
 
.crumbs li a:active { 
    color: #333; 
    background-position: left 100% -96px; 
}
 
.crumbs li.first a span { 
    height: 29px; 
    width: 3px; 
    border-right: 1px solid #d9d9d9; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
}




nav {
  display: table;
  margin: 20px auto ;
}

nav a {
  text-decoration: none;
  outline: none;
  display: block;
  transition: .3s ease-in-out;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topmenu > li {
  width: auto;
  float: left;
  position: relative;
  
}
.topmenu > li > a {
  text-transform: uppercase;
  font-size:80%;
  -moz-font-size:100%;
  font-weight: bold;
  color: black;
  padding: 15px 15px 5px 5px;
  white-space:nowrap;
}

.topmenu > li.current {
        background-color: #c91e18;
        color: white;  
        margin: 0px 5px;
      }

.topmenu > li.current > a {color: white; }
.topmenu > li.current::after {
        content: ''; 
        position: absolute; /* Абсолютное позиционирование */
        left: 15px; bottom: -20px; /* Положение треугольника */
        border: 10px solid transparent; /* Прозрачные границы */
        border-top: 10px solid #c91e18; /* Добавляем треугольник */
        }


.topmenu > li:hover > a, .submenu li:hover a {color: white; background-color: #c91e18}
.submenu-link:after {
  content: "\f107";
  font-family: "FontAwesome";
  color: inherit;
  margin-left: 10px;
}
.submenu {
  background: #273037;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 3000;
  width: 180px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: .5s ease-in-out;
}
.submenu a {
  color: white;
  text-align: left;
  padding: 12px 15px;
  font-size:100%;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.submenu li:last-child a {border-bottom: none;}
.topmenu > li:hover .submenu {
  opacity: 1;
  transform: scaleY(1);
}     



/* left menu */

.menu {
  background-color: rgba(0, 0, 0, 0.8);
  left: -285px;
  height: 95%;
  position: fixed;
  width: 285px;
  top:100px;
  z-index: 2000; 
}


/*  */



.menu ul {
  border-top: 1px solid #555;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #555;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li:hover {
  cursor: pointer;
  background-color: #555;
  }

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 6px;
   
}




.icon-menu {
  color: #fff;
  float:left;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  padding: 20px 0 0 10px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu img {
  margin-right: 5px;
  height:50px;
  -webkit-animation: 3s ease-in-out 0s normal none infinite running cbh-circle-img-anim; 
  -moz-animation: 3s ease-in-out 0s normal none infinite running cbh-circle-img-anim; 
  -o-animation: 3s ease-in-out 0s normal none infinite running cbh-circle-img-anim; 
  animation: 3s ease-in-out 0s normal none infinite running cbh-circle-img-anim; 
}

@keyframes cbh-circle-img-anim-!!!!!!!!!!!! {
	0%, 50%, 100% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
	}
	10%, 30% {
		transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
	}
	20%, 40% {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
		-ms-transform: rotate(10deg);
	}
}