/***
 * TYPOGRAPHY HELPER CLASSES
 * =========================
 *
 * @desc         Generic helper classes for styling content.
 * @author       quentind
 * @tested       IE7+
 * @requires     -
 */

/***
 * LIST
 */
.no-list {

	/* Reset list */
	margin:0;
	padding:0;
	list-style:none;
}

/***
 * TEXT ALIGN
 */
.t-r { text-align:right; }
.t-c { text-align:center; }
.t-j {
	text-align:justify;

	/* Better add lang attr on HTML tag to specify hyphenation dictionary (HTTP header is OK too). */
	/* OS language settings quirks (ie. "Australian English" as default language), see comments in: http://blog.fontdeck.com/post/9037028497/hyphens */
	-webkit-hyphens:auto;
	   -moz-hyphens:auto;
	        hyphens:auto;
}

/***
 * CAPSLOCK
 */
.caps {
    text-transform:uppercase;
}
/***
 * HELPER CLASSES
 * ==============
 *
 * @desc         Generic helper classes, in large part from H5BP
 * @author       quentind
 * @tested       IE7+
 * @requires     -
 */

/***
 * Sprite
 * - 
 * Add sprite background to an element (hidden)
 */
.s {
	background:url(../img/sprite.png) no-repeat 0 -9999px;
}

/***
 * Image replacement
 * -
 * Hide text from an element (usually in order to apply a background image)
 */
.ir {
	background-color:transparent;
	border:0;
	overflow:hidden;
	*text-indent:-9999px; /* IE 6/7 fallback */
}

.ir:before {
	content:"";
	display:block;
	width:0;
	height:100%;
}

/***
 * Hide from both screenreaders and browsers:h5bp.com/u
 */
.hidden {
	display:none !important;
	visibility:hidden;
}

/***
 * Hide only visually, but have it available for screenreaders:h5bp.com/v
 */
.visuallyhidden,
.off-screen {
	border:0;
	clip:rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
}

/***
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard:h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip:auto;
	height:auto;
	margin:0;
	overflow:visible;
	position:static;
	width:auto;
}

/***
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
	visibility:hidden;
}

/***
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 * `contenteditable` attribute is included anywhere else in the document.
 * Otherwise it causes space to appear at the top and bottom of elements
 * that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 * `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
	content:" "; /* 1 */
	display:table; /* 2 */
}

.cf:after {
	clear:both;
}

/***
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
	*zoom:1;
}

/* Image centering */
.img-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/***
 * Clears
 */
.clear   { clear:both; }
.clear-l { clear:left; }
.clear-r { clear:right; }

/***
 * Floats
 */
.f-right,
.right {
	float:right;
}

.right-i {
	float: right !important;
}

.f-left,
.left {
	float:left;
}

.left-i {
	float: left !important;
}

/***
 * MOUSE CURSOR
 */
.cur-info { cursor:help; }
.cur-wait { cursor:wait; }
.cur-drag { cursor:move; }
.cur-drag-h { cursor:w-resize; }
.cur-drag-v { cursor:n-resize; }
/* normalize.css v2.0.1  MIT License  git.io/normalize */

/* ==========================================================================
 HTML5 display definitions
 ========================================================================== */

/*
 * Corrects `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
 display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
 display: inline-block;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
 display: none;
 height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */

[hidden] {
 display: none;
}

/* ==========================================================================
 Base
 ========================================================================== */

/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 * user zoom.
 */

html {
 font-family: sans-serif; /* 1 */
 -webkit-text-size-adjust: 100%; /* 2 */
 -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Removes default margin.
 */

body {
 margin: 0;
}

/* ==========================================================================
 Links
 ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
 /*outline: thin dotted;*/
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
 outline: 0;
}

/* ==========================================================================
 Typography
 ========================================================================== */

/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */

h1 {
 font-size: 2em;
}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
 border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
 font-weight: bold;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
 font-style: italic;
}

/*
 * Addresses styling not present in IE 8/9.
 */

mark {
 background: #ff0;
 color: #000;
}


/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
 font-family: monospace, serif;
 font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;
}

/*
 * Sets consistent quote types.
 */

q {
 quotes: "201C" "201D" "2018" "2019";
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {
 font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;
}

sup {
 top: -0.5em;
}

sub {
 bottom: -0.25em;
}

/* ==========================================================================
 Embedded content
 ========================================================================== */

/*
 * Removes border when inside `a` element in IE 8/9.
 */

img {
 border: 0;
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
 overflow: hidden;
}

/* ==========================================================================
 Figures
 ========================================================================== */

/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */

figure {
 margin: 0;
}

/* ==========================================================================
 Forms
 ========================================================================== */

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
 border: 1px solid #c0c0c0;
 margin: 0 2px;
 padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
 border: 0; /* 1 */
 padding: 0; /* 2 */
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */

button,
input,
select,
textarea {
 font-family: inherit; /* 1 */
 font-size: 100%; /* 2 */
 margin: 0; /* 3 */
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
 line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 * and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 * `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
 -webkit-appearance: button; /* 2 */
 cursor: pointer; /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
 cursor: default;
}

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
 box-sizing: border-box; /* 1 */
 padding: 0; /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 * (include `-moz` to future-proof).
 */

input[type="search"] {
 -webkit-appearance: textfield; /* 1 */
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box; /* 2 */
 box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
 border: 0;
 padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
 overflow: auto; /* 1 */
 vertical-align: top; /* 2 */
}

/* ==========================================================================
 Tables
 ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
 border-collapse: collapse;
 border-spacing: 0;
}
/***
 * BLOCK OBJECT
 * ============
 *
 * @name         block
 * @desc         Nestable object with left-aligned media and right-aligned body
 * @author       quentind
 * @tested       IE7+
 * @requires     -
 * @note         Inspired by: https://github.com/stubbornella/oocss/blob/master/core/media/media.css
 */
.block {
	display:block;
}

	/* Clearfix the block */
	.block:before,
	.block:after {
		content:"";
		display:table;
	}

	.block:after {
		clear:both;
	}

	.block {
		*zoom:1;
	}

.block .block {
	margin:0;
}

	.block__body {
		display:table-cell;
		width:10000px;
		*width:auto;
		*zoom:1;
		margin:0; /* Resets margin: `body` could be a <p> or <li> */
	}

	.block__media {
		float:left;
		margin:0;  /* Resets margin: `media` could be a <p> or <li> */
		max-width:100%;
	}

	/* Right media modifier */ 
	.block__media--right {
		float:right;
	}

	.block__media img {
		display:block;
	}
/***
 * BUTTON OBJECT
 * =============
 *
 * @name         btn
 * @desc         Default button
 * @author       quentind
 * @tested       IE7+
 * @requires     -
 */
.btn {

	/* Position */
	margin:0;

	/* Box Model */
	display:inline-block;
	*display:inline;
	*zoom:1;
	padding:.5em 1.5em;
	
	/* Visual */
	border:none; /* <input>, <buttons> */
	background:none;
	-webkit-appearance:none;

	/* Text */
	font:inherit;
	line-height:1;

	/* Behaviour */
	cursor:pointer;
}

.btn,
.btn:hover {
	text-decoration:none;
}

/**
 * 100% width button
 */
.btn--100 {

	/* Box Model */
	display:block;
	padding-left:0;
	padding-right:0;
	width:100%;

	/* Text */
	text-align:center;
}

/**
 * Black
 */
.btn--black {
	background:none repeat scroll 0 0 #2C2C2C;
	border:1px solid #000;
	box-shadow:-1px 1px 0 0 #616161 inset;
	color:#fff;
}

/**
 * Link style
 */
.btn--link {
	border:none;
	background:none;
	color:#1575E1;
	text-decoration:underline;
}

.btn--link:hover {
	text-decoration:none;
}

/**
 * Register
 */
.btn--register {

	/* Box Model */
	padding:15px;
	display:block;

	/* Visual */
	border:1px solid #074a8b;
	background:#0969a5;
	background:-moz-linear-gradient(top, #0969a5 0%, #0064a1 2%, #064c8d 92%, #074b8c 98%, #155592 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#0969a5), color-stop(2%,#0064a1), color-stop(92%,#064c8d), color-stop(98%,#074b8c), color-stop(100%,#155592));
	background:-webkit-linear-gradient(top, #0969a5 0%,#0064a1 2%,#064c8d 92%,#074b8c 98%,#155592 100%);
	background:-o-linear-gradient(top, #0969a5 0%,#0064a1 2%,#064c8d 92%,#074b8c 98%,#155592 100%);
	background:-ms-linear-gradient(top, #0969a5 0%,#0064a1 2%,#064c8d 92%,#074b8c 98%,#155592 100%);
	background:linear-gradient(to bottom, #0969a5 0%,#0064a1 2%,#064c8d 92%,#074b8c 98%,#155592 100%);

	-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
	        box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);

	/* Text */
	text-align:center;
	color:#fff;
	font-size:20px;
	text-shadow:0 1px #053b75;
	/*font-family:"PF-Square-Medium", Helvetica, Arial, sans-serif;*/
	font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
}

.btn--register .register--icon {
	
	/* Box model */
	display: inline-block;
    width: 22px;
    height: 29px;
    margin-left: 10px;
    margin-top: -7px;
    vertical-align: top;

    /* Visual */
	background: url(../img/register.png) 0 0 no-repeat;
}
/***
 * GRID OBJECT
 * ===========
 *
 * @name         grid
 * @desc         Fluid grid layout with optional fixed gutters
 * @author       quentind
 * @tested       IE7+
 * @requires     
 */

/*
 * Clearfix the grid
 */
.grid:before,
.grid:after {
	content:" ";
	display:table;
}

.grid:after {
	clear:both;
}

.grid {
	*zoom:1;
}

	/*
	 * Columns
	 */
	.grid__col {
		float:left;
		word-wrap:break-word;

		-webkit-box-sizing:border-box;
		   -moz-box-sizing:border-box;
		        box-sizing:border-box;
	}

		/* Fix for opera shitty rounding of decimal in % sizes */
		.grid__col:last-child {
			/*overflow:hidden;*/
		}

		/* Fix for opera rounding  */
		.grid__col--must-overflow:last-child {
			float:none;
			display:table-cell;
			width:10000px;
			*width:auto;
			overflow:visible;
		}

		[class*='grid__col-']:first-child:last-child {
			display:block;
			width:auto;
		}
		
/*
 * Gutters
 * -
 * Extends grid
 * Note: IE8+ support and IE7 Support with: https://github.com/Schepp/box-sizing-polyfill
 */
.grid--gutter,
.grid--gutter .grid {
	margin-left:-20px; /* (gutter size) */
}

	.grid--gutter .grid__col {
		padding:0 0 20px 20px; /* 0 0 (gutter size) (gutter size) */
	}

	.grid--gutter .grid:last-child > .grid__col {
		padding-bottom:0;
	}

	/**
	 * Mobile
	 * -
	 * Reduce gutter size to 15px
	 */
	@media all and (max-width:599px) {
		.grid--gutter,.grid--gutter .grid { margin-left:-15px; }
		.grid--gutter .grid__col { padding:0 0 15px 15px; }
	}
/***
 * ICON
 * ====
 *
 * @name         i
 * @desc         Creates an inline icon 
 * @author       quentind
 * @tested       IE7+
 * @requires     -
 */
 /*
.i,
[class*="i--"] {

	/* Box Model *//*
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin-left: 3px;
	
	/* Text *//*
	line-height:1.1;
	vertical-align:middle;
	font-style:normal;

	/* IE7 *//*
	*font-family:'Fontello' !important;
	font-style:normal;
	font-weight:normal;
	line-height:1em; /* fix buttons height *//*
	text-decoration:none;
}*/

.i--link-ext {

	/* Position */
	vertical-align:text-bottom;

	/* Box Model */
	display:inline-block;
	*display:inline;
	*zoom:1;

	width:12px;
	height:12px;
	
	/* Visual */
	background:url(../img/ext.png) no-repeat 0 0;
}

.ico-plus {
	position: absolute;
	top: 0;
	right: 0;
	content: "+";

}

.ico-plus:after {
	content: "+";
	display: inline-block;
	width: 40px;
	height: 40px;

	line-height: 35px;
	font-size: 40px;
	text-align: center;
	background: #236682;
	font-family: "Lucida sans unicode", Verdana, serif;
	font-style: normal;
	color: #fff;
	font-weight: normal;
}

.active .ico-plus:after {
	content: "-";
}

/*
 * Icon list
 * -
 *//*
[class*="i--"]:before {

	/* Text *//*
	font-family:'Fontello';
	font-weight:normal;
	font-style:normal;
	font-variant:normal;
	display:inline-block;
	text-decoration:none;
}*/
/*
.i--plus:before          { content: '\2b'; } /* '+' *//*
.i--plus-big:before 	 { content: '\e800'; } /* '' *//*
.i--minus:before         { content: '\2d'; } /* '-' *//*
.i--email:before         { content: '\5d'; } /* ']' *//*
.i--home:before          { content: '\2302'; } /* '⌂' *//*
.i--play:before          { content: '\25b6'; } /* '▶' *//*
.i--cancel:before		 { content: '\2715'; } /* '✕' *//*
.i--left-open:before     { content: '\e75d'; } /* '' *//*
.i--right-open:before    { content: '\e75e'; } /* '' *//*
.i--up-open:before 		 { content: '\e75f'; } /* '' *//*
.i--down-open:before	 { content: '\e75c'; } /* '' *//*
.i--link-ext:before      { content: '\f08e'; } /* '' *//*
.i--phone:before         { content: '\f003'; } /* '' *//*
.i--search:before        { content: '\efff'; } /* '' *//*
.i--menu:before          { content: '\f0c9'; } /* '' */

.i--play:before {
	content:"\25B6";
	line-height:36px;
	font-size:20px !important;
	font-size/*\**/:25px\9 !important;
}

.i--play {
	*line-height:36px;
	*zoom: expression( this.innerHTML = '&#9658;');
	*font-size:20px !important;
}

/* Opera Mini */
/*
.js--is-opera-mini .i--plus:before          { content: '+'; }
.js--is-opera-mini .i--plus-big:before 	    { content: '+'; }
.js--is-opera-mini .i--minus:before         { content: '-'; }
.js--is-opera-mini .i--email:before         { content: ''; } /* Hidden *//*
.js--is-opera-mini .i--home:before          { content: ''; } /* Hidden *//*
.js--is-opera-mini .i--play:before          { content: '►'; }
.js--is-opera-mini .i--cancel:before		{ content: 'x'; }
.js--is-opera-mini .i--left-open:before     { content: '◄'; }
.js--is-opera-mini .i--right-open:before    { content: '►'; }
.js--is-opera-mini .i--up-open:before 		{ content: '↑'; }
.js--is-opera-mini .i--down-open:before	    { content: '↓'; }
.js--is-opera-mini .i--link-ext:before      { content: '[ext]'; }
.js--is-opera-mini .i--phone:before         { content: ''; } /* Hidden *//*
.js--is-opera-mini .i--search:before        { content: 'Search'; }
.js--is-opera-mini .i--menu:before          { content: 'Menu'; }
*/
/* IE7 */
/*
.i--plus               { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x2b;&nbsp;'); }
.i--plus-big 		   { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.i--minus              { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x2d;&nbsp;'); }
.i--email              { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x5d;&nbsp;'); }
.i--home               { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x2302;&nbsp;'); }
.i--play               { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x25b6;&nbsp;'); }
.i--cancel			   { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x2715;&nbsp;'); }
.i--left-open          { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe75d;&nbsp;'); }
.i--right-open         { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe75e;&nbsp;'); }
.i--up-open			   { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe75f;&nbsp;'); }
.i--down-open		   { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe75c;&nbsp;'); }
.i--link-ext           { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
.i--phone              { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf003;&nbsp;'); }
.i--search             { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xefff;&nbsp;'); }
.i--menu               { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); }
*/
/***
 * NAV OBJECT
 * ==========
 *
 * @name         nav
 * @desc         Horizontaly aligns items (nav, breadcrumbs, ...)
 * @author       quentind
 * @tested       IE7+
 * @requires     -
 */
.nav {

	/* Reset list, just in case */
	margin:0;
	list-style:none;
	padding:0;
}

/*
 * Clearfix the nav
 */
.nav:before,
.nav:after {
	content:" ";
	display:table;
}

.nav:after {
	clear:both;
}

.nav {
	*zoom:1;
}

	.nav__item,
	.nav > li {
		float:left;
	}

/*
 * With gutters
 */
.nav--gutter {
	margin-left:-20px; /* (gutter size) */
}

	.nav--gutter > li,
	.nav--gutter .nav__item {
		padding:0 0 20px 20px; /* 0 0 (gutter size) (gutter size) */
	}

	/**
	 * Mobile
	 * -
	 * Reduce gutter size to 15px
	 */
	@media all and (max-width:599px) {
		.nav--gutter { margin-left:-15px; }
		.nav--gutter > li, .nav--gutter .nav__item { padding:0 0 15px 15px; }
	}
/***
 * SIZE OBJECT
 * ===========
 *
 * @name         size
 * @desc         set the width of an element
 * @author       quentind
 * @tested       IE7+
 * @requires     
 */
[class*='size--'] {
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	        box-sizing:border-box;
}

.size--1-1 { width:100%; }

.size--1-2 { width:50%; }

.size--1-3 { width:33.3334%; }
.size--2-3 { width:66.6667%; }

.size--1-4 { width:25%; }
.size--3-4 { width:75%; }

.size--1-5 { width:20%; }
.size--2-5 { width:40%; }
.size--3-5 { width:60%; }
.size--4-5 { width:80%; }

.size--1-6 { width:16.6666%; }
.size--5-6 { width:83.3333%; }

.size--1-8 { width:12.5%; }
.size--3-8 { width:37.5%; }
.size--5-8 { width:62.5%; }
.size--7-8 { width:87.5%; }

.size--1-12  { width:8.3333%; }
.size--5-12  { width:41.6666%; }
.size--7-12  { width:58.3333%; }
.size--11-12 { width:91.6666%; }

@media all and (max-width:800px) {
	.size--1-1-tablet {
		width:100% !important;
	}

	.size--1-2-tablet {
		width:50% !important;
	}
}

@media all and (max-width:599px) {

	[class*='size--']:last-child {
		float:left;
		display:block;
	}

	.size--1-1-mobile {
		width:100% !important;
	}

	.size--1-2-mobile {
		width:50% !important;
	}
}
/***
 * LAYOUT
 * ======
 *
 * @desc         General layout rules
 * @author       mathias
 * @tested       IE7+
 * @requires     -
 */

html {
	overflow-y:scroll;
}

.banner {
	max-width:984px;
	margin:0 auto;
}

.page {
	max-width:984px;
	margin:0 auto; /* Centers page*/
	padding:0 20px;
}

.no-cookie-consent {
    border: 1px dotted;
    padding: 1px;
}


@media all and (max-width:599px) {
	.page {
		padding:0 15px;
	}
}
/***
 * SPACING
 * =======
 *
 * @desc         General spacing rules:
 *                - Modify/add rules according to the typography/layout of your project
 *                - Use to modify default spacing between objects/modules.
 *                - Do not use to handle spacing between node of the same object/module.
 *                - Use default spacing as much as possible.
 *               
 *                mt1 = margin, top,          spacing unit 1
 *                mb1 = margin, bottom,       spacing unit 1
 *                mv1 = margin, top & bot,    spacing unit 1
 *                ml1 = margin, left,         spacing unit 1
 *                mr1 = margin, right,        spacing unit 1
 *                mh1 = margin, left & right, spacing unit 1
 *               
 * @author       mathias
 * @tested       -
 * @requires     -
 */
.mt1, .mv1 { margin-top:10px !important; }
.mt2, .mv2 { margin-top:20px !important; }
.mt3, .mv3 { margin-top:30px !important; }
.mt4, .mv4 { margin-top:40px !important; }

.mb1, .mv1 { margin-bottom:10px !important; }
.mb2, .mv2 { margin-bottom:20px !important; }
.mb3, .mv3 { margin-bottom:30px !important; }
.mb4, .mv4 { margin-bottom:40px !important; }

.ml1, .mh1 { margin-left:10px !important; }
.ml2, .mh2 { margin-left:20px !important; }
.ml3, .mh3 { margin-left:30px !important; }
.ml4, .mh4 { margin-left:40px !important; }

.mr1, .mh1 { margin-right:10px !important; }
.mr2, .mh2 { margin-right:20px !important; }
.mr3, .mh3 { margin-right:30px !important; }
.mr4, .mh4 { margin-right:40px !important; }


/***
 * TYPOGRAPHY
 * ==========
 *
 * @desc         General typography rules
 * @author       quentind
 * @tested       IE7+
 * @requires     -
 */

body {
	font-family:Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 12px;
}

/***
 * HEADINGS
 */
h1, .h1 {

	/* Position */
	margin:0 0 .333em;

	/* Text */
	font-size:38px;
	/*font-family:'PF-Square-Medium', Helvetica, Arial, sans-serif;*/
	font-family: Calibri, Verdana, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight:normal;
	line-height:1em;
	color:#47474a;
}

h2, .h2 {
	
	/* Text */
	/*font-family:'PF-Square-Medium', Helvetica, Arial, sans-serif;*/
	font-family: Verdana, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:21px;
	font-weight:normal;
	color:#242424;
}

h3, .h3 {
	
	/* Text */
	/*font-family:'PF-Square-Medium', Helvetica, Arial, sans-serif;*/
	font-family: Verdana, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:19px;
	font-weight:normal;
	color:#47790d;
}

h4, .h4 {

	/* Text */
	font-family: Verdana, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 16px;
	font-weight: bold;
}

h5, .h5 {
	
	/* Text */
	font-size: 14px;
	font-weight: bold;
}

h6, .h6 {
	
	/* Text */
	font-size:;
	font-weight:;
}

h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	
	/* Position */
	margin:0.2em 0 .5em;

	/* Text */
	line-height:1em;
}

.uppercase {
	text-transform: uppercase;
}

/***
 * IMG
 */
img {
	vertical-align:top;
	max-width:100%;
    height:auto;
}

a > img,
figure > img {
	
}

a:link,
a:visited {
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

.alIco {
	display: inline-block;
}

/***
 * PARAGRAPH
 */
p {
	margin:0 0 14px;
	line-height:1.3;
}

p:last-child {
	margin:0;
}

.content > p,
.content > .intro > p,
.modal p,
.expand p {
	text-align:justify;
}

.content > p,
.modal p,
.expand p {
	line-height: 1.7em;
    margin: 0 0 20px;
}

.content > .intro > p {
	line-height: 1.5em;
    margin: 0 0 20px;
}

/* Decrease faq margin-bottom on paragraphs */
.expand .answer p {
	margin-bottom: 5px;
}

/*** 
 * LISTS
 */
ul, ol {
	margin-top:10px;
	margin-bottom:16px;
}

.content li {
	list-style: none;
	margin:6px 0;
	line-height:17px;
	background: url(../img/bullet.png) no-repeat left 6px;
	padding-left: 15px;
}

li > ul,
li > ol {
	margin-bottom:0;
}

ul {
	padding:0 0 0 24px;
	#padding-left:0;
}

/***
 * LINKS
 */
p > a,
li > a,
span.nolink {
	color:#156cc5;
}

/***
 * INTRO
 */
.intro {

	/* Position */
	margin:12px 0;

	/* Text */
	font-size:14px;
	color: #47474a;
}

.intro:first-child { margin-top:0; }
.intro:last-child { margin-bottom:0; }

/***
 * BLOCKQUOTE
 */
blockquote {

	/* Position */
	margin:1em 0;

	/* Padding */
	padding:8px 12px;

	/* Visual */
	border:1px solid #e0e0e0;
	background:#f9f9f9;
}

/***
 * FORMS
 */
input {
	-webkit-appearance:none;
	-webkit-border-radius:0;
	        border-radius:0;
}

.form {
	margin:20px 0 0;
}

.form__label {
	display:inline-block;
	width:120px;
	margin:0 5px 5px 0;
}

.form__select {
	border:1px solid #A7A7A7;
	font-family:Verdana,Geneva,Helvetica,Arial,sans-serif;
	font-size:12px;
	padding:4px 6px;
	max-width:252px;
}

.form__input,
.form__textarea {
	border:1px solid #A7A7A7;
	font-family:Verdana,Geneva,Helvetica,Arial,sans-serif;
	font-size:12px;
	padding:6px;
	resize:none;
	width:100%;
	max-width:240px;
}

.form__input.error, 
.form__textarea.error {
    border: 1px solid red;
}

/***
 * TABLES
 */
table {
	border:1px solid #d5d5d5;
	width:100%;
	table-layout:fixed;
}

table.breakpoint tr {
	cursor: pointer;
}

	th {

		/* Box Model */
		padding:16px 8px;

		/* Visual */
		background:#236682;
		color: #fff;

		/* Text */
		font-weight:bold;
	}

	th[data-class="expand"] {
		width:50%;
	}

	th, td {
		border:1px solid #d5d5d5;
	}

	td {
		padding:8px;
		background:#fff;
		*padding:8px 2px;
	}

	tr:nth-child(2n) td {
		background:#f8f8f8;
	}

	td ul {
		padding-left:8px;
	}



@media all and (max-width: 799px) {
	body {
		font-size: 14px;
	}
}


.box-faq {

	/* background-color: #b3dddd;

	background-image: linear-gradient(45deg, 
		#a7cfcf 25%, #c2dede 25%, 
		#c2dede 50%, #a7cfcf 50%, 
		#a7cfcf 75%, #c2dede 75%, #c2dede);
	background-size: 5px 5px; */


	/*background: url(../img/faq-bg.png) repeat 0 0 #a7cfcf;*/
	/* box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff; */

	padding: 5px 10px;
    border: 1px solid #d4d4d4;
	box-shadow: 1px 1px 1px #eee;
}

	.box-faq .box__title {
		/* text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */
		color: #000;
		margin-bottom: 18px;
	}

	.box-faq a {
		color: #0056d5;
	}

	/* Reset bullets */
	.box-faq ul li {
		background: none;
		padding: 0;
	}
/***
 * BOX
 * ===
 *
 * @desc         Box system (cta, news, events, ...)
 * @author       quentind
 * @tested       
 * @requires     -
 */
.box {

	/* Position */
	position:relative;

	/* Box Model */
	/*padding:14px;*/
	overflow:hidden;
}

.box li {
	margin: 0 0 7px;
	line-height: 1.4em;
}

/*
 * Color modifiers
 */
.box--yellow { background:#dfa20e; }
.box--red { background:#c81010; }
.box--teal { background:#09a5a5; }
.box--black { background:#050505; }
.box--blue { background:#236682; }
.box--grey { background:#ddd; }
.box--light-grey { background:#f7f8f8; }


	/*
	 * Title
	 */
	.box__title {

		/* Position */
		margin:0 0 5px;

		/* Text */
		color:#222;
		font-weight:bold;
		font-size:28px;
		/*font-family:"PF-Square-Medium", Helvetica, Arial, sans-serif;*/
		font-family:Calibri,"Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
		line-height:1;
	}

	/*
	 * Number decoration
	 */
	.box__deco {

		/* Position */
		position:absolute;
		right:0;
		top:-0.18em;
		line-height:1;
		z-index:1;

		/* Box Model */
		height:auto;
		width:0.375em;
		overflow:hidden;

		/* Visual */
		opacity:0.4;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE 8 */
		    filter:alpha(opacity=40); /* IE 5-7 */
		zoom:1;

		/* Text */
		color:#fff;
		font-size:187px;
		font-family:Verdana, Geneva, Helvetica, Arial, sans-serif;
	}

	/* Title size modifiers */
	.box__title--icons {

		/* Position */
		/*margin:-2px 0 6px;*/

		/* Text */
		/*color:#e7e7e7;
		font-size:22px;*/

		background:url(../img/contact.png) no-repeat center center;
		width:53px;
		height:22px;
		display:inline-block;
		*display:inline;
		*zoom:1;
		margin:0 0 -6px;
		vertical-align:top;
	}

	.js--is-opera-mini .box__title--icons {
		display:none;
	}

	.box__sub-title {

		/* Position */
		margin:0 0 10px;

		/* Text */
		color:#ccc;
		font-size:14px;
		font-weight:bold;
		font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	}

	/* Title color modifiers */
	.box__title--grey		{ color:#777069; }
	.box__title--black		{ color:#000; }
	.box__title--darkgreen	{ color:#444827; }
	.box__title--blue		{ color: #236682; }
	.box__title--white		{ color: #fff; }
	.box__title--orange		{ color: #d38210; }

	/*
	 * List of links
	 */
	.box__links {

		/* Position */
		position:relative;
		z-index:2;

		/* Reset list */
		margin:0;
		padding:0 !important;
		list-style:none;

		/* Text */
		font-size:18px;
		color:#fff;
	}

	.box__links--small {

		/* Text */
		font-size:11px;
	}

		.box__links li {

			/* Position */
			margin:0 0 8px;
		}

		.box__links li:last-child {
			margin:0;
		}

		.box__links a {

			/* Box Model */
			display:inline;
			
			/* Text */
			color:#fff;
			line-height:1.2;
			text-decoration:none;
			text-shadow:-1px 1px rgba(0,0,0,.4);
			*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = this.innerHTML + '&nbsp;›' );
		}

		.box__links a:hover span {
			text-decoration:underline;
		}

		.box__links a:after {
			content:"›";
			margin:0 0 0 4px;
			vertical-align:top;
			position:relative;
			top:1px;
			text-shadow:none;
			text-decoration:none;
		}

	/*
	 * List of entries
	 */
	.box__entries {

		/* Reset list */
		list-style:none;
		padding:0;
		margin:0;

		/* Text */
		font-size:12px;
	}

		.box__entries li {
			margin:0 0 14px;
			*vertical-align:top;
		}

		.box__entries--has-bullets {
			*list-style:disc;
			*margin-left:22px;
		}

		.box__entries--has-bullets li {
			padding-left:16px;
			*padding-left:0;
			position:relative;
		}

		.box__entries--has-bullets li:before {
			
			/* Position */
			position:absolute;
			top:-3px;
			left:2px;

			/* Box Model */
			content:"›";

			/* Icon */
			font-size:16px;
			color:#2d2d2e;
		}

		.box__entries a {

			/* Box Model */
			/*display:block;*/
			/*display:inline-block;*/
			*display:inline;
			

			/* Text */
			color:#1575e1;
			text-decoration:none;

		}

		.box__entries a:hover {
			text-decoration:underline;
		}

			.box__entries a [class^="i--"] {
				color:#5e5d5d;
			}

		.box__entries .meta {

			/* Box Model */
			/*display: block;*/
			display:inline-block;
			*display:inline;
			*zoom:1;

			/* Position */
			margin:0 5px 0 0;

			/* Text */
			color:#6c6c6c;
			text-decoration:none;
		}

		.box--block-meta .meta {
			display:inline-block;
			width:100%;
		}

		.box--block-meta a:hover .meta {
			text-decoration:none;
		}

		@media all and (max-width:599px) {
			.box {
				/*padding:11px;*/
			}

			.box__deco {
				font-size:90px;
			}

			.box__title {
				font-size:21px;
			}

			.box__links {
				font-size:12px;
			}

			.box__links--small {
				font-size:10px;
			}
		}

	/*
	 * More link
	 */
	.box__more {

		/* Position */
		position:absolute;
		right:0;
		bottom:0;

		/* Box Model */
		float:right;
		padding:4px 24px;

		/* Visual */
		background:#d2d2d2;

		/* Text */
		font-size:13px;
		line-height:16px;
		color:#222;
		text-decoration:none;
	}

	.box__more:hover {
		text-decoration:underline;
	}

	.box--has-more-link {
		padding-bottom:40px;
	}


.contact-hp {

	border-bottom: 1px solid #d2d2d2;
	padding-bottom: 20px;
}


@media all and (min-width:600px) {

	

}
/***
 * COUNTRY-LIST
 * =========
 *
 * @name         country-list
 * @desc         Convert a select to an list
 * @author       Mathias Leonard
 * @tested       Firefox, Chrome, IE7+
 * @requires     jquery.selectbox-0.2.js
 */

.sb-holder {
	border: solid 1px #999999;
	height: 25px;
	margin-bottom: 10px;
	position: relative;
	width: 200px;
	color: #222;
}

.sb-selector {
	color: #222;
	display: block;
	line-height: 25px;
	text-indent: 10px;
	width: 100%;
}

.sb-selector:link, 
.sb-selector:visited, 
.sb-selector:hover {
	outline: none;
	text-decoration: none;
}
.sb-toggle {
	display: block;
	height: 25px;
	outline: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 25px;
	overflow: hidden;

	
}
.sb-toggle .sb-toggle__icon {
	background: #999999;
    color: #fff;
    position: absolute;
    right: 0;
    font-size: 15px;
    /*padding: 5px;*/

    height: 25px;
    width: 25px;
    top:0;
    background:url(../img/down.png) no-repeat center center #999;
}

.sb-options {
	background-color: #fff;
	border: solid 1px #999999;
	list-style: none;
	left: -1px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 25px;
	width: 200px;
	z-index: 1;
	overflow-y: auto;
}
.sb-options li {
	padding: 0 7px;
	margin: 0;
	background: none;
}
.sb-options a {
	display: block;
	outline: none;
	padding: 7px 0 7px 3px;
}
.sb-options a:link, .sb-options a:visited {
	color: #222;
	text-decoration: none;
}
.sb-options a:hover,
.sb-options a:focus,
.sb-options a.sbFocus {
	color: #222;
}
.sb-options li.last a {
	border-bottom: none;
}
.sb-options .sb-disabled {
	color: #999;
	display: block;
	padding: 7px 0 7px 3px;
}
/***
 * DONT MISS
 * =========
 *
 * @name         dont-miss
 * @desc         Highlight content home page
 * @author       quentind
 * @tested       
 * @requires     -
 */
@media all and (min-width:600px) {
	.dont-miss--has-picture {
		padding-bottom:125px;
	}
}

	.dont-miss__title {

		/* Text */
		font-size:36px;
		line-height:30px;

		/* Position */
		margin:0 0 5px;
	}


	.dont-miss__video {
		position:absolute;
		left:0;
		right:0;
		bottom:0; 
	}

		.dont-miss__video .play {
			position:absolute;
			top:50%;
			left:50%;
			color:#fff;

			margin:-20px 0 0 -20px;

			width:39px;
			height:39px;
			line-height:40px;
			text-align:center;
			font-size:14px;

			background:rgba(255,255,255,0.3);

			-webkit-border-radius:100%;
			        border-radius:100%;
		}

	.dont-miss img {
		min-width:100%;
		max-width:100%; /* max + min instead of width, to fix IE8 bug */
	}

	@media all and (max-width:599px) {

		.dont-miss__video {
			position:relative;
			display:inline-block;
		}

		
	}


.eco-app {
	position: relative;
	display: block;
	padding: 15px;
	padding-right: 50px;
	margin-bottom: 0;
	border: 1px solid #e4e5e6;
}

.eco-app .box__title {
	font-size: 18px;
}

.eco-app .box__logo {
	background: url(../img/eco-app.png) no-repeat 0 0 ;
	display: block;
	width: 78px;
	height: 51px;
	position: absolute;
	right: 0;
	bottom: 0;
	margin-top: -25px;

}

.eco-app:hover,
.eco-app:focus {
	text-decoration: none;
}

@media all and (max-width: 599px) {

	.eco-app {
		padding-right: 70px;
	}
	
}
/***
 * Europa Links
 * =========
 *
 * @name         Europa Links
 * @desc         Creates a popup for the Europa Links
 * @author       Mathias Leonard
 * @tested       Firefox, Chrome, IE7+
 * @requires     jquery.europalinks.js
 */

.js .links-popup {
    display: none;
    position: absolute;
    z-index:99;
}
.links-ico-langs {
    display: none;
}
.js .links-ico-langs {
    cursor: pointer;
    display: inline-block;
}
.js .links-popup {
    background: none repeat scroll 0 0 #ddd;
    border: 1px solid;
    line-height: 13px;
    max-width: 150px;
    padding: 3px 4px;
}
.js .links-popup a {
    display: inline-block;
    margin: 3px 0;
}
.js .links-popup img {
    margin: 0;
}

/***
 * Expand
 * =========
 *
 * @name         Expand
 * @desc         
 * @author       Mathias Leonard
 * @tested       
 * @requires     -
 */


.expand .dl-all {
	position: relative;
	display: block;
	padding: 0 35px 0 25px;
	height: 20px;

	border: 1px solid #dcdbdb;
	color: #4e4e4e;
	text-decoration: none;
	line-height: 20px;
}

	.expand .dl-all .ico-dl {
		background: url(../img/ico-dl.png) no-repeat 0 0;
		display: inline-block;
		width: 10px;
		height: 12px;
		position: absolute;
		top: 50%;
		margin-top: -6px;
		left: 5px;
	}

	.expand .dl-all .ico-pdf {
		background: url(../img/ico-pdf.png) no-repeat 0 0;
		display: inline-block;
		width: 25px;
		height: 20px;
		position: absolute;
		top: 50%;
		margin-top: -10px;
		right: 0px;
	}


.expand .expand-button,
.expand .ico-plus {
	display: none;
}

.js .expand .expand-button {
	display: block;
	min-width: 150px;
	color: #4e4e4e;
}
.js .expand .ico-plus {
	display: inline-block;
}

	.expand .expand-button .ico-plus:after {
		background: #123c4e;
	}
	
	*+html .expand .expand-button .ico-plus {
		background: url("../img/more-bg.png") no-repeat 8px center #123c4e;
		display: block;
		width: 40px;
		height: 40px;
		text-align: center;
		cursor: pointer;
	}
	*+html .expand .expand-button.active .ico-plus {
		background: url("../img/less-bg.png") no-repeat 8px center #123c4e;
	}

	.expand .expand-button .text-collapse {
		display: none;
	}

	.expand .expand-button.active .text-collapse {
		display: block;
	}

	.expand .expand-button.active .text-expand {
		display: none;
	}


.expand .expand-title,
.expand .expand-button {
	position: relative;
	padding: 12px 35px 12px 10px;

	border: 1px solid #c7c6c7;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

.expand .expand-title {
	display: block;
	clear: both;
	overflow: hidden;
	cursor: pointer;

	color: #63a318;
}

*+html .expand .expand-title .ico-plus {
	background: url("../img/more-bg.png") no-repeat 8px center #236682;
	display: block;
	width: 40px;
	height: 40px;
	text-align: center;
}

*+html .expand .expand-title.active .ico-plus {
	background: url("../img/less-bg.png") no-repeat 8px center #236682;
}



.expand .question {
	margin: 0 0 5px;
}

.expand .answer {
	margin-bottom: 15px;
}


@media all and (max-width: 599px) {

	.expand .dl-all {
		float: none;
	}

	.expand .expand-button {
		max-width: 50%;
	}

}

.footable .ico-expand {
	display: none;
}

.footable.breakpoint td {
	line-height: 25px;
}

.footable.breakpoint .ico-expand {
	float: left;
	width: 24px;
	height: 24px;
	display: block;
	background: url(../img/footable-plus.png) no-repeat scroll 0 0;
}

.footable.breakpoint .footable-detail-show .ico-expand {
	background: url(../img/footable-less.png) no-repeat 0 0;
}

.footable.breakpoint td.expand {

    text-indent: 10px;
}
/***
 * FOOTER
 * ======
 *
 * @desc         footer
 * @author       quentind
 * @tested       
 * @requires     grid
 */
.footer {

	/* Box Model */
	padding:20px 10px;

	/* Visual */
	background:#efeded;

	/* Text */
	font-size:11px;
}

	/* Columns */
	.footer > li {
		
		/* Box Model */
		padding:0 10px;
		height:100%;
	}

	.footer li:first-child {
		border-left:0;
	}

	.footer .last {
		border-right:0;
		
	}

	/* Section */
	.footer__section {

		/* Text */
		font-size:14px;
		line-height:1.1;
		color:#787878;
	}

	.footer ul li {
		margin:0 0 10px;
	}

	.footer a {

		/* Box Model */
		padding:1px 0;
		
		/* Text */
		color:#0e0e0e;
		line-height:16px;
		text-decoration: none;
	}

	.footer a:hover {
		border-bottom: 1px solid #a1a1a1;
	}

	.footer .active {
		
		/* Position */
		padding-left:3px;
		padding-right:3px;
		margin:0 0 0 -3px;

		/* Box Model */
		display:inline-block;

		/* Visual */
		border-bottom:1px solid #a1a1a1;
	}

	/***
	 * Tablet
	 */
	@media all and (min-width:600px) and (max-width:767px) {
		.footer > li {
			width:33%;
			margin:0 0 20px;
			border:0;
			height:auto !important;
		}

		.footer > li:nth-child(3n) {
			border-right:0;
		}
		
		.footer > li:nth-child(3n+1) {
			clear:left;
		}
	}

	/***
	 * Mobile
	 */
	@media all and (max-width:599px) {

		.footer > li {
			border:0;
			border-bottom:1px solid #dbdbdb;
			border-top:1px solid #fff;
		}

		.footer > li:first-child { border-top:0; }
		.footer > li:last-child { border-bottom:0; }

		.footer ul {
			padding:0 0 4px;
		}

		.footer > li:last-child ul {
			padding:0;
		}

		.footer a {
			font-size:11px;
		}

		.footer__section {
			margin:12px 0 8px;
		}

		.footer li:first-child .footer__section {
			margin-top:0;
		}

	}
/***
 * FOOTLINE
 * ========
 *
 * @name         footline
 * @desc         line of text beneath the footer
 * @author       quentind
 * @tested       
 * @requires     -
 */
.footline {

	/* Position */
	padding:20px 0 40px;

	/* Text */
	font-size:12px;
	line-height:1;
	color:#113355;
}

.footline a {
	color:#027ac6;
}

.footline__pipe {
	margin:0 6px;
}



.have-look {
	position: relative;
	display: block;
	padding: 15px;
	padding-right: 55px;
	margin: 28px 0 0;
}

.have-look .box__title {
	font-size: 18px;
}

.have-look .box__logo {
	background: url(../img/have-look.png) no-repeat 0 0 ;
	display: block;
	width: 41px;
	height: 39px;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -19px;

}

.have-look:hover,
.have-look:focus {
	text-decoration: none;
}
/***
 * HEADER
 * ======
 *
 * @desc         Page header
 * @author       quentind
 * @tested       
 * @requires     -
 */
.header {

	/* Position */
	position:relative;
	
	/* Box Model */
	height:100px;

	/* Visual */
	border-bottom:45px solid #0065a2;
}

	.header__logo {

		/* Position */
		position:absolute;
		left:40px;
		bottom:-34px;
	}

	.header__title {

		/* Position */
		position:absolute;
		bottom:2px;
		left:249px;
		margin:0 10px 0 0;
		padding:0;

		/* Text */
		color:#0065a2;
		font-size:28px;
		line-height:28px;
		font-weight:normal;
		/*font-family:"PF-Square-Regular", Verdana, Geneva, Helvetica, Arial, sans-serif;*/
		font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
		text-transform:uppercase;
	}

	.header__title {
		text-indent:-9999px;
		width:348px;
		height:21px;
		background:url(../img/title_en.png) no-repeat 0 0;
	}

	/***
	 * Tablet
	 */
	@media all and (max-width:800px) {
		
		.header {
			border-bottom-width:40px;
		}

		.header__logo {
			width:140px;
			bottom:-28px;
		}

		.header__title {
			bottom:4px;
			left:190px;
		}
	}

	/***
	 * Mobile
	 */
	@media all and (max-width:599px) {
		.header {
			height:74px;
			border-bottom-width:26px;
		}

		.header .services {
			display:none;
		}

		.header__logo {
			width:100px;
			left:10px;
			bottom:-19px;
		}

		.header__title {
			left:120px;
			bottom:4px;
			line-height:1;
			font-size:19px;
		}

		.header__title {
			text-indent:0;
			width:auto;
			height:auto;
			background:none;
		}
	}
/***
 * IN THE MEDIA
 * ===========
 *
 * @name         in-the-media
 * @desc         Box "In the media" on homepage
 * @author       mathias
 * @tested       
 * @requires     -
 */

.in-the-media {
	border-bottom: 1px solid #d2d2d2;
}

.in-the-media .meta-data {
	display: block;
}

/***
 * LANGUAGE SELECTOR
 * =================
 *
 * @desc         Lang dropdown selector
 * @author       quentind
 * @tested       
 * @requires
 * @note         Adaptation of standard EC CSS
 */

/*
 * NO Script
 */
.language-selector {

	/* Position */
	position:absolute;
	top:22px;
	right:3px;
	z-index:10;

	/* Text */
	font-size:11px;
	font-family:Verdana, Helvetica, Arial, sans-serif;
}

	.language-selector li {
		
		/* Position */
		margin:0 1px;

		/* Box Model */
		float:left;
	}

	.language-selector .selected {
		
		/* Box Model */
		padding:1px 2px;
		
		/* Visual */
		background:#074A8B;

		/* Text */
		color:#fff;
		text-decoration:none;
	}

		.language-selector a {

			/* Box Model */
			display:block;
			padding:1px 2px;

			/* Text */
			color:#027AC6;
		}

		.language-selector .non-official a {
			background:#def;
		}

/*
 * With Script
 */
.js .language-selector {
	display:none; /* Prevents FOUC */
}

.language-selector-close,
.language-selector-open {

	/* Position */
	position:absolute;
	top:3px;
	right:1px;
	z-index:99;

	/* Box Model */
	overflow:hidden;
	width:130px;

	/* Reset list */
	list-style:none;
	margin:0;
	padding:0;

	/* Visual */
	background:#fff;
	border:1px solid #9ab;

	/* Text */
	font-size:11px;
	font-family:Verdana, Helvetica, Arial, sans-serif;
}

@media all and (max-width:480px) {
	.language-selector-close,
	.language-selector-open {
		width:110px;
		font-size:10px;
	}
}

	.language-selector-close li {

		/* Off-screen */
		position:absolute;
		left:-999px;
		top:-999px;
	}

	.language-selector-open li,
	.language-selector-close .selected {

		/* Position */
		position:relative;
		left:0;
		top:0;
		
		/* Box Model */
		padding:0;
		width:100%;
	}
	
	.language-selector-close a,
	.language-selector-open a,
	.language-selector-close a:visited,
	.language-selector-open a:visited {
		display:block;
		padding:2px 3px;
		border:0;
		text-decoration:none;
		color:#396ea2;
	}
	
	.language-selector-close a:hover,
	.language-selector-close a:focus,
	.language-selector-close a:active,
	.language-selector-open a:hover,
	.language-selector-open a:focus,
	.language-selector-open a:active{
		background-color:#def;
		color:#036;
	}

	.language-selector-open .lang-separate {
		border-top:1px solid #9ab;
		margin:2px 0 0;
	}
	
	.language-selector-open img,
	.language-selector-close img {

		/* Position */
		position:absolute;
		right:1px;
		top:0;
		z-index:1;
	}

	.language-selector-alone a:hover {
		background:none;
		color:#396ea2;
	}
	
	.language-selector-alone {
		height:25px;
	}
.olMap {
	height: 450px;
    width: 100%;
}

.olMap img {
	max-width: none;
}

.olMap .olPopupTitle h1 {
    color: #323436;
    
    text-align: left;
}

.olMap .olPopupContent {
    
    text-align: left !important;
}

.olMap .olPopupContent div, 
.olMap .olPopupContent span, 
.olMap .olPopupContent p, 
.olMap .olPopupContent a, 
.olMap .olPopupContent ul, 
.olMap .olPopupContent li {
    
    font-size: 10px !important;
    text-align: left !important;
}

.olMap .olFramedCloudPopupContent {
	overflow: hidden !important;
}

.olMap .olPopupContent span.sector {
    border-bottom: 1px solid #D2D6D9;
    color: #4D4E4F;
    display: block;
    margin: 0 0 5px;
}
.olMap .olPopupContent span.project {
    border-bottom: 1px solid #D2D6D9;
    color: #4D4E4F;
    display: block;
    margin: 0 0 5px;
}
.olMap .olPopupContent ul {
    padding: 0;
}
.olMap .olPopupContent .sector-div {
    text-align: left;
}
.olMap .olPopupContent ul li.line-project {
    background: none repeat scroll 0 0 transparent;
    display: block;
    list-style-type: none;
    margin: 5px 0 0;
    padding: 4px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
.olMap .olPopupContent img {
    vertical-align: bottom;
}

.map-legend {
    border-bottom: 1px solid #D5DCE3;

    padding-bottom: 5px;
}

.map-legend li {
    float: left;
    line-height: 42px;
    margin: 0 10px 0 0;
    padding: 0 0 0 26px;
}
.map-legend li.food {
    background-image: url("/wel/maps/open_layers/theme/default/img/marker-red-1.png");
}
.map-legend li.recycling {
    background-image: url("/wel/maps/open_layers/theme/default/img/marker-orange-1.png");
}
.map-legend li.green {
    background-image: url("/wel/maps/open_layers/theme/default/img/marker-green-1.png");
}
.map-legend li.building {
    background-image: url("/wel/maps/open_layers/theme/default/img/marker-black-1.png");
}
.map-legend li.water {
    background-image: url("/wel/maps/open_layers/theme/default/img/marker-blue-1.png");
}

@media all and (max-width: 799px) {

	.map-legend li {
		float: none;
	}
}

/***
 * MENU
 * ====
 *
 * @desc         main menu
 * @author       mathias
 * @tested       
 * @requires     
 */

.menu {
	position: relative;
	z-index: 10;
	margin-left: -20px;
}

.menu__items {
	padding: 0;
	margin: -10px 0 0 14px;
}

	.menu__items li.first-level {
		float: left;
		*zoom: 1;
		display: block;
		vertical-align: middle;
		height: 24px;
		position: relative;
		padding: 0 25px;

		border-right: 1px solid #d0d0d0;
	}


		.menu__items li.first-level > span,
		.menu__items li.first-level > a {
			font-size: 1.7em;
			color: #222;
			text-decoration: none;

			float: left;
			display: block;
			
			height: 25px;
			width: 100%;
			*zoom: 1;
		}

		.menu__items li.first-level.active > span, 
		.menu__items li.first-level.active > a {
			font-size: 32px;
			font-weight: bold;
			color: #63a318;

		}
			.menu__items li.first-level.active span span,
			.menu__items li.first-level.active a span {
				position: relative;
				top: -9px;
			}

		.menu__items li.first-level:last-child span,
		.menu__items li.first-level.last span,
		.menu__items li.first-level:last-child a,
		.menu__items li.first-level.last a {
			border: none;
		}

	.menu__items .menu__sub {
		position: absolute;
		top: 24px;
		left: 0;
		right: 0;
		z-index: 10;
		display: none;
		padding-top: 20px;
		margin-left: -1px;
		*margin-left: -1px;

		width: 100%;

		border: 1px solid #d0d0d0;
		border-top: none;
	}

	.menu__items li.has-dropdown:hover .menu__sub {
		display: block;

	}
	
	.menu__items .menu__sub li,
	.menu__items .menu__sub li a {
		background: #fff;
	}

	.menu__items .menu__sub li a {
		border: none;
		color: #808080;
		font-size: 12px;
		
		text-decoration: none;
		
		display: block;
		padding: 5px;
		line-height: 20px;
		
	}

	.menu__items .menu__sub li a:hover,
	.menu__items .menu__sub li.active a {
		background: #236682;
		color: #fff;
	}

	

/***
 * Mobile
 * -
 * Open nav button
 */

.menu__button {
	/* Text */
	font-size:15px;
	text-transform:uppercase;
	text-decoration:none;
	line-height: 30px;

	display: none;
}

.open-menu {

	/* Position */
	vertical-align: top;

	/* Box Model */
	padding: 8px 10px;
	height: 17px;
	width: 18px;
	margin-right: 10px;
	display: inline-block;

	color: #fff;
	background: url(../img/menu-mobile.png) no-repeat center center #5f5f5f;
	
}

@media screen and (max-width: 599px) {

	.menu__items {
		display: none;
	}
}

@media all and (max-width:799px) {

	.menu {
		margin: 0;
	}
	
	.menu__button {
		display:block;
	}

	.menu__items {
		display:none;
		padding-bottom: 15px;
		margin: 0;
	}

	.js--menu-is-open .menu__section,
	.js--menu-is-open .menu__items {
		display:block;
	}

	.menu__items .menu__sub {
		border: medium none;

    	display: block;
    	margin: 0 0 0 15px;
    	padding: 0;
	}

	.menu__items li.first-level {
		display: block;
		float: none;
		height: auto;
		margin: 5px 0;
		overflow: hidden;
		border: none;
	}

		.menu__items li.first-level span,
		.menu__items li.first-level a {
			border: none;
			height: auto;
			padding: 0;
		}

	.menu__items .menu__sub {
		position: static;
		border-left: 5px solid #D4D4D4;
    	padding: 0 0 5px 5px;
    	margin: 30px 0 0 15px;
	}
		.menu__items .menu__sub li a {
			display: inline;
			font-size: 18px;
    		line-height: 26px;
		}

		.menu__items .menu__sub li a:hover {
			background: none;
			color: #808080;
		}
	
}
/***
 * NATIONAL CONTACTS
 * =================
 *
 * @name         national-contacts
 * @desc         list of national contacts boxes, can be show/hide with a <select>
 * @author       quentind
 * @requires     -
 */
.national-contacts {
}

	.national-contacts__select {

		/* Position */
		margin:0 0 30px;

		/* Box Model */
		padding:4px 6px;

		/* Visual */
		border: 1px solid #A7A7A7;

		/* Text */
		font-family: Verdana,Geneva,Helvetica,Arial,sans-serif;
		font-size:13px;
	}

	.national-contacts p {
		
		/* Visual */
		border:1px solid #ccc;
		padding:12px;
	}

	.js .national-contacts p {
		
		/* Behaviour */
		display:none;
	}

	.js .national-contacts .js--show {
		display:block;
	}
/***
 * PAGER
 * =====
 *
 * @desc         pager
 *               HTML generated in main.js
 *               jQuery plugin => jquery.paginatetable.js
 * @author       quentind
 * @tested       
 * @requires     
 */
.pager {

	/* Position */
	text-align:center;
	padding:24px 0;
}

	.pager__item {

		/* Box Model */
		display:inline-block;
		*display:inline;
		*zoom:1;

		/* Visual */
		background: #eeeeee; /* Old browsers */
		background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* IE10+ */
		background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

	}

	.pager__item a {

		/* Box Model */
		display:inline-block;
		*display:inline;
		*zoom:1;

		padding:4px 6px;

		/* Text */
		color:#777777;
		font-size:12px;
		line-height:12px;
		text-decoration:none;
	}

	/* Active page */
	.pager__item .active {

		/* Visual */
		background:#5d9694;

		/* Text */
		color:#fff;
	}

	/* Page list */
	.pager__item--pages a {
		margin-right:11px;
	}

	.pager__item:last-child,
	.pager__item--pages a:last-child {
		margin-right:0;
	}


/***
 * PATH
 * ====
 *
 * @desc         Crumbtrail
 * @author       quentind
 * @tested       
 * @requires     -
 */
.path {

	/* Position */
	margin:0;

	/* Box Model */
	min-height:18px;
	padding:0 0 1px 10px;
	overflow:hidden;

	/* Visual */
	background:#074a8b;

	/* Text */
	color:#fff;
	font-size:11px;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	line-height:17px;
}

	.path li {
		
		/* Box Model */
		padding:0 0 0 12px;
		float:left;

		/* Visual */
		background:url(/wel/template-2012/images/breadcrumb.gif) no-repeat left 1px;

		/* Text */
		white-space:nowrap;
	}

	.path .first{
		background:none;
		padding-left:0;
	}

	.path a,
	.path a:visited {
		color:#fff;
		text-decoration:none;
	}
	
	.path a:hover,
	.path a:focus,
	.path a:active {
		text-decoration:underline;
	}


	/***
	 * Mobile
	 */
	 @media all and (max-width:599px) {
	 	.path {
	 		padding:2px 0 4px 10px;
	 	}

	 	.path li {
	 		float:none;
	 		width:100%;
	 	}
	 }
/***
 * PROJECTS MAP
 * ===========
 *
 * @name         projects-map
 * @desc         Image of map on homepage
 * @author       mathias
 * @tested       
 * @requires     -
 */

.projects-map {
	position: relative;
}

body .projects-map {
	display: block;
	background: url(../img/projects-map.jpg) no-repeat 0 0;
	height: 200px;
	max-width: 220px;
	padding: 10px;
	text-decoration: none;
}
.projects-map .box__title {

 	font-size: 32px;
	text-shadow: 0px 0px 2px #67b9bb;
}

@media all and (max-width: 799px) {
	body .projects-map {
		height: auto;
	}

	.projects-map .box__title {
		font-size: 28px;
	}
}




.modal {
	display: none;
}

/* Overlay */
#simplemodal-overlay {
	background-color:#fff;
}

/* Container */
#simplemodal-container {
	max-width: 700px; /* 700px is the maximum width of image seen on the website */
	background-color: #fff;
	border: 1px solid #c7c6c7;
	padding: 15px;
}
#simplemodal-container a.modal-close {
	background: url(../img/close.jpg) no-repeat;
	width: 46px;
	height: 46px;
	display: inline;
	z-index: 3200;
	position: absolute;
	top: 15px;
	right: -46px;
	cursor: pointer;
}


/* Story */

.modal .modal-title {
	font-size: 21px;
	font-family: Verdana;
	margin: 20px 0 10px 0;
}

.modal .modal-abstract {
	font-size: 18px;
	color: #47790d;
	font-family: Verdana;
	margin: 10px 0 5px 0;
}

/***
 * SEARCH RESULTS
 * ==============
 *
 * @desc         Search results
 * @author       quentind
 * @tested       
 * @requires     -
 */
.search-results {

	/* Reset list */
	list-style:none;
	margin:0;
	padding:0;

}

	.search-results li {
		margin:0 0 10px;
	}

	.search-results .reliability  {
		display:none;
	}

	.search-results h2 a {
		color:#1b7913;
	}

body .more-results {
	margin:30px 0 0;
	
	display:block;
	padding:10px;
		
	background:#2c2c2c;
	border:1px solid #3b3b3b;
	
	text-align:center;
	color:#fff;
	text-decoration:none;
}

.more-results:before, 
.more-results:after {
	content:"|||";
	margin:0 10px;
	color:#4f4f4f;
}
/***
 * SERVICES
 * ========
 *
 * @desc         Service/tool list 
 * @author       quentind
 * @tested       
 * @requires     nav object
 * @note         Adaptation of standard EC CSS
 */
 .services {

 	/* Position */
 	position:absolute;
 	top:5px;
 	right:1px;
 	z-index:18;

 	/* Box Model */
 	padding:1px 0;

 	/* Text */
 	text-align:right;
 	font-size:11px;
 	font-family:Verdana, Helvetica, Arial, Geneva, sans-serif;
 }

 .js .services {
 	right:136px; /* When js is active, make place for lang picker on the right side */
 }

	.services a:link,
	.services a:active,
	.services a:visited {

		/* Box Model */
		display:inline-block;
		*display:inline;
		*zoom:1;
		padding:0 4px 1px;

		/* Visual */
		border-right:1px solid #396ea2;

		/* Text */
		line-height:11px;
		color:#396ea2;
		text-decoration:none;
	}

	.services a:focus {
		text-decoration:underline;
	}

	.services li:last-child a {
		border:0;
	}
/***
 * HP showcase
 * ===========
 *
 * @name         showcase
 * @desc         Gallery of stories on homepage + Showcase
 * @author       mathias
 * @tested       
 * @requires     -
 */



.showcase {
	*zoom: 1;
	margin-right: -1px;
	overflow: hidden;
	/*padding: 0 10px;*/
}

.gallery .showcase {
	*margin-right: 0;
}

.story__focus {
	max-height: 248px;
	overflow: hidden;
	
}
	.story__focus .story-link,
	.story__focus .story-link:hover,
	.story__focus .story-link:focus {
		text-decoration: none;

		color: #484849;
	}

	.story__focus img {
		display: block;
		float: left;
		width: 65%;
	}

	.story__focus .story-infos {
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;

    	float: right;
    	width: 35%;
    	padding: 30px;
    	*padding-left: 31px;
    	position: relative;
    	z-index: 1;
    	height: 248px;
    	max-height: 248px;

    	background: none repeat scroll 0 0 #f6f6f6;
    	box-shadow: -5px 0 2px 0px rgba(0, 0, 0, 0.3);
    	color: #484849;

    	*max-width: 196px; 
    	*max-height: 188px; /* 248px - 60px of padding */
	}

		.story__focus .story-title {
			margin-bottom: 10px;
			display: block;
			line-height: 1.3em;

			color: #484849;
			text-transform: uppercase;
		}

		.story__focus .story-description {
			display: inline-block;
			max-height: 170px; /* This is 250 - 80 (of padding) - ? */
			*max-height: 177px;
			position: relative;
			*overflow: hidden;

			line-height: 1.5em;
		}

		.story__focus .story-description p {
			line-height: 1.5em;
		}

		.story__focus .story-shadow {
    		background: transparent;
    		box-shadow: 0 -2px 4px 1px rgba(0, 0, 0, 0.7);

    		display: block;
		    height: 10px;
		    position: absolute;
		    left: 0;
		    bottom: -10px;
		    right: 0;
		    width: 100%;
		}

		.story__focus .story-arrow {

			position: absolute;
			top: 50%;
			left: -20px;
			margin-top: -20px;
			display: block;
	    	width: 0;
	    	height: 0;
	    	border-top: 20px solid transparent;
			border-bottom: 20px solid transparent;
			border-right: 20px solid #f6f6f6;
		}


.story {
	overflow: hidden;
	float: left;
    position: relative;
}

.showcase .even,
.showcase .odd {
	overflow: hidden;
}

.even .story {
    width: 50%;
}

.odd .story {
	width: 33.33334%;
}

	.story img {
		width: 100%;
	}

	.story .story-link {
		display: block;
    	height: 100%;
    	max-height: 248px;
    	width: 100%;
    	text-decoration: none;
	}

	.story .story-link * {
		cursor: pointer;
	}

	.story .story-link:hover,
	.story .story-link:focus {
		text-decoration: none;
	}

	.story .story-title {
		position: absolute;
		display: block;

		text-transform: uppercase;
	}

	.story .story-title {
		background: #fff;
		color: #484849;
		box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.5);
		opacity: 0.95;


		max-width: 170px;
		padding: 10px;
		left: 50%;
		top: 50%;
		margin-left: -90px; /* It's (max-width/2) + 5px of padding */
		margin-top: -50px;
	}

	.story.has-video.youtube.no-consent {
		padding-top: 90px;
	}

	.story.has-video .story-title {
		padding-bottom: 20px;
	}

	.story.has-video .story-hover {
		display: block;
		width: 100%;
		height: 100%;	
		position: absolute;
		left: 0;
		top: 0;

		opacity: 0;
		/* IE 8 */
  		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		/* IE 5-7 */
  		filter: alpha(opacity=0);

		background: #000;

		-webkit-transition: opacity 0.3s;
		   -moz-transition: opacity 0.3s;
		     -o-transition: opacity 0.3s;
		        transition: opacity 0.3s;

	}

	.story.has-video:hover .story-hover {
		opacity: 0.7;
		/* IE 8 */
  		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  		/* IE 5-7 */
  		filter: alpha(opacity=70);

	}

	.story.has-no-picture .story-link {
		background: #e3e0e1;
	}

	.story.has-no-picture .story-title {
		font-size: 28px;
		color: #436347;
		box-shadow: none;
		opacity: 1;
		background: none;

		position: static;
		display: inline-block;
		vertical-align: middle;
		padding: 0;
		width: 88%;
		max-width: none;
	}
	.even .story.has-no-picture .story-title {
		margin: -3.15em 0 0 -.15em;
		*margin: 0 0px 0px -0.15em;
	}
	.odd .story.has-no-picture .story-title {
		margin: 0 0 0 -.15em;
	}

	.story.has-no-picture .story-link:before {
		content: "";
		display: inline-block;
		width: 0px;
		padding-top: 70%;
		vertical-align: middle;
	}

	.story .story-video-arrow {
		position: absolute;
		bottom: -50%;
		left: 50%;
		margin-left: -22px;
		display: block;
		width: 44px;
		height: 44px;

		background: url(../img/play.png) no-repeat 0 0;
	}

.showcase .link-gallery {
	background: #fff;
	border: 1px solid #c7c6c7;
	color: #222;

	overflow: hidden;
	clear: both;
	float: right;
	display: block;
	position: relative;
	padding: 0 10px 0 50px;
	height: 40px;
	line-height: 40px;
}

	.showcase .link-gallery .ico-plus {
		left: 0;
		right: auto;
		
	}
	*+html .showcase .link-gallery .ico-plus {
		background: url("../img/more-bg.png") no-repeat 8px center #c7c6c7;
		display: block;
		width: 40px;
		height: 40px;
	}

	.showcase .link-gallery .ico-plus:after {
		background: #c7c6c7;
	}



.showcase .showcase__more {
    background: none repeat scroll 0 0 #2C2C2C;
    border: 1px solid #3B3B3B;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;

    display: inline-block;
    max-width: 150px;
    margin: 15px auto 0;
    padding: 10px;
}

.showcase .showcase__more:before, .showcase .showcase__more:after {
    color: #4F4F4F;
    content: "|||";
    margin: 0 10px;
}


@media all and (max-width: 800px) {

	/* Display story focus differently on homepage */
	.story,
	.story__focus {
		margin: 0;
	}

	.story__focus .story-description {
		line-height: 1.3em;
	}

	.story__focus .story-arrow {
		
		top: -30px;
		left: 50%;
		display: block;
		width: 0;
		height: 0;
		margin-left: -20px;
		margin-top: -10px;

		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid #f6f6f6;
	}

	.story__focus .story-infos {
		height: auto;
	}

	.story__focus .story-shadow {
		display: none;
	}
	
	/* No max-width, neither max-height and float for any elements */
	.even .story,
	.odd .story,
	.story__focus,
	.story__focus .story-infos,
	.story .story-title,
	.story__focus .story-infos .story-description,
	.showcase img,
	.story .story-link {
		width: 100%;
		max-width: none;
		max-height: none;
		float: none;
	}

	.story {
		padding: 20px 0;
		border-bottom: 1px solid #d4d4d4;
	}

	.story .story-content {
		display: block;
		text-align: left;
	}

	/* Hide the title, only in the gallery (cause there's a second in the content) and the second image (initially in the popup) */
	.story .story-content img {
		display: none;
	}

	.story .story-title,
	.story.has-video .story-title {
		position: static;
		margin: 0;
		padding: 0;
		opacity: 1;
		box-shadow: none;
		color: #222;
		font-size: 1.2em;
	}

	.story .story-infos {
		padding: 20px;
	}

	.story.has-video .story-hover,
	.story.has-video:hover .story-hover,
	.gallery .story.has-no-picture .story-link,
	.story .modal-title {
		display: none;
	}

	.story .story-video-arrow {
		bottom: 0;
	}

}
/***
 * TAGLINE
 * =======
 *
 * @desc         homepage tagline
 * @author       mathias
 * @tested       
 * @requires     -
 */
.subheader {
	background: #fff;
	height: 151px;
	position: relative;
	margin: 0 auto;
    max-width: 984px;

	/* Text */
	line-height:1;
}

	.search {
		position: absolute;
		top: 184px;
		right: 25px;
	}
		.search .search__p {
			position: relative;
		}

		.search__input-text {
			color: #fff;
			border: none;
			border-radius: 15px;
			background: #236682;

			width: 162px;
			height: 30px;
			padding: 0 10px;

			height: 22px\9;
			padding-top: 8px\9;
		}

		.search .search__submit {
			background: url("../img/search.png") no-repeat scroll center center transparent;
    		border: none;
    		color: #FFFFFF;
    		height: 30px;
    		width: 30px;
    		position: absolute;
    		right: 0;
    		top: 0;
    		*top: 1px;
		}

	.share {
		background: url("../img/share.png") no-repeat scroll 5px center #FFFFFF;
    	border: 1px solid #D6D6D6;

    	height: 30px;
    	line-height: 30px;
    	position: absolute;
    	right: 25px;
    	text-indent: 45px;
    	top: 18px;
    	width: 135px;
	}

		.share .share_button {
			background: none repeat scroll 0 0 transparent;

	    	height: 100%;
    		left: 0;
    		position: absolute;
    		top: 0;
    		width: 100%;
		}

		/* Messy selector to override share.css mess */
		.share#share-tool #share_button_link {
			color: #236682;
    		font-size: 0.75em;
    		font-family: Verdana;

    		height: 100%;
    		line-height: 30px;
    		padding: 0;
    		width: 100%;
		}

@media all and (max-width: 799px) {

	.share {
		display: none;
	}

}

@media all and (max-width: 599px) {

	.subheader {
		background: none;

		height: 150px;
	}

	.share {
		display: none;
	}

	.search {
		position: static;
		margin-top: 20px;
		text-align: center;
	}
		.search .search__p {
			display: inline-block;
		}
		.search .search__input-text {
			width: auto;
			background: #236682;
		}
}

.title {
	margin: -138px 0 0 10px;
	position: relative;
	z-index: 10;

	word-wrap: break-word;
	text-indent: -4px;
	
	border-bottom: #63a318 solid 1px;
	padding: 0 0 5px;
}

.title .title__title,
.title .title__subtitle {
	font-family: Calibri;
}

	.title .title__title {
		font-size: 7.5em;
		line-height: 0.7em;
		color: #63a318;
		font-weight: bold;

		margin: 0;

	}

	.title .title__subtitle {
		color: #236682;
		font-size: 3.2em;
		margin-left: 52px;
	}


@media all and (max-width: 799px) {
	
	.title {
		text-align : center;
	}
	
	.title .title__title {
		font-size: 6.2em;
	}

	.title .title__subtitle {
		margin-left: 50px;
		font-size: 2.5em;
		line-height: 1em;
	}
}

@media all and (max-width: 599px) {
	
	.title {
		margin-top: -115px;
	}
	
	.title .title__title {
		font-size: 3.1em;
		margin-top: -100px;
		margin-left: 0;
	}

	.title .title__subtitle {
		margin: 5px 0;
		font-size: 1.9em;
	}
}
/***
 * TWITTER
 * ======
 *
 * @desc         Twitter module
 * @author       mathias
 * @tested       IE7+
 * @requires     -
 */

.twitter-timeline {
	width: 100% !important;
}
 
iframe[id^='twitter-widget-'] { 
	width:100%;
}