@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*Hide all except first fieldset*/
.progressformswrapper fieldset:not(:first-of-type) {
    display: none;
}

/*progressbar*/
.progressBar {
    overflow: hidden;

    margin-bottom: 30px;

    counter-reset: step;
}

ul.progressBar > li {
    font-size: 12px;

    position: relative;
    z-index: 4 !important;

    float: left;

    width: 20%;

    list-style-type: none;

    text-align: center;
}

.progressBar li:before {
    font-family: Montserrat, arial, sans-serif;
    font-size: 14px;
    line-height: 30px;

    z-index: 4 !important;

    display: block;

    width: 30px;
    margin: 0 auto 5px auto;

    content: counter(step);
    counter-increment: step;
    text-align: center;

    color: lightgrey;
    border: 1px solid lightgrey;
    border-radius: 50%;
    background: white;
}
/*progressbar connectors*/
.progressBar li:after {
    position: absolute;
    z-index: -1;
    top: 15px;
    left: -39%;

    width: 79%;
    height: 2px;

    content: '';

    background: lightgrey;
}
.progressBar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}

.progressBar li.completed:before,
.progressBar li.completed:after {
    color: white;
    background: #263e8f;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.progressBar li.completed:before,
.progressBar li.completed:after {
    color: white;
    border-color: #333;
    background: #263e8f;
}
.progressBar li.active:before,
.progressBar li.active:after {
    color: white;
    border-color: #333;
    background: #263e8f;
}
.progressBar li.completed:before {
    font-family: FontAwesome !important;

    content: '\f00c' !important;
}
@media only screen and (max-width : 600px) {
    .progressBar li:after {
        left: -20% !important;
    }
}