.breadcrumb {
    /*centering*/
    display: block;
    /*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);*/
    overflow: hidden;
    border-radius: 5px;
    /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
    /*counter-reset: flag;*/
    /*display: flex;
    flex-direction: column-reverse;*/
    counter-reset: flag 9;
    position: relative;
}
   

    .breadcrumb a {
        text-decoration: none;
        outline: none;
        display: block;
        /*float: left;*/
        font-size: 12px;
        line-height: 24px;
        color: white;
        padding: 5px 10px 0 45px;
        background: #666;
        background: linear-gradient(#666, #333);
        position: relative;
        margin: 5px 7px 5px 0px;
        /*width: 49%;*/
        min-height: 80PX;
    }
        /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
        .breadcrumb a:first-child {
            padding-left: 46px;
            border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
        }

            .breadcrumb a:first-child:before {
                left: 14px;
            }

        .breadcrumb a:last-child {
            border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
            padding-right: 20px;
        }

        /*hover/active styles*/
        .breadcrumb a.active, .breadcrumb a:hover {
            background: #333;
            background: linear-gradient(#333, #000);
        }

            .breadcrumb a.active:after, .breadcrumb a:hover:after {
                background: #333;
                background: linear-gradient(135deg, #333, #000);
            }

        /*adding the arrows for the breadcrumbs using rotated pseudo elements*/
        .breadcrumb a:after {
            /*content: '';*/
            position: absolute;
            top: 0;
            right: -18px; 
            width: 36px;
            height: 36px;
        
            transform: scale(0.707) rotate(45deg);
           
            z-index: 1;
           
            background: #666;
            background: linear-gradient(135deg, #666, #333);
            /*stylish arrow design using box shadow*/
            /*box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);*/
            /*
    5px - for rounded arrows and 
    50px - to prevent hover glitches on the border created using shadows*/
            border-radius: 0 5px 0 50px;
        }
        /*we dont need an arrow after the last link*/
        .breadcrumb a:last-child:after {
            content: none;
        }
        /*we will use the :before element to show numbers*/
            /*.breadcrumb .ordernum:before {
                content: counter(flag);
                counter-increment: flag;
            }*/
    .breadcrumb span.numtxt {
        content: counter(flag) ;
            counter-increment: flag -1;
        /*some styles now*/
        border-radius: 100%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin: 8px 0;
        position: absolute;
        top: 4px;
        left: 18px;
        /*background: #444;*/
        background: #fff;
        font-weight: bold;
        padding: 0px 6px;
        z-index: 99;
    }


.flat a, .flat a:after {
    background: #bfefbc ;
    color: black;
    transition: all 0.5s;
}

    .flat a:before {
        background: white;
        box-shadow: 0 0 0 1px #ccc;
        color: black;
    }

    .flat a:hover, .flat a.active,
    .flat a:hover:after, .flat a.active:after {
        background: #94d099;
    }