.line{
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 100%;
    left: 15px;
    position: relative;
}
.stepText1{
  text-align: left;
  left: -15px;
}
.stepText2{ text-align: center; }
.stepText3{
  text-align: right;
  right: -15px;
}
.step{
  width: 20px;
  height: 20px;
  border: 1px solid black;
  background: white;
  border-radius: 100px;
  margin-top: 30px;
}
.step1{
  margin-top: -10px;
  float: left;
}
.step2{
  margin: 0 auto;
  margin-top: -10px;
}
.step3{
  float: right;
  margin-top: -10px;
}
.active{
  background: black;
}

/* not important */
body{
  /*font-weight: bold;*/
}


/* add new step-bar-1 */

.step1-1{
  margin-top: -10px;
  float: left;
}
.step1-2{
  margin-top: -10px;
  margin-left: 34%;
}
.step1-3{
  margin-top: -10px;
  margin-left: 68%;
}

.step1-4{
  float: right;
  margin-top: -10px;
}

.stepText1-1{
  text-align: left;
  left: -15px;
}
.stepText1-2{ 
  text-align: left;
  left: 5%;
}
.stepText1-3{
  text-align: right;
  right: 5%;
}
.stepText1-4{
  text-align: right;
  right: -15px;
}

/* add new step-bar-2 */

.line-2{
  border-bottom: 1px solid black;
  padding-bottom: 30px;
  width: 87%;
  left: 8%;
  position: relative;
  margin: 0 auto ;
}
.stepText2-1{ 
  float: left;
  left:-3%;
}
.stepText2-2{ 
  left:-1%; 
}
.stepText2-3{ 
  left:2%; 
}
.stepText2-4{ 
  left:6%; 
}
.stepText2-5{ 
  left:9%; 
}
.stepText2-6{ 
  left:12%; 
}