.workflow{
    position:relative;
    display:flex;
    margin:4% 2%;
    border-radius:30px
}
.workflow__step{
    position:relative;
    height:10px;
    text-align:center;
    vertical-align:middle;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center
}
.workflow__step h5{
    position:relative;
    margin:0;
    text-overflow:ellipsis;
    white-space:nowrap;
    background-color:#FFF;
    padding:0 10px 2px;
    color:#000
}
.workflow__step h5::before{
    content:'';
    position:absolute;
    top:50%;
    left:-8px;
    border-right:6px solid #FFF;
    border-top:6px solid #FFF;
    border-bottom:6px solid #FFF;
    border-left:6px solid transparent;
    border-radius:0;
    z-index:12;
    pointer-events:none;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%)
}
.workflow__step h5::after{
    content:'';
    position:absolute;
    top:50%;
    right:-10px;
    border-right:6px solid transparent;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:6px solid #FFF;
    border-radius:0;
    z-index:12;
    pointer-events:none;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%)
}
@media (max-width: 600px){
    .workflow{
        display:block;
        padding:15px 0
    }
    .workflow__step{
        display:block;
        height:auto
    }
    .workflow__step h5{
        padding:10px;
        background-color:transparent;
        color:#FFF
    }
    .workflow__step h5::before{
        border-right:6px solid transparent;
        border-bottom:6px solid transparent;
        top:100%;
        left:50%;
        transform:translateX(-50%)
    }
    .workflow__step:last-child h5::before,.workflow__step h5::after{
        display:none
    }
}