.breadcrumb {
    list-style: none;
    overflow: hidden;
}
.breadcrumb li {
    float: left;
}
.breadcrumb li a {
     color: #bcbaba;
    text-decoration: none;
    padding: 15px 19px 19px 45px;
    background: #fff;
    position: relative;
    display: block;
    float: left;
 font-weight: 600;
 font-size: 14px;

}

.breadcrumb li a b {
 color: #e1e1e1;
 background-color: #b6b4b4;
 text-align: center;
 font-weight: 600;
 font-size: 16px;
 width: 26px;
 height: 26px;
 line-height: 26px;
 display: inline-block;
 border-radius: 50%;
 margin-right: 10px;
}

.breadcrumb li a::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid #00BFFF;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
}

.breadcrumb li a::before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}

.breadcrumb li.s1 a {
    padding-left: 10px;
}

.breadcrumb li.s1 a       { background:        #e1e1e1; }
.breadcrumb li.s1 a:after { border-left-color: #e1e1e1; }

.breadcrumb li.s2 a       { background:        #eae8e8; }
.breadcrumb li.s2 a:after { border-left-color: #eae8e8; }

.breadcrumb li.s3 a       { background:        #f0eeee; }
.breadcrumb li.s3 a:after { border-left-color: #f0eeee; }

.breadcrumb li.s4 a       { background:        #f6f5f5; }
.breadcrumb li.s4 a:after { border-left-color: #f6f5f5; }


.breadcrumb li.s5 a       { background:        #f9f9f9; margin-right: 30px;  }
.breadcrumb li.s5 a:after { border-left-color: #f9f9f9; }


.breadcrumb li.selected a       { background:  #ff0000; color: #fff; }
.breadcrumb li.selected a:after { border-left-color: #ff0000; }
.breadcrumb li.selected a b       { background-color: #fff; color:#ff0000;  }


/*
.breadcrumb li a:hover {
    background: hsla(34, 85%, 25%, 1);
}
.breadcrumb li a:hover:after {
    border-left-color: hsla(34, 85%, 25%, 1) !important;
}
*/

@media only screen and (max-width: 1000px) {
    section.checkout-steps {
     display: none;
    }

    section.mobile-checkout-steps {
        display: block;
        padding: 10px;
    }

    .mobile-breadcrumb {
        list-style: none;
        overflow: hidden;
        margin: 10px;
        padding: 0;
    }
    .mobile-breadcrumb li {
        float: left;
        padding: 0px;
        margin: 0px;
    }
    .mobile-breadcrumb li a {
        color: #fff;
        font-size: 13px;
        text-decoration: none;
        padding: 5px 0 5px 20px;
        background:#f6f5f5; /* fallback color */
        background: #f6f5f5;
        position: relative;
        display: block;
        float: left;
    }
    .mobile-breadcrumb li a:after {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;           /* Go big on the size, and let overflow hide */
        border-bottom: 15px solid transparent;
        border-left: 15px solid hsla(0, 1%, 73%, 1);
        position: absolute;
        top: 0;
        margin-top: 0px;
        left: 100%;
        z-index: 2;
    }
    .mobile-breadcrumb li a:before {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;           /* Go big on the size, and let overflow hide */
        border-bottom: 15px solid transparent;
        border-left: 15px solid white;
        position: absolute;
        top: 0;
        margin-top: -0px;
        margin-left: 1px;
        left: 100%;
        z-index: 1;
    }
    .mobile-breadcrumb li:first-child a {
        padding-left: 0px;
    }



    .mobile-breadcrumb li.s1 a       { background:        #e1e1e1; }
    .mobile-breadcrumb li.s1 a:after { border-left-color: #e1e1e1; }

    .mobile-breadcrumb li.s2 a       { background:         #eae8e8; }
    .mobile-breadcrumb li.s2 a:after { border-left-color:  #eae8e8; }
    .mobile-breadcrumb li.s3 a       { background:        #f0eeee; }
    .mobile-breadcrumb li.s3 a:after { border-left-color: #f0eeee; }

    .mobile-breadcrumb li.s4 a       { background:         #f6f5f5; }
    .mobile-breadcrumb li.s4 a:after { border-left-color:  #f6f5f5 }
    .mobile-breadcrumb li.s5 a       { background:        #f9f9f9; }
    .mobile-breadcrumb li.s5 a:after { border-left-color: #f9f9f9; }



    .mobile-breadcrumb li a:hover { background: #FF0000;}
    .mobile-breadcrumb li a:hover:after { border-left-color: #FF0000!important; }


.mobile-breadcrumb li.selected a       { background:  #ff0000; color: #fff; }
.mobile-breadcrumb li.selected a:after { border-left-color: #ff0000; }
.mobile-breadcrumb li.selected a b       { background-color: #fff; color:#ff0000;  }


    .mobile-breadcrumb li a b {
     color: #e1e1e1;
     background-color: #b6b4b4;
     text-align: center;
     font-weight: 600;
     font-size: 14px;
     width: 20px;
     height: 20px;
     line-height: 20px;
     display: inline-block;
     border-radius: 50%;
     margin-right: 0px;
     margin-left: 5px;
    }

    .mobile-breadcrumb li a span {
     display: none;
    }
    .mobile-breadcrumb li.selected a span {
     display: inline-block;
    }

    .mobile-breadcrumb li.selected a b {
     display: inline-block;
     margin-right: 5px;
     margin-left: 5px;
    }



}