/*http://bootsnipp.com/snippets/featured/responsive-breadcrumbs

	<div class="breadcrumbsContainer col-md-12">
		<h2>Breadcrumbs 1 (6 elements)</h2>
		<div id="bc1" class="btn-group btn-breadcrumb">
			<a href="#" class="btn btn-default"><i class="fa fa-home"></i></a>
			<div class="btn btn-default">...</div>
			<a href="#" class="btn btn-default"><div>label 1</div></a>
			<a href="#" class="btn btn-default"><div>label 2. A very very long one to truncate</div></a>
			<a href="#" class="btn btn-default"><div>label 3</div></a>
			<a href="#" class="btn btn-default"><div>label 4</div></a>
			<a href="#" class="btn btn-default"><div>label 5</div></a>
			<a href="#" class="btn btn-default"><div>label 6. A very very long one to truncate</div></a>
		</div>
	</div>
	
	<div class="breadcrumbsContainer col-md-12">
		<h2>Breadcrumbs 2 (8 elements)</h2>
		<div id="bc2" class="btn-group btn-breadcrumb">
			<a href="#" class="btn btn-default"><i class="fa fa-home"></i></a>
			<div class="btn btn-default">...</div>
			<a href="#" class="btn btn-default"><div>label 1. A very very long one to truncate</div></a>
			<a href="#" class="btn btn-default"><div>label 2</div></a>
			<a href="#" class="btn btn-default"><div>label 3</div></a>
			<a href="#" class="btn btn-default"><div>label 4</div></a>
			<a href="#" class="btn btn-default"><div>label 5. A very very long one to truncate</div></a>
			<a href="#" class="btn btn-default"><div>label 6</div></a>
			<a href="#" class="btn btn-default"><div>label 7</div></a>
			<a href="#" class="btn btn-default"><div>label 8</div></a>
		</div>
	</div>*/


.breadcrumbsContainer {
	margin-bottom: 10px;
}

.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

.btn-breadcrumb .btn {
  padding:6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #e6e6e6;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

/* The responsive part */

.btn-breadcrumb > * > div {
	/* With less: .text-overflow(); */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;    
}

.btn-breadcrumb > *:nth-child(n+2) {
  display:none;
}

/* === For phones =================================== */
@media (max-width: 767px) {
	.btn-breadcrumb > *:nth-last-child(-n+2) {
		display:block;
	} 
	.btn-breadcrumb > * div {
		max-width: 60px;
	}
}

/* === For tablets ================================== */
@media (min-width: 768px) and (max-width:991px) {
	.btn-breadcrumb > *:nth-last-child(-n+4) {
		display:block;
	} 
	.btn-breadcrumb > * div {
		max-width: 100px;
	}
}

/* === For desktops ================================== */
@media (min-width: 992px) {
	.btn-breadcrumb > *:nth-last-child(-n+6) {
		display:block;
	} 
	.btn-breadcrumb > * div {
		max-width: 170px;
	}
}