/* https://www.sliderrevolution.com/resources/css-dropdown-menu/  */

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* body {
  margin: 0;
  background: #ecf0f1;
  color: #fff;
  font-family: sans-serif;
  line-height: 1.5;
}  */
ul {
  list-style: none;
  padding: 0;
  margin: 0; 
}
/*.main-header {    /* Controls the box around the menu */
/*  margin: auto;
  width: 75%;
  min-height: 40px;  /*?????    min-height: 40px;  */
/*  padding: 1em 2em;
  border: 2px solid rgb(29, 249, 53, 0.5); /* Lime Green*/ /* colour of header border with opacity */
/*  border-top: none;
  border-radius: 0 0 5px 5px;
  background: rgb(129, 29, 249, 0.5); /* purple */ /* colour of header background with opacity */
/*} */

  .main-header:after {
    content: " ";  
    display: table;  /* whole entry removes Main & Sub Menu colour */
    clear: both;  
  }  
  
/*.logo {
  display: block;
  text-decoration: none;
  float: left;
  margin-top: 14px;
  color: white;
  font-size: 1.4em;
}  */

/* Nav Demo Styles -------------------- */

.main-nav,
.drop-nav {
  background: rgb(0, 0, 0, 0.85);  /*  rgb(34, 112, 248, 0.75)  #2270f8 Slate Blue */ /* colour of dropdown boxes and main menu with opacity */
  width:220px;   /* Set width of the sub menus   width:220px;  */
}
.main-nav {
  float: right;
  border-radius: 4px;
  margin-top: 10px;  /* distance from menu button to top border  margin-top: 18px;  */
  border: solid 1px rgb(162, 10, 13, 0.5);  /* Red */ /* colour of border around the main menu buttons with opacity */
  width:680px;  /* make width the same as the <td> width */

  }
  .main-nav > li {
    float: left;
    border-left: solid 1px rgb(252, 229, 32, 0.5);  /* Yellow */ /* colour of border between main menu buttons with opacity */
  	width:100px;    /*  Sets the width of the Menu Buttons  width:110px;  */
  }
  .main-nav li:first-child {
    border-left: none;
    
  }
  .main-nav a {
    color:  rgb(255, 255, 255, 1);  /* White */  /* colour of text in main menu + opacity */
    display: block;
    padding: 10px 20px;  /* Height padding + Width padding      padding: 10px 20px;  */
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;	/* font-size: 14px;  */
  }
.dropdown,
.flyout {
  position: relative;
}
.dropdown:after {
  content: "\25bc";  /* Black Down-Pointing Triangle  */  /*  https://unicode-table.com/en/blocks/geometric-shapes/ */
  font-size: .5em;
  display: block;
  position: absolute;
  top: 45%;   /*   top: 38%;  */
  right: 5%;   /*  right: 12%;  */ /* Position of Black Down-Pointing Triangle from the right side of the button  */
}
.drop-nav,
.flyout-nav {
  position: absolute;
  display: none;
}
.drop-nav li {
  border-bottom: 1px solid rgba(255,255,255,.2);  /* White */ 
}
.dropdown:hover > .drop-nav,
.flyout:hover > .flyout-nav {
  display: block;
}
.flyout-nav {
  left: 100%;
  top: 0;
}
.flyout:hover a,
.flyout-nav {
  background: rgb(30, 141, 15, 0.5);  /* Green */  /*  Sub sub menu colour */
  }