.form-steps-wrap { padding: 2px 2px 1px 2px; margin: 0px; background-color: #ddd; border-bottom: 1px solid rgba(0,0,0,.125); }
.form-steps { padding: 10px; margin: 0px; }
.form-steps-list { width: 100%; display: flex; flex-wrap: wrap; padding: 0px; margin: 0px; background: #fff; }
.form-steps-list-item { display: flex; flex-basis: 100%; flex-grow: 1; justify-content: center; align-items: center; list-style-type: none; position: relative; margin: 0px; padding: 5px 20px 5px 40px; background-color: #FFF; font-size: 16px; text-align: center; color: #FFF; }
.form-steps-list-item.inactive {color: #000;}
.form-steps-list-item.active { background-color: #000; }
/* THE BELOW UNCOMMENTED WILL PUT A LEFT FACING TRIANGLE ON THE LAST ITEM FOR GOING BACKWARDS IF DESIRED */
/* .form-steps-list-item.active:last-child:before { border-top: 32px solid transparent; border-bottom: 32px solid transparent; border-right: 30px solid #0041b4; right: 100%; left: auto; } */
.form-steps-list-item strong { display: flex; justify-content: center; align-items: center; }
.form-steps-list-item .fa,
.form-steps-list-item .icon { font-size: 1.5rem; margin-right: 8px; }

.error{
	color:#F00;
}


@media (min-width: 768px) {
	.form-steps { padding: 0; }
  .form-steps-list-item { flex-basis: 0; }
  .form-steps-list-item.active:after { content: ""; display: block; width: 100px; height: 100%; position: absolute; top: 50%; left: 100%; z-index: 1; transform: translateY(-50%); -webkit-clip-path: polygon(35% 0, 35% 100%, 0% 50%); clip-path: polygon(0 0, 0% 100%, 35% 50%); background-color: #000; }

  .form-steps-list-item.inactive:before { content: ""; display: block; width: 100px; height: 100%; position: absolute; top: 50%; left: 100.5%; z-index: 1; transform: translateY(-50%); -webkit-clip-path: polygon(35% 0, 35% 100%, 0% 50%); clip-path: polygon(0 0, 0% 100%, 35% 50%); background-color:#000; }
  .form-steps-list-item.inactive:after { content: ""; display: block; width: 100px; height: 100%; position: absolute; top: 50%; left: 100%; z-index: 2; transform: translateY(-50%); -webkit-clip-path: polygon(35% 0, 35% 100%, 0% 50%); clip-path: polygon(0 0, 0% 100%, 35% 50%); background-color:#FFF; }

  .form-steps-list-item.active:last-child:after { display: none; }
  .form-steps-list-item.inactive:last-child:before { display: none; }
  .form-steps-list-item.inactive:last-child:after { display: none; }


}