/**
 *  CONFIGURATION
 *  ==================
 *  Partials
 *  Variables - Theme
 *  Base - Theme
 *  Layout - Theme
 *  Components - Theme
 **/
/**
 *  PARTIALS
 *  Loads mixins and variables to the project
 *  Partials files should NEVER PRINT anything ever
 **/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES - THEME
 *  Global variables for your theme like colors
 *  Variables are going to get used in this file to override the default styles with stylish colors!
 **/
/**
 *  BASE - THEME
 *  Loads reinit, typography and utils
 *  Base files are that are always there in every project
 *  REINIT is not loaded for themes
 **/
/**
 *  TYPOGRAPHY - THEME
 *  ==================
 *  Partials
 *  Fonts
 *  Variables
 *  Global
 *  Headings
 *  Lists
 *  Links
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Text color
 *  Heading line styles
**/
/**
 *  GLOBAL
 **/
body {
  color: #3e3e3e; }

/**
 *  HEADINGS
**/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2E86C1; }

.styled-content h2,
.styled-content h3,
.styled-content h4,
.styled-content h5,
.styled-content h6 {
  color: #4d4d4d; }

.about-wrapper h2 {
  color: #2E86C1; }

h1:after {
  background-color: #d4d4d4; }

/**
 *  LISTS
 **/
.styled-content ul li:before {
  background-color: #2E86C1; }

/**
 *  LINKS
 **/
.styled-content a {
  color: #2E86C1;
  text-decoration: none; }
  .styled-content a:hover {
    color: #2E86C1;
    text-decoration: underline; }

/**
 *  LAYOUT - THEME
 *  Styles for the general look of a page
 *  Some layout files are PRESENT for every project like: header, footer, team, etc
 *  Some layout files are NOT PRESENT for every project like: blog
 **/
/**
 *  HEADER - THEME
 *  ==================
 *  Partials
 *  Variables
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Title custom breakpoint 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  UL border styles
 *  Title breakpoint
**/
/**
 *  BASE
 **/
.normes-ul-entete-ul {
  background-size: 100% 30px;
  z-index: 700 ; }
  .normes-ul-entete-ul .or {
    padding-top: 45px; }
  .normes-ul-entete-ul .rouge {
    border-top-width: 30px; }

header.normes-ul-entete-ul.not-ul {
  background: -webkit-gradient(linear, left top, right top, from(#2E86C1), color-stop(50%, #2E86C1), color-stop(50%, #2E86C1), to(#2E86C1)) no-repeat, #fff;
  background: -webkit-linear-gradient(left, #2E86C1, #2E86C1 50%, #2E86C1 50%, #2E86C1 100%) no-repeat, #fff;
  background: -o-linear-gradient(left, #2E86C1, #2E86C1 50%, #2E86C1 50%, #2E86C1 100%) no-repeat, #fff;
  background: linear-gradient(to right, #2E86C1, #2E86C1 50%, #2E86C1 50%, #2E86C1 100%) no-repeat, #fff;
  background-size: 100% 15px; }
  header.normes-ul-entete-ul.not-ul .rouge {
    padding-left: 0;
    border-top-color: #2E86C1;
    border-top-width: 15px;
    background-size: 100% 30px; }
  header.normes-ul-entete-ul.not-ul .or {
    padding-right: 0;
    margin-left: -2px;
    border-right-color: transparent; }
    header.normes-ul-entete-ul.not-ul .or .logo-ul {
      display: none; }

/**
 *  PHONE-LANDSCAPE
 **/
/**
 *  TABLET
 **/
/**
 *  TITLE CUSTOM BREAKPOINT
 *  Put navigation buttons under website title when specified
 **/
@media screen and (min-width: 390px) {
  .normes-ul-entete-ul .rouge {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; }
  .normes-ul-entete-ul .or {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .normes-ul-entete-ul .navigation {
    position: relative;
    top: -4px; } }

/**
 *  TABLET-LANDSCAPE
 **/
@media screen and (min-width: 980px) {
  .normes-ul-entete-ul .or {
    padding-top: 55px; } }

/**
 *  DESKTOP
 **/
/**
 *  CONTENT
 *  ==================
 *  Partials
 *  Variables
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Website title style
**/
/**
 *  BASE
 **/
.about-wrapper h1 {
  max-width: 650px;
  margin-right: auto;
  margin-left: auto;
  text-align: center; }
  .about-wrapper h1:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }

/**
 *  PHONE-LANDSCAPE
 **/
/**
 *  TABLET 
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/
/**
 *  COMPONENTS - THEME
 *  Styles for the specific look a part of a pages
 *  Ex.: The look of a block for news on HomePage and AllNewsPage but not on the actual page of the news
 **/
/**
 *  ACCORDION - THEME
 *  ==================
 *  Partials
 *  Variables
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *	Border
 *	Background-color
 *	Color
**/
/**
 *  Base
 **/
.accordion {
  border-top: 1px solid #737373; }
  .accordion .accordion-section {
    border-bottom: 1px solid #737373; }
  .accordion .accordion-section-title.ui-state-active, .accordion .accordion-section-title:hover {
    color: #ffffff;
    background-color: #2E86C1; }

/**
 *  PHONE-LANDSCAPE
 **/
/**
 *  TABLET
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/
/**
 *  ARTICLE - THEME
 *  ==================
 *  Partials
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Background-color
**/
/**
 *  Base
**/
.article-card-sans .card-date {
  background-color: #2E86C1; }

/**
 *  Phone-landscape
**/
/**
 *  TABLET
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/
/**
 *  BREADCRUMB -THEME
 *  ==================
 *  Partials
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Background-color
 *  Color
 *  Text-decoration
**/
/**
 *  Base
**/
.breadcrumb a {
  color: #4d4d4d; }
  .breadcrumb a:hover {
    color: #2E86C1;
    text-decoration: underline; }

/**
 *  Phone-landscape
**/
/**
 *  TABLET
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/
/**
 *  GOOGLE CSE - THEME
 *  ==================
 *  Partials
 *  Variables
 *  Base
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
**/
/**
 *  Base
**/
.main .gsc-control-cse .gsc-search-button-v2 {
  background-color: #2E86C1;
  border-color: #256b9a; }
  .main .gsc-control-cse .gsc-search-button-v2:hover {
    background-color: #2772a4;
    border-color: #1f5b83; }

.main .gsc-control-cse .gs-webResult.gs-result a.gs-title:link, .main .gsc-control-cse .gs-webResult.gs-result a.gs-title:link b, .main .gsc-control-cse .gs-imageResult a.gs-title:link, .main .gsc-control-cse .gs-imageResult a.gs-title:link b,
.main .gsc-control-cse .gs-webResult.gs-result a.gs-title:visited, .main .gsc-control-cse .gs-webResult.gs-result a.gs-title:visited b, .main .gsc-control-cse .gs-imageResult a.gs-title:visited, .main .gsc-control-cse .gs-imageResult a.gs-title:visited b {
  color: #272727; }
  .main .gsc-control-cse .gs-webResult.gs-result a.gs-title:link:hover, .main .gsc-control-cse .gs-webResult.gs-result a.gs-title:link b:hover, .main .gsc-control-cse .gs-imageResult a.gs-title:link:hover, .main .gsc-control-cse .gs-imageResult a.gs-title:link b:hover,
  .main .gsc-control-cse .gs-webResult.gs-result a.gs-title:visited:hover, .main .gsc-control-cse .gs-webResult.gs-result a.gs-title:visited b:hover, .main .gsc-control-cse .gs-imageResult a.gs-title:visited:hover, .main .gsc-control-cse .gs-imageResult a.gs-title:visited b:hover {
    color: #2c7fb7; }

/**
 *  PEOPLE - THEME
 *  ==================
 *  Partials
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Color
 *  Text-decoration
**/
/**
 *  Base
**/
.member-card a {
  color: #4d4d4d; }
  .member-card a:hover {
    color: #2E86C1;
    text-decoration: none; }

/**
 *  Phone-landscape
**/
/**
 *  TABLET
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/
/**
 *  SIDEBAR - THEME
 *  ==================
 *  Partials
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Background-color
 *  Color
**/
/**
 *  BASE
 **/
/**
 *  PHONE-LANDSCAPE
 **/
/**
 *  TABLET
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/
/**
 *  SLIDESHOW - THEME
 *  ==================
 *  Partials
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Background-color
 *  Color
 *  Others slideshow stuff
**/
/**
 *  BASE
 **/
/**
 *  BASE
 **/
.slide-info .link {
  background: #2E86C1; }
  .slide-info .link .arrow {
    background-color: #2E86C1;
    border: 1px solid; }
  .slide-info .link:before {
    width: 0;
    height: 0;
    border-bottom: 120px solid #2E86C1;
    border-left: 42px solid transparent; }
  .slide-info .link:hover {
    background: #2979ae; }
    .slide-info .link:hover .arrow {
      border: 1px solid #2979ae; }
      .slide-info .link:hover .arrow svg .path {
        fill: #2979ae; }
    .slide-info .link:hover:before {
      width: 0;
      height: 0;
      border-bottom: 120px solid #2979ae;
      border-left: 42px solid transparent; }

.slideshow-wrapper:hover .arrows button:hover {
  background-color: #2E86C1; }

.dots .slick-active button {
  background-color: #2E86C1; }

/**
 *  PHONE-LANDSCAPE
 **/
/**
 *  TABLET
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/
/**
 *   SOCIAL - THEME
 *  ==================
 *  Partials
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Background-color
**/
/**
 *  BASE
 **/
.social-list .social-item svg .background {
  fill: #2E86C1; }

.social-list .social-item:hover svg .background {
  fill: #2979ae; }

/**
 *  PHONE-LANDSCAPE
 **/
/**
 *  TABLET
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/
/**
 *  FORMS
 *  ==================
 *  Partials
 *  Base
 *  Phone-landscape
 *  Tablet 
 *  Tablet-landscape
 *  Desktop
 **/
/**
 *  PARTIALS
**/
/**
 *  CONFIGURATION
 *  ==================
 *  Import Mixins
 *  Import Variables
 **/
/**
 *  IMPORT MIXINS
 **/
/**
 *  MIXINS OR FUNCTIONS (@todo) 
 *  ==================
 *	Logical validation ( is-something() )(@todo) 
 *	Others to refactor or move (@todo) 
 **/
/**
 *  VARIABLES
 *  ==================
 *	False values
 *	Axis
 *	Directions
 *	Corners
 *	Border-style
 *	Imported Files
 **/
/**
 *  MIXINS OR FUNCTION (@todo)
 *  ==================
 *	Units(@todo)
 *	Colors(@todo)
 *	Conversion(@todo)
 *	Others
 **/
/**
 *  VARIABLES
 *  ==================
 *	Color editing
 *	Opposites status
 *	Opposites directions
 *	Opposites axis
 *	Opposites corners
 *	Associated corners
 **/
/**
 *  MIXINS
 *  ==================
 *	Lists (@todo)
 *	Others
 *	Reinit.css
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin padding
 *		@mixin padding-horizontal
 *		@mixin padding-vertical
 *		@mixin padding-top
 *		@mixin padding-right
 *		@mixin padding-bottom
 *		@mixin padding-left
 *	@mixin border
 *		@mixin border-horizontal
 *		@mixin border-vertical
 *		@mixin border-top
 *		@mixin border-right
 *		@mixin border-bottom
 *		@mixin border-left
 *	@mixin margin
 *		@mixin margin-horizontal
 *		@mixin margin-vertical
 *		@mixin margin-top
 *		@mixin margin-right
 *		@mixin margin-bottom
 *		@mixin margin-left
 *	@mixin outline
 *	@mixin border-radius
 *		@mixin border-radius-top
 *		@mixin border-radius-right
 *		@mixin border-radius-bottom
 *		@mixin border-radius-left
 *		@mixin border-radius-top-left
 *		@mixin border-radius-top-right
 *		@mixin border-radius-bottom-right
 *		@mixin border-radius-bottom-left
 *	@mixin box-sizing
**/
/**
 *	VARIABLES
 *	==================
 *	Padding
 *	Border
 *	Margin
 *	Outline
 *	Border-radius
 *	Box-sizing
**/
/**
 *	MIXINS
 *	================== 
 *	@mixin position
 *		@mixin absolute
 *		@mixin relative
 *		@mixin fixed
 *  @mixin absolute-center
 *	@mixin fixed-center
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin breakpoint
 *		@mixin bp
 *	@mixin breakpoint-xs
 *		@mixin bp-xs
 *	@mixin breakpoint-sm
 *		@mixin bp-sm
 *	@mixin breakpoint-md
 *		@mixin bp-md
 *	@mixin breakpoint-lg
 *		@mixin bp-lg
 *	@mixin breakpoint-xl
 *		@mixin bp-xl
**/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/**
 *	MIXINS
 *	==================
 *	@mixin dev-breakpoint
 *	@mixin dev-container
 *	@mixin dev-color
 *	@mixin dev-grey
**/
/**
 *	VARIABLES
 *	==================
 *	Color codes
 *	Breakpoint names
**/
/**
 *  MIXINS
 *  ==================
 *	@mixin shape-border
 *
 *	@mixin shape-rectangle
 *	@mixin shape-parallelogram
 *	@mixin shape-square
 *	@mixin shape-diamond
 *	@mixin shape-circle
 *	@mixin shape-oval
 *	@mixin shape-triangle
 *
 *	@mixin shape-arrow
 *		@mixin shape-arrow-position
 *	@mixin shape-tooltip
 **/
/**
 *	VARIABLES
 *	==================
 *	Shape default
 *	Triangle
 *	Tooltip
**/
/**
 *  MIXINS
 *  ==================
 *	Defaults Variables
 *	Mixins
 **/
/**
 *	VARIABLES
 *	==================
 *	N/A
**/
/*	@doc
	<name>reinit</name> 
	<desc>Reinit base css</desc>
	<example>@include reinit</example>
	<output>
	</output>
*/
/* @doc
	<name>animation</name>
	<desc>Animates the element using keyframes.</desc>
	<example>
		.myButton{
			@include animation($example, .8s, 3s);
		}
	</example>
	<output>
		.myButton{
			-webkit-animation: example .8s 3s;
			-moz-animation: example .8s 3s;
			-ms-animation: example .8s 3s;
			-o-animation: example .8s 3s;
			animation: example .8s 3s;
		}
	</output>
*/
/*
	@doc
	<name>keyframes</name>
	<desc>Creates an animation to then use with the animation mixin.</desc>
	<example>@include keyframes(example) { ... };
	</example>
	<output>@keyframes example { ... };</output>
*/
/*
	@doc
	<name>transition</name>
	<desc>Adds or removes a transition.</desc>
	<example>
		.myButton{
			@include transition(width, .5s, ease);
		}
	</example>
	<output>
		.myButton{
			-webkit-transition: width .5s ease;
			-moz-transition: width .5s ease; 
			...
		}
	</output>
*/
/*
	@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>
*/
/** 
 * Name:	font-face
 * Params:	$font-family(given name) & $font-filename(file)
 **/
/** 
 * Name:	hide-text
 * Params:	N/A
 **/
/*
	@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>
*/
/**
 *  IMPORT VARIABLES
 **/
/**
 *  VARIABLES
 *  Color
**/
/**
 *  BASE
 **/
.styled-form .form-submit {
  border: 1px solid #2E86C1;
  background-color: #4d98ca; }

/**
 *  PHONE-LANDSCAPE
 **/
/**
 *  TABLET
 **/
/**
 *  TABLET-LANDSCAPE
 **/
/**
 *  DESKTOP
 **/