@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>
*/
.accordion {
  margin-bottom: 1.25em;
  border-top: 1px solid #b9b9b9;
}
.accordion .accordion-section {
  border-bottom: 1px solid #b9b9b9;
  overflow: auto;
}
.accordion .accordion-section-title {
  color: inherit;
  font-size: 1em;
  font-weight: 600;
  position: relative;
  margin: 0;
  padding: 1.25em 1.25em 1em 2.75em;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: background-color 0.125s ease-out;
  background-color: transparent;
}
.accordion .accordion-section-title.ui-state-active, .accordion .accordion-section-title:hover {
  color: inherit;
  background-color: #d4d4d4;
}
.accordion .ui-accordion-header-icon {
  margin: 0;
}
.accordion .ui-accordion-header-icon:before {
  color: inherit;
  position: absolute;
  top: 50%;
  left: 1em;
  height: 0.875em;
  transform: translateY(-50%) translateX(-50%);
  font-size: 1.5em;
  line-height: 1.3rem;
}
.accordion .ui-icon-minus:before {
  content: "–";
  margin-top: -1px;
}
.accordion .ui-icon-plus:before {
  content: "+";
}
.accordion .accordion-section-content {
  padding: 1.25em 2em;
  background-color: #ededed;
  display: block;
}
.accordion .accordion-section-content:after {
  content: "";
  display: table;
  clear: both;
}
.js .accordion .accordion-section-content {
  display: none;
}
.accordion .accordion-section-content p:last-child {
  margin-bottom: 0;
}
.accordion .accordion-section-content > :first-child {
  margin-top: 0;
}