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

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

#logo { display: block; padding-top:  6px; padding-left:  10px; float: left;
        max-width: 250px; font-size:20px; border: 0px solid #f00; }

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

/* Nav container. */
nav { margin:0; padding: 0; background-color: #269;         /* my background */
 z-index: 1; position: fixed; top: 0; left: 0; right: 0; 
  position: -webkit-sticky; /* Safari */          /* menu sticks where it appears in html */
  position: sticky;
      border-bottom: 0px solid #fff; font-size: 90%;
 border-bottom: 1px solid #fff; font-size: 80%;
 }


/* "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 20px 0 0; margin:0; list-style: none;
	position: relative; }
	
/* Navigation items inline */
nav ul li { margin: 0px; display:inline-block; float: left;
	background-color: #269;                             /* my background */
	}

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

nav a:link { color: #fff; font-weight: bold; }            /* my font colour */
nav a:visited { color: #fff; font-weight: bold; }         /* my font colour */

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

nav ul li ul li:hover { background: #49c; }                 /* 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:180px; 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; top:-60px;
	/* must be same number as "width" of "nav ul ul li" */ 
	left:180px; }
	
/* 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 : 768px) {

   #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:14px 20px; 
   text-decoration:none; border:none; border-bottom: 0px ; 
   background-color: #269;                                 /* my background */
   color:#fff;                                             /* my toggle font */ 
   }

   .toggle:hover { background-color: #49c; }               /* my hover background */
   
   /* Dropdown when clicked on parent label */
   [id^=drop]:checked + ul { display: block; }

   /* Change menu items 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 60px; }

   nav a:hover,
    nav ul ul ul a { background-color: #49c; }             /* my hover background */
  
   nav ul li ul li .toggle,
   nav ul ul a,
   nav ul ul ul a { padding:14px 0px;  
                  }
  
   nav ul li ul li .toggle,
   nav ul ul a { background-color: #269; }                /* 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%; }
}