/*

New options used in 2020 web upgrade for 
main MBMG website.

 */

/* Upgrade Breadcrumb */

.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: white;
    border-radius: .25rem;
}

    .breadcrumb a {
        text-decoration: none;
        outline: none;
        float: left;
        font-size: 16px;
        line-height: 36px;
        color: white;
        padding: 0 40px 0 60px;
        margin-bottom: 5px;
        background: #3f2a14;
        background: linear-gradient(#3f2a14, #3f2a14);
        position: relative;
    }

        .breadcrumb a:first-child {
            padding-left: 46px;
        }

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

        .breadcrumb a:last-child {
            padding-right: 20px;
        }

        .breadcrumb a.active, .breadcrumb a:hover {
            background: #3f2a14;
            background: linear-gradient(#3f2a14, #000);
        }

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

        .breadcrumb a:after {
            content: '';
            position: absolute;
            top: 0;
            right: -18px;
            width: 36px;
            height: 36px;
            transform: scale(0.707) rotate(45deg);
            z-index: 1;
            background: #3f2a14;
            background: linear-gradient(135deg, #3f2a14, #3f2a14);
            box-shadow: 3px -3px 0 2px rgba(255, 255, 255, 255);
        }

        .breadcrumb a:last-child:after {
            content: none;
        }

        .breadcrumb a:before {
            border-radius: 100%;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin: 8px 0;
            position: absolute;
            top: 0;
            left: 30px;
            background: white;
            background: linear-gradient(#444, #222);
            font-weight: bold;
        }

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

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

    .flat a:hover, .flat a.active,
    .flat a:hover:after, .flat a.active:after {
        background: #9EEB62;
    }


/*

New options used in 2020 web upgrade for 
main MBMG website.

 */

/* Upgrade Breadcrumb1 */


.breadcrumb1 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: white;
    border-radius: .25rem;
}

    .breadcrumb1 a {
        text-decoration: none;
        outline: none;
        float: left;
        font-size: 16px;
        line-height: 36px;
        color: white;
        padding: 0 40px 0 60px;
        margin-bottom: 5px;
        background: #967654;
        background: linear-gradient(#967654, #967654);
        position: relative;
    }

        .breadcrumb1 a:first-child {
            padding-left: 46px;
        }

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

        .breadcrumb1 a:last-child {
            /*padding-right: 20px; It was pushing the text towards left edge*/
            padding-right: 50px;
        }

        .breadcrumb1 a.active, .breadcrumb1 a:hover {
            background: #967654;
            background: linear-gradient(#967654, #000);
        }

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

            /*Changed few things below to get vertical flat separator*/
        .breadcrumb1 a:after {
            content: '';
            position: absolute;
            top: 3px;
            right: 1px;
            height: 34px;
            transform: scale(1) rotate(0deg);
            z-index: 1;
            background: #967654;
            background: linear-gradient(135deg, #967654, #967654);
            box-shadow: 3px -3px 0 2px rgba(255, 255, 255, 255);
        }

        .breadcrumb1 a:last-child:after {
            content: none;
        }

        .breadcrumb1 a:before {
            border-radius: 100%;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin: 8px 0;
            position: absolute;
            top: 0;
            left: 30px;
            background: white;
            background: linear-gradient(#444, #222);
            font-weight: bold;
        }

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

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

    .flat a:hover, .flat a.active,
    .flat a:hover:after, .flat a.active:after {
        background: #9EEB62;
    }