#menu {
    display: none;
}
nav {
    position:fixed;
    z-index: 99;
    width: 100%;
    top: 0;
    left: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

nav ul li {
    display: inline-block;
    background: #f2f2f2;
    margin: 0;
    padding: 0;
    width: 14.28%;
    text-align: center;
    line-height: 1.6em;
}

nav ul li a {
    text-decoration: none;
    border-bottom: none;
    color: #54565a;
    padding: 5px 30px;
    text-transform: uppercase;
    font-size: .9em;
    display: block;
    background: linear-gradient(.05deg,
    #f4b334 0 calc(70% - 20px),
    #f2f2f2 calc(70% - 20px) calc(70% + 20px),
    #ccc calc(70% + 20px) 100%
  );
    background-size: 1050% 300%;
    background-position: 100% 30%;
    transition: 0.5s all;
    white-space: nowrap;
    overflow: hidden;
}

nav ul li a:hover, nav ul li a:focus, nav ul li a.selected, nav ul li#center a:hover, nav ul li#center a:focus, nav ul li#center a.selected, nav ul li#aquatics a:hover, nav ul li#aquatics a:focus, nav ul li#aquatics a.selected, nav ul li#avenue a:hover, nav ul li#avenue a:focus, nav ul li#avenue a.selected, nav ul li#cafe a:hover, nav ul li#cafe a:focus, nav ul li#senior a:hover, nav ul li#senior a:focus, nav ul li#veterans a:hover, nav ul li#veterans a:focus, nav ul li#preserve a:hover, nav ul li#preserve a:focus {
    background-position: 20% 70%;
    transition: 0.5s all;
    color: #333;
    border-bottom: none;
}

nav ul li#veterans a:hover, nav ul li#veterans a:focus, nav ul li#veterans a.selected {
	color: #fff;
}

nav ul li#center a.selected {
    background: #f4b334;
}

nav ul li#aquatics a {
    background: linear-gradient(.05deg,
    #1d9add 0 calc(70% - 20px),
    #f2f2f2 calc(70% - 20px) calc(70% + 20px),
    #ccc calc(70% + 20px) 100%
  );
    background-size: 1050% 300%;
  background-position: 100% 30%;
  transition: 0.5s all;
}

nav ul li#aquatics a.selected {
    background: #1d9add;
}

nav ul li#avenue a {
    background: linear-gradient(.05deg,
    #8f993d 0 calc(70% - 20px),
    #f2f2f2 calc(70% - 20px) calc(70% + 20px),
    #ccc calc(70% + 20px) 100%
  );
    background-size: 1050% 300%;
  background-position: 100% 30%;
  transition: 0.5s all;
}

nav ul li#avenue a.selected {
    background: #8f993d;
}


nav ul li#cafe a {
    background: linear-gradient(.05deg,
    #e57579 0 calc(70% - 20px),
    #f2f2f2 calc(70% - 20px) calc(70% + 20px),
    #ccc calc(70% + 20px) 100%
  );
    background-size: 1050% 300%;
  background-position: 100% 30%;
  transition: 0.5s all;
}

nav ul li#cafe a.selected {
    background: #e57579;
}

nav ul li#senior a {
    background: linear-gradient(.05deg,
    #ff9016 0 calc(70% - 20px),
    #f2f2f2 calc(70% - 20px) calc(70% + 20px),
    #ccc calc(70% + 20px) 100%
  );
    background-size: 1050% 300%;
  background-position: 100% 30%;
  transition: 0.5s all;
}

nav ul li#senior a.selected {
    background: #ff9016;
}

nav ul li#veterans a {
    background: linear-gradient(.05deg,
    #54565a 0 calc(70% - 20px),
    #f2f2f2 calc(70% - 20px) calc(70% + 20px),
    #ccc calc(70% + 20px) 100%
  );
    background-size: 1050% 300%;
  background-position: 100% 30%;
  transition: 0.5s all;
}

nav ul li#veterans a.selected {
    background: #54565a;
}

nav ul li#preserve a {
    background: linear-gradient(.05deg,
    #8dc63f 0 calc(70% - 20px),
    #f2f2f2 calc(70% - 20px) calc(70% + 20px),
    #ccc calc(70% + 20px) 100%
  );
  background-size: 1050% 300%;
  background-position: 100% 30%;
  transition: 0.5s all;
}

nav ul li#preserve a.selected {
    background: #8dc63f;
}

@supports (-ms-ime-align:auto) {
    /* Edge 16+ CSS */
    nav ul li#center a {
     box-shadow: inset 0 -6px 0 #f4b334;
}
    
    nav ul li#center a:hover {
        background: #f4b334;
    }
    
nav ul li#aquatics a {
    box-shadow: inset 0 -6px 0 #1d9add;
}
    nav ul li#aquatics a:hover {
        background: #1d9add;
    }

nav ul li#avenue a {
  box-shadow: inset 0 -6px 0 #8f993d;
}
    nav ul li#avenue a:hover {
        background: #8f993d;
    }


nav ul li#cafe a {
  box-shadow: inset 0 -6px 0 #e57579;
}
    nav ul li#cafe a:hover {
        background: #e57579;
    }

nav ul li#senior a {
   box-shadow: inset 0 -6px 0 #ff9016;
}
    nav ul li#senior a:hover {
        background: #ff9016;
    }

nav ul li#veterans a {
  box-shadow: inset 0 -6px 0 #54565a;
}
    nav ul li#veterans a:hover {
        background: #54565a;
    }

nav ul li#preserve a {
  box-shadow: inset 0 -6px 0 #8dc63f;
}   
    nav ul li#preserve a:hover {
        background: #8dc63f;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
    
nav ul li#center a {
     box-shadow: inset 0 -6px 0 #f4b334;
}
    
    nav ul li#center a:hover {
        background: #f4b334;
    }
    
nav ul li#aquatics a {
    box-shadow: inset 0 -6px 0 #1d9add;
}
    nav ul li#aquatics a:hover {
        background: #1d9add;
    }

nav ul li#avenue a {
  box-shadow: inset 0 -6px 0 #8f993d;
}
    nav ul li#avenue a:hover {
        background: #8f993d;
    }


nav ul li#cafe a {
  box-shadow: inset 0 -6px 0 #e57579;
}
    nav ul li#cafe a:hover {
        background: #e57579;
    }

nav ul li#senior a {
   box-shadow: inset 0 -6px 0 #ff9016;
}
    nav ul li#senior a:hover {
        background: #ff9016;
    }

nav ul li#veterans a {
  box-shadow: inset 0 -6px 0 #54565a;
}
    nav ul li#veterans a:hover {
        background: #54565a;
    }

nav ul li#preserve a {
  box-shadow: inset 0 -6px 0 #8dc63f;
}   
    nav ul li#preserve a:hover {
        background: #8dc63f;
    }
}

/* end nav */