<style type="text/css">

$base: 20px;

* {margin: 0; padding: 0; box-sizing: border-box}

.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	min-width: 200px;
}

.breadcrumb {
	display: flex;
	border-radius: 2px;
	overflow: hidden;
	margin: auto;
	text-align: center;
	top: 50%;
	width: 100%;
	// max-width: 10px;
	height: $base * 1.5;
	transform: translateY(-50%);
	box-shadow: 0 1px 1px #2c3e50,
							0 2px 12px #2c3e50;
	z-index: 1;
	font-size: 13px;
}

	.breadcrumb a {
		position: relative;
		display: flex;
		flex-grow: 1;
		text-decoration: none;
		margin: auto;
		height: 100%;
		padding-left: $base;
		padding-right: 0;
	}

		.breadcrumb a:first-child {
			padding-left: $base / 2.5;
		}

		.breadcrumb a:last-child {
			padding-right: $base / 2.5;
		}

		.breadcrumb a:after {
			content: "";
			position: absolute;
			display: inline-block;
			width: $base * 1.5;
			height: $base * 1.5;
			top: 0;
			right: $base / 1.35 * -1;
			background-color: #ddd;
			border-top-right-radius: 5px;
			transform: scale(0.707) rotate(45deg);
			box-shadow: 1px -1px #2c3e50;
			z-index: 1;
		}

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

	.breadcrumb__inner {
		display: flex;
		flex-direction: column;
		margin: auto;
		z-index: 2;
	}

		.breadcrumb__title {
			font-weight: bold;
		}

.breadcrumb a.active, .breadcrumb a:hover{
	background: darken(orange, 20%);
	color: white;
}

.breadcrumb a.active:after, .breadcrumb a:hover:after {
	background: darken(orange, 20%);
	color: white;
}

// 1000px
///////////////////////
@media all and (max-width: 1000px) {
	.breadcrumb {
		font-size: 12px;
	}
}

// 710px
///////////////////////
@media all and (max-width: 710px) {
	.breadcrumb__desc {
		display: none;
	}
	
	.breadcrumb {
		height: $base;
	}
	
	.breadcrumb a {
		padding-left: $base / 1.5;
	}
	
	.breadcrumb a:after {
			content: "";
			width: $base * 1;
			height: $base * 1;
			right: $base / 2 * -1;
			transform: scale(0.707) rotate(45deg);
		}
}

</style>
