@charset "utf-8";
/* CSS Document */

/* menu and dropdown menu */

#menuBox {
	display: flex;
	flex: 1;
	width: 100%;
	background: #c9e3dc; /* l aqua */
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
	}
	
#containerBox {
	display: flex;
	justify-content: center;
	width: 70%;
	background: #c9e3dc; /* l aqua */
	text-align: justify;
	margin: auto;
	font-size: 1.1em;
	}

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

nav {
	margin: 0;
	padding: 0;
	background-color: transparent;
	}

nav:after {
	content: "";
	display: table;
	clear: both;
	}

nav ul {
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	table-layout: fixed;
	}

nav ul li {
	margin: 0;
	display: inline-block;
	float: left;
	background-color: #c9e3dc; /* l aqua */
	z-index: 99;
	border: 0px solid blue;
	}

nav a {
	display: block;
	padding: 0 20px;
	color: #000;
	font-size: 1.1em;
	line-height: 34px; /* height of line on all menus  - must be same */
	text-decoration: none;
	}
	  
/* ---------- aligning menu ---------------- */

.menu  {/* this is ul */
	list-style-type: none;
	padding: 0;
	margin: 0 auto; 
	width: 100%;
  	float: left;
	position: relative;
	table-layout: fixed;
	}

.menuWidth {
	margin: 0;
	display:inline-block;
	color: #000;
	border-right: 0px solid #fff;
	box-sizing: border-box;
	background-color: #c9e3dc; /* l aqua */
	padding-left: 3px;
	padding-right: 30px;
	text-align: left;
	}

.menuWidth:nth-child(1):nth-last-child(4),
.menuWidth:nth-child(1):nth-last-child(4) ~li{
	width: 12%;
	}

.menuWidth:nth-child(5):nth-last-child(6),
.menuWidth:nth-child(5):nth-last-child(6) ~li{
	width: 20%;
	}

.menuWidth:nth-child(6) {border-right: none;}

/* -------------- end of aligning ---------------------- */


nav ul li ul li {
	background: #fff;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
	}

nav ul li ul li:hover {
	background-color: #c9e3dc; /* l aqua */
	color: #fff;
	}

nav a:hover {
	background-color: #194d38; /* dark green */
	color: #fff;
	}

nav ul ul {
	display: none;
	position: absolute;
	top: 34px; /* adjusting height submenu  - must be same as nav a */
	}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
	width: 240px;
	float: none;
	display: list-item;
	position: relative;
	}

nav ul ul ul li {
	position: relative;
	top: -34px; /* adjusting height submenu - must be same as nav a */
	left: 240px;
	background-color: #fff; /* white */
	}

li > a:only-child:after { content: ''; }

.toggle1 {display: none;}



/* ----------------Media Queries --------------------------------------------- */

@media all and (max-width : 1400px) and (min-width : 1000px) {
#containerBox {
	width: 100%;
	margin: auto;
	}
}

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

#menuBox {box-shadow: none;}

#containerBox {
	width: 100%;
	justify-content: left;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
	}

nav { margin: 0;}

.toggle + a,
.menu {display: none;}

.toggle {
	display: block;
	width: calc(100% - 40px);
	background-color: #fff; /* white */
	padding: 0 20px;
	color: #000;
	font-size: 1.2em;
	line-height: 40px;
	text-decoration: none;
	border: none;
	}

.toggle:hover {
	background-color:  #194d38; /* dark green */
	color: #fff;
	}

/* for mobile menu top hamburger */
.toggle1 {
	display: block;
	color: #000;
	padding: 0 20px;
	font-size: 1.3em;
	font-weight:bold;
	line-height: 60px;
	text-decoration: none;
	border: none;
	}

.toggle1:hover {
	background-color: #194d38; /* dark green */
	color: #fff;
	}

[id^=drop]:checked + ul {
	display: block;
	width: 100%;
	}

nav ul li {
	display: block;
	width: 100%;
	}

nav ul ul .toggle,
nav ul ul a {
	padding: 0 40px;
	}

nav ul li ul li .toggle,
nav ul ul a {
	 background-color: #f9f8f2; /* pale cream */
	 padding-left: 60px;
	 width: calc(100% - 100px);
	 }

nav ul ul {
	float: none;
	position: static;
	color: #fff;
	}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
	display: block;
	width: 100%;
	}

nav ul ul ul li { position: static;}

nav ul ul ul li a {
	background-color: #ebf5f2; /* very light aqua */
	color: #000;
	padding-left: 80px;
	width: 72%;
	}
	
nav ul ul ul li a:hover{
	background-color: #194d38; /* dark green */
	color: #fff;
	}
	
@media all and (max-width : 330px) {

nav ul li {
	display: block;
	width: 94%;
	}
}