.cont{
  height: 100%;
  width: 90%;
/*  left: calc(50% - 180px);*/
  padding: 10px 0 0 0;
  margin: 0 auto;
/*  position: absolute;*/
}
@media only screen and (min-width: 319px) and (max-width: 480px) {
    .cont {
        display: none;
    }
}
// Tablet1
@media only screen and (min-width: 481px) and (max-width: 768px) {

}
//tablet landscape
@media only screen and (min-width: 769px) and (max-width: 1024px) {
}
//tablet landscape and laptop
@media only screen and (min-width: 1025px) and (max-width: 1280px) {

}
#progress-bar{
  appearance:none;
  width: 100%;
  color: #000;
  height: 5px;
  margin: 0 auto;
}
.dot {
  height: 12px;
  width: 12px;
  border-radius: 100%;
  border:3px solid #eee;
  background:#eee;
  position: absolute;
  left:5%;
  top: 16px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
p.percent{
  color: #444;
  text-align: center;
  
}

.second-pb{
  left: 33.33333333%;
}
.third-pb{
  left: 66.66666666%;
}
.fourth-pb{
  left: 95%;
}
#progress-bar::-webkit-progress-value{ /* Changes line color */
  background: #B01D03;
  transition: all 0.4s ease-in-out;
}
#progress-bar::-webkit-progress-bar{ /* Changes background color */
  background: #eee;
}
.border-change{
  background: #B01D03;
  border-color:#B01D03;
  transition: all 0.4s ease-in-out;
}