/* @override 
	https://clean-ee6-starter/css/ariamenu_style-min.css */

/*  Aria DropDown Menu : Starting Point  */

/** These styles just simulate a nav bar. Chances are you don't need these. */

  body {
    /* background: #aaa; */ /* These styles are just for the demo page */
    /*min-height: 100vh;*/ /* These styles are just for the demo page */
  }

  header {
    /* width: 100%; */ /* These styles are just for the demo page */
    /*position: relative;*/ /* These styles are just for the demo page */
  /*background: #900028;*/ /* These styles are just for the demo page */
  
  /*display: flex;
  flex-wrap: wrap;*/
	border: 2px solid #900028;
	
  }

header,
header a {
  color: #000; /* These styles are just for the demo page */
  text-decoration: none; /* These styles are just for the demo page */
}



/* * These are the styles you want to start with when making a new menu*/
.flyout-nav {
  margin: 0 auto;
}

.flyout-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flyout-nav a {
  transition: background-color .2s ease-out, 
              color .2s ease-out;
}

.flyout-nav > ul {
  display: flex;
  justify-content: center;
}

.flyout-nav > ul > li {
  text-align: center;
}

.flyout-nav > ul > li > a {
  display: block;
  padding: 1.5rem 2rem;
}

.flyout-nav .has-submenu ul {
  background: #fff;
  display: none;
  position: absolute;
  text-align: left;
  padding: 1rem 0;
}

.flyout-nav .has-submenu li a {
  display: block;
  color: #900028;   
  padding: .5rem 2rem;
}

.has-submenu button {
  background: transparent;
  display: block;
  padding: 0;
  border: 0;
  margin: 0 auto -20px;
  height: 20px;
}
.has-submenu button:after {
  content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M7.406%2015.422l-1.406-1.406%206-6%206%206-1.406%201.406-4.594-4.594z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  display: block;
  height: 100%;
  width: 20px;
  visibility: hidden;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.has-submenu:hover button:after,
.has-submenu.open button:after {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.has-submenu a:focus button:after,
.has-submenu button:focus:after,
.has-submenu:hover button:after,
.has-submenu.open button:after {
  visibility: visible;
}

.flyout-nav .has-submenu:hover > ul,
.flyout-nav .has-submenu.open > ul {
  display: block;
  -webkit-animation: appear .2s ease-out;
  animation: appear .2s ease-out;
}

.flyout-nav .open > a,
.flyout-nav > ul > li:hover > a,
.flyout-nav > ul > li > a:focus,
.flyout-nav > ul > li > a:focus-within {
  background: #fff;
  color: #900028;
}

.flyout-nav .has-submenu li a:hover,
.flyout-nav .has-submenu li a:focus {
  background: #333;
  color: #fff;
}

@-webkit-keyframes appear {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

@keyframes appear {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}