.text-center{text-align:center; color:#151515;}
.cont{
    left: calc(50% - 30%);
    padding: 0;
    position: absolute;
    top: 150px;

}

#nprogress-bar{
    direction: ltr;
    -webkit-appearance:none;
    width: 700px;
    color: #CCC;
    height: 2px;
    margin: 0 auto;
}
#first, #second, #third,  #fourth, #five{ margin:0px; }
#step span{

    height: 80px;
    width: 80px;
    border-radius: 100%;
    border: 3px solid #CCC;
    background:#CCCCCC;
    position: absolute;
    left:0;
    color:#ffffff;
    top: -30px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}
#step{ height:100px; width:100%;}
#step span i{padding:20px; text-align:center; font-size:40px;
}

#step .first {  left:-23px;
}


#step  .second{
    left: 200px;
}
#step  .third{
    left: 420px;
}
#step  .fourth{
    left: 640px;
}
.detail{ position:relative;}
#nprogress-bar::-webkit-progress-value{ /* Changes line color */
    background: #222738;
    transition: all 0.4s ease-in-out;
}
#nprogress-bar::-webkit-progress-bar{ /* Changes background color */
    background: #CCC;
}
#step .border-change{
    border-color: #2f364d;
    background: #222738;
    transition: all 0.4s ease-in-out;
}
.step-icons-glow{
    display: flex;
    justify-content: space-around;
    margin-top: 14px;
}
@media (max-width: 768px) {
    #steps-web{
        display: none;
    }
    #steps-mobile{
        display: block;
    }
}
@media (max-width: 1118px) {
    #steps-web{
        display: none;
    }
    #steps-mobile{
        display: block;
    }
}@media (max-width: 800px) {
    #steps-web{
        display: none;
    }
    #steps-mobile{
        display: block;
    }
}
@media (min-width: 1119px) {
    #steps-web{
        display: block;
    }
    #steps-mobile{
        display: none;
    }
}