.svg3 path {
  fill: #FFFFFF !important;
}
.svg1 path, .svg2 path {
  fill: #111111 !important;;
}
.svg1:hover path, .svg2:hover path {
  fill: #ffb556 !important;;
}

.sub-menu
{
  background: #FFFFFF;
  border:1px solid #cccccc;
  padding-left: 20px;
  padding-right: 20px; 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  transform: translateY(-2em);
  z-index: -10;
  transition: all 0.1s ease-in-out 0s, visibility 0s linear 0.3s, z-index 10s linear 0.01s;
  height:30px;
  display: block;
}

.sub-menu-span:hover .sub-menu
{
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  z-index: -10;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s; 
}
/*
.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
  visibility: visible; // shows sub-menu 
  opacity: 1;
  z-index: 99999;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s; // this removes the transition delay so the menu will be visible while the other styles transition 
}*/

nav {font-family: Arial; color: #ff0000;}
nav a { color: #111111; display: block; padding: 0.5em 1em; text-decoration: none;  }
nav a:hover { color: #ffb556; }
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0;}
nav .sub-menu a { color: #8b8b8b; font-weight: normal; font-size: 14px;}
nav .sub-menu a:hover { color: #ffb556; }


nav > ul { text-align: center;}
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; color: #dddddd;}
nav > ul > li:first-child { border:none; border-left: none;}
nav ul li ul li { font-weight: normal; color: #dddddd;}
nav > ul > li > ul > li:not(:last-child)  { border-bottom:1px solid #cccccc;}