body * {
            margin:0;
            padding:0;
         }









         nav menuitem {
                  position:relative;
                  display:block;
                  opacity:0;
                  cursor:pointer;
         }

         nav menuitem > menu {
            position: absolute;
            pointer-events:none;
         }
         nav > menu { display:flex; }

         nav > menu > menuitem { pointer-events: all; opacity:1; }
         menu menuitem a { white-space:nowrap; display:block; }

         menuitem:hover > menu {
            pointer-events:initial;
         }
         menuitem:hover > menu > menuitem,
         menu:hover > menuitem{
            opacity:1;
         }
         nav > menu > menuitem menuitem menu {
            transform:translateX(100%);
            top:0; right:0;
         }
         /* User Styles Below Not Required */
         /* User Styles Below Not Required */
         /* User Styles Below Not Required */

         nav {
            //margin-top: 40px;
            //margin-left: 40px;
         }




/*===================================================================================
#9dbac4 = light blue; #951208 = dark red; 

#005580 = dark blue; #000000 = black;

C0DFC1 = light green; 
====================================================================================*/


         nav a {
            //background:#ECEFF1;
            //color:#e8b23c;
            background:#ECEFF1;
            color:black;
            min-width:1rem; /*controls width of the menu item boxes*/
            transition: background 0.5s, color 0.5s, transform 0.5s;
            margin:0px 0px 0px 0px;
            padding:10px 20px; /*first number is height, the other width*/
            box-sizing:border-box;
            //border-radius:0px;   /*this controls the shape of the corner of the menu buttons*/
            //box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
            position:relative;
         }

         nav a:hover:before {
            content: '';
            top:0;left:0;
            position:absolute;
            /*background:rgba(0, 0, 0, 0.2);*/ /*shows box on hover*/
            width:100%;
            height:100%;
         }

         nav > menu > menuitem > a + menu:after{
            content: '';
            position:absolute;

            //border:10px solid transparent;
            
	    border-top: 10px solid white; /*creates an arrow*/
            
	 left:12px;
            top: -40px;
         }
         nav menuitem > menu > menuitem > a + menu:after{
            content: '';
            position:absolute;
            //border:10px solid transparent;
            //border-left: 10px solid white; /*creates an arrow*/
            top: 20px;
            //left:-180px;
		left:-20px;
            transition: opacity 0.6, transform 0s;
         }

         nav > menu > menuitem > menu > menuitem{
            transition: transform 0.6s, opacity 0.6s;
            transform:translateY(150%);
            opacity:0;
         }
         nav > menu > menuitem:hover > menu > menuitem,
         nav > menu > menuitem.hover > menu > menuitem{
            transform:translateY(0%);
            opacity: 1;
         }

         menuitem > menu > menuitem > menu > menuitem{
            transition: transform 0.6s, opacity 0.6s;
            transform:translateX(195px) translateY(0%);
            opacity: 0;
         }
         menuitem > menu > menuitem:hover > menu > menuitem,
         menuitem > menu > menuitem.hover > menu > menuitem{
            transform:translateX(0) translateY(0%);
            opacity: 1;
         }