.flow.right-side .half-circle {
    width: 180px;
    height: calc(100% + 50px);
    min-height: 250px;
    background-color: transparent;
    border-top-right-radius: 200px;
    border-bottom-right-radius: 200px;
    border: 50px solid gray;
    border-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.flow.left-side .half-circle {
    width: 180px;
    height: calc(100% + 50px);
    min-height: 250px;
    background-color: transparent;
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
    border: 50px solid gray;
    border-right: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

.flow .iconer {
    width: 48px;
    height: 48px;
    background-color: white;
    border: 4px solid gray;
    border-radius: 50%;
    position: absolute;
}

.flow.first .iconer {
    top: 0;
    left: -23px;
    width: 50px;
    height: 50px;
}

.flow.else .iconer {
    bottom: -50px;
    right: -24px;
    z-index: 2;
}

.flow.else.right-side .iconer {
    bottom: -50px;
    left: -24px;
    z-index: 2;
}

.flow .triangle {
    width: 0;
    height: 0;
    z-index: 1;
}

.flow.right-side .triangle {
    border-top: 38px solid transparent;
    border-right: 37px solid grey;
    border-bottom: 38px solid transparent;
    position: absolute;
    bottom: -65px;
    left: -36px;
    filter: drop-shadow(-14px 1px 6px rgba(0, 0, 0, .2));
}

.flow.left-side .triangle {
    border-top: 38px solid transparent;
    border-left: 37px solid gray;
    border-bottom: 38px solid transparent;
    position: absolute;
    bottom: -65px;
    right: -36px;
    filter: drop-shadow(14px 1px 6px rgba(0, 0, 0, .2));
}

.item-circle {
    width: 20px;
    height: 20px;
    background-color: #16515e;
    border-radius: 50%;
}

.item-circle .item-inner-circle {
    width: 10px;
    height: 10px;
    background-color: #edf8fc;
    border-radius: 50%;
}

.flow.orange .half-circle,
.flow.orange .iconer {
    border-color: #f99c34;
}

.flow.right-side.orange .triangle {
    border-right-color: #f99c34;
}

.flow.left-side.orange .triangle {
    border-left-color: #f99c34;
}

.flow.orange h4 {
    color: #f99c34;
}

.flow.blue .half-circle,
.flow.blue .iconer {
    border-color: #4f9ba9;
}

.flow.right-side.blue .triangle {
    border-right-color: #4f9ba9;
}

.flow.left-side.blue .triangle {
    border-left-color: #4f9ba9;
}

.flow.blue h4 {
    color: #4f9ba9;
}

.flow.red .half-circle,
.flow.red .iconer {
    border-color: #f47032;
}

.flow.right-side.red .triangle {
    border-right-color: #f47032;
}

.flow.left-side.red .triangle {
    border-left-color: #f47032;
}

.flow.red h4 {
    color: #f47032;
}

.flow.navy .half-circle,
.flow.navy .iconer {
    border-color: #293f66;
}

.flow.right-side.navy .triangle {
    border-right-color: #293f66;
}

.flow.left-side.navy .triangle {
    border-left-color: #293f66;
}

.flow.navy h4 {
    color: #293f66;
}

@media (max-width: 576px) {
    .flow.right-side .half-circle {
        width: unset;
    }

    .half-circle {
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-radius: 0 !important;
    }

    .flow.first .iconer {
        left: 0;
        top: -25px;
    }
    .flow.else .iconer, .flow.else.right-side .iconer {
        left: 0;
        bottom: -23px;
    }

    .flow .triangle {
        border-left: 38px solid transparent !important;
        border-right: 38px solid transparent !important;
    }

    .flow.right-side .triangle, .flow.left-side .triangle {
        bottom: -74px;
        left: -14px;
        filter: drop-shadow(0px 12px 6px rgba(0, 0, 0, .2))
    }

    .flow.right-side.orange .triangle, .flow.left-side.orange .triangle {
        border-top: 37px solid #f99c34 !important;
    }

    .flow.right-side.red .triangle, .flow.left-side.red .triangle {
        border-top: 37px solid #f47032 !important;
    }

    .flow.right-side.blue .triangle, .flow.left-side.blue .triangle {
        border-top: 37px solid #4f9ba9 !important;
    }

    .flow.right-side.navy .triangle, .flow.left-side.navy .triangle {
        border-top: 37px solid #293f66 !important;
    }
}