#steps-container {
     display: flex;
     flex-direction: column;
     padding: 20px;
}

.step {
     margin: 0 auto;
     position: relative;
     padding: 40px 20px;
     width: 100%;
     text-align: center;
     border-top: 1px dashed gray;
}

.step-number {
     position: absolute;
     top: -25px;
     left: 50%;
     transform: translateX(-50%);
     display: block;
     background-color: #006838;
     color: white;
     text-align: center;
     border-radius: 35px;
     width: 50px;
     height: 50px;
     line-height: 50px;
     font-size: 25px;
     font-weight: bold;
}

.step-title {
     font-family: Futura PT, Helvetica, Arial, sans-serif;
     font-size: 32px;
     font-weight: bold;
     line-height: 1.1;
}

.steps-border-left {
     border-left: 1px dashed gray;
}

.steps-border-right {
     border-right: 1px dashed gray;
}

.step.step--ghost{
	visibility: hidden;
	pointer-events: none;
}

.mask-left {
     background-color: white;
     width: 50%;
     height: 1px;
     position: absolute;
     top: -1px;
     left: 0px;
}

.mask-right {
     background-color: white;
     width: 50%;
     height: 1px;
     position: absolute;
     top: -1px;
     right: 0px;
}

@media screen and (min-width: 540px) {
     #steps-container {
          flex-direction: row;
          flex-wrap: wrap;
     }
     .step {
          width: 50%;
     }
}

@media screen and (min-width: 880px) {
     .step {
          width: 33.33333%;
     }
}