* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing:border-box;
}
html,
body {
  font-family: Arial, sans-serif;
  fonts-size: 100%;
}

/* ------------------------------- */
/* MENU */
#navMain {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
/*//////////////*/
 #navMain{
            font-size: 14px;
            padding-left: 0px;
            padding-right: 0px;
            
        }
        .vernagir{
/*
         background-color: #2980B9;
            c16olor:white;
*/    
        font-size: 22px;
        padding-left: 8px; 
         padding-right:  8px; 
            padding-bottom:   6px;
        padding-top: 6px;
         background-color: #2980B9;
/*			muq vva*/
/*			background-color: #44789E;*/
			
/*       background-color: #20B2AA;*/
            color:white;
            line-height: 40px;
        margin-bottom: 0px;
            font-weight: bold;
        }
        .flr{
            
            float: right;
            padding-right: 50px;
            margin-top: 10px;
        }
 ul li{         
 padding-left: 1px;
        }

/*////////////*/
#navMain ul,
#navMain li,
#navMain a {
  position: relative;
  list-style:none;
  text-decoration: none;
}
#navMain ul li a {
  display: block;
  color: #fff;
  padding: 10px 6px;
  position: relative;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* --------------- */
/* MENU : niveau 1 */
#navMain > ul {
  position: relative;
  margin: 0 auto; /* centrage */
  max-width:1360px; /* facultatif */
}
#navMain > ul > li > a {
  height:100%;
  background: #2980b9;
/*	vva muq menu*/
/*				background-color: #44789E;*/

	
  box-shadow: 1px 1px 0 #409ad5 inset, 1px -1px 0 #20638f inset;
}
/* --------------- */
/* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
#navMain > ul > li.active > a {
  background: #20638f; /* bleu foncé */
}
/* --------------- */
/* MENU : niveau 2 et suivants */
#navMain ul ul > li > a {
  padding-left: 18px;
  background: #333;
  box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #222 inset;
}
#navMain ul ul ul > li > a {
  padding-left: 30px;
  background: #444;
  box-shadow: 0 1px 0 #555 inset, 0 -1px 0 #333 inset;
}
#navMain ul ul ul ul > li > a {
  padding-left: 40px;
  background: #555;
  box-shadow: 0 1px 0 #666 inset, 0 -1px 0 #444 inset;
}
/* --------------- */
/* hover */
#navMain li:hover > a {
  background: #20638f;
	
  box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
}
#navMain li > a:hover,
#navMain li > a:focus {
  background: #084b8a !important;
/*	  background: red !important;*/

/*    select active menu color*/
}
/* --------------- */
/* avec sous-menu */
#navMain li.hasSub > ul {
  display: none;
}

/* ------------------------------- */
/* fleche, avec rotation */
#navMain .hasSub:after {
  position: absolute;
  content: "\25BC";
/*    slaq nerqev*/
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
  cursor: pointer;

  transform: rotate(0deg);
  transition: transform 0.5s;
}
#navMain .hasSub.open:after {
  transform: rotate(180deg);
  transition: transform 0.5s;
}

/* ------------------------------- */
/* Menu BURGER (pour PHONE/TABLET) */
#menuBurger {
  display: none; /* checkbox masquée */
}
#menuBurger ~ label {
  display: none;
  z-index:2;
  position:absolute;
  right:0;
  top:0;
  cursor: pointer;
  vertical-align: top;
  background: #20638f; /* bleu foncé */
  width: 38px;
  height: 38px;
/*
	 width: 32px;
  height: 32px;
*/
	
}
#menuBurger ~ label::before {
  content: "";
  margin: 6px auto;
  width: 24px;
  height: 5px;
  background: #fff;
  box-shadow: 0 10px 0 0 #fff, 0 20px 0 0 #fff; /* traits */
}
#menuBurger ~ label::after {
  display: none;
  content: "\2716"; /* croix hamburger menu */
  font-weight: 900;
  margin: auto;
  font-size: 26px;
	  font-size: 23px;

  color: #fff;
}
#menuBurger:checked ~ label::after {
  display: block;
}
#menuBurger:checked ~ label::before {
  display: none;
}
/* ------------------------------- */
/* PHONE + TABLET : */
@media screen and (max-width: 767px) {
  /* menu vertical */
  #navMain > ul {
    width: 100%;
    display:none; /* on masque */
  }
  #menuBurger ~ label {
    display: inline-flex; /* affiche le BURGER */
  }
  #menuBurger:checked ~ ul {
    display:block; /* affiche le MENU */
  }
}
/* ------------------------------- */
/* TABLET : */
@media screen and (min-width: 576px) and (max-width: 767px) {
}

/* ---------- RESPONSIVE  --------- */
/* DESKTOP : */
@media screen and (min-width: 767px) {
  /* menu horizontal */
  #navMain > ul {
    display: flex;
    flex-wrap:nowrap;
  }
  #navMain > ul > li {
    flex: 1 1 25%;
  }
  #navMain > ul > li > ul {
    position: absolute;
    width: 100%;
    z-index: 1;
  }
}
/* ------------------------------- */