$primary_color: #9b8282;

.trainify-framework-breadcrumbs-wrapper{
	background-color:#fdfdfd;
	margin-bottom:15px;
	.has-image{
		width:100%;
		height:200px;
		display:table;
		table-layout:fixed;
		background-size:cover;
		background-color:#f5f5f5;
		background-position:center center;
		.breadcrumbs{
			text-align:center;
			display:inline-block;
		}
		.trainify-framework-bdcb-container{
			padding:15px;
			display:table-cell;
			vertical-align:middle;
		}
	}

	.layout1{
		padding: 10px 0;
		color: #aaa;
		margin-top: -10px;
		font-family: inherit;

		.trainify-framework-bdcb-container{
			& > div {
				overflow: hidden;
			}
			.breadcrumb-trail {
				.trail-items {
					margin: 0;
					padding: 15px;
					&:after{
						content:"";
						clear:both;
						display:block;
					}
				}
				li {
					display: block;
					float: left;
					list-style: outside none none;
					padding-right: 10px;
					&::after {
						content: "\f105";
						font-family: "FontAwesome";
						margin-left: 10px;
						font-size: 11px;
						color: #aaa;
					}
					&:last-child {
						&::after {
							content: '';
						}
						span {
							color: #000;
						}
					}
				}
			}
		}
		a {

			color: #c3c3c3;
			&:hover {
				color: #000;
			}
		}
	}
}

.trainify-framework-breadcrumbs-wrapper{
	.layout2{
		.trail-browse {
			display: none;
		}
		ul {
			margin: 0;
			padding: 15px;
			list-style: none;
			&:after {
				content: "";
				display: block;
				clear: both;
			}
		}

		li {
			float: left;
			display: block;
			position: relative;
			margin: 0 8px;
			margin-top: 3px;

			& > a, & > span {
				transition: unset;
				color: #fff;
				padding: 0 10px;;
				line-height: 2em;
				display: block;
				background-color: $primary_color;
			}

			&:before, &:after {
				top: 0;
				right: -11px;
				content: "";
				height: 0px;
				width: 0px;
				display: block;
				position: absolute;
				border: 15px solid transparent;
				border-width: 15px 0 15px 11px;
				border-left-color: $primary_color;
				height: 100%;
			}

			&:after {
				right: -11px;
			}

			&:before {
				left: -11px;
				border-color: $primary_color;
				border-left-color: transparent;
			}

			&.trail-end,
			&:hover {
				& > a, & > span {
					background-color: #303440;
					transition: unset;
				}
				&:after {
					border-left-color: #303440;
				}
				&:before {
					border-color: #303440;
					border-left-color: transparent;
				}
			}
			&:first-of-type {
				&:before {
					display: none;
				}
			}
		}
	}
}

.trainify-framework-breadcrumbs-wrapper{
	ul.trail-items {
		li.trail-item {
			&:nth-of-type(1) {
				margin-left: 0;
			}
		}
	}
}
