:root {
  --width-bar: 400px;
  --height-bar: 75px;
  --height-arrow: 8px;
  --options: 1; 
  --padding: 10px;
}

@media (max-width: 960px) {
  .menu span { font-size: 12px; }  
  
}

div.menu li .circle {   
  height:18px; width:18px; line-height:18px; border-radius:100%;  
  margin:0px; padding:0px; padding-left: 0px; 
  background-color:red; color:white; font-weight: bold;
  text-align:center; position:absolute; right:5px; top:5px; 
  font-size: 14px; display:none;
  pointer-events: none; 
}

.menu {
  z-index: 1000;
  position: absolute;
  top:0px;
  right: 0px;
  background-color: #bababa;
  border-radius: 10px 0px 0px 10px;
  box-shadow: -5px 0 10px -5px #000, 5px 0 10px -5px #000;  
  height: var(--height-bar);
  width: calc(var(--width-bar) + var(--padding));
}
div.menu ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: center;
          flex-flow: row nowrap;
  list-style-type: none;
  width: var(--width-bar);
  height: var(--height-bar);
  margin-left: auto;
  padding: 0px;  
  color: rgba(0,0,0,.5);
  font-size: 12px;
  letter-spacing: -0.01em
}
div.menu ul li {
  -webkit-box-flex: 1;
          flex: 1;
  position: relative;
  -webkit-transition: 300ms ease-in;
  transition: 300ms ease-in;
}


div.menu ul li:first-child {
  
}

div.menu ul li:nth-child(9).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (9 - 1)));
}
div.menu ul li:nth-child(8).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (8 - 1)));
}
div.menu ul li:nth-child(7).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (7 - 1)));
}
div.menu ul li:nth-child(6).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (6 - 1)));
}
div.menu ul li:nth-child(5).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (5 - 1)));
}
div.menu ul li:nth-child(4).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (4 - 1)));
}
div.menu ul li:nth-child(3).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (3 - 1)));
}
div.menu ul li:nth-child(2).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (2 - 1)));
}
div.menu ul li:nth-child(1).selected ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (1 - 1)));
}

div.menu ul li:nth-child(9):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (9 - 1)));
}
div.menu ul li:nth-child(8):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (8 - 1)));
}
div.menu ul li:nth-child(7):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (7 - 1)));
}
div.menu ul li:nth-child(6):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (6 - 1)));
}
div.menu ul li:nth-child(5):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (5 - 1)));
}
div.menu ul li:nth-child(4):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (4 - 1)));
}
div.menu ul li:nth-child(3):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (3 - 1)));
}
div.menu ul li:nth-child(2):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (2 - 1)));
}
div.menu ul li:nth-child(1):hover ~ .current {
  left: calc((var(--width-bar) / var(--options)) / 4 + (var(--width-bar) / var(--options) * (1 - 1)));
}

div.menu ul li.selected {
  color: #9b59b6;
  font-weight: 900; 
}
div.menu ul li.selected:hover {  
  color: #8e44ad;
  opacity:1;
}
div.menu ul li:hover {
  -webkit-transition: 250ms ease-out 150ms;
  transition: 250ms ease-out 150ms;
  color: #9b59b6;
}
div.menu ul li a {
  text-decoration: none;
  width: 100%;
  height: var(--height-bar);
  line-height: calc(var(--height-bar));
  box-sizing: border-box;
  margin: 0;
  font-size: 100%;  
  text-align: center;
  display: inline-block;
  padding-top: calc( var(--height-bar) / 6);
  color: inherit;
  outline: none;
}

div.menu ul li a i {
  position: absolute;
  top: 10px;
  left: 50%;
  color: rgba(100,100,255,.8);
  font-size: 190%;  
}

div.menu ul li a:hover { 
  transition: .1s all;
  font-weight: 600; 
  color: rgba(255,0,0,.5);
}

div.menu ul li a i:before {
  position: absolute;
  -webkit-transform: translate(-50%, 30%);
          transform: translate(-50%, 30%);
}
div.menu ul div.current {
  position: absolute;
  left: calc((var(--width-bar) / var(--options)) / 4);
  top: 0;
  width: calc((var(--width-bar) / var(--options)) / 2);
  height: var(--height-bar);
  z-index: -1;
  -webkit-transition: 400ms cubic-bezier(0.35, 1.3, 0.8, 1.1);
  transition: 400ms cubic-bezier(0.35, 1.3, 0.8, 1.1);
}
div.menu ul div.current > div {
  position: absolute;
  left: 0;
  height: calc(var(--height-bar) / 10);
  width: 100%;
  left: var(--padding);
}
div.menu ul div.current > div:before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  border-left: solid transparent 16.66666667px;
  border-right: solid transparent 16.66666667px;
}
div.menu ul div.current .top {
  bottom: 100%;
  background-color: #9b59b6;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 0 5px 6px -5px #000;
}
div.menu ul div.current .top:before {
  top: 100%;
  border-top: solid #9b59b6 var(--height-arrow);  
}
div.menu ul div.current .bottom {
  top: 100%;
  background-color: #9b59b6;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 -5px 6px -5px #000;
}
div.menu ul div.current .bottom:before {
  bottom: 100%;
  border-bottom: solid #9b59b6 var(--height-arrow);
}

div .menu .null {
  opacity:0;
  pointer-events: none;
}

div.menu.icon-only a {
  padding: 0;
}
div.menu.icon-only a span {
  display: none;
}
div.menu.icon-only a i {
  font-size: 190%;
}