/* ********************************************************************************** */
/*                                                                                    */
/* Progress bar                                                                       */
/*                                                                                    */
/* ********************************************************************************** */

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    padding: 0;
}

#progressbar li {
    list-style-type: none;
    text-transform: uppercase;
    font-size: 9px;
    width: 14.2%;
    float: left;
    position: relative;
    cursor: default;
}

#progressbar li span{
    background: white none repeat scroll 0 0;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #AAA;
    cursor: default;
    display: block;
    font-size: 10px;
    padding: 14px 0;
    margin: 0 auto 5px;
    text-align: center;
    width: 82%;
}

#progressbar li:nth-child(5) span{
    padding: 6.5px 0;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 17px;
    z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
        /*connector not needed before the first step*/
    content: none;
}

#progressbar li.active span, #progressbar li.active:after {
    cursor:default;
}

#progressbar li.active {
    cursor:default;
}

#progressbar li.ready span{
    cursor:pointer;
}

#progressbar li.ready:after {
    cursor:pointer;
}

#progressbar li.ready:hover span, #progressbar li.ready:after {
    cursor:pointer;
}

#progressbar li.skipped span{
    cursor: help; 
}

#progressbar li.nextstep span{
    cursor: pointer; 
}

#progressbar li.nextstep:hover span, #progressbar li.nextstep:after{
    cursor:pointer;
}

/* ********************************************************************************** */
/*                                                                                    */
/* Media Queries                                                                      */
/*                                                                                    */
/* ********************************************************************************** */

/****  Small device  ****/

@media screen and (max-width: 766px) {

    #progressbar li:nth-child(5) span {
        padding: 14px 0;
    }

}