.navigationx{position:relative;width:100%;height:70px;display:flex;justify-content:center;align-items:center}.navigationx ul{display:flex}.navigationx ul li{position:relative;width:70px;height:70px;list-style:none;z-index:1}.navigationx ul li a{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;text-align:center;font-weight:500}.navigationx ul li a .icon{position:relative;display:block;line-height:75px;font-size:1.5em;text-align:center;transition:.5s}.navigationx ul li.active a .icon{transform:translateY(-37px)}.navigationx ul li a .text{position:absolute;font-weight:400;font-size:.75em;letter-spacing:.05em;opacity:0;transform:translateY(20px);transition:.5s}.navigationx ul li.active a .text{opacity:1;transform:translateY(10px)}.navigationx ul li a .circle{position:absolute;display:block;width:50px;height:50px;background:0 0;border-radius:50%;border:1.8px solid;transform:translateY(-37px) scale(0)}.navigationx ul li.active a .circle{transition:.5s;transition-delay:.5s;transform:translateY(-37px) scale(1)}.indicatorx{position:absolute;top:-50%;width:70px;height:70px;border:6px solid #fff;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:.5s}.navigationx ul li:nth-child(1).active~.indicatorx{transform:translateX(calc(70px * 0))}.navigationx ul li:nth-child(2).active~.indicatorx{transform:translateX(calc(70px * 1))}.navigationx ul li:nth-child(3).active~.indicatorx{transform:translateX(calc(70px * 2))}.navigationx ul li:nth-child(4).active~.indicatorx{transform:translateX(calc(70px * 3))}.navigationx ul li:nth-child(5).active~.indicatorx{transform:translateX(calc(70px * 4))}