.breadcrumb {
	 display: inline-flex;
	 border-radius: 6px;
	 overflow: hidden;
   margin: 40px 0 10px;
	 padding: 0 20px;
	 width:auto;
	 min-width:50%;
	 text-align: center;
	 top: 50%;
	 height: 57px;
	 transform: translateY(-50%);
	 box-shadow: 0 1px 1px rgba(0, 0, 0, 1), 0 4px 14px rgba(0, 0, 0, 0.7);
	 z-index: 1;
	 background-color:lightgray;
	 font-size: 14px;
}
 .breadcrumb a {
	 position: relative;
	 display: flex;
	 flex-grow: 1;
	 text-decoration: none;
	 margin: auto;
	 height: 100%;
	 padding: 0;
	 color: #666;
}
 .breadcrumb a:first-child {
	 padding-left: 5.2px;

}
 .breadcrumb a:last-child {
   padding-right: .2px;
   background-color: lightgray;
}
 .breadcrumb a:after {
	 content: "";
	 position: absolute;
	 display: inline-block;
	 width: 57px;
	 height: 57px;
	 top: 0;
	 right: -28.1481481481px;
	 background-color: lightgray;
	 border-top-right-radius: 5px;
	 transform: scale(0.707) rotate(45deg);
	 box-shadow: 1px -1px rgba(0, 0, 0, 0.25);
	 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: lightskyblue;
	 color: white;
}
 .breadcrumb a.active:after, .breadcrumb a:hover:after {
	 background: lightskyblue;
	 color: white;
}
.breadcrumb .first{
	max-width:140px;
}
.breadcrumb .last{
	padding-left:40px;
}

 @media all and (max-width: 1000px) {
	 .breadcrumb {
		 font-size: 12px;
	}
}
 @media all and (max-width: 710px) {
	 .breadcrumb__desc {
		 display: none;
	}
	 .breadcrumb {
		 height: 38px;
		 width:100%;
		 padding:0;
	}

	 .breadcrumb a:after {
		 content: "";
		 width: 38px;
		 height: 38px;
		 right: -19px;
		 transform: scale(0.707) rotate(45deg);
	}

	.breadcrumb .last{
	padding-left:10px;
	margin: 0 20px;
}
}