.breadcrumb {
    background: transparent;
	margin: 15px -20px 20px -20px;
	
    border-top: none;
    border-bottom: none;
    
    font-size: 12px;
    padding: 5px 0;
    color: var(--breadcrumb-color);
    border-radius: 0;
    /* One line: when the web font swaps in, a wider trail scrolls instead of
       wrapping and pushing the page down. */
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar {
    display: none;
}
.breadcrumb a {
    color: var(--breadcrumb-color);
}
.breadcrumb a:hover {
    color: var(--breadcrumb-color-hover);
}
.breadcrumb i {
	font-size: 15px;
	/* Fixed box so the icon font arriving late does not resize or wrap the trail. */
	display: inline-block;
	width: 1.125em;
	height: 1em;
	line-height: 1;
	vertical-align: -0.125em;
	overflow: visible;
}
.breadcrumb > li {
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
    color:#ffffff;
}
.breadcrumb > li:not(:last-child):after {
	content: '';
	display: block;
	position: absolute;

	border-right: 1px solid var(--breadcrumb-color);
	border-bottom: 1px solid var(--breadcrumb-color);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
    
    top: 5px;
    right: -5px;
    width: 10px;
    height: 10px;

}