.progress-meter-container {
    position: relative;
    width: 40%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
}

.progress-meter {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    border-radius: 2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
    background: whitesmoke;
    width: 100%;
    height: 1em;
    top: .4em;
    position: relative;
    padding: .25em;
}

.meter {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -ms-border-radius: 1em;
    -o-border-radius: 1em;
    border-radius: 1em;
    -webkit-transition: width 0.4s ease-in-out, 1s;
    -moz-transition: width 0.4s ease-in-out, 1s;
    -o-transition: width 0.4s ease-in-out, 1s;
    transition: width 0.4s ease-in-out, 1s;
    height: 100%;
    background: #8fb66f;
    float: left;
    position: relative;
    width: 10%;
    z-index: 3;
}

.progress-meter-container.step1 .meter, .progress-meter-container.step2 .meter, .progress-meter-container.step3 .meter, .progress-meter-container.step4 .meter {
    width: 20%;
}

.progress-meter-container.step1 .bulb-1-inner, .progress-meter-container.step2 .bulb-1-inner, .progress-meter-container.step3 .bulb-1-inner, .progress-meter-container.step4 .bulb-1-inner {
    background: #8fb66f;
}

.progress-meter-container.step2 .meter, .progress-meter-container.step3 .meter, .progress-meter-container.step4 .meter {
    width: 40%;
}

.progress-meter-container.step2 .bulb-2-inner, .progress-meter-container.step3 .bulb-2-inner, .progress-meter-container.step4 .bulb-2-inner {
    background: #8fb66f;
}

.progress-meter-container.step3 .meter, .progress-meter-container.step4 .meter {
    width: 60%;
}

.progress-meter-container.step3 .bulb-3-inner, .progress-meter-container.step4 .bulb-3-inner {
    background: #8fb66f;
}


.progress-meter-container.step4 .meter {
    width: 80%;
}

.progress-meter-container.step4 .bulb-4-inner {
    background: #8fb66f;
}

.progress-meter-container.step5 .meter {
    width: 100%;
}


.bulb-bg, .bulb-bg-1, .bulb-bg-2, .bulb-bg-3, .bulb-bg-4 {
    -webkit-border-radius: 1.8em;
    -moz-border-radius: 1.8em;
    -ms-border-radius: 1.8em;
    -o-border-radius: 1.8em;
    border-radius: 1.8em;
    background: 1px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
    width: 1.8em;
    height: 1.8em;
    background: whitesmoke;
    position: absolute;
    top: 0;
    z-index: -1;
    margin-left: -1em;
}

.bulb, .bulb-1, .bulb-2, .bulb-3, .bulb-4 {
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    -ms-border-radius: 80px;
    -o-border-radius: 80px;
    border-radius: 80px;
    -webkit-transition: width 0.4s ease-in-out, 1s;
    -moz-transition: width 0.4s ease-in-out, 1s;
    -o-transition: width 0.4s ease-in-out, 1s;
    transition: width 0.4s ease-in-out, 1s;
    width: 1.8em;
    height: 1.8em;
    background: whitesmoke;
    position: absolute;
    top: 0;
    z-index: 1;
    margin-left: -1em;
}

.bulb-inner, .bulb-1-inner, .bulb-2-inner, .bulb-3-inner, .bulb-4-inner {
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    -ms-border-radius: 80px;
    -o-border-radius: 80px;
    border-radius: 80px;
    width: 1.25em;
    height: 1.25em;
    position: absolute;
    top: 0.27em;
    z-index: 2;
    margin-left: -.73em;
}

.bulb-bg-1 {
    left: 20%;
}

.bulb-1 {
    left: 20%;
}

.bulb-1-inner {
    left: 20%;
}

.bulb-bg-2 {
    left: 40%;
}

.bulb-2-inner {
    left: 40%;
}

.bulb-2 {
    left: 40%;
}

.bulb-bg-3 {
    left: 60%;
}

.bulb-3 {
    left: 60%;
}

.bulb-3-inner {
    left: 60%;
}

.bulb-bg-4 {
    left: 80%;
}

.bulb-4 {
    left: 80%;
}

.bulb-4-inner {
    left: 80%;
}