

 
.menu_g_b{
 position:relative; 
 
 width:100%;
 
  margin: 0 auto;
  box-shadow: 0 2px 20px #70ac76;
  
}
.menu_g_b ul {
  /* by default hide all sub menus */
 
 	text-align:center;
}
.menu_g_b li {
 

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.menu_g_b input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.menu_g_b label  {
  position: relative;
  display: block;
  padding:  8px  8px  8px 64px;
  background: #696969;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 1.6rem;text-align:left;
}
.no-touch .menu_g_bu label:hover, .no-touch .menu_g_b a:hover {
  background: #52565d;
}
.menu_g_b label::before, .menu_g_b label::after, .menu_g_b a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.menu_g_b label {
  cursor: pointer;
}
.menu_g_b label::before, .menu_g_b label::after {
  background-image: url(../img/menu_v_b.svg);
  background-repeat: no-repeat;
}
.menu_g_b  label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.menu_g_b label::after {
  /* folder icons */
  left: 441px;
  background-position: -16px 0;
}
 
.menu_g_b input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.menu_g_b input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.menu_g_b input[type=checkbox]:checked + label + ul,
.menu_g_b input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: none;
}
.menu_g_b ul label,
 
.no-touch .menu_g_b ul label:hover, .no-touch
.menu_g_b ul a:hover {
  background: #3c3f45;
}
 
 
 
 

 

.menu_v_b{
position:relative; 
  width: 100%;
  display: none; 
  background: #000;
  margin: 0 auto;
  box-shadow: 0 2px 20px #70ac76;
}
.menu_v_b ul {
  /* by default hide all sub menus */
display: none; 
 	text-align:center;
}
.menu_v_b li {

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.menu_v_b input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.menu_v_b label  {
  position: relative;
  display: block;
  padding: 18px 18px 18px 64px;
  background: #696969;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 1.6rem;
}
.no-touch .menu_v_bu label:hover, .no-touch .menu_v_b a:hover {
  background: #52565d;
}
.menu_v_b label::before, .menu_v_b label::after, .menu_v_b a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.menu_v_b label {
  cursor: pointer;
}
.menu_v_b label::before, .menu_v_b label::after {
  background-image: url(../img/menu_v_b.svg);
  background-repeat: no-repeat;
}
.menu_v_b  label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.menu_v_b label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}
 
.menu_v_b input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.menu_v_b input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.menu_v_b input[type=checkbox]:checked + label + ul,
.menu_v_b input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.menu_v_b ul label,
 
.no-touch .menu_v_b ul label:hover, .no-touch
.menu_v_b ul a:hover {
  background: #3c3f45;
}
 
 
 
 
 
 
 
@media only screen and (max-width: 1000px){
	

 .menu_v_b    {
  display: block; 
}
	 .menu_g_b    {
  display: none; 
}
	
	 
}
 
 
 
 
 





/* доповнення до вертикального головне меню --- початок */
.btn_hide_menu_v { display: none;position:relative;width:100%;height:50px;z-index:10;  background: #001000; box-shadow: 0px 2px 20px 2px #70ac76;}
.btn_hide_menu_v>img{float:right;}
.btn_hide_menu_v:hover {box-shadow: 20px 2px 20px 5px #70ac76; } 
.btn_hide_menu_v a>img{ top: 10px;text-align:left; position:relative;}	
.btn_hide_menu_v a{position:relative;top: -5px;left:10px;color:#fff;font-size:18px;}
.btn_hide_menu_v a:hover{color:#00FF7F;}
.btn_hide_menu_v a:hover>img{transform: rotateZ(0deg) scaleX(1.2) scaleY(1.2);}
/* доповнення до вертикального головне меню --- кінець */

/* Горизонтальне головне меню --- початок */
.menu_g {position:relative; width:100%;padding: 1px;z-index:999; background-color: #001000;text-align:center;}
.menu_g:hover {box-shadow: 20px 1px 40px 2px #70ac76;}	

        
.menu_g ul {white-space: nowrap; list-style: none;}
.menu_g ul li {display:inline-table;background-color: #001000;text-align:left;}	
.menu_g a {display:block; padding:0 20px 0px 20px;  color:#FFF;font-size:16px;line-height: 50px; text-decoration:none;  height:50px;}
.menu_g a:hover {background-color: rgba(0,40,0,0.4); text-shadow: 0px   0px 20px #fff, 0 0 4em #001000; }	
.menu_g ul ul {position: absolute;z-index: 5; visibility: hidden;opacity: 0;  transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; }	
.menu_g ul li:hover > ul {display:inherit;transform: rotateX(0deg); visibility: visible;  box-shadow: 0px 0px 10px 0px #70ac76; opacity: 1;}
.menu_g ul ul li {min-width:170px;float:none;display:list-item;position: relative;}		
.menu_g ul ul ul {position: absolute;top:0;left:100%;}	
.menu_g ul ul  li > a:after {  position: absolute;right: 5px;content:  '+'; }	
.menu_g li > a:only-child:after { content: ' '; }
/* Горизонтальне головне меню --- кінець */


/* Вертикальне головне меню --- початок */
.menu_v{display:none; width:100%;position:absolute;z-index: 30;}
.menu_v{width: 100%; background: #008000; box-shadow: 0 1px 8px #70ac76; margin: 0 auto;}
.menu_v ul { display: none;}
.menu_v li {  -webkit-user-select: none; -moz-user-select: none;-ms-user-select: none; user-select: none;}
.menu_v input[type=checkbox] { position: absolute;  opacity: 0;}
.menu_v label, .menu_v a {  position: relative;  display: block;padding: 18px 18px 18px 64px;  background: #001000; box-shadow: inset 0 -1px #555960;  color: #ffffff; font-size: 1.6rem;}
.no-touch .menu_v label:hover, .no-touch .menu_v a:hover {  background: #52565d;}
.menu_v label::before, .menu_v label::after, .menu_v a::after { content: '';  display: inline-block;  width: 16px; height: 16px;  position: absolute; top: 50%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%);  transform: translateY(-50%);}
.menu_v label {cursor: pointer;}
.menu_v label::before, .menu_v label::after {background-image: url(../img/cd-icons.svg);  background-repeat: no-repeat;}
.menu_v label::before {left: 18px; background-position: 0 0; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg);}
.menu_v label::after { left: 41px;background-position: -16px 0;}
.menu_v a::after {  left: 36px; background: url(../img/cd-icons.svg) no-repeat -48px 0;}
.menu_v input[type=checkbox]:checked + label::before {-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);  -ms-transform: translateY(-50%); -o-transform: translateY(-50%);transform: translateY(-50%);}
.menu_v input[type=checkbox]:checked + label::after { background-position: -32px 0;}
.menu_v input[type=checkbox]:checked + label + ul,.menu_v input[type=checkbox]:checked + label:nth-of-type(n) + ul {  display: block;}
.menu_v ul label,.menu_v ul a {background: #001000; box-shadow: inset 0 -1px #41444a; padding-left: 82px;}
.no-touch .menu_v ul label:hover, .no-touch .menu_v ul a:hover {background: #002000;}
.menu_v > li:last-of-type > label,.menu_v > li:last-of-type > a,.menu_v > li > ul > li:last-of-type label,.menu_v > li > ul > li:last-of-type a {  box-shadow: none;}
.menu_v ul label::before { left: 36px;}
.menu_v ul label::after,.menu_v ul a::after { left: 59px;}
.menu_v ul ul label,.menu_v ul ul a { padding-left: 100px;}
.menu_v ul ul label::before { left: 54px;}
.menu_v ul ul label::after,.menu_v ul ul a::after { left: 77px;}
.menu_v ul ul ul label,.menu_v ul ul ul a { padding-left: 118px;}
.menu_v ul ul ul label::before {left: 72px;}
.menu_v ul ul ul label::after,.menu_v ul ul ul a::after {left: 95px;}
@media only screen and (min-width: 600px) {
  .menu_v label, .menu_v a {
    padding: 24px 24px 24px 82px;
    font-size: 1.9rem;
  }
  .menu_v label::before {
    left: 24px;
  }
  .menu_v label::after {
    left: 53px;
  }
  .menu_v ul label,
  .menu_v ul a {
    padding-left: 106px;
  }
  .menu_v ul label::before {
    left: 48px;
  }
  .menu_v ul label::after,
  .menu_v ul a::after {
    left: 77px;
  }
  .menu_v ul ul label,
  .menu_v ul ul a {
    padding-left: 130px;
  }
  .menu_v ul ul label::before {
    left: 72px;
  }
  .menu_vul ul label::after,
  .menu_v ul ul a::after {
    left: 101px;
  }
  .menu_v ul ul ul label,
  .menu_v ul ul ul a {
    padding-left: 154px;
  }
  .menu_v ul ul ul label::before {
    left: 96px;
  }
  .menu_v ul ul ul label::after,
  .menu_v ul ul ul a::after {
    left: 125px;
  }
}
/* Вертикальне головне меню --- кінець */




/* При зменшенні екрана  горизонтальне меню зникає, зявляється вертикальне  --- початок */
@media only screen and (max-width: 1000px){
input[type="checkbox"]:checked ~  .btn_hide_menu_v    +  .menu_v {display: block;  }
.menu_g { display:none;}
.btn_hide_menu_v{ display: inline-block;}
}
 /* При зменшенні екрана  горизонтальне меню зникає, зявляється вертикальне  --- кунець */


