/*
*
* Breadcrumbs
*/
$breadcrumb-padding-vertical: 8px;
$breadcrumb-padding-horizontal: 15px;
$breadcrumb-bg: $gray-300;
$breadcrumb-color: $primary;
$breadcrumb-active-color: $body-color;
$breadcrumb-separator: "\f105";

.breadcrumbs-custom {
	position: relative;
	z-index: 1;
	padding: 35px 0 40px;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	
	&::before {
	  content: '';
		z-index: -1;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: .41;
		background-color: $darkblue-1;
		pointer-events: none;
	}
	
	&[data-opacity='37'] {
		&::before {
			opacity: .37;
		}
	}
	
	&[data-opacity='45'] {
		&::before {
			opacity: .45;
		}
	}
	
	&[data-opacity='48'] {
		&::before {
			opacity: .48;
		}
	}
}

.breadcrumbs-bg-1 {
	&::before {
		background: #275d94;
	}
}

.breadcrumbs-custom-path {
	@include spacingX(44px);
	font-family: $font-family-sec;
	letter-spacing: 0;
	text-align: center;
	
	a {
		display: inline;
		vertical-align: middle;
		&,
		&:active,
		&:focus {
			color: $breadcrumb-color;
		}
	}

	li {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		font-size: 12px;
		line-height: 1.7;

		&::after {
			content: '';
			font-family: 'FontAwesome';
			position: absolute;
			top: 52%;
			right: -5px;
			display: inline-block;
			width: 1px;
			height: 16px;
			font-size: inherit;
			font-style: normal;
			color: $gray-15;
			background-color: $gray-15;
			transform: translate3d(0, -50%, 0);
		}
	}

	li:last-child {
		&::after {
			display: none;
		}
	}

	a:hover,
	li.active {
		color: $breadcrumb-active-color;
	}

	li.active {
		top: 2px;
	}

	@include media-breakpoint-up(sm) {
	  li {
			font-size: 14px;
		}
	}

	@include media-breakpoint-up(md) {
	  text-align: left;
		li {
			font-size: 16px;
		}
	}

}

* + .breadcrumbs-custom-path {
	margin-top: 14px;
}

.breadcrumbs-custom-title {
	br {
		display: none;
	}
}

@include media-breakpoint-down(md) {
	.breadcrumbs-custom-title {
		font-size: 26px;
		br {
			display: block;
		}
	}
}

@include media-breakpoint-up(sm) {
	.breadcrumbs-custom {
		@include spacingX(60px);
	}

	* + .breadcrumbs-custom-path {
		margin-top: 18px;
	}
}

@include media-breakpoint-up(md) {
	.breadcrumbs-custom {
		padding: 70px 0 80px;
	}

	.breadcrumbs-custom-path {
		li {
			font-size: 16px;
		}
	}
}

@include media-breakpoint-up(xl) {
	.breadcrumbs-custom {
		padding: 80px 0 100px;
	}
}

@include media-breakpoint-up(xxl) {
	.breadcrumbs-custom {
		padding: 120px 0;
	}
}