﻿#msform {
    text-align:center;
}

    #msform fieldset:not(:first-of-type) {
        display: none;
    }

fieldset {
    border:none;
}

@media (max-width: 800px) {
    #progressbar li {
        font-size: 11px !important;
    }
}

    #progressbar {
        margin-bottom: 30px;
        overflow: hidden;
        counter-reset: step;
    }

        #progressbar li {
            list-style-type: none;
            color: black !important;
            text-transform: uppercase;
            font-size: 14px;
            width: 24.5%;
            float: left;
            position: relative;
            margin: 0 auto 5px auto;
            font-family: "Helvetica", "Helvetica Neue", Roboto, Arial, sans-serif;
        }

            #progressbar li:before {
                content: counter(step);
                counter-increment: step;
                width: 20px;
                line-height: 20px;
                display: block;
                font-size: 10px;
                color: white;
                background: #54667a;
                border-radius: 3px;
                margin: 0 auto 5px auto;
            }
            /*progressbar connectors*/
            #progressbar li:after {
                content: '';
                width: 100%;
                height: 2px;
                background: #54667a;
                position: absolute;
                left: -50%;
                top: 9px;
                z-index: -1; /*put it behind the numbers*/
            }

            #progressbar li:first-child:after {
                /*connector not needed before the first step*/
                content: none;
            }
            /*marking active/completed steps green*/
            /*The number of the step and the connector before it = green*/
            #progressbar li.active:before, #progressbar li.active:after {
                background: #27AE60;
                color: white;
            }
