ul.big {
    width: 100%;
    height: 20px;
    list-style: none;
    text-align: justify;
    margin: 80px auto;
    padding-right: 40px;
    background: -webkit-gradient( left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 255, 255, 0)), color-stop(51%, rgb(19, 137, 153)), color-stop(57%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: linear-gradient( to bottom, rgba(19, 137, 153, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(19, 137, 153, 1) 51%, rgba(255, 255, 255, 0) 57%, rgba(19, 137, 153, 0) 100%);
}

ul.big::after {
    display: inline-block;
    content: "";
    width: 100%;
}

ul.big li {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    position: relative;
    border-radius: 20%;
}

ul.big li.unlocked:hover {
    cursor: pointer;
    border: solid 3px !important;
}

ul.big li.unlocked {
    background: #03a5a7;
    border: solid 3px #ffffff;
    color: #03a5a7;
}

ul.big li.locked {
    background: #acacac;
    border: solid 3px #ffffff;
    color: #999999;
}

ul.big li.current {
    background: #03a5a7;
    border: solid 3px #000000;
    color: #000;
    font-weight: bold;
}

ul.big li::before {
    display: inline-block;
    content: attr(navig-step-number);
    font-size: 26px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

ul.big li:nth-child(odd):before {
    top: -40px;
}

ul.big li:nth-child(even):before {
    bottom: -40px;
}

ul.big li:after {
    display: inline-block;
    content: attr(navig-step-label);
    font-size: 16px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

ul.big li:nth-child(odd):after {
    bottom: 0;
    margin-bottom: -10px;
    transform: translate(-50%, 100%);
}

ul.big li:nth-child(even):after {
    top: 0;
    margin-top: -10px;
    transform: translate(-50%, -100%);
}