@charset "UTF-8";
/*
	@doc
	<name>border</name>
	<desc>Adds a border to the specified side(s). (all if none specified)</desc>
	<example>
		.myClass{
			@include border(#888, bottom, 2px, solid);
		}
	</example>
	<output>
		.myClass{
			border-bottom: #888 2px solid;
		}
	</output>
*/
/*
	@doc
	<name>box-shadow</name>
	<desc>Adds a box-shadow to the element (Cross-Browser Compatibility).</desc>
	<example>
		.myClass{
			@include box-shadow(8px 8px 5px #777 false);
		}
	</example>
	<output>
		.myClass{
			-webkit-box-shadow: 8px 8px 4px #777;
			-moz-box-shadow: 8px 8px 4px #777;
			box-shadow: 8px 8px 4px #777;
		}
	</output>
*/
/*
	@doc
	<name>button-3D</name>
	<desc>Adds a cubic/3D effect to the element. Mostly for buttons, but could be used in other ways!</desc>
	<example>
		.myClass{
			@include button3D();
		}
	</example>
	<output>
		.myClass{

		}
	</output>
*/
/*
	@doc
	<name>filter</name>
	<desc>Adds a CSS filter (Cross-Browser Compatibility).</desc>
	<example>
		.myClass{
			@include(grayscale, 100%);
		}
	</example>
	<output>
		.myClass{
			-webkit-filter: grayscale(100%);
			-moz-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			filter: grayscale(100%);
		}
	</output>
*/
/*
	@doc
	<name>sprite</name>
	<desc>Styles a sprite..</desc>
	<example>
		.myButton{
			@include sprite(50px, 24px, 24px);
		}
	</example>
	<output>
		.myButton{
			background: url('../img/icons1.png') 0 50px no-repeat;
			height: 24px;
			width: 24px;
			display: inline-block;
		}
	</output>
*/
/*
	@doc
	<name>clearfix</name>
	<desc>Simple clearfix.</desc>
	<example>@include clearfix();</example>
	<output>
		.clearfix{
			content:"";
			display:table;
			clear:both;
		}
	</output>
*/
/*
	@doc
	<name>background-rollover</name>
	<desc>Changes the background if rolled over or hovered</desc>
	<example>
		#myDiv{
			@include background(example, rl, center top no-repeat gif);
		}
	</example>
	<output>
		#mySection{
			background: url(img/example-up.gif) center top no-repeat;
			&:hover {
				background: url(img/example-rl.gif) center top no-repeat;
			}
		}
	</output>
*/
/*
	@doc
	<name>background-slideEffect</name>
	<desc>Adds a slide effect to the background.</desc>
	<example>
		#myDiv{
			@include backgroundSlideEffect(example, 100px, .2s, #000);
		}
	</example>
	<output>
		#myDiv{
			position: relative;
			line-height: $distance;
			span{
				display: inline-block;
				position: relative;
				overflow: hidden;
				@include hideText;
				&:before, &:after{
					color: $color;
					position: absolute;
					top: 0;
					left:0;
					content: attr(data-content);
					@include background($image);
					@include transition(top, $speed);
				}
				&:after{
					top: $distance;
				}
			}
			&:hover{
				span{
					&:before{
						top: $distance * -1;
					}
					&:after{
						top: 0px;
					}
				}
			}
		}
	</output>
*/
/*
	@doc
	<name>display-show</name>
	<desc>Changes the display to show an element.</desc>
	<example>@include show(block);</example>
	<output>
		#myDiv{
			display:block;
		}
	</output>
*/
/*
	@doc
	<name>display-hide</name>
	<desc>Changes the display to hide an element.</desc>
	<example>@include hide()</example>
	<output>
		.myClass{
			display:none;
		}
	</output>
*/
/*
	@doc
	<name>noOverflow</name>
	<desc>Hides the overflow</desc>
	<example>@include noOverflow();</example>
	<output>
		#wrapper{
			overflow: hidden;
		}
	</output>
*/
/*
	@doc
	<name>z-index</name>
	<desc>Receives a section & optionnal additional value to set its index.</desc>
	<example>@include z-index(overall,55);</example>
	<output>
		.myTopElement{
			z-index:1155;
		}
	</output>
*/
/*
	@doc
	<name>stickyFooter</name>
	<desc>Makes the footer sticky.</desc>
	<example>@include stickyFooter(250px, 0px);</example>
	<output>{ ... };</output>
*/
/*
	@doc
	<name>contained-in mixins</name>
	<desc>Contained mixins</desc>
	<example>@include contained-in($selector);</example>
	<example>@include contained-in('.no-js');</example>
	<example>@include contained-in('#id', '.no-js', 'body');</example>
	<output>
		.no-js .class{
			@content;
		}
	</output>
*/
/*	@doc
	<name>prefixer</name>
	<desc>Adds browsers' different prefixes when needed. (doc. http://bourbon.io/docs/#prefixer)</desc>
	<example>@include prefixer(transform, rotate(5deg));</example>
	<output>
		.myElement{
			-webkit-transform: rotate(5deg);
			-moz-transform: rotate(5deg);
			-ms-transform: rotate(5deg);
			--transform: rotate(5deg);
			transform: rotate(5deg);
		}
	</output>
*/
.breadcrumb-wrapper {
  background: #ededed;
  padding: 12px;
}

.breadcrumb ol li {
  position: relative;
  display: inline-block;
  padding-right: 8px;
  padding-left: 8px;
}
.breadcrumb ol li + li:before {
  content: "›";
  position: absolute;
  left: -4px;
}
.breadcrumb a {
  font-size: 0.875em;
  color: #737373;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #4d4d4d;
  text-decoration: underline;
}