// // start status bar
// $bolidSize:25px;
// .status-bar {
//     margin:200px 0 50px;
//     height:100px;
//     .row,.container {
//         overflow:visible;
//     }
//     .bar-items {
//         text-align:center;
//         position: relative;
//         width:500px;
//         margin: auto;
//         @media #{$maxSmall} {
//             width:100%;
//         }
//         &:before {
//             content:'';
//             position: absolute;
//             top:12px;
//             left:0;
//             width:100%;
//             height:1px;
//             background-color:$lightGray;
//         }
//         li {
//             float:$float-right;
//             width:25%;
//             .circle {
//                 float:none;
//                 position: relative;
//                 .bolid {
//                     height:$bolidSize;
//                     width:$bolidSize;
//                     border-radius: 50%;
//                     background-color: $lightGray;;
//                     display:block;
//                     position: relative;
//                     margin: auto;
//                     i {
//                         opacity: 0;
//                         color:#FFF;
//                         line-height: 27px;
//                         font-size: 14px;
//                     }
//                     &:after {
//                         content:'';
//                         position: absolute;
//                         height:12px;
//                         width:12px;
//                         background-color:transparent;
//                         border-radius: 50%;
//                         top:calc(50% - 6px);
//                         left:calc(50% - 6px);
//                     }
//                 }
//                 .status {
//                     position: absolute;
//                     width:100%;
//                     top:30px;
//                     text-align: center;
//                     padding:6px 20px;
//                     border:1px solid transparent;
//                     @media #{$maxSmall} {
//                         padding:7px 5px;
//                     }
//                 }
//             }
//             &.active {
//                 .status {
//                     color:$mainColor;
//                     top:-70px;
//                     border-color:$mainColor;
//                     &:after {
//                         content:'';
//                         height:0;
//                         widtH:0;
//                         border-width: 10px;
//                         border-style: solid;
//                         border-color:transparent;
//                         border-top-color:$mainColor;
//                         bottom:-20px;
//                         right:calc(50% - 10px);
//                         position: absolute;
//                     }
//                 }
//                 .bolid {
//                     &:after {
//                         background-color: $mainColor;
//                     }
//                 }
//             }
//             &.finished {
//                 .status {
//                     color:$mainColor;
//                     font-weight:700;
//                 }
//                 .bolid {
//                     background-color:$mainColor;
//                     i {
//                         opacity: 1;
//                     }
//                 }
//             }
//         }
//     }
// }
// // end status bar

.status-bar {
    margin: 200px 0 50px;
    height: 100px;
}
.status-bar .row,
.status-bar .container {
    overflow: visible;
}
.status-bar .bar-items {
    text-align: center;
    position: relative;
    width: 500px;
    margin: auto;
}
.status-bar-3 .bar-items {
    width: 400px;
}
.status-bar-3 .bar-items li {
    width: (100% / 3);
}
@media (max-width: 767px) {
    .status-bar .bar-items {
        width: 100%;
        transform: scale(.9);
    }
}
.status-bar .bar-items:before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #f6f6f6;
}
.status-bar .bar-items li {
    float: right;
    width: 25%;
}
.status-bar .bar-items li a {
    text-decoration: none;
    color: inherit;
    font-weight:bold;
}
.status-bar .bar-items li .circle {
    float: none;
    position: relative;
}
.status-bar .bar-items li .circle .bolid {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: #f6f6f6;
    display: block;
    position: relative;
    transition: all 0.5s ease-in-out;
    margin: auto;
}
.status-bar .bar-items li .circle .bolid i {
    opacity: 0;
    color: #fff;
    line-height: 27px;
    font-size: 14px;
}
.status-bar .bar-items li .circle .bolid:after {
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    background-color: transparent;
    border-radius: 50%;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
}
.status-bar .bar-items li .circle .status {
    position: absolute;
    width: 100%;
    top: 30px;
    transition: all 0.5s ease-in-out;
    text-align: center;
    padding: 6px 20px;
    border: 1px solid transparent;
}
@media (max-width: 767px) {
    .status-bar .bar-items li .circle .status {
        padding: 7px 5px;
    }
}
.status-bar .bar-items li.current .status {
    color: $mainColor;
    top: -70px;
    border-color: $mainColor;
}
.status-bar .bar-items li.current .status:after {
    content: "";
    height: 0;
    width: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
    border-top-color: $mainColor;
    bottom: -20px;
    right: calc(50% - 10px);
    position: absolute;
}
.status-bar .bar-items li.current .bolid:after {
    background-color: $mainColor;
}
.status-bar .bar-items li.done .status {
    color: $mainColor;
    font-weight: 700;
}
.status-bar .bar-items li.done .bolid {
    background-color: $mainColor;
    box-shadow:0px 0px 10px 0px rgba(0,0,0,.2);
}
.status-bar .bar-items li.done .bolid i {
    opacity: 1;
}