/* CSS Document */
/* https://codepen.io/andornagy/pen/RNeydj */

/* takes menu to edges */
body { margin: 0; padding: 0; }  

.toggle, [id^=drop] { display: none; }

/* Nav container. */
nav { margin:0px 0 0 0; padding: 0.6% 6% 0.5% 5% ; background: #eee ;  /* my background */
      z-index: 1; position: sticky; top: 0; left: 0; width: 100%;
      border-bottom: 0px solid #ccc; font-size: 85%;
font-family: Metropolis, sans-serif; font-weight: 400;
 }

/* "float:left" needs clear after container. */
nav:after { content:""; display:table; clear:both; }

/* Remove styles from ul, add position:relative */
nav ul { float: right; padding:0 0 0 0px; margin:0 0 0 0 ; list-style: none;
	position: relative; }
	
/* Navigation items inline */
nav ul li { margin: 0px; display:inline-block; float: left;
	background: #eee;                             /* my background */
	}

/* Styling links */
nav a { display:block; padding: 10px 12px 12px 12px;
        text-decoration:none; border-bottom: 0px ; }

nav a:link { color: #047; font-weight: 400; }            /* my font colour */
nav a:visited { color: #058; font-weight: 400; }         /* my font colour */

nav ul li ul li:hover { background: #fff; }                 /* my hover background */


/* Background change on hover */
nav a:hover { border-bottom: 0px ; color: #058;             /* my font on hover */ 
            background: #fff;                         /* my hover background */
            }

/* Hide dropdowns by default, position of absolute */
nav ul ul { display: none; position: absolute; 
           /* must be same number as "line-height" of "nav a" */
            }
	
/* Display Dropdowns on hover */
nav ul li:hover > ul { display:inherit; }
	
/* First tier dropdown */
nav ul ul li { width:320px; float:none; display:list-item;
	position: relative; }

/* 2nd and 3rd etc tier dropdowns go left by width of first tier.  */
nav ul ul ul li { position: relative; 
	/* must be same number as "width" of "nav ul ul li" */ 
	left:320px; }
	
/* Change ' +' to change Dropdown symbol */
li > a:after { content:  ''; }
li > a:only-child:after { content: ''; }


/* Media Queries ------------------- old - 768 px-------------- */

@media all and (max-width : 1000px) {

/*   #logo { display: block; padding: 0; width: 100%; text-align: center; float: none; } */

   nav { margin: 0; }

/* .container { width: 100%; overflow:hidden; float:left; padding: 100px 0 0 0 ;
     border: 0px solid #f00; } */

   /* Hide navigation menu by default */
   .toggle + a, 
   .menu { display: none; }

   /* Styling the toggle label */
   .toggle { display: block; padding:12px 12px;            /* indent menu */
   text-decoration:none; border:none; 
   border-bottom: 0px ; 
   background: #eee;                                 /* my background */
   color:#047;                                             /* my toggle font */ 
   }

   .toggle:hover { background: #fff; }               /* my hover background */
   
   /* Dropdown when clicked on parent label */
   [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: #fff; }             /* my hover background */
  
   nav ul li ul li .toggle,
   nav ul ul a,
   nav ul ul ul a { padding:8px 0px 8px 20px; /* indent submenu */ 
                  }
  
   nav ul li ul li .toggle,
   nav ul ul a { background: #eee; }                /* my background */

   /* Hide Dropdowns by Default */
   nav ul ul { float: none; position:static;
   /* must be same number as "line-height" of "nav a" */
   }
		
   /* Hide menus on hover */
   nav ul ul li:hover > ul,
   nav ul li:hover > ul { display: none; }
		
   /* First Tier Dropdown */
   nav ul ul li { display: block; width: 100%; }

   nav ul ul ul li { position: static;
   /* must be same number as "width" of "nav ul ul li" */ 
   }
}

@media all and (max-width : 330px) {
       nav ul li { display:block; width: 94%; }
}