.icon-element {
     display: block;
     width: 50px;
     height: 50px;
     line-height: 50px;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
     background-color: #e60000;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     position: relative;
     font-size: 25px;
     color: #fff
 }

 .icon-element-2 {
     display: inline-block;
     font-size: 50px;
     color: #0d233e;
     width: 80px;
     height: 80px;
     line-height: 77px;
     text-align: center;
     border: 2px solid #0d233e;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     -webkit-transition: all .3s;
     -moz-transition: all .3s;
     -ms-transition: all .3s;
     -o-transition: all .3s;
     transition: all .3s;
     position: relative
 }

 .step-bar-list {
     list-style: none !important;
 }

 @media (max-width:425px) {
     .icon-element-2 {
         width: 70px;
         height: 70px;
         line-height: 67px
     }
 }

 .icon-element-2:after {
     position: absolute;
     content: "";
     left: 0;
     bottom: 0;
     width: 20px;
     height: 20px;
     background-color: #fff;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%
 }

 .icon-element-2:hover {
     background-color: #e60000;
     color: #fff;
     border-color: #e60000
 }

 @media (max-width:375px) {
     .step-bar-list {
         display: block !important
     }
 }

 .step-bar-list .step-bar {
     position: relative;
     z-index: 1
 }

 .step-bar-list .step-bar::after, .step-bar-list .step-bar::before {
     display: block;
     position: absolute;
     background-color: #f5f7fc;
     height: 4px;
     content: '';
     width: 50%;
     left: 0;
     top: 25px;
     z-index: -1
 }

 .step-bar-list .step-bar::after {
     left: auto;
     right: 0
 }

 .step-bar-list .step-bar .icon-element {
     text-indent: 0;
     background-color: #fff;
     color: #0d233e;
     -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, .1);
     -moz-box-shadow: 0 0 40px rgba(82, 85, 90, .1);
     box-shadow: 0 0 40px rgba(82, 85, 90, .1);
     border: 2px solid rgba(128, 137, 150, .2)
 }

 .step-bar-list .step-bar.step-bar-active .icon-element {
     /* text-indent: -9999px; */
     position: relative;
     background-color: #e60000;
     border-color: #e60000;
     color: #fff;
 }

 .step-bar-list .step-bar.step-bar-active .icon-element::before {
     position: absolute;
     /* content: "\f00c"; */
     font-family: "Line Awesome Free";
     top: 0;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
     transform: translateX(-50%);
     color: #fff;
     font-size: 26px;
     text-indent: 0;
     font-weight: 900;
     z-index: 0;
 }

 .step-bar-list .step-bar.step-bar-active::after, .step-bar-list .step-bar.step-bar-active::before {
     background-color: #e60000
 }


 @media screen and (max-width: 767px) {
     .step-bar-list {
         padding-left: 0;
     }

     .step-bar-list .step-bar {
         font-size: 11px;
     }

     .icon-element {
         width: 30px;
         height: 30px;
         line-height: 30px;
         font-size: 14px;
     }

     .step-bar-list .step-bar::after, .step-bar-list .step-bar::before {
         top: 15px;
     }
 }