/******************************* Breadcrumb styles  **********************************/
#breadCrumbWrap {
    background: #fff;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,.15);
}

#homePage #breadCrumbWrap {
    margin-bottom: 0px;
}

.breadcrumb {
    background-color: #fff;
    margin: 0;
    padding: 10px 0;
    font-size: 85%;
    border-radius: 0;
}

    .breadcrumb li.active {
        background-color: #fff;
        color: #000;
        font-weight: 500;
    }

    .breadcrumb > li + li:before {
        color: #0069aa;
        content: ">";
    }

    .breadcrumb a {
        color: #999;
    }

        .breadcrumb a:hover {
            color: #0069aa;
            text-decoration: none;
        }

@media(max-width: 768px) {

    .breadcrumb {
        padding: 5px 0;
        font-size: 100%;
    }

        .breadcrumb li {
            display: none;
        }

            .breadcrumb li:nth-last-child(2) {
                display: inherit;
            }

            .breadcrumb li > a {
                font-size: 12px;
                vertical-align: text-bottom;
            }

                .breadcrumb li > a:before {
                    content: "<";
                    float: left;
                    font-size: 12px;
                    /*margin-top: -10px;*/
                    padding-top: 2px;
                    margin-left: 5px;
                    margin-right: 10px;
                    -webkit-transform: scale(1, 2);
                    -moz-transform: scale(1, 2);
                    -ms-transform: scale(1, 2);
                    -o-transform: scale(1, 2);
                    text-decoration: none;
                    color: rgba(0, 105, 170, 1);
                    font-family: monospace;
                }

                .breadcrumb li > a:after {
                    content: "Back to / ";
                    float: left;
                    font-size: 12px;
                    /*margin-top: 5px;*/
                    padding-right: 4px;
                    padding-top: 3px;
                    padding-left: 5px;
                    text-decoration: none;
                }

                    .breadcrumb li > a:after:hover {
                        text-decoration: none !important;
                    }

        .breadcrumb > li + li:before {
            content: none;
        }
}