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

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

#logo { display: block; padding-top: 10px; padding-bottom: 10px; 
      padding-left: 30px; float: left; max-width: 270px; 
      border: 0px solid #f00; }    /* max-width must be same as "width" of "nav ul ul li" or submenus lost */ 

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

/* Nav container. */
nav { margin:0; padding: 0px 0px ; background-color: #469 ;  /* my background */
      z-index: 1; top: 0; left: 0; right: 0;
  position: -webkit-sticky; /* Safari */          /* menu sticks where it appears in html */   /* !!! Stops menu covering image */
  position: sticky;
      border-bottom: 0px solid #fff; font-size: 100%;
      font-family: Lato, sans-serif; line-height:1.4em;
}

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

/* Styling links */
nav a { display:block; padding: 25px 12px 25px 12px;	
	text-decoration:none; border-bottom: 0px ; line-height:1.4em; }

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


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

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

/* Hide Dropdowns by default, position of absolute */
nav ul ul { display: none; position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul { display:inherit; }
	
/* First Tier Dropdown */
nav ul ul li { width:330px; float:none; display:list-item;   /* width of dropdown */
             position: relative; }

/* * 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:330px; 
}
	
/* Change ' +' to change the Dropdown symbol */
li > a:after { content:  ''; }
li > a:only-child:after { content: ''; }


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

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

        #logo { float: right; padding-right:30px; padding-left: 0px; }

	nav { margin: 0; }

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


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

	/* Styling the toggle lable */
	.toggle { display: block; padding: 20px 12px 20px 12px;	  /* indent menu */
		text-decoration:none; border:none; border-bottom: 0px ;
		background-color: #469 ;                 /* my background */
		color:#fff; font-weight: bold;              /* font colour 1st level */
	}

	.toggle:hover { background-color: #59d; }   /* my hover background */

	/* Display 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-color: #f8f8f8; }           /* my hover background */
  
	nav ul li ul li .toggle,
	nav ul ul a,
        nav ul ul ul a{ padding:20px 12px 20px 12px; color: #fff; }        /* indent submenu */  
  
  
	nav ul li ul li .toggle,
	nav ul ul a { background-color: #469 ; }              /* my background */

	/* Hide Dropdowns by Default */
	nav ul ul { float: none; position:static; color: #ffffff;
		/* 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; }
		
	/* First 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: 94%; } 
}