/* Container for .main-menu Home Works About */
/* each element 98vw for screen width < 860 */
/* all elements float left total 98vw screen width >= 860 */
#menu {
  width: 98%;
  font-size:Calc(16px + 1vw);
  font-family: 'Segoe Script';
  font-weight: bold;
  line-height: 0.8;
  text-decoration: none;
}
/* Some Default Settings */
#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

/* Use If Borders Required */
/*#menu li, #menu .sub-menu {} */

/*Use If Borders, Backgrounds & Margins Required */
/* #menu .sub-menu {} */

/*Use If Borders, Backgrounds & Margins Required */
/* #menu .sub-menu li:last-child {} */

#menu li, 
#menu a {
  position: relative;
  display: block;
  color: var(--type4-dark);
  text-decoration: none;
}

/* Create Top & Bottom Bars of Menu Icon */
/* Position on Screen in Top Right Corner */
#toggle-menu .css-icon {
	position: absolute;
	right: 15vw;
	top: 1.5vh;
	z-index: 10;
	display: inline-block;
    width: 3vw;
    height: 1.2em;
    margin-right: 0.3em;
    border-top-width: 0.2em;
	border-top-style: solid;
	border-top-color: var(--type4-dark);
    border-bottom-width: 0.2em;
	border-bottom-style: solid;
	border-bottom-color: var(--type4-dark);
}

/* Create Middle Bar of Menu Icon */
/* Position Within Previous */
#toggle-menu .css-icon:before {
    content: "";
    position: absolute;
    top: 0.35em;
    left: 0px;
    width: 100%;
    border-top-width: 0.2em;
	border-top-style: solid;
	border-top-color: var(--type4-dark);
}

#toggle-menu {
  width: 12em;
  font-family: Verdana;
  color: var(--type4-dark);
}

/* Use to Style Border Radius of Items */
/* #menu a { } */

/* Change to Alter Background-Color of All Items in Menu */
#menu li { background-color: var(--mainbg-light); }

/* Change Top & Bottom to Alter Height of Items in Menu */
#menu a { padding: 0.5em 0.25em 0.5em 0.25em; }

/* Not Used */
/* #menu a {transition: all .125s ease-in-out;} */

/* Alter Background-Color of Current Page Item*/
#menu #active{background-color: var(--mainbg-dark);}

#menu a:hover {
  background-color: var(--type3-dark);
  color: var(--type4-dark);
}

#menu .sub-menu { display: none; }

/* Show All Level Drop Down Items Screen Width < 860 */
#menu input[type="checkbox"]:checked + .sub-menu { display: block; }

/* Style Background & Size of 1st Level Drop Down Items Screen Width < 860 */
#menu li input[type="checkbox"]:checked + .sub-menu li{
  margin-left: 25%;
  width: 50vw;
  background-color: var(--type3-light);
  opacity: 0.85;
}

/* Style Background & Size of 2nd Level Drop Down Items Screen Width < 860 */
#menu li li input[type="checkbox"]:checked + .sub-menu li{
  margin-left: 5%;
  width: 45vw;
  background-color: var(--type2-light);
  opacity: 1;
}

#menu .sub-menu a:hover {
  background-color: var(--mainbg-dark);
  color: var(--type4-dark);
}

#menu li label.drop-icon {
  position: absolute;
  right: 0;
  top: 0;
}
/* 1st Level Sub-Menu Icon Position  & Colour*/
#menu li label.drop-icon{
  padding: 0.25em 35vw 0.5em 65vw;  /* Alters L-R Position of icon */
  font-size: 1em;
  text-align: center;
  color: var(--title-dark);
}
/* 2nd Level Sub-Menu Icon Position & Colour*/
#menu li li label.drop-icon{
  padding: 0.25em 1vw 0.5em 99vw;  /* Alters L-R Position of icon */
  font-size: 1em;
  text-align: center;
  color: var(--title-dark);
}

  #menu li li .sub-menu li a{
	color: var(--title-light);
}

@media only screen and (min-width: 860px) {
  #menu input[type="checkbox"]:checked + .sub-menu { display: none; }
  
  #menu .main-menu { display: block; }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }
  
/* Drop Icon Position */
  #menu .sub-menu span.drop-icon {
  padding: 0.25em 0 0.5em 0;  /* Alters L-R Position of icon */
  font-size: 1em;
  text-align: center;
  color: var(--type4-dark);
  }

#menu li {
	width: 33.33%;
	float: left;
  }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
	text-align: centre; /*Move 1st Level Sub-Menu text left?*/
  }

  #menu .sub-menu { display: none; }

/*Style 1st Level Sub-Menu */
  #menu .sub-menu li {
	margin: 0 0;
	width: 100%;
	background-color: var(--type3-light);
	opacity: 0.85;
  }

/*Position 2nd Level Sub-Menu (Flyout)*/
  #menu .sub-menu .sub-menu {
    top: 0.25vh;
    left: 100%;
}

  #menu .sub-menu .drop-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
  
/* Style 2nd Level Sub-Menu */  
  #menu li li .sub-menu li{
	margin: 0 0;
	width: 90%;
	background-color: var(--type2-light);
	opacity: 1.0;
  }
}