/*todo menu starts here*/
body {
/* font-size:15px; */
  line-height: 32px;
  color: #000000;
  margin: 0;
  padding: 0;
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
  }
  
  /*todo change active state of menu to hove state */
 .active {
    background-color: white;
    color: black;
 }
  .toggle,
  [id^=drop] {
  display: none;
  }
  
  /* Giving a background-color to the nav container. */
  nav { 
  
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 880px;
  background-color: #0E5E9D;
  }
  
  
  
  nav:after {
  content:"";
  display:table;
  clear:both;
  }
  
  /* Removing padding, margin and "list-style" from the "ul",
  * and adding "position:reltive" */
  nav ul {
  /* float: left; */
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
  
  }
  
  /* Positioning the navigation items inline */
  nav ul li {
  margin: 0;
  display:inline-block;
  /* float: left; */
  background-color: #0E5E9D;
  }
  
  /* Styling the links */
  nav a {
  display:block;
  padding:14px 20px;	
  color:#ffffff;
  font-size:15px;
  text-decoration:none;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  }
  
  
  nav ul li ul li:hover {
  background: #FFFFFF;
  
  }
  
  /* Background color change on Hover */
  nav a:hover { 
  background-color: #FFFFFF; 
  color:#000000;
  }
  
  /* Hide Dropdowns by Default
  * and giving it a position of absolute */
  nav ul ul {
  display: none;
  position: absolute; 
  z-index: 200;
  /* has to be the same number as the "line-height" of "nav a" */
  top: 50px; 
  }
  
  /* Display Dropdowns on Hover */
  nav ul li:hover > ul {
  display:inherit;
  }
  
  /* Fisrt Tier Dropdown */
  nav ul ul li {
  width:170px;
  float:none;
  display:list-item;
  position: relative;
  }
  
  /* Second, Third and more Tiers	
  * We move the 2nd and 3rd etc tier dropdowns to the left
  * by the amount of the width of the first tier.
  */
  nav ul ul ul li {
  position: relative;
  top:-60px;
  /* has to be the same number as the "width" of "nav ul ul li" */ 
  left:170px; 
  }
  
  
  /* Change ' +' in order to change the Dropdown symbol */
  li > a:after { content:  ' +'; }
  li > a:only-child:after { content: ''; }
  
  
  /* Media Queries
  --------------------------------------------- */
  
  @media all and (max-width : 880px) {
  
  
  nav {
      margin: 0;
      left: 0;
      width: 100%;
  }

    /* Styling the links */
    nav a {
        display:block;
        padding:14px 20px;	
        color:#ffffff;
        font-size:14px;
        text-decoration:none;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        }
  
  /* Hide the navigation menu by default */
  /* Also hide the  */
  .toggle + a,
  .menu {
      display: none;
  }
  
  /* Stylinf the toggle lable */
  .toggle {
      display: block;
      width: 100%;
      /* background-color: #669900; */
      padding:14px 20px;	
      color:white;
      font-size:14px;
      text-decoration:none;
      border:none;
  }
  
  .toggle:hover {
      background-color: #164672;
   /* the button toggle background behind the hamburger and drop downs on mobile on hover */
  }
  
  /* Display Dropdown when clicked on Parent Lable */
  [id^=drop]:checked + ul {
      display: block;
  }
  
  /* Change menu item's width to 100% */
  nav ul li {
      display: block;
      width: 100%;
      }
  
  nav ul ul .toggle,
  nav ul ul a {
      padding: 0 40px;
  }
  
  nav ul ul ul a {
      padding: 0 80px;
  }
  
  nav a:hover,
   nav ul ul ul a {
      background-color: #cccccc;
  }
  
  nav ul li ul li .toggle,
  nav ul ul a,
  nav ul ul ul a{
      padding:14px 20px;	
      color:#000000;
      font-size:14px; 
  }
  
  
  nav ul li ul li .toggle,
  nav ul ul a {
      background-color: #ffffff; 
  }
  
  /* Hide Dropdowns by Default */
  nav ul ul {
      float: none;
      position:static;
      color: #000000;
      /* has to be the same number as the "line-height" of "nav a" */
  }
      
  /* Hide menus on hover */
  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
      display: none;
  }
      
  /* Fisrt Tier Dropdown */
  nav ul ul li {
      display: block;
      width: 100%;
  }
  
  nav ul ul ul li {
      position: static;
      /* has to be the same number as the "width" of "nav ul ul li" */ 
  
  }
  
  }
  
  
  @media all and (max-width : 330px) {
  
  nav ul li {
      display:block;
      width: 100%;
  }
  }