/**
* Menu
**/

ul.menu,
ul.menu ul {
  background-color: rgba(255,0,0,0.1);
  box-sizing: border-box;
  display: block;
  font-size: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
}

ul.menu li {
  box-sizing: border-box;
  display: inline-block;
  font-size: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

ul.menu.menu--vertical li {
  display: block;
}

ul.menu li li {
  display: block;
}

ul.menu li,
ul.menu li a,
ul.menu li span {
  letter-spacing: 0.025em;
  line-height: 44px;
  margin: 0;
  opacity: 0.999999;
  outline: none;
  position: relative;
  text-align: left;
  text-decoration: none;
}

ul.menu li a,
ul.menu li span {
  display: block;
  padding: 0 12px;
}

ul.menu li a {
  cursor: pointer;
}

/**
* Child Menus
**/

ul.menu .menu-item-has-children:hover,
ul.menu .menu-item-has-children.hover {
  z-index: 1;
}

ul.menu ul {
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  position: absolute; top: -9999px; left: 0px;
  text-align: left;
  visibility: hidden;
  width: 240px;
}

ul.menu.mouseable li:hover > ul,
ul.menu.touchable li.hover > ul {
  top: 44px;
  visibility: visible;
}

ul.menu.mouseable li li:hover > ul,
ul.menu.touchable li li.hover > ul {
  top:  -1px; left: 100%;
  /* top:   0px; */
}

ul.menu.mouseable li > ul.position-right,
ul.menu.touchable li > ul.position-right {
  left: auto; right: 0px;
}

ul.menu.mouseable > li li > ul.position-right,
ul.menu.touchable > li li > ul.position-right {
  left: auto; right: 100%;
}

ul.menu.menu--vertical.mouseable li:hover > ul,
ul.menu.menu--vertical.touchable li.hover > ul
{
  top: -1px; left: 100%;
  /* top:  0px; */
}

ul.menu.menu--vertical.mouseable li:hover > ul.position-right,
ul.menu.menu--vertical.touchable li.hover > ul.position-right
{
  left: auto; right: 100%;
}

ul.menu ul {
  opacity: 0;
  transition: visibility 0s linear 0.2s,
      right 0s linear 0.2s,
      left 0s linear 0.2s,
        top 0s linear 0.2s,
    opacity 0.2s ease-in-out;
}

ul.menu li:hover > ul,
ul.menu li.hover > ul {
  opacity: 1;
  transition:
      right 0s linear 0s,
      left 0s linear 0s,
        top 0s linear 0s,
    opacity 0.2s ease-in-out;
}

/**
* Colours
**/

ul.menu
{
  background-color: #454545;
}

ul.menu li,
ul.menu li a,
ul.menu li span
{
  color: #ffffff;
}

ul.menu li ul,
ul.menu:not(.menu--flat) li:hover,
ul.menu:not(.menu--flat) li:hover ul,
ul.menu.touchable:not(.menu--flat) li.hover,
ul.menu.touchable:not(.menu--flat) li.hover ul
{
  background-color: #454545;
}

ul.menu li:hover,
ul.menu li:hover a,
ul.menu li:hover span,
ul.menu.touchable li.hover,
ul.menu.touchable li.hover a,
ul.menu.touchable li.hover span
{
  color: #ffffff;
}

ul.menu.mouseable:not(.menu--flat) li:hover > a,
ul.menu.mouseable:not(.menu--flat) li:hover > span,
ul.menu.mouseable:not(.menu--flat) li.hover > a,
ul.menu.mouseable:not(.menu--flat) li.hover > span
{
  background-color: rgba(255,255,255,0.1);
}

ul.menu,
ul.menu li,
ul.menu li ul
{
  border: 0 solid #333;
}

ul.menu.menu--vertical {
  border-width: 1px 0 0;
}

ul.menu.menu--vertical > li {
  border-width: 0 0 1px;
}

ul.menu li ul {
  border-width: 1px 1px 0;
}

ul.menu ul > li {
  border-width: 0 0 1px;
}

/**
* Flatten
**/


ul.menu.menu--vertical.menu--flat,
ul.menu.menu--vertical.menu--flat li,
ul.menu.menu--vertical.menu--flat li ul {
  border: none;
}

ul.menu.menu--vertical.menu--flat ul {
  box-shadow: none;
  opacity: 1;
  position: static;
  visibility: visible;
  width: auto;
}

ul.menu.menu--vertical.menu--flat li,
ul.menu.menu--vertical.menu--flat li a,
ul.menu.menu--vertical.menu--flat li span {
  line-height: 36px;
  padding: 0;
}

ul.menu.menu--vertical.menu--flat li {
  padding: 0 0 0 12px;
}

ul.menu.menu--vertical.menu--flat > .menu-item {
	border-top: 1px solid #000000;
}

ul.menu.menu--vertical.menu--flat ul {
	background-color: rgba(255,255,255,0.1);
}

ul.menu.menu--vertical.menu--flat .menu-item.menu-item-has-children ul {
  margin-bottom: 12px;
}

ul.menu.menu--vertical.menu--flat a:hover {
	text-decoration: underline;
}

ul.menu.menu--vertical.menu--flat .menu-item.menu-item-has-children > a::after,
ul.menu.menu--vertical.menu--flat .menu-item.menu-item-has-children > span::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  line-height: 36px;
}

/**
* Fedora Adjustments
**/

.fedora ul.menu {
  background-color: transparent;
  display: inline-block;
  vertical-align: top;
}

.fedora ul.menu li,
.fedora ul.menu li a,
.fedora ul.menu li span
{
  color: #454545;
}

.fedora ul.menu li:hover,
.fedora ul.menu li:hover a,
.fedora ul.menu li:hover span,
.fedora ul.menu.touchable li.hover,
.fedora ul.menu.touchable li.hover a,
.fedora ul.menu.touchable li.hover span
{
  color: #ffffff;
}

@media screen and ( max-width: 1024px ) {
  .fedora ul.menu {
    display: none;
  }
}

/**
* Quick Nav Icons
**/

ul.quick-nav {
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

ul.quick-nav > li {
  display: inline-block;
  font-size: 1rem;
  line-height: 44px;
  margin: 0;
  text-align: center;
  width: 44px;
}

ul.quick-nav > li a {
  color: #ffffff;
  display: block;
  height: 100%;
  width: 100%;
}

ul.quick-nav > li a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}