﻿.breadcrumb {
    list-style: none;
    overflow: hidden;
    display: inline-flex;
    margin-left: 0;
    padding-left: 0;
    border-radius: 0.8rem;
    box-shadow: 0rem 0.3rem 0.8rem #d9d9d9;
}

    .breadcrumb li {
        float: left;
    }

        .breadcrumb li a {
            height: calc(2.8rem - 20px);
            color: #000;
            text-decoration: none;
            padding: 10px 2rem;
            padding-right: 1.2rem;
            background-color: #d9d9d9; /* fallback color */
            position: relative;
            display: block;
            float: left;
            cursor: auto;
            display: flex;
            justify-content: center;
            flex-direction: column;
            line-height: 1rem;
            user-select: none;
        }
        .breadcrumb li a:hover{
            opacity: 1; /* Override default <a> opacity change on hover */
        }

            .breadcrumb li a:after {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 1.4rem solid transparent; /* Go big on the size, and let overflow hide */
                border-bottom: 1.4rem solid transparent;
                border-left: 0.7rem solid transparent;
                position: absolute;
                top: 0;
                left: 100%;
                z-index: 2;
            }

            .breadcrumb li a:before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 1.4rem solid transparent; /* Go big on the size, and let overflow hide */
                border-bottom: 1.4rem solid transparent;
                border-left: 0.7rem solid transparent;
                position: absolute;
                top: 0;
                margin-left: 1px;
                left: 100%;
                z-index: 1;
            }

        .breadcrumb li:first-child a {
            padding-left: 1.5rem;
        }

        .breadcrumb li:last-child a {
            padding-right: 1.5rem;
        }

            .breadcrumb li:last-child a:after {
                border: 0;
            }

        .breadcrumb li.selected a {
            background-color: #de771c;
            color: #FFF;
            font-weight: 700;
        }

            .breadcrumb li.selected a:after {
                border-left-color: #de771c;
            }
