.nav,.nav-item{position:relative}
.nav-item:before,.nav1.nav-item:before{width:100%;height:5px;background-color:#dfe2ea;opacity:0}
*{-webkit-box-sizing:border-box;box-sizing:border-box}
.wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1px 0}

.nav{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;overflow:hidden;max-width:100%;min-width:580px;background-color:#fff;padding:0 20px;border-top:solid 1px gray;border-bottom:solid 1px gray;}

.nav-item{color:#83818c;padding:30px 20px;text-decoration:none;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;margin:0 50px;z-index:10;font-size:18px;font-weight:500}

.nav-item:before{content:"";position:absolute;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}
.nav-item:not(.active):hover:before{opacity:1;bottom:0}
.nav-item:not(.active):hover{color:#333}
.nav-indicator{position:absolute;bottom:0;-webkit-transition:.4s;-o-transition:.4s;transition:.4s;height:5px;z-index:10}
.nav1 .nav-indicator{height:5px;left:0;border-radius:8px 8px 0 0}
.nav1 .nav-item:before{bottom:-6px;left:0;border-radius:8px 8px 0 0;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}
.nav2,.nav3{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:20px}
.nav2 .nav-indicator{width:5px;left:0;border-radius:0 8px 8px 0}
.nav2 .nav-item:before{bottom:0;left:-27px;width:6px;height:100%;border-radius:0 8px 8px 0}
.nav3 .nav-indicator{width:5px;border-radius:8px 0 0 8px;left:initial;right:0}
.nav3 .nav-item:before{bottom:0;left:initial;right:-27px;width:6px;height:100%;border-radius:8px 0 0 8px}
@media (max-width:580px){.wrapper{padding:10px 0}}
@media only screen and (max-width:768px){.nav{min-width:100%}
.nav1{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.nav-item{padding:25px 15px;margin:0px;}}
@media (max-width:580px){.nav1{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow-x:auto}}
.nav a{z-index:20;background:;}