/*
Theme Name: Handibirds
Author: Modern Themes
Author URI: http://modernthemes.net
Description: A theme for the modern handibirds
Version: 1.25
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: handibirds
Domain Path: /languages/

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

handibirds is built with Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc. and includes Simple Grid (https://github.com/ThisIsDallas/Simple-Grid) by ThisisDallas, Sequence (https://github.com/IanLunn/Sequence) by Ian Lunn, Custom Meta Boxes by WebDevStudios and Font Awesome (http://fortawesome.github.io/Font-Awesome/) by Dave Gandy. 

handibirds incorporates code from My Custom CSS Plugin by Salvatore Noschese - DarkWolf, 2013. 

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/ 
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Reset
2.0 - Typography
3.0 - Elements
4.0 - Forms
5.0 - Navigation
	5.1 - Links
	5.2 - Menus
6.0 - Accessibility
7.0 - Alignments
8.0 - Clearings
9.0 - Widgets
10.0 - Content
	10.1 - Posts and pages
	10.2 - Asides
	10.3 - Comments
11.0 - Infinite scroll
12.0 - Media
	12.1 - Captions
	12.2 - Galleries
	12.3 - Slider
13.0 - Skeleton
14.0 - Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 - Reset
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: Helvetica,Arial,"lucida grande",tahoma,verdana,arial,sans-serif;
	font-size: 1.5rem;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
html {
	font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust:     100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
	margin-top: 0 !important;
}
*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
	-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
	-moz-box-sizing:    border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
	box-sizing:         border-box;
}
body {
	background: #EAEDF8; /* Fallback for when there is no custom background color defined. */
	color: #5E5E5E;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}
ol, ul {
	list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
tr td:nth-child(1) {
	padding-right: 0.5rem;
}
.popup-invite .double-mail tr td:nth-child(1) input.short-input, .popup-gameover .double-mail tr td:nth-child(1) input.short-input {
	width: 100%;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a {
	text-decoration: none;
}
a img {
	border: 0;
}

/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: Helvetica,Arial,"lucida grande",tahoma,verdana,arial,sans-serif;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: 400;
    margin-bottom: 0.5em;
	color: #212737;
}
.modal_description h2, .modal_description h3 {
    clear: both;
    font-weight: bold;
    margin: 0.7em;
    color: #ffffff;
}
h1 {
    font-size: 2.25rem;
    line-height: 2.25rem;
}
h2 {
    font-size: 2rem;
    line-height: 2rem;
}
h3 {
    font-size: 1.75rem;
    line-height: 1.75rem;
}
h4 {
    font-size: 1.5rem;
    line-height: 1.5rem;
}
h5 {
    font-size: 1.25rem;
    line-height: 1.25rem;
}
h6 {
    font-size: 1rem;
    line-height: 1rem;
    margin-bottom: 0;
    text-transform: uppercase;
}
p {
	margin-bottom: 1.5em;
}
b, strong {
	font-weight: bold;
}
dfn, cite, em, i {
	font-style: italic;
}
blockquote {
    background: none repeat scroll 0 0 #fff;
    border-left: 5px solid #016fbb;
	border-radius: 0px 3px 3px 0px;
    color: #999;
    font-style: italic;
	font-size: 1.25rem;
	line-height: 1.625rem;
    padding: 30px 20px 1px;
	margin-bottom: 0.5em;
}
address {
	margin: 0 0 1.5em;
}
pre {
	background: #eee;
	font-size: 1.5rem;
	line-height: 1.6rem;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
code, kbd, tt, var {
	font: 1rem Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark, ins {
	background: #fff9c0;
	text-decoration: none;
}
sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
small {
	font-size: 75%;
}
big {
	font-size: 125%;
}
.text-center {
	text-align: center;
}
.light-blue {
	color: #016fbb;
	margin-bottom: 5px;
}

/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}
ul, ol {
	margin: 0 0 1.5em 3em;
}
ul {
	list-style: disc;
}
ol {
	list-style: decimal;
}
li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0 1.5em 1.5em;
}
img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}
figure {
	margin: 0;
}
table {
	margin: 0 0 1.5em;
	width: 100%;
}
th {
	font-weight: bold;
}
.head-overflow {
	overflow: visible !important;
}
/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background: none repeat scroll 0 0 #016fbb;
    border: 1px solid #016fbb;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    padding: 20px 30px 22px;
    text-align: center;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #09afed;
	background: #09afed;
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s;
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: transparent;
	background: transparent;
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s;
}
input[type="checkbox"],
input[type="radio"] {
	padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
	-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
	-moz-box-sizing:    content-box;
	box-sizing:         content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 3px;
}
textarea {
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: 3px;
	vertical-align: top; /* Improves readability and alignment in all browsers */
	width: 100%;
}

/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a {
	color: #016fbb;
}
#colophon a {
	color: #09afed;
	font-size: 1.5rem;
}
#colophon a span {
	color: #09afed;
	font-size: 1.5rem;
}
 
a:hover,
a:focus,
a:active {
	color: #09afed;
}

/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
#main-nav {
	float: right;
}
.menu-menu-principale-container {
    float: left;
}
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation li {
	float: left;
	position: relative;
}
.main-navigation a {
	display: block;
	text-decoration: none;
	margin-left: 15px;
    padding: 20px 0;
	height: 60px;
	color: #212737;
	font-size: 1.5rem;
}
.main-navigation a:hover, .main-navigation a:focus, .main-navigation a:active {
	background: url('img/underline.png') no-repeat left bottom transparent;
}
.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 60px;
	left: -999em;
	z-index: 99999;
}
.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}
.main-navigation ul ul a {
	width: 200px;
	height: auto;
}
.main-navigation ul ul li {
    background: none repeat scroll 0 0 #f8f8f8;
    border-left: 5px solid #016fbb;
}
.main-navigation ul ul li:nth-child(2n) {
    background: none repeat scroll 0 0 #EAEDF8;
    border-left: 5px solid #212737;
}
.main-navigation li:hover > a {
	color: #016fbb;
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
	left: auto;
}
.main-navigation ul ul li:hover > ul {
	left: 100%;
}
.main-navigation .current_page_item a,
.main-navigation .current-menu-item a {
	color: #016fbb;
	font-weight: bold;
}
/* Small menu */
.side-toggle {
	display: none;
}
#mobile-header {
    display: none;
}
@media screen and (max-width: 767px) { 
	.side-toggle {
		color: #404040;
		background: none;
		padding: 0;
		font-size: 1.625rem;
		float: right;
		border: none;
		text-shadow: none;
		margin-top: 7px;
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s;
	}
	.side-toggle:hover {
		background: none;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s;
	}
	.side-toggle {
		display: block;
	}
	#main-nav {
		display: none;
	}

	.main-navigation ul {
		display: none;
	}
	#mobile-header {
        display: block;
    }
}
.site-main .comment-navigation,
.site-main .paging-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}
.comment-navigation .nav-previous, .paging-navigation .nav-previous, .post-navigation .nav-previous {
    background: none repeat scroll 0 0 #016fbb;
    float: left;
    font-size: 14px;
    font-style: italic;
    font-weight: 300;
    line-height: 15px;
    padding: 18px 20px 20px;
    text-align: center;
    width: 48%;
	border-radius: 3px;
}
.comment-navigation .nav-next, .paging-navigation .nav-next, .post-navigation .nav-next {
    background: none repeat scroll 0 0 #016fbb;
    float: right;
    font-size: 0.875rem;
    font-style: italic;
    font-weight: 300;
    line-height: 15px;
    padding: 18px 20px 20px;
    text-align: center;
    width: 48%;
	border-radius: 3px;
}
.nav-previous a, .nav-next a {
	color: #fff;
}

/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #EAEDF8;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: '';
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Search widget */
.widget_search .search-submit {
	display: none;
}
.widget-title {
	font-size: 1.125rem;
}
.widget-area {
	font-size: 1rem;
}
.widget-area ul {
	margin: 0;
	list-style: none;
}
/*--------------------------------------------------------------
10.0 Content
--------------------------------------------------------------*/

.home-cta {
    background: none repeat scroll 0 0 #212737;
    color: #b3b3b3;
    padding: 5px 0 25px;
}
.home-cta h4 {
    color: #fff;
    margin-bottom: 0;
	line-height: 26px;
	padding-top: 15px;
}
.site-header {
	/*height: 10rem;*/
}
.site-title {
	margin-bottom: 0;
}
.services {
	padding: 50px 0;
	text-align: center;
}
.services h1 {
	font-size: 1.25rem;
}
.services .fa {
	color: #016fbb;
	font-size: 6rem;
	margin-bottom: 10px;
}
.services h2 {
	font-size: 1.375rem;
}
.home-entry-title {
	font-size: 1.25rem;
	padding: 5px 15px 20px;
	line-height: 22px;
	position: relative;
	margin-bottom: 10px;
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s;
}
.home-entry-title:hover {
	color: #016fbb;
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s;
}
.home-entry-content {
	padding: 0px 15px;
}
.home-entry-meta {
	font-size: 0.75rem;
	font-style: italic;
	padding: 0 15px;
}
.home-entry-title:after {
	display: block;
	content: " ";
	border-bottom: 6px solid #016fbb;
	width: 65px;
	position: absolute;
	bottom: 0;
}
.home-divider-1 {
	margin-top: 20px; margin-bottom: 60px;
}
.home-divider-2 {
	margin-top: 80px;
}
.home-blog article {
	margin-bottom: 0;
}
.home-blog .entry-footer {
	border-top: 1px solid #ccc;
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s;
}
.home-blog .entry-footer:hover {
	background: #016fbb;
	color: #fff;
    -webkit-transition: all 0.25s ease-out 0s;
    -moz-transition: all 0.25s ease-out 0s;
    -o-transition: all 0.25s ease-out 0s;
    -ms-transition: all 0.25s ease-out 0s;
    transition: all 0.25s ease-out 0s;
}
.home-blog .entry-footer:hover > p span {
	color: #fff;
} 
.home-blog .entry-footer p {
	margin: 0;
	padding: 15px;
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 400;
}
.home-blog .entry-footer span {
	float: right;
	color: #016fbb;
	font-size: 1.125rem;
	line-height: 16px;
}
.home-blog img {
	width: 100%;
}
.home-services {
	width: 100%;
	padding: 40px 0;
}
.site-footer {
    background: none repeat scroll 0 0 #1d2333;
    color: #b3b3b3;
    padding: 50px 0 10px;
}
.site-footer h5 {
    color: #fff;
}
.site-info {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
}
.entry-meta {
	background: #dddddd;
	padding: 8px 10px;
	border-radius: 3px;
	font-size: 0.75rem;
	font-style: italic;
	margin-bottom: .5em;
}
/*--------------------------------------------------------------
10.1 Posts and pages
--------------------------------------------------------------*/
.sticky {
}
.hentry {
	margin: 0 0 1.5em;
}
.byline,
.updated {
	display: none;
}
.single .byline,
.group-blog .byline {
	display: inline;
}
.page-content,
.entry-content,
.entry-summary {
	margin: .5em 0 0;
}
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}
.home-blog {
	border: 1px solid #ccc;
	background: #fff;
}
.home-blog-container {
	/** padding-bottom: 100px; **/
}
.home-point {
	padding-top: 8px;
}
.entry-header { 
	background: #2466A8;
}
.entry-title {	
	color: #fff;
	font-weight: 200; 
	font-size: 2rem;
	line-height: 34px;
	padding: 6px 0 15px; 
}
.index-entry-header .entry-title {
	margin-bottom: 0;
}
img.img-entry-header {
	border-radius: 1rem;
    height: auto;
    width: 30%;
    float: left;
    margin-right: 2%;
}
.index-entry-header {
	float: left;
    width: 68%;
}
.blog-article article {
	border-bottom: 1px dotted #999;
	padding-bottom: 2em;
}
.blog-article article:last-child {
	border-bottom: 0px;
}
.member {
	border: 1px solid #ccc;
	background: #fff;
	margin-bottom: 20px;
}
.member img {
	width: 100%;
}
.member-entry-title {
	font-size: 1.25rem;
	padding: 5px 15px 20px;
	line-height: 22px;
	position: relative;
	margin-bottom: 10px;
}
.member-entry-title:after {
	display: block;
	content: " ";
	border-bottom: 6px solid #016fbb;
	width: 65px;
	position: absolute;
	bottom: 0;
}
.member-title {
	padding: 5px 15px 10px;
	font-size: 0.75rem;
	color: #666;
}
.member-description {
	font-size: 0.75rem;
	padding: 0 15px;
	font-style: italic;
	color: #666;
}
.client {
	border: 1px solid #ccc;
	background: #fff;
	margin-bottom: 20px;
}
.client img {
	width: 100%;
}
.client-entry-title {
	font-size: 1.25rem;
	padding: 15px 15px 10px;
	line-height: 22px;
	position: relative;
	margin-bottom: 12px;
	border-top: 1px solid #ccc;
}
.client-entry-title:after {
	display: block;
	content: " ";
	border-bottom: 6px solid #016fbb;
	width: 65px;
	position: absolute;
	bottom: -5px;
}
.client-description {
	font-size: 0.75rem;
	padding: 0 15px;
	font-style: italic;
}
.works {
	border: 1px solid #ccc;
	background: #fff;
	margin-bottom: 20px;
}
.works img {
	width: 100%;
}
.works-entry-title {
	font-size: 1.25rem;
	padding: 15px 15px 10px;
	line-height: 22px;
	position: relative;
	margin-bottom: 12px;
}
.works-entry-title:after {
	display: block;
	content: " ";
	border-bottom: 6px solid #016fbb;
	width: 65px;
	position: absolute;
	bottom: -5px;
}
.works-description {
	font-size: 0.75rem;
	padding: 0 15px;
	font-style: italic;
}

.work-image img {
	width: 100%;
	border: 1px solid #ccc;
}
.work-content p {
	padding: 15px;
}

.social-media-icons {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
  text-align: center; 
  font-size: 1.5rem;
} 

.social-media-icons li {
  color: #fff;
  display: inline-block;
  float: none;
  list-style: none outside none; 
} 

.social-media-icons .fa {
  border: 2px solid;
  border-radius: 5rem;
  font-size: 3rem;
  margin: 0 15px;
  padding: 0.6rem;
  -webkit-transition: background-color 500ms ease-out 1s;
  -moz-transition: background-color 500ms ease-out 1s;
  -o-transition: background-color 500ms ease-out 1s;
  transition: background-color 500ms ease-out 1s; 
}

.social-media-icons .fa:hover { color: #FFF; }

.social {
  margin: 1rem 0; 
}

/**** contact form *****/

#contactForm ul { 
  list-style: none outside none;
}

ul.contact-form {
	font-size: 1.125rem;
	margin: 0;
	padding-bottom: 25px;
}
ul.contact-form li {
	list-style: none;
	display: inline-block;
}
ul.contact-form input {
	border-radius: 4px;
	width:100%; 
}
li.contact-name {
	width: 49%; 
	margin-bottom: 20px;
	}
	
li.contact-email {
	width: 49%;
	margin-bottom: 20px;
}
li.contact-comments {
	width: 97.9%;
}
li.contact-comments textarea { 
	padding: 8px 15px;
	border-radius: 4px;
}
 
 input[type="submit"].contact-submit {
	border-radius: 2px; 
	margin-top: 20px; 
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.75rem;
}

/*--------------------------------------------------------------
10.2 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}
.bypostauthor {
}
.comment-form-author, .comment-form-email, .comment-form-url {
    float: left;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    width: 33.2833%;
}
.comment-form-author, .comment-form-email {
    padding-right: 0.5em;
}
.form-allowed-tags {
    display: none;
}
.comment-form-comment {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}
#reply-title {
    font-size: 1.25rem;
    font-weight: 500;
	margin-bottom: 0;
}
.comment-notes {
    font-size: 0.75rem;
    font-style: italic;
}
#comments {
    border-top: 1px dotted #999;
    padding-top: 20px;
}
.comments-area input {
	width: 100%;
}
/*--------------------------------------------------------------
11.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
	display: block;
}

	
	
/*--------------------------------------------------------------
13.0 Skeleton
--------------------------------------------------------------*/	
	
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0px;
}

[class*='col-'] {
	float: left;
	padding-right: 20px; /* column-space */
}

.grid {
	width: 100%;
	max-width: 1140px;
	min-width: 755px;
	margin: 0 auto;
	overflow: hidden;
}

.grid:after {
	content: "";
	display: table;
	clear: both;
}

.grid-pad {
	padding-top: 20px;
	padding-left: 20px; /* grid-space to left */
	padding-right: 0px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}

.push-right {
	float: right;
	text-align: right;
}

/* Content Columns */

.col-1-1 {
	width: 100%;
}
.col-2-3, .col-8-12 {
	width: 66.66%;
}

.col-1-2, .col-6-12 {
	width: 50%;
}

.col-1-3, .col-4-12 {
	width: 33.33%;
}

.col-1-4, .col-3-12 {
	width: 25%;
}

.col-1-5 {
	width: 20%;
}

.col-1-6, .col-2-12 {
	width: 16.667%;
}

.col-1-7 {
	width: 14.28%;
}

.col-1-8 {
	width: 12.5%;
}

.col-1-9 {
	width: 11.1%;
}

.col-1-10 {
	width: 10%;
}

.col-1-11 {
	width: 9.09%;
}

.col-1-12 {
	width: 8.33%
}

/* Layout Columns */

.col-11-12 {
	width: 91.66%
}

.col-10-12 {
	width: 83.333%;
}

.col-9-12 {
	width: 75%;
	margin-bottom: 1rem;
}

.col-5-12 {
	width: 41.66%;
}

.col-7-12 {
	width: 58.33%
}



/* Pushing blocks */

.push-2-3, .push-8-12 {
	margin-left: 66.66%;
}

.push-1-2, .push-6-12 {
	margin-left: 50%;
}

.push-1-3, .push-4-12 {
	margin-left: 33.33%;
}

.push-1-4, .push-3-12 {
	margin-left: 25%;
}

.push-1-5 {
	margin-left: 20%;
}

.push-1-6, .push-2-12 {
	margin-left: 16.667%;
}

.push-1-7 {
	margin-left: 14.28%;
}

.push-1-8 {
	margin-left: 12.5%;
}

.push-1-9 {
	margin-left: 11.1%;
}

.push-1-10 {
	margin-left: 10%;
}

.push-1-11 {
	margin-left: 9.09%;
}

.push-1-12 {
	margin-left: 8.33%
}

.mobileNav {
	display: none !important;
}

/*--------------------------------------------------------------
14.0 Media Queries
--------------------------------------------------------------*/

@media handheld, only screen and (max-width: 767px) {
	.grid {
		width: 100%;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 20px; /* grid-space to left */
		padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
	}
	
	[class*='col-'] {
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 10px;
		margin-bottom: 10px;
		padding-left: 0px;
		padding-right: 10px; /* column-space */
	}
	
	
	/* Mobile Layout */
	
	[class*='mobile-col-'] {
		float: left;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		margin-bottom: 10px;
		padding-left: 0px;
		padding-right: 10px; /* column-space */
		padding-bottom: 0px;
	}
	
	.mobile-col-1-1 {
		width: 100%;
	}
	.mobile-col-2-3, .mobile-col-8-12 {
		width: 66.66%;
	}

	.mobile-col-1-2, .mobile-col-6-12 {
		width: 50%;
	}

	.mobile-col-1-3, .mobile-col-4-12 {
		width: 33.33%;
	}

	.mobile-col-1-4, .mobile-col-3-12 {
		width: 25%;
	}

	.mobile-col-1-5 {
		width: 20%;
	}

	.mobile-col-1-6, .mobile-col-2-12 {
		width: 16.667%;
	}

	.mobile-col-1-7 {
		width: 14.28%;
	}

	.mobile-col-1-8 {
		width: 12.5%;
	}

	.mobile-col-1-9 {
		width: 11.1%;
	}

	.mobile-col-1-10 {
		width: 10%;
	}

	.mobile-col-1-11 {
		width: 9.09%;
	}

	.mobile-col-1-12 {
		width: 8.33%
	}

	/* Layout Columns */

	.mobile-col-11-12 {
		width: 91.66%
	}

	.mobile-col-10-12 {
		width: 83.333%;
	}

	.mobile-col-9-12 {
		width: 75%;
	}

	.mobile-col-5-12 {
		width: 41.66%;
	}

	.mobile-col-7-12 {
		width: 58.33%
	}
	
	.hide-on-mobile {
		display: none !important;
		width: 0;
		height: 0;
	}
	
	.mobileNav {
		display: block !important;
		font-size: 1.625rem;
		line-height: 1.625rem;
		cursor: pointer;
	}
	a.mobileNav {
		height: 45px;
	}
	.cbp-spmenu ul {
		margin: 0;
		list-style: none;
	}
	.mobileNav:hover > i {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
    	-webkit-transition-duration: .2s;
    	-moz-transition-duration: .2s;
    	-ms-transition-duration: .2s;
    	-o-transition-duration: .2s;
    	transition-duration: .2s;
	}

	#sequence .sequence-next,
 	#sequence .sequence-prev {
	  	display: none !important;
    }
	#sequence {
  		height: 400px;
   	}
    #sequence .slide-title { 
		font-size: 1.875rem;
		line-height: 30px;
		bottom: 60%;
	}   
	#sequence .animate-in .slide-title {
		bottom: 60%;
	 }
	#sequence .slide-description {  
    	font-size: 1rem;
		top: 45%;
	}
  	#sequence .animate-in .slide-description {
		top: 45%;
	 }
	#sequence .slide-arrow { 
		right: 20%;
		width: 60%;
	}
  	#sequence .animate-in .slide-arrow {
		right: 20%;
		top: 60%;
		width: 60%;
	 }
}



/* CSS additional */
.site-logo img {
    height: 7rem;
    float: left;
}
.home header .head-overflow, #page header .head-overflow {
	max-width: 100%;
}
.home .site-logo img, #page .site-logo img {
    height: auto;
    float: left;
    width: 25rem;
}
#page .entry-title {
	line-height: normal;
	font-size: 4rem;
}
.site-logo a span {
    color: #000000;
}
.site-logo a #identite {
    color: #555;
    display: block;
    float: left;
    font-weight: bold;
    margin: 0.5rem 0.5rem 0rem;
}
.site-logo a #identite p {
    font-size: 2.7rem;
    font-weight: bold;
    margin-bottom: 0;
}
.home .site-logo a #identite p {
    font-size: 4rem;
}
.site-logo a p#baseline, .home .site-logo a p#baseline {
    font-size: 1.5rem;
    margin: 0rem 0.5rem;
}
.home .site-logo a span {
	margin: 2rem 0rem;
}
#sequence .slide-title, #sequence .slide-description {
	/* text-align: right;
	margin-right: 8rem;
	width: 60rem !important;
    background: rgba(0, 0, 0, .55); */
}
.home #page #sequence {
	height: 550px;
}
#page #sequence {
	height: 450px;
}
#sequence .slide-title {
	font-size: 2.5rem;
    font-weight: bold;
    line-height: 3rem;
    bottom: 50%;
    letter-spacing: -0.025em;
    opacity: 1;
    right: 0;
    transition-duration: 1.3s;
    width: 100%;
    z-index: 10;
    position: absolute;
    transition-timing-function: ease-in-out;
    color: #fff;
    margin-bottom: 0;
}
#sequence .slide-description {
	font-size: 6rem;
    font-weight: bold;
    opacity: 1;
    right: 0;
    top: 40%;
    transition-duration: 1.3s;
    width: 100%;
    z-index: 10;
    position: absolute;
    transition-timing-function: ease-in-out;
}
#sequence .slide-arrow {
    background: rgba(0, 0, 0, .55);
    border: 2px solid #fff;
    border-radius: 5rem;
    padding: 1rem 3rem;
    opacity: 1;
    right: 42%;
    top: 58%;
    transition-duration: 1.3s;
    width: 25rem;
    z-index: 10;
    position: absolute;
    transition-timing-function: ease-in-out;
    font-size: 2rem;
}
#sequence .bg {
	opacity: 1;
    transition-duration: 1.3s;
    z-index: 1;
}
#sequence .slide-arrow {
	right: 8rem;
    top: 70%;
}
#sequence .slide-arrow:hover, #sequence .slide-arrow:focus, #sequence .slide-arrow:active {
	background: rgba(255, 255, 255, .6);
	color: #223C58;
	transition-duration: 0.3s;
}
#sequence .sequence-canvas {
    list-style: outside none none;
    margin: 0;
}
#sequence .sequence-canvas .article {
    display: list-item;
    z-index: 1;
    height: 100%;
    position: absolute;
    width: 100%;
}
.home-cta p {
    color: #fff;
    font-size: 2.7rem;
    margin-bottom: 1rem;
}
.services h2, .home-blog-container h2 {
    font-size: 2rem;
    font-weight: bold;
}
.home-blog-container h3 {
	font-size: 2rem;
}
.services p, .home-blog-container p {
    font-size: 1.5rem;
}
.services h1, .home-blog-container h1 {
    font-size: 3rem;
    font-weight: bold;
}
.home-cta a {
    background: transparent;
    border: 2px solid #fff;
    border-radius: 5rem;
    padding: 1rem 3rem;
    color: #fff;
    font-size: 2rem;
}
.home-cta a:hover, .home-cta a:focus, .home-cta a:active {
	background: rgba(255, 255, 255, .6);
	color: #223C58;
	transition-duration: 0.3s;
}
.home-cta .col-3-12 {
    padding-top: 0.8rem;
}
.footer .col-3-12 {
    padding-top: 1rem;
}
#tanaguru {
	background: url('img/bk-tanaguru.jpg') center bottom; 
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-ms-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
}
#tanaguru .article {
	margin-top: 4rem;
	padding: 20rem 9% 18rem 55%;
}
#tanaguru .article h1 {
	font-size: 2.5rem;
    font-weight: bold;
    line-height: 3rem;
    bottom: 50%;
    letter-spacing: -0.025em;
    opacity: 1;
    width: 100%;
    color: #fff;
    margin-bottom: 0;
    text-align: right;
    background: rgba(0, 0, 0, .55);
    padding: 1rem 1rem 1rem 1rem;
}
#tanaguru .article p {
	font-size: 1.5rem;
    font-weight: normal;
    opacity: 1;
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    text-align: right;
    background: rgba(0, 0, 0, .55);
    padding: 1rem 1rem 1rem 1rem;
}
#tanaguru .article .button {
	display: block;
	text-align: right;
}
#tanaguru .article a {
	background: rgba(0, 0, 0, .55);
    border: 2px solid #fff;
    border-radius: 5rem;
    padding: 1rem 3rem;
    opacity: 1;
    width: 16%;
    text-align: right;
    color: #fff;
    font-size: 2rem;
}
#tanaguru .article a:hover, #tanaguru .article a:focus, #tanaguru .article a:active {
	background: rgba(255, 255, 255, .6);
	color: #223C58;
	transition-duration: 0.3s;
}
.social-media-icons li {
	text-align: center;
}
.social-media-icons span {
	text-transform: capitalize;
}
#showLeft > img {
    height: auto;
    width: 5rem;
}
#site-navigation form {
	float: right;
}
#site-navigation form label {
	color: #212737;
    display: block;
    font-size: 1.5rem;
    height: 2.5rem;
    padding: 0.2rem 0.75rem 0.625rem 1.25rem;
    text-decoration: none;
}
#site-navigation form input#s {
	border: 2px solid #016fbb;
	border-radius: 2rem;
    font-size: 1.5rem;
}
#site-navigation form input#searchsubmit {
	position: relative;
    right: -23.4rem;
    top: -1.9rem;
    width: 2.3rem;
    border: 0;
    border-radius: 0;
}
#menu-footer {
	text-align: center;
}
#menu-footer li {
	list-style: none;
	font-size: 1rem;
	display: inline;
	border-right: 1px solid #09afed;
	padding-right: 1rem;
	padding-left: 0.6rem;
}
#menu-footer li:last-child {
	border-right: 0;
}
#menu-footer li a {
	font-size: 1rem;	
}
#commentaires-clients h1 {
	text-align: center;
	margin: 3rem;
}
#commentaires-clients img {
	border: 4px solid #016fbb;
	border-radius: 50%;
    margin: 10px auto;
    width: 10rem;
    max-width: 100%;
}
#commentaires-clients .client-name {
	color: #016fbb;
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 0.3rem;
}
#commentaires-clients .photo {
	text-align: right;
}
#commentaires-clients .fond-client {
	padding-left: 16px;
	background: url('img/fond-client.jpg') no-repeat left center transparent; 
}
#commentaires-clients .profil {
	border:1px solid #fff;
	border-radius: 1rem;
	background: #fff;
	padding: 1rem;
}
#commentaires-clients .client-desc {
	font-size: 1rem;
}
.entry-header .grid-pad {
	padding-left: 0;
	padding-top: 0;
}
.entry-header .title-header {
	margin: 0 auto;
	max-width: 1140px;
    min-width: 755px;
    width: 100%
}
.entry-header .title-header .entry-title {
	padding-left: 2rem;
}

@media screen and (max-width: 955px) {
	.site-logo a span {
		font-size: 3rem;
	}
}

@media screen and (max-width: 825px) {
	.site-logo a span {
		font-size: 2rem;
	}
}

@media screen and (max-width: 767px) {
	.site-logo a span {
		font-size: 4rem;
	}
}
.services h2 a, .home-blog-container h2 a, .category-blog h2 a {
	font-size: 2rem;
    font-weight: bold;
    color: #212737;
}
.page input, .page textarea, .single input, .single textarea {
	border: 2px solid #016fbb;
	border-radius: 2rem;
    font-size: 1.5rem;
}
.form-submit {
	text-align: right;
}
.form-submit input {
	border: 2px solid #016fbb;
	border-radius: 2rem;
    font-size: 1.5rem;
    width: 25rem;
    padding:1rem !important;
}

.fa-plunker::before {
	content:"";
}
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

/** Home Villes **/
.villes .ville-title { position: relative; top: 17rem; margin-top: -4rem; color: #ffffff; font-weight: bold; font-size: 4rem; text-shadow: 0.5rem 0.5rem 2rem #000000; }
.villes .bg {width: 100%; height: 30rem;}


/** Home Handi Birds **/
html {
	background: rgb(171,85,147);
	height: 100%;
}

#page {
    background: rgb(242,174,94);
    background: -moz-linear-gradient(top,  rgba(242,174,94,1) 0%, rgba(242,216,94,1) 50%, rgba(171,85,147,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,174,94,1)), color-stop(50%,rgba(242,216,94,1)), color-stop(100%,rgba(171,85,147,1)));
    background: -webkit-linear-gradient(top,  rgba(242,174,94,1) 0%,rgba(242,216,94,1) 50%,rgba(171,85,147,1) 100%);
    background: -o-linear-gradient(top,  rgba(242,174,94,1) 0%,rgba(242,216,94,1) 50%,rgba(171,85,147,1) 100%);
    background: -ms-linear-gradient(top,  rgba(242,174,94,1) 0%,rgba(242,216,94,1) 50%,rgba(171,85,147,1) 100%);
    background: linear-gradient(to bottom,  rgba(242,174,94,1) 0%,rgba(242,216,94,1) 50%,rgba(171,85,147,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ae5e', endColorstr='#ab5593',GradientType=0 );
    height:700px;
}

#page #content {
	padding-top:0;
}

#page #bloc-titre {
    padding-left:7%;
    padding-right:7%;
}

#page #bloc-titre .coll-inner {
	width: 100%;
    background: #7746b5;
    background: -moz-linear-gradient(top,  #7746b5 0%, #7f316a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7746b5), color-stop(100%,#7f316a));
    background: -webkit-linear-gradient(top,  #7746b5 0%,#7f316a 100%);
    background: -o-linear-gradient(top,  #7746b5 0%,#7f316a 100%);
    background: -ms-linear-gradient(top,  #7746b5 0%,#7f316a 100%);
    background: linear-gradient(to bottom,  #7746b5 0%,#7f316a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7746b5', endColorstr='#7f316a',GradientType=0 );	
}

#page #bloc-titre h1 {
    font-size: 1.5em;
    font-weight: bold;
    padding: 0 40px 0 30px;
    text-align: left;
    margin-bottom: 50px;
    color:#ffffff;
}

#page #bloc-titre img {
	position: relative;
	max-width: 160%;
	left:-30%;
}

#page #bloc-titre p img {
	position: relative;
	max-width: 100%;
	left: -8rem;
    margin-right: -6rem;
}

#page #bloc-titre p {
	font-size: 1.2em;
    font-weight: bold;
    padding: 0;
    text-align: left;
    margin-bottom: 50px;
    color:#ffffff;
    padding-right: 2rem;
    padding-left: 2rem;
}

#page #bloc-inscription h1,
#page #bloc-connexion h1 {
	padding: 2rem 2rem 0.5rem;
    margin: 0;
    font-size: 1.4em;
    font-weight: bold;
    color:333333;
}

#page #form-inscription {
	background: url('img/fond-inscription.png') no-repeat left center transparent;
	background-size: 80% 100%;
	height: 70rem;
	padding-top: 3rem;
}
#page #form-connexion {
	background: url('img/fond-inscription.png') no-repeat left center transparent;
	height: 40rem;
	background-size: 77% 100%;
	padding-top: 3rem;
}

#page #form-connexion .link_inscription {
	text-align: right;
}

#page #form-inscription .col-1-3,
#page #form-connexion .col-1-3 {
	text-align: right;
}

#page #form-inscription .bloc-final,
#page #form-connexion .bloc-final {
	text-align: left;
}

#page #form-inscription input[type="text"],
#page #form-inscription input[type="password"],
#page #form-inscription select,
#page #form-connexion input[type="text"],
#page #form-connexion input[type="password"],
#page #form-connexion select {
    margin-left:2%;
    padding:0 10px;
    
    width:100%;
    color:#fff; /*#4C452E;*/
    font-size:0.8em;
    height:2.8rem;
    margin-bottom: 2rem;
    border:0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    
    background: #ddbd89; /* Old browsers */
    background: -webkit-linear-gradient(top,  #876640 0%, #ddbd89 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#876640), color-stop(100%,#ddbd89)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #876640 0%, #ddbd89 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #876640 0%,#ddbd89 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #876640 0%,#ddbd89 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #876640 0%,#ddbd89 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#876640', endColorstr='#ddbd89',GradientType=0 ); /* IE6-9 */
}

#page #form-inscription #mail,
#page #form-connexion #connexion_mail {
    /* margin-right: 0;
    border-radius: 20px 0 0 20px; */
    width: 46%;
}
#matriculemodal {
    left: 1.3rem;
    position: relative;
    top: 0.9rem;
}

#page #form-inscription #mail.mode_email,
#page #form-connexion #connexion_mail.mode_email {
    /* margin-right: 0;
    border-radius: 20px 0 0 20px; */
    border-radius: 5rem 0 0 5rem;
    width: 23%;
}

#page #form-inscription #domain-mail,
#page #form-connexion #connexion_domain-mail {
    margin-left: 0;
    border-radius: 0 20px 20px 0;
    width: 25%;
}

#page #form-inscription #equipe,
#page #form-connexion #connexion_equipe, 
#page #form-inscription #sous_equipe,
#page #form-connexion #connexion_sous_equipe,
#page #form-inscription #statut_player {
    width: 53%;
}
#page #form-inscription #sous_equipe option.hide_option,
#page #form-connexion #connexion_sous_equipe  option.hide_option {
    display: none;
}
#page #form-inscription #sous_equipe option:first-child,
#page #form-connexion #connexion_sous_equipe  option:first-child {
    display: block;
}
#page .handi_user {
	margin-left: 2.5rem;
    width: 68%;
}

#page #form-inscription input[type="password"],
#page #form-connexion input[type="password"] {
    position: relative;
    margin-bottom: 1rem;
}

#page #form-inscription label,
#page #form-connexion label {
	font-size: 1.6rem;
    font-weight: bold;
    margin-left: 2.1rem;
    color:333333;
}

#page #form-inscription div>p,
#page #form-connexion div>p {
	margin-left: 2rem;
}

#page #form-inscription #deja-inscrit,
#page #form-connexion #deja-inscrit {
	font-size: 2rem;
    font-weight: bold;
    color:333333;
    margin-top: 0rem;
}

#page #form-inscription #form-footer,
#page #form-connexion #form-footer {
    margin-top: 2rem;
}

#page #form-inscription #form-footer .aide,
#page #form-connexion #form-footer .aide {
    text-align: left;
    padding-left: 3rem;
}

#page #form-inscription #form-footer .valider,
#page #form-connexion #form-footer .valider {
    text-align: right;
    padding-right: 18rem;
}

#page #bloc-inscription .recompense,
#page #bloc-connexion .recompense {
	margin-top: 2rem;
    font-size: 1.7rem !important;
    font-weight: bold;
    line-height: 1.5rem;
    text-transform: uppercase;
}

#page #bloc-inscription .recompense .yellow,
#page #bloc-connexion .recompense .yellow {
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: none;
}

#page #bloc-inscription .group-up,
#page #bloc-connexion .group-up {
    padding-left: 3rem;
}

#page #form-inscription #deja-inscrit a,
#page #form-connexion #deja-inscrit a {
	color: #015E9F;
	text-decoration: underline;
}

#page #form-inscription #deja-inscrit a:hover, 
#page #form-inscription #deja-inscrit a:focus,
#page #form-connexion #deja-inscrit a:hover, 
#page #form-connexion #deja-inscrit a:focus {
	color: #015E9F;
	text-decoration: none;
}

#page #form-inscription button,
#page #form-connexion button {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

#page #form-inscription button:hover, 
#page #form-inscription button:focus,
#page #form-connexion button:hover, 
#page #form-connexion button:focus {
    border-color: 0;
    background: transparent;
}
.home .error {
	color: #9B0000;
}
#page #form-inscription button.btn-valider,
#page #form-connexion button.btn-valider {
	background: url('img/fond-button.png') no-repeat transparent;
	font-size: 2.5rem;
    background-size: 100%;
    font-weight: bold;
    padding: 1.5rem 1.8rem;
}
#page #form-inscription #form-footer .aide,
#page #form-connexion #deja-inscrit .aide {
	text-align: center;
}
#page #form-inscription #form-footer .aide a span,
#page #form-connexion #deja-inscrit .aide a span {
	display: block;
}

/** Header Handibirds **/
#header {
	padding: 0;
}
#header::after {
	content: "";
	background: url('img/fond_header_bottom.png') no-repeat left -119px transparent;
	display: block;
	clear: both;
	height: 23px;
}
#navigation {
    position: relative;
    border-top:4px solid #c4b2a1;
    border-left:4px solid #c4b2a1;
    border-right:4px solid #c4b2a1;
    
    background: #fffefd;
    background: -moz-linear-gradient(top,  #fffefd 0%, #e9d5a5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffefd), color-stop(100%,#e9d5a5));
    background: -webkit-linear-gradient(top,  #fffefd 0%,#e9d5a5 100%);
    background: -o-linear-gradient(top,  #fffefd 0%,#e9d5a5 100%);
    background: -ms-linear-gradient(top,  #fffefd 0%,#e9d5a5 100%);
    background: linear-gradient(to bottom,  #fffefd 0%,#e9d5a5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffefd', endColorstr='#e9d5a5',GradientType=0 );
    
    /* height:85px; */
    padding-top: 1.5rem;
}
#navigation ul {
	display: inline;
	list-style: none;
	margin: 0 0 0 1rem;
	float: left;
}
#navigation ul li {
	display: inline;
}
#navigation ul .nav-logo {
	margin-right: 3rem;
}
#navigation ul .nav-button {
	margin-right: 1rem;
}
#navigation ul .nav-button button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}
#navigation ul .nav-button a img, #navigation ul .nav-button button img {
	background: url('img/fond-bouton.png') no-repeat left top transparent;
}
#navigation ul .nav-button a:hover img, #navigation ul .nav-button a:focus img, #navigation ul .nav-button button:hover img, #navigation ul .nav-button button:focus img {
	background: url('img/fond-bouton-hover.png') no-repeat left top transparent;
}
.noscreen {
	position: absolute;
	left: -9999px;
}

/** Main Handibirds **/
.niveau h1 {
	background: url('img/fond-niveau.png') no-repeat left top transparent;
	color: #635D37;
	font-weight: bold;
	padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 3rem;
}

.niveau .illustration {
	display: block;
	width: 19rem;
    height: 16rem;
}

/** Modals Handibirds **/
.overlayer {display:none; background-color:rgba(0,0,0,0.5); position:absolute; top:0; left:0; width:100%; height:100%; position:fixed; z-index:24;}
.modalCloseButton {
	border:0;
	background: transparent;
	color: #000000;
	padding: 0;
	float:right;
	position:absolute;
	top: 0;
    right: 0;
	height:25px;
	z-index: 3;
}
#modal_aide, #modal_invite, #modal_classement, #modal_secret, #modal_parrain, #modal_retenir, #modal_gameover, #modal_cgu, #modal_matricule {
	width: 91rem;
	margin-left:auto;
	margin-right:auto;
	padding: 5px;
	border: 0;
	background-color: transparent;
	z-index:3; /* places the modal dialog on top of everything else */
	position:fixed;
	top: 15%;
    left: 25%;
	display:none;
}
.modalCloseButton:hover {
	background: transparent;
}
#modal_aide h1, #modal_invite h1, #modal_classement h1, #modal_secret h1, #modal_parrain h1, #modal_retenir h1, #modal_gameover h1, #modal_cgu h1, #modal_matricule h1 {
	background: url('img/popin-title-bg.png') no-repeat left top transparent;
	background-size: 100% 100%;
	font-weight: bold;
    text-align: center;
    font-size: 2em;
    color: #5E5E5E;
    width: 100%;
    z-index: 2;
    padding: 3rem 1rem;
    position: relative;
    margin-bottom: -1rem;
}
#modal_aide, #modal_invite, #modal_classement, #modal_secret, #modal_parrain, #modal_retenir, #modal_gameover, #modal_cgu, #modal_matricule {
	margin-right: auto;
	margin-left: auto;
	width: 80rem;
    min-width: 80rem;
    max-width: 80rem;
    top: 5rem;
}
#modal_invite {
	max-width: 600px;
}
#modal_aide .popup-content, #modal_invite .popup-content, #modal_classement .popup-content, #modal_secret .popup-content, #modal_parrain .popup-content, #modal_retenir .popup-content, #modal_gameover .popup-content, #modal_cgu .popup-content, #modal_matricule .popup-content {
    position:relative;
    z-index:1;
    
    background: #6e673f;
    background: -moz-linear-gradient(left,  #6e673f 0%, #494326 2%, #494326 98%, #6e673f 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6e673f), color-stop(2%,#494326), color-stop(98%,#494326), color-stop(100%,#6e673f));
    background: -webkit-linear-gradient(left,  #6e673f 0%,#494326 2%,#494326 98%,#6e673f 100%);
    background: -o-linear-gradient(left,  #6e673f 0%,#494326 2%,#494326 98%,#6e673f 100%);
    background: -ms-linear-gradient(left,  #6e673f 0%,#494326 2%,#494326 98%,#6e673f 100%);
    background: linear-gradient(to right,  #6e673f 0%,#494326 2%,#494326 98%,#6e673f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e673f', endColorstr='#6e673f',GradientType=1 );
    
    -moz-box-shadow: 6px 6px 12px #ddd; 
    -webkit-box-shadow: 6px 6px 12px #ddd; 
    box-shadow: 6px 6px 12px #222;
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#333333', Direction=135, Strength=12);
    
    width:93%;
    margin:-1em auto;
	min-height: 35rem;
    
    color:#fff;
}
#modal_aide .rules, #modal_invite .rules, #modal_classement .rules, #modal_secret .rules, #modal_parrain .rules, #modal_retenir .rules, #modal_gameover .rules, #modal_secret .rules, #modal_cgu .rules, #modal_matricule .rules {
    padding:2em;
    line-height:1.5em;
}
.mail-list {
	margin-top: 4rem;
}
.mail-list input[type="text"],
.mail-list input[type="email"],
.block-connect input[type="text"],
.block-connect input[type="password"],
.block-connect select,
.mail-list select {
    margin-left:2%;
    padding:0 10px;
    
    width:100%;
    color:#fff; /*#4C452E;*/
    font-size: 1.3rem;
    height:2.2em;
    
    border:0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    
    background: #ddbd89; /* Old browsers */
    background: -webkit-linear-gradient(top,  #876640 0%, #ddbd89 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#876640), color-stop(100%,#ddbd89)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #876640 0%, #ddbd89 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #876640 0%,#ddbd89 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #876640 0%,#ddbd89 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #876640 0%,#ddbd89 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#876640', endColorstr='#ddbd89',GradientType=0 ); /* IE6-9 */
}
select option {background:#876640;}

.table-mail-list {width:70%; margin:0 auto;}
.table-mail-list tr {height:2.7em;}
.double-mail .input-wrapper {width:110px; margin-right:0;}
.double-mail input.short-input {
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
    -moz-border-top-right-radius:0;
    -moz-border-radius-bottomright:0;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    width:70px;
}
.popup-invite .popup-title span {font-size: 0.8em;}
.popup-invite .double-mail input.short-input {width:150px;}
.double-mail select.short-select {
    -webkit-border-top-left-radius:0;
    -webkit-border-bottom-left-radius:0;
    -moz-border-top-left-radius:0;
    -moz-border-radius-bottomleft:0;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    width:120px;
    padding:2px;
    margin-left:0;
}
.double-mail span {width:inherit !important;}
.popup-invite .double-mail select.short-select {width:175px;}
.popup-invite .double-mail input.short-input {
    width: 150px;
}
#modal_retenir p {
    max-height: 25rem;
    overflow: auto;
}
#modal_invite p {
	font-size: 1.7rem;
}
#modal_invite .action-buttons {
	text-align: center;
	margin: 6rem 0 2rem;
}
#modal_invite .action-buttons button {
	background: url('img/fond-button.png') no-repeat left top transparent;
	border: 0;
	font-size: 2.8rem;
	padding-left: 3rem;
    padding-right: 3.5rem;
}
#modal_classement, #modal_classement p {
	font-size: 1.7rem;
}
#modal_classement strong {
	color: #f38503;
    font-weight: normal;
}
#modal_classement .centered {
    text-align: center;
    font-size: 1.7rem;
}
#modal_classement a {
	color: #ffffff;
	font-size: 1.7rem;
}
#modal_classement .score_par {
	text-align: right;
	margin-bottom: 1rem;
}
#modal_classement .score_par ul {
	padding-left: 0.5rem;
	margin: 0;
	display: inline-block;
	list-style: none;
}
#modal_classement .score_par ul li {
	display: inline-block;
	list-style: none;
}
#modal_classement .score_par ul li button {
	border: 0;
	padding: 0 0.5rem;
	margin: 0;
	font-size: 1.3rem;
	background: transparent;
	text-decoration: underline;
}
table.ranking {
    text-align:center;
    width:98%;
    margin:0 auto;
    border-collapse:separate;
    border-spacing:3px;
}
table.ranking tr {}
table.ranking th {text-align:center; font-size:1em; font-weight:normal;}
table.ranking td {
    line-height:1.3em;
    height:2.6em;
    font-size:1.3rem;
    font-family:Arial, cursive;
    padding: 2px 15px;
    text-align:right;
    vertical-align: middle;
    
    background: #ddbd89; /* Old browsers */
    background: -webkit-linear-gradient(top,  #876640 0%, #ddbd89 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#876640), color-stop(100%,#ddbd89)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #876640 0%, #ddbd89 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #876640 0%,#ddbd89 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #876640 0%,#ddbd89 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #876640 0%,#ddbd89 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#876640', endColorstr='#ddbd89',GradientType=0 ); /* IE6-9 */
}
table.ranking td:nth-child(1),
table.ranking th:nth-child(1) {text-align:left;}
table.ranking td:first-child {
    -webkit-border-radius: 25px 0 0 25px;
    -moz-border-radius: 25px 0 0 25px;
    border-radius: 25px 0 0 25px;
}
table.ranking td:last-child {
    -webkit-border-radius: 0 25px 25px 0;
    -moz-border-radius: 0 25px 25px 0;
    border-radius: 0 25px 25px 0;
}

table.ranking.ranking-ply td {text-align:center;}
table.ranking.ranking-ply td:nth-child(1),
table.ranking.ranking-ply th:nth-child(1) {text-align:center;}
table.ranking.ranking-ply td:last-child {text-align:right;}

.paging {text-align:center;}
ul.pading-list {list-style:none; display:inline-block; margin:0; padding:0;}
ul.pading-list li {float:left; width:18px; margin:0; padding-top:2px;}
ul.pading-list li a {text-decoration:none; color:#fff;}
ul.pading-list li a.selected {cursor:default;}
ul.pading-list li a.selected,
ul.pading-list li a:hover,
ul.pading-list li a:active {color:#f38503;}

.paging a.arrow {
    display: inline-block; width: 14px; height: 24px;
    background:url('img/buttons.png') no-repeat;
    background-position:-74px -318px;
}
.paging a.next {background-position:-88px -318px;}
#modal_classement .pagination {text-align:center; padding:0.1em;}
#modal_classement a.lnk-page {font-weight:bold; cursor:pointer;}
#modal_classement a.lnk-page {margin:0 5px;}
#modal_classement a.lnk-page.active {cursor:default; color:#f38503;}
#modal_classement a.lnk-page.arrow {}
#modal_classement a.lnk-page.arrow.first {}
#modal_classement a.lnk-page.arrow.last {}

#modal_classement a.lnk-page.arrow.active {display:none;}

#modal_classement caption { position: absolute; left: -9999px; }

#modal_classement .rules {
	max-height: 50rem;
    overflow: auto;
}

.life {display:inline-block; margin:2px auto;}
.life .heart {
    background:url('img/sprites.png') -839px -1443px no-repeat;
    width:22px; height:19px;
    float:left;
    margin:0 0.3em;
}
.fr_FR .life .heart {background-image:url('img/sprites.fr_FR.png');}
.en_US .life .heart {background-image:url('img/sprites.en_US.png');}
.life .heart.on {
    background-position: -817px -1443px;
}
.menu-name {
    float:left;
    margin: 1rem 1rem 0 0;
    width: 24%;
    line-height:1.5em;
    padding-left:5px;
    text-align: center;
}
.menu-niveau { 
	width: 10rem;
	text-align: center;
    font-size: 1.8rem;
    color: #fff;
    font-weight: bold;
    padding: 0.5rem 2rem 0 0;
    text-shadow: 0 0 5px #000000;
}
.menu-name .icon {
    display:inline-block;
    width:13px; height:20px;
    background:url('img/sprites.png') -804px -1443px no-repeat;
    margin-right:2px;
    margin-bottom:-2px;
}
#navigation .menu-questions ul {
	margin-right:5rem;
}
.menu-questions ul li {
	background: rgba(0, 0, 0, 0) url("img/sprites.png") no-repeat scroll -86px -265px;
    color: #fff;
    float: left;
    font-size: 0.8em;
    height: 41px;
    line-height: 46px;
    margin: 0 1rem;
    width: 43px;
    padding-left: 1.5rem;
    padding-top: 0.2rem;
    font-weight: bold;
    font-size: 1.3rem;
    text-shadow: 0.125rem 0.125rem 0.25rem #000000, -0.125rem 0.125rem 0.25rem #000000, 0.125rem -0.125rem 0.25rem #000000, -0.125rem -0.125rem 0.25rem #000000;
}
.menu-questions ul li.ko {
	background: rgba(0, 0, 0, 0) url("img/sprites.png") no-repeat scroll -43px -265px;
}
.menu-questions ul li.ok {
	background: rgba(0, 0, 0, 0) url("img/sprites.png") no-repeat scroll 0px -265px;
}
.menu-score {
    font-size: 1.5em;
    margin-top:1rem;
    float:left;
    margin-right:20px;
    font-weight: bold;
    color: #FFFFFF;
}
.menu-score span {
    font-size: 1.8rem;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0.125rem 0.125rem 0.25rem #000000, -0.125rem 0.125rem 0.25rem #000000, 0.125rem -0.125rem 0.25rem #000000, -0.125rem -0.125rem 0.25rem #000000;
}
span.score {
    margin-left:10px;
    text-align:right;
    display:inline-block;
    color:#fff;
    min-width:150px;
    line-height:35px;
    padding-right:15px;
    
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    
    background: #ddbd89; /* Old browsers */
    background: -webkit-linear-gradient(top,  #876640 0%, #ddbd89 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#876640), color-stop(100%,#ddbd89)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #876640 0%, #ddbd89 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #876640 0%,#ddbd89 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #876640 0%,#ddbd89 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #876640 0%,#ddbd89 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#876640', endColorstr='#ddbd89',GradientType=0 ); /* IE6-9 */
}
#niveaux {
	margin: 5rem 5rem;
	/*background: url('img/chemin.png') no-repeat center 4rem transparent;*/
	min-height: 25rem;
}
#niveaux .niveau {
	float: left;
	width: 33%;
	height: 30rem;
}
#niveaux .niveau:nth-child(2) span.chemin, #niveaux .niveau:nth-child(5) span.chemin, #niveaux .niveau:nth-child(8) span.chemin, #niveaux .niveau:nth-child(11) span.chemin, #niveaux .niveau:nth-child(14) span.chemin {
	background: url('img/chemin01.png') no-repeat center 4rem transparent;
	display: block;
    position: absolute;
    width: 35rem;
    height: 16rem;
    margin-left: -15rem;
    margin-top: -5rem;
    z-index: 1;
}
#niveaux .niveau:nth-child(3) span.chemin, #niveaux .niveau:nth-child(6) span.chemin, #niveaux .niveau:nth-child(9) span.chemin, #niveaux .niveau:nth-child(12) span.chemin, #niveaux .niveau:nth-child(15) span.chemin {
	background: url('img/chemin02.png') no-repeat center 4rem transparent;
	display: block;
    position: absolute;
    width: 35rem;
    height: 16rem;
    margin-left: -17rem;
    margin-top: -1rem;
    z-index: 1;
}
#niveaux .niveau:nth-child(4) span.chemin, #niveaux .niveau:nth-child(7) span.chemin, #niveaux .niveau:nth-child(10) span.chemin, #niveaux .niveau:nth-child(13) span.chemin, #niveaux .niveau:nth-child(16) span.chemin {
	background: url('img/chemin03.png') no-repeat center 4rem transparent;
	display: block;
    position: absolute;
    width: 71rem;
    height: 37rem;
    margin-left: 13rem;
    margin-top: -22rem;
    z-index: 1;
}
#niveaux .niveau:nth-child(2), #niveaux .niveau:nth-child(5), #niveaux .niveau:nth-child(8) {
	padding-top: 5rem;
}
#niveaux .niveau .illustration, #niveaux .niveau h1 {
	margin-left: auto;
    margin-right: auto;
    z-index: 2;
    position: relative;
}
#niveaux .niveau h1 {
	width: 20rem;
	margin-top: -3rem;
}
#jouer {
	width: 100%;
	text-align: center;
	height: 53px;
	margin-top: 5rem;
}
#jouer button, #jouer a {
	border: 0;
	background: url('img/fond-button-vert.png') no-repeat top left #00751D;
	border-radius: 5rem;
	font-size: 2.5rem;
	font-weight: bold;
	padding: 13px 23px;
	margin:auto;
	color: #ffffff;
}
#modal_gameover .action-buttons button {
	border: 0;
	background: #00751D;
	border-radius: 5rem;
	font-size: 2.5rem;
	font-weight: bold;
	padding: 13px 23px;
	margin:auto;
	color: #ffffff;
}
#jouer a:hover {
	background: url('img/fond-button-vert.png') no-repeat top left #00751D;
	color: #ffffff;
}

/** Question **/
#question {
	margin: -2rem;
	background-size: 100% 100% !important;
	min-height: 70rem;
}
.etape #header::after {
	background: url('img/fond_header_bottom.png') no-repeat left -72px #FFF65D;
}
.etape #navigation {
    border-top: 4px solid #C5BB2F;
    border-left: 4px solid #C5BB2F;
    border-right: 4px solid #C5BB2F;
    background: #AD902C;
    background: -moz-linear-gradient(top, #DCBB83 0%, #AD902C 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DCBB83), color-stop(100%,#AD902C));
    background: -webkit-linear-gradient(top, #DCBB83 0%,#AD902C 100%);
    background: -o-linear-gradient(top, #DCBB83 0%,#AD902C 100%);
    background: -ms-linear-gradient(top, #DCBB83 0%,#AD902C 100%);
    background: linear-gradient(to bottom, #DCBB83 0%,#AD902C 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DCBB83', endColorstr='#AD902C',GradientType=0 );
}

/** Couleur des niveaux **/
.niveau-orange #header {
	background-color: #FFC774;
}
.niveau-orange #header::after {
	background: url('img/fond_header_bottom.png') no-repeat left -24px #FFC774;
}
.niveau-orange #header #navigation {
    border-top: 4px solid #CC6814;
    border-left: 4px solid #CC6814;
    border-right: 4px solid #CC6814;
    background: #DB7D1C;
    background: -moz-linear-gradient(top, #EEBE8E 0%, #DB7D1C 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EEBE8E), color-stop(100%,#DB7D1C));
    background: -webkit-linear-gradient(top, #EEBE8E 0%,#DB7D1C 100%);
    background: -o-linear-gradient(top, #EEBE8E 0%,#DB7D1C 100%);
    background: -ms-linear-gradient(top, #EEBE8E 0%,#DB7D1C 100%);
    background: linear-gradient(to bottom, #EEBE8E 0%,#DB7D1C 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EEBE8E', endColorstr='#DB7D1C',GradientType=0 );
}
.niveau-mauve #header {
	background-color: #8476EF;
}
.niveau-mauve #header::after {
	background: url('img/fond_header_bottom.png') no-repeat left 0px #8476EF;
}
.niveau-mauve #header #navigation {
    border-top: 4px solid #383485;
    border-left: 4px solid #383485;
    border-right: 4px solid #383485;
    background: #4F43AB;
    background: -moz-linear-gradient(top, #A8A2D6 0%, #4F43AB 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A8A2D6), color-stop(100%,#4F43AB));
    background: -webkit-linear-gradient(top, #A8A2D6 0%,#4F43AB 100%);
    background: -o-linear-gradient(top, #A8A2D6 0%,#4F43AB 100%);
    background: -ms-linear-gradient(top, #A8A2D6 0%,#4F43AB 100%);
    background: linear-gradient(to bottom, #A8A2D6 0%,#4F43AB 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A8A2D6', endColorstr='#4F43AB',GradientType=0 );
}
.niveau-bleu #header {
	background-color: #79aefc;
}
.niveau-bleu #header::after {
	background: url('img/fond_header_bottom.png') no-repeat left -48px #79aefc;
}
.niveau-bleu #header #navigation {
    border-top: 4px solid #EEEEEE;
    border-left: 4px solid #EEEEEE;
    border-right: 4px solid #EEEEEE;
    background: #367BA2;
    background: -moz-linear-gradient(top, #9BBED1 0%, #367BA2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9BBED1), color-stop(100%,#367BA2));
    background: -webkit-linear-gradient(top, #9BBED1 0%,#367BA2 100%);
    background: -o-linear-gradient(top, #9BBED1 0%,#367BA2 100%);
    background: -ms-linear-gradient(top, #9BBED1 0%,#367BA2 100%);
    background: linear-gradient(to bottom, #9BBED1 0%,#367BA2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9BBED1', endColorstr='#367BA2',GradientType=0 );
}
.niveau-jaune #header {
	background-color: #FFF65D;
}
.niveau-jaune #header::after {
	background: url('img/fond_header_bottom.png') no-repeat left -72px #FFF65D;
}
.niveau-jaune #header #navigation {
    border-top: 4px solid #C0B626;
    border-left: 4px solid #C0B626;
    border-right: 4px solid #C0B626;
    background: #AD902C;
    background: -moz-linear-gradient(top, #D6C896 0%, #AD902C 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D6C896), color-stop(100%,#AD902C));
    background: -webkit-linear-gradient(top, #D6C896 0%,#AD902C 100%);
    background: -o-linear-gradient(top, #D6C896 0%,#AD902C 100%);
    background: -ms-linear-gradient(top, #D6C896 0%,#AD902C 100%);
    background: linear-gradient(to bottom, #D6C896 0%,#AD902C 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D6C896', endColorstr='#AD902C',GradientType=0 );
}
.niveau-vert #header {
	background-color: #90D988;
}
.niveau-vert #header::after {
	background: url('img/fond_header_bottom.png') no-repeat left -96px #90D988;
}
.niveau-vert #header #navigation {
    border-top: 4px solid #3DA762;
    border-left: 4px solid #3DA762;
    border-right: 4px solid #3DA762;
    background: #3B9F60;
    background: -moz-linear-gradient(top, #9ED0B0 0%, #3B9F60 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ED0B0), color-stop(100%,#3B9F60));
    background: -webkit-linear-gradient(top, #9ED0B0 0%,#3B9F60 100%);
    background: -o-linear-gradient(top, #9ED0B0 0%,#3B9F60 100%);
    background: -ms-linear-gradient(top, #9ED0B0 0%,#3B9F60 100%);
    background: linear-gradient(to bottom, #9ED0B0 0%,#3B9F60 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ED0B0', endColorstr='#3B9F60',GradientType=0 );
}
.niveau-blanc #header {
	background-color: transparent;
}
.niveau-blanc #header::after {
	background: url('img/fond_header_bottom.png') no-repeat left -120px transparent;
}
.niveau-blanc #header #navigation {
    border-top:4px solid #c4b2a1;
    border-left:4px solid #c4b2a1;
    border-right:4px solid #c4b2a1;
    background: #fffefd;
    background: -moz-linear-gradient(top,  #fffefd 0%, #e9d5a5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffefd), color-stop(100%,#e9d5a5));
    background: -webkit-linear-gradient(top,  #fffefd 0%,#e9d5a5 100%);
    background: -o-linear-gradient(top,  #fffefd 0%,#e9d5a5 100%);
    background: -ms-linear-gradient(top,  #fffefd 0%,#e9d5a5 100%);
    background: linear-gradient(to bottom,  #fffefd 0%,#e9d5a5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffefd', endColorstr='#e9d5a5',GradientType=0 );
}


.niveau-jaune #header #navigation span.score { 
	background: #b9ac73; /* Old browsers */
    background: -webkit-linear-gradient(top,  #736437 0%, #b9ac73 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#736437), color-stop(100%,#b9ac73)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #736437 0%, #b9ac73 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #736437 0%,#b9ac73 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #736437 0%,#b9ac73 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #736437 0%,#b9ac73 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#736437', endColorstr='#b9ac73',GradientType=0 ); /* IE6-9 */
}
.niveau-orange #header #navigation span.score { 
	background: #dc7335; /* Old browsers */
    background: -webkit-linear-gradient(top,  #943709 0%, #dc7335 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#943709), color-stop(100%,#dc7335)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #943709 0%, #dc7335 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #943709 0%,#dc7335 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #943709 0%,#dc7335 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #943709 0%,#dc7335 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#943709', endColorstr='#dc7335',GradientType=0 ); /* IE6-9 */
}
.niveau-bleu #header #navigation span.score { 
	background: #4e96c9; /* Old browsers */
    background: -webkit-linear-gradient(top,  #1b3c69 0%, #4e96c9 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b3c69), color-stop(100%,#4e96c9)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #1b3c69 0%, #4e96c9 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #1b3c69 0%,#4e96c9 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #1b3c69 0%,#4e96c9 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #1b3c69 0%,#4e96c9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b3c69', endColorstr='#4e96c9',GradientType=0 ); /* IE6-9 */
}
.niveau-vert #header #navigation span.score { 
	background: #3dc771; /* Old browsers */
    background: -webkit-linear-gradient(top,  #05411b 0%, #3dc771 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05411b), color-stop(100%,#3dc771)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #05411b 0%, #3dc771 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #05411b 0%,#3dc771 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #05411b 0%,#3dc771 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #05411b 0%,#3dc771 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05411b', endColorstr='#3dc771',GradientType=0 ); /* IE6-9 */
}
.niveau-mauve #header #navigation span.score { 
	background: #6447df; /* Old browsers */
    background: -webkit-linear-gradient(top,  #2c2162 0%, #6447df 100%); /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c2162), color-stop(100%,#6447df)); /* Chrome,Safari4+ */
    background: -moz-linear-gradient(top,  #2c2162 0%, #6447df 100%); /* FF3.6+ */
    background: -ms-linear-gradient(top,  #2c2162 0%,#6447df 100%); /* IE10+ */
    background: -o-linear-gradient(top,  #2c2162 0%,#6447df 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #2c2162 0%,#6447df 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2162', endColorstr='#6447df',GradientType=0 ); /* IE6-9 */
}
.niveau-mauve #navigation ul .nav-button a img { background: url('img/fond-bouton-mauve.png') no-repeat left top transparent; }
.niveau-mauve #navigation ul .nav-button a:hover img, 
.niveau-mauve #navigation ul .nav-button a:focus img { background: url('img/fond-bouton-mauve-hover.png') no-repeat left top transparent; }
.niveau-orange #navigation ul .nav-button a img { background: url('img/fond-bouton-orange.png') no-repeat left top transparent; }
.niveau-orange #navigation ul .nav-button a:hover img, 
.niveau-orange #navigation ul .nav-button a:focus img { background: url('img/fond-bouton-orange-hover.png') no-repeat left top transparent; }
.niveau-bleu #navigation ul .nav-button a img { background: url('img/fond-bouton-bleu.png') no-repeat left top transparent; }
.niveau-bleu #navigation ul .nav-button a:hover img, 
.niveau-bleu #navigation ul .nav-button a:focus img { background: url('img/fond-bouton-bleu-hover.png') no-repeat left top transparent; }
.niveau-jaune #navigation ul .nav-button a img { background: url('img/fond-bouton-jaune.png') no-repeat left top transparent; }
.niveau-jaune #navigation ul .nav-button a:hover img, 
.niveau-jaune #navigation ul .nav-button a:focus img { background: url('img/fond-bouton-jaune-hover.png') no-repeat left top transparent; }
.niveau-vert #navigation ul .nav-button a img { background: url('img/fond-bouton-vert.png') no-repeat left top transparent; }
.niveau-vert #navigation ul .nav-button a:hover img, 
.niveau-vert #navigation ul .nav-button a:focus img { background: url('img/fond-bouton-vert-hover.png') no-repeat left top transparent; }

.niveau-mauve #navigation ul .nav-button button img { background: url('img/fond-bouton-mauve.png') no-repeat left top transparent; }
.niveau-mauve #navigation ul .nav-button button:hover img, 
.niveau-mauve #navigation ul .nav-button button:focus img { background: url('img/fond-bouton-mauve-hover.png') no-repeat left top transparent; }
.niveau-orange #navigation ul .nav-button button img { background: url('img/fond-bouton-orange.png') no-repeat left top transparent; }
.niveau-orange #navigation ul .nav-button button:hover img, 
.niveau-orange #navigation ul .nav-button button:focus img { background: url('img/fond-bouton-orange-hover.png') no-repeat left top transparent; }
.niveau-bleu #navigation ul .nav-button button img { background: url('img/fond-bouton-bleu.png') no-repeat left top transparent; }
.niveau-bleu #navigation ul .nav-button button:hover img, 
.niveau-bleu #navigation ul .nav-button button:focus img { background: url('img/fond-bouton-bleu-hover.png') no-repeat left top transparent; }
.niveau-jaune #navigation ul .nav-button button img { background: url('img/fond-bouton-jaune.png') no-repeat left top transparent; }
.niveau-jaune #navigation ul .nav-button button:hover img, 
.niveau-jaune #navigation ul .nav-button button:focus img { background: url('img/fond-bouton-jaune-hover.png') no-repeat left top transparent; }
.niveau-vert #navigation ul .nav-button button img { background: url('img/fond-bouton-vert.png') no-repeat left top transparent; }
.niveau-vert #navigation ul .nav-button button:hover img, 
.niveau-vert #navigation ul .nav-button button:focus img { background: url('img/fond-bouton-vert-hover.png') no-repeat left top transparent; }

/** La question **/
.not_display {
	display: none;
}
#question .the_question {
	background : rgba(0, 0, 0, 0.7);
    min-height: 70rem;
}   
#question .the_question .level {
	margin-top: 4rem;
    margin-left: 3rem;
    display: block;
    font-size: 3rem;
    color: #ffffff;
    text-shadow: 0 0 5px #000000;
    width: 80%;
} 
#question .the_question h1 {
	padding-top: 2rem;
    padding-bottom: 0rem;
    margin-left: 3rem;
    margin-bottom: 0;
    display: block;
    font-size: 2.2rem;
    color: #ffffff;
    text-shadow: 0 0 5px #000000;
    width: 80%;
    float: left;
    font-weight: bold;
}
#question .the_question fieldset {
	float: left;
}
#question .the_question .result {
	padding-top: 1rem;
	padding-bottom: 2rem;
    margin-left: 3rem;
    display: block;
    font-size: 2.2rem;
    color: #ffffff;
    text-shadow: 0 0 5px #000000;
	width: 45%;
    margin-top: 3rem;
    float: left;
    font-weight: bold;
    min-height: 3rem;
} 
#question .the_question #error_validate {
	padding-top: 1rem;
    margin-left: 3rem;
    font-size: 2.2rem;
    color: #ffffff;
    text-shadow: 0 0 5px #000000;
	width: 80%;
    margin-top: 3rem;
    float: left;
    font-weight: bold;
    min-height: 3rem;
    margin-bottom: 0;
    margin-top: 0;
} 
#question .the_question .bird.wrong {
	background: url("img/wrong-bird.png") no-repeat 100% 100% transparent;
	background-size: 100%;
	width: 10rem;
    height: 10rem;
    display: none;
    float: right;
    margin-right: 10rem;
}
#question .the_question .bird.right {
	background: url("img/right-bird.png") no-repeat 100% 100% transparent;
	background-size: 100%;
	width: 13rem;
    height: 13rem;
    display: none;
    float: right;
    margin-right: 10rem;
}
#question .the_question .flash {
	display:block;
	background: url("img/flash.gif") no-repeat 100% 100% transparent;
	background-size: 100%;
	-webkit-transform:translateX(600px) translateY(85px);
	-moz-transform:translateX(600px) translateY(85px);
	-ms-transform:translateX(600px) translateY(85px);
	-o-transform:translateX(600px) translateY(85px);
	transform:translateX(600px) translateY(85px);
	width:25rem;
	height: 25rem;
	position: absolute;
}
#question .the_question .win1 .flash {
	display:block;
	background: url("img/flash.gif") no-repeat 100% 100% transparent;
	background-size: 100%;
	-webkit-transform:translateX(800px) translateY(85px);
	-moz-transform:translateX(800px) translateY(85px);
	-ms-transform:translateX(800px) translateY(85px);
	-o-transform:translateX(800px) translateY(85px);
	transform:translateX(800px) translateY(85px);
	width:25rem;
	height: 25rem;
	position: absolute;
}
#question .the_question .win2 .flash {
	display:block;
	background: url("img/flash.gif") no-repeat 100% 100% transparent;
	background-size: 100%;
	-webkit-transform:translateX(600px) translateY(250px);
	-moz-transform:translateX(600px) translateY(250px);
	-ms-transform:translateX(600px) translateY(250px);
	-o-transform:translateX(600px) translateY(250px);
	transform:translateX(600px) translateY(250px);
	width:25rem;
	height: 25rem;
	position: absolute;
}
#question .the_question .win3 .flash {
	display:block;
	background: url("img/flash.gif") no-repeat 100% 100% transparent;
	background-size: 100%;
	-webkit-transform:translateX(800px) translateY(250px);
	-moz-transform:translateX(800px) translateY(250px);
	-ms-transform:translateX(800px) translateY(250px);
	-o-transform:translateX(800px) translateY(250px);
	transform:translateX(800px) translateY(250px);
	width:25rem;
	height: 25rem;
	position: absolute;
}
#question .the_question .coupe {
	display:block;
	background: url("img/coupe.gif") no-repeat 100% 100% transparent;
	background-size: 100%;
	-webkit-transform:translateX(700px) translateY(100px);
	-moz-transform:translateX(700px) translateY(100px);
	-ms-transform:translateX(700px) translateY(100px);
	-o-transform:translateX(700px) translateY(100px);
	transform:translateX(700px) translateY(100px);
	width:25rem;
	height: 25rem;
	position: absolute;
}
#question .the_question h1 legend {
	font-size: 1.8rem;
	width: 100%;
}
#question .the_question h1 legend.niveau_termine {
	font-size: 4rem;
    font-weight: normal;
    margin-bottom: 6rem;
    margin-top: 2rem;
    line-height: 4.5rem;
}
#question .reponses {
    background-image: url("img/bg/answers-lvl-1.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 1.2em;
    margin-left: 8px;
    padding-bottom: 75px;
    position: relative;
    text-align: center;
    width: 80%;
    float: left;
}
.niveau-orange #question .reponses {
    background-image: url("img/bg/answers-lvl-2.png");
}
.niveau-mauve #question .reponses {
    background-image: url("img/bg/answers-lvl-5.png");
}
.niveau-bleu #question .reponses {
    background-image: url("img/bg/answers-lvl-3.png");
}
.niveau-jaune #question .reponses {
    background-image: url("img/bg/answers-lvl-1.png");
}
.niveau-vert #question .reponses {
    background-image: url("img/bg/answers-lvl-4.png");
}
#question .reponses .reponse { 
	display: block;
    margin: 0;
    min-height: 20rem;
    padding: 30px 25px 5px;
    text-align: left; 
    color: #ffffff;
    /*text-shadow: 0.125rem 0.125rem 3px #000000, -0.125rem 0.125rem 3px #000000, 0.125rem -0.125rem 3px #000000, -0.125rem -0.125rem 3px #000000;*/
    font-size: 1.6rem;
}

#question button {
	background: url('img/fond-button.png') no-repeat left top transparent;
    background-size: 100% 100%;
    border: 0;
    font-size: 2.2rem;
    padding: 15px 25px 20px;
    float: right;
    margin-right: 21%;
    position: relative;
    top: -7.5rem;
    text-shadow: 0 0 5px #000000;
}
#modal_retenir .inviter {
	width: 100%;
	text-align: center;
}
#modal_retenir .inviter button {
	background: url('img/fond-button.png') no-repeat left top transparent;
    background-size: 100% 100%;
    border: 0;
    font-size: 2.2rem;
    padding: 15px 25px 20px;
    text-shadow: 0 0 5px #000000;
}
#question button:hover, #question .reponses button:focus {
	background: url('img/fond-button-hover.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-orange #question button {
	background: url('img/fond-button-orange.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-orange #question button:hover, 
.niveau-orange #question button:focus {
	background: url('img/fond-button-orange-hover.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-mauve #question button {
	background: url('img/fond-button-mauve.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-mauve #question button:hover, 
.niveau-mauve #question button:focus {
	background: url('img/fond-button-mauve-hover.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-bleu #question button {
	background: url('img/fond-button-bleu.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-bleu #question button:hover, 
.niveau-bleu #question button:focus {
	background: url('img/fond-button-bleu-hover.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-vert #question button {
	background: url('img/fond-button-vert.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-vert #question button:hover, 
.niveau-vert #question button:focus {
	background: url('img/fond-button-vert-hover.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-jaune #question button {
	background: url('img/fond-button-jaune.png') no-repeat left top transparent;
    background-size: 100% 100%;
}
.niveau-jaune #question button:hover, 
.niveau-jaune #question button:focus {
	background: url('img/fond-button-jaune-hover.png') no-repeat left top transparent;
    background-size: 100% 100%;
}

.qna-chrono {
    float: none;
    background-color: #fff;
    border-radius: 25px;
    height: 368px;
    width: 34px;
    position: relative;
    margin-left: 90%;
}
.qna-chrono-top {
    border-radius: 25px 25px 0 0;
    height: 334px;
    margin: 3px auto 0;
    position: relative;
    width: 28px;
}
progress{
    display: inline-block;
    position: absolute;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: transparent; 
    background: -webkit-linear-gradient(transparent,transparent);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    border: 0 solid rgba(0,0,0,.5);
    border-radius: 25px 0 0 25px;
    box-shadow: 0 0 0 rgba(255,255,255,.2);   
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.niveau-bleu progress::-moz-progress-bar{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #7db9da;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;
  
}

/* Style de la barre pour Chrome*/
.niveau-bleu progress::-webkit-progress-value{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #7db9da;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;

}
.niveau-jaune progress::-moz-progress-bar{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ddbc84;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;
  
}

/* Style de la barre pour Chrome*/
.niveau-jaune progress::-webkit-progress-value{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ddbc84;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;

}
.niveau-orange progress::-moz-progress-bar{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #f7ab4b;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;
  
}

/* Style de la barre pour Chrome*/
.niveau-orange progress::-webkit-progress-value{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #f7ab4b;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;

}
.niveau-vert progress::-moz-progress-bar{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #6fc690;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;
  
}

/* Style de la barre pour Chrome*/
.niveau-vert progress::-webkit-progress-value{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #6fc690;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;

}
.niveau-mauve progress::-moz-progress-bar{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #bab4df;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;
  
}

/* Style de la barre pour Chrome*/
.niveau-mauve progress::-webkit-progress-value{
   
    border-radius:25px 0 0 25px;
    background: transparent;
    background: 
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #bab4df;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 0 0 rgba(255,255,255,.5) inset, 
                0 0 0 rgba(0,0,0,.8) inset,
                0 0 0 black;

}
.niveau-jaune .qna-chrono-bottom {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #ddbc84 0%, #ad902c 100%) repeat scroll 0 0;
}
.niveau-orange .qna-chrono-bottom {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #f7ab4b 0%, #db7d1c 100%) repeat scroll 0 0;
} 
.niveau-bleu .qna-chrono-bottom {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #7db9da 0%, #367ba2 100%) repeat scroll 0 0;
} 
.niveau-vert .qna-chrono-bottom {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #6fc690 0%, #3b9f60 100%) repeat scroll 0 0;
}
.niveau-mauve .qna-chrono-bottom {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #bab4df 0%, #4f43ab 100%) repeat scroll 0 0;
}
.qna-decompte {
    color: #fff;
    font-size: 1.5em;
    position: absolute;
    text-align: center;
    top: -30px;
    width: 34px;
}
.qna-decompte .decompte {
    font-size: 2rem;
}
.qna-chrono-progress {
    background-color: #fff;
    border-radius: 25px 0 0 25px;
    height: 28px;
    width: 330px;
    left: -151px;
    top: 155px;
    padding: 0;
    border: 0;
}
progress.qna-chrono-progress::-webkit-progress-bar{
    background: transparent;
}
.qna-chrono-progress-point {
    background: transparent url("img/bg/bg-chrono.png") no-repeat scroll right bottom;
    height: 23px;
    width: 28px;
}
.qna-chrono-bottom {
    border-radius: 0 0 25px 25px;
    height: 27px;
    margin: 3px auto;
    padding-top: 4px;
    width: 28px;
}
.qna-chrono-icon {
    background: rgba(0, 0, 0, 0) url("img/quizz-sprites.png") no-repeat scroll -552px -145px;
    height: 19px;
    margin: 0 auto;
    padding-top: 10px;
    width: 16px;
}
.reponses .les_propositions ul {
	padding: 0;
	margin: 0;
}
.reponses .les_propositions ul li {
	list-style: none;
	margin-bottom: 2rem;
}
.reponses .les_propositions ul li .checkbox_simulee {
	background: url("img/fond-bouton-orange.png") no-repeat top left transparent;
	background-size: 100% 100%;
	display: inline-block;
	width: 5rem;
	min-height: 5rem;
  	cursor: pointer;
  	margin-right: 1rem;
  	float: left;
}
.reponses .les_propositions ul li label { 
	padding-left: 1rem;
	min-height: 5rem;
	width: 100%;
	display: block;
}
.reponses .les_propositions ul li label .label_reponse {
	display: inline-block;
	min-height: 5rem;
	line-height: 5rem;
	text-align:left;
	width: 75%;
}
.reponses .les_propositions ul li label .label_reponse span {
	width: 100%;
    vertical-align: middle;
    display: inline-block;
    line-height: normal;
    font-weight: bold;
    letter-spacing: 0.1rem;    
}
.reponses .les_propositions ul li input {
	position: absolute;
	left: -9999px;
}
.reponses .les_propositions ul li label.checkbox-selected .checkbox_simulee {
	box-shadow: 0.3rem 0.3rem 0.3rem #000000, -0.3rem 0.3rem 0.3rem #000000, 0.3rem -0.3rem 0.3rem #000000, -0.3rem -0.3rem 0.3rem #000000;
    border-radius: 5rem;
}
.niveau-orange .reponses .les_propositions ul li .checkbox_simulee {
	background: url("img/fond-bouton-orange.png") no-repeat top left transparent;
	background-size: 100% 100%;
}
.niveau-mauve .reponses .les_propositions ul li .checkbox_simulee {
	background: url("img/fond-bouton-mauve.png") no-repeat top left transparent;
	background-size: 100% 100%;
}
.niveau-bleu .reponses .les_propositions ul li .checkbox_simulee {
	background: url("img/fond-bouton-bleu.png") no-repeat top left transparent;
	background-size: 100% 100%;
}
.niveau-jaune .reponses .les_propositions ul li .checkbox_simulee {
	background: url("img/fond-bouton-jaune.png") no-repeat top left transparent;
	background-size: 100% 100%;
}
.niveau-vert .reponses .les_propositions ul li .checkbox_simulee {
	background: url("img/fond-bouton-vert.png") no-repeat top left transparent;
	background-size: 100% 100%;
}
.reponses .les_propositions ul li .checkbox_simulee.checked-true {
	background: url("img/fond-bouton-checked.png") no-repeat top left transparent;
	background-size: 100% 100%;
}
.reponses .la_resp {
	font-size: 1.6rem;
	display: none;
}
#next_submit, #next_valid_niveau, #next_question_q1 {
	display: none;
}
/** L'idée reçu **/
.idee_recu #wall { 
	background: url('img/wall.png') no-repeat left top transparent; 
	background-size: 100% 100%;
	width: 40rem;
    height: 40rem;
    margin: 10rem auto 0;
}
.idee_recu #wall.win1 { 
	background: url('img/wall-1.png') no-repeat left top transparent; 
	background-size: 100% 100%;
}
.idee_recu #wall.win2 { 
	background: url('img/wall-2.png') no-repeat left top transparent; 
	background-size: 100% 100%;
}
.idee_recu #wall.win3 { 
	background: url('img/wall-3.png') no-repeat left top transparent; 
	background-size: 100% 100%;
}
.idee_recu #wall.win4 { 
	background: url('img/wall-4.png') no-repeat left top transparent; 
	background-size: 100% 100%;
}
.idee_recu #wall h1,
.idee_recu #wall p {
	padding: 5rem 2rem 1rem;
    font-size: 3.2rem;
    font-weight: bold;
    color: #474544;
    /* text-shadow: -1px -2px 2px rgba(255,255,255,1), 1px 2px 2px rgba(0,0,0,0.8), -1px 2px 2px rgba(255,255,255,1), 1px -2px 2px rgba(0,0,0,0.8); */
    float: left;
    clear: none;
}
.idee_recu #wall h1 {
	font-size: 4.3rem;
	line-height: 1;
}
.idee_recu #wall p { padding-top: 0 }
.idee_recu #wall .break_wall {
	display: block;
	width: 0;
	height: 0;
	float: left;
}
.idee_recu #wall .break_wall_2 {
	display: block;
	width: 0;
	height: 0;
	float: left;
}
.idee_recu #wall.win1 .break_wall {
	width: 55%;
	height: 55%;
}
.idee_recu #wall.win1 h1 {
	width: 45%;
	line-height: 1.5;
	font-size: 3.5rem;
}
.idee_recu #wall.win1 p {
	font-size: 2.2rem;
}
.idee_recu #wall.win2 .break_wall {
	height: 55%;
	width: 100%;
}
.idee_recu #wall.win2 h1 {
	line-height: 1.5;
	font-size: 2.8rem;
	padding-top: 1rem;
}
.idee_recu #wall.win2 p {
	font-size: 2rem;
}
.idee_recu #wall.win3 .break_wall {
	height: 55%;
	width: 100%;
}
.idee_recu #wall.win3 .break_wall_2 {
	width: 50%;
	height: 50%;
}
.idee_recu #wall.win3 h1 {
	line-height: 1.5;
	width: 50%;
	font-size: 1.5rem;
	padding-top: 1rem;
}
.idee_recu #wall.win3 p {
	font-size: 1.5rem;
	width: 50%;
}
.idee_recu #wall.win4 h1 {
	display: none;
}
.idee_recu #wall.win4 p {
	display: none;
}

footer a img {
    display: inline-block;
    max-width: 50%;
}
footer div a {
	float: left;
    padding-left: 2rem;
    padding-top: 2rem;
    text-align: left;
    width: 40%;
    text-align: center;
}
footer div a:nth-child(2) {
	float: right;
}

#modal_cgu .modal_description, #modal_retenir .modal_description, #modal_aide .modal_description {
    max-height: 35rem;
    overflow: auto;
}

/** Responsive Design **/
@media (max-width: 48em) { 
    .grid {
	    max-width: 90%;
	    min-width: 90%;
	    margin: auto;
	}  
	#question .the_question .level {
	    color: #ffffff;
	    display: block;
	    font-size: 2rem;
	    margin-left: 3rem;
	    margin-top: 4rem;
	    text-shadow: 0 0 5px #000000;
	    width: 80%;
	}
	#question .the_question h1 legend.niveau_termine {
	    font-size: 2rem;
	    font-weight: normal;
	    line-height: 4.5rem;
	    margin-bottom: 1rem;
	    margin-top: 1rem;
	}
	#question .the_question h1 {
	    color: #ffffff;
	    display: block;
	    float: left;
	    font-size: 2.2rem;
	    font-weight: bold;
	    margin-bottom: 0;
	    margin-left: 3rem;
	    padding-bottom: 0rem;
	    padding-top: 0;
	    text-shadow: 0 0 5px #000000;
	    width: 80%;
	}
	.idee_recu #wall.win1 h1 {
	    padding-top: 1.5rem;
	}
	.idee_recu #wall.win1 p {
	    font-size: 2rem;
	}
	#question .the_question .bird.wrong {
	    margin-right: 5rem;
	}
	.reponses .les_propositions ul li label {
	    min-height: 5rem;
	    height: auto;
	}
	.reponses .les_propositions ul li label .label_reponse span {
    	display: block;
    }
	#modal_aide, #modal_invite, #modal_classement, #modal_secret, #modal_gameover, #modal_cgu, #modal_matricule, #modal_retenir {
	    width: 80%;
	    min-width: 80%;
	    max-width: 80rem;
	    top: 5rem;
    	left: 10%;
	}
	#page #bloc-titre img {
	    left: none;
	}
	#page #form-inscription,
	#page #form-connexion {
	    background-size: 100% 100%;
	}
	#page #form-inscription .col-1-3,
	#page #form-connexion .col-1-3 {
	    text-align: left;
	    padding-left: 2rem;
	    width: 84%;
	    float: left;
	    margin: 0.3rem 0;
	}
	#page #form-inscription .col-2-3,
	#page #form-connexion .col-2-3 {
	    text-align: left;
	    padding-left: 2rem;
	    width: 90%;
	    float: left;
	    margin: 0.3rem 0;
	}
	#page #form-inscription input[type="text"], 
	#page #form-inscription input[type="password"], 
	#page #form-inscription select,
	#page #form-connexion input[type="text"], 
	#page #form-connexion input[type="password"], 
	#page #form-connexion select {
	    margin-bottom: 0rem;
	    width: 97%;
	}
	#page #form-inscription .bloc-final,
	#page #form-connexion .bloc-final {
	    text-align: left;
	    width: 4rem;
	    float: left;
	    margin-left: 0;
	    padding-left: 0;
	}
	#page #form-inscription #deja-inscrit,
	#page #form-connexion #deja-inscrit {
	    margin-top: 2rem;
	}
	#page #form-inscription .col-2-3 #mail, 
	#page #form-inscription .col-2-3 #domain-mail,
	#page #form-connexion .col-2-3 #mail, 
	#page #form-connexion .col-2-3 #domain-mail,
	#page #form-connexion #connexion_mail,
	#page #form-connexion #connexion_domain-mail {
	    width: 44%;
	}
	#page #form-inscription .col-2-3 #equipe,
	#page #form-connexion .col-2-3 #equipe,
	#page #form-connexion #connexion_equipe {
	    width: 95%;
	}
	#page #bloc-titre img {
	    max-width: 100%;
	    left: 0;
	}
	#page #bloc-titre {
	    margin-top: 0;
	}
	#page #form-inscription #deja-inscrit .col-1-3, 
	#page #form-inscription #deja-inscrit .col-2-3,
	#page #form-inscription #form-footer .col-1-3,
	#page #form-inscription #form-footer .col-2-3,
	#page #bloc-inscription .col-1-2,
	#page #form-connexion #deja-inscrit .col-1-3, 
	#page #form-connexion #deja-inscrit .col-2-3,
	#page #form-connexion #form-footer .col-1-3,
	#page #form-connexion #form-footer .col-2-3,
	#page #bloc-connexion .col-1-2 {
	    width: 50%;
	    float: left;
	}
	#page #bloc-inscription .col-1-2.group-up,
	#page #bloc-connexion .col-1-2.group-up {
		text-align: right;
	}
	#page #form-inscription #form-footer .valider,
	#page #form-connexion #form-footer .valider {
		padding-right: 5rem;
	}
	#page #form-inscription {
	    height: 78rem;
	}
	#page #form-connexion {
	    height: 47rem;
	}
	p {
	    margin-bottom: 0;
	}
	#navigation ul .nav-logo {
	    margin-right: 2rem;
    	margin-left: 2rem;
	}  
	#navigation {
	    /* height: 23rem; */
	}
	.niveaux #navigation {
	    height: 25rem;
	}
	#questions {
		margin-top: 7rem;
	    display: block;
	    float: none;
	    position: initial;
	    text-align: center;
	}
	#navigation .menu-questions ul {
	    margin-right: 5rem;
	    margin: auto;
	    float: none;
	    display: inline-block;
	}
	.menu-score {
	    text-align: center;
	    display: block;
	    width: 100%;
	}
	#question {
	    margin: -4rem -2rem;
	}
	#question .the_question {
	    height: auto;
    	min-height: 60rem;
	}
	.reponses .les_propositions ul li .checkbox_simulee {
	    width: 15%;
    	height: 3rem;
	}
	#question .the_question .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(150px) translateY(550px);
		-moz-transform:translateX(150px) translateY(550px);
		-ms-transform:translateX(150px) translateY(550px);
		-o-transform:translateX(150px) translateY(550px);
		transform:translateX(150px) translateY(550px);
		width:25rem;
		height: 25rem;
		position: absolute;
	}
	#question .the_question .bird.coupe {
		display:block;
		background: url("img/coupe.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(150px) translateY(550px);
		-moz-transform:translateX(150px) translateY(550px);
		-ms-transform:translateX(150px) translateY(550px);
		-o-transform:translateX(150px) translateY(550px);
		transform:translateX(150px) translateY(550px);
		width:25rem;
		height: 25rem;
		position: absolute;
	}
	#header::after {
	    background-size: 100% 146px !important;
	}
	.niveaux #header::after {
	    background-size: 100% 143px !important;
	}
	.menu-name {
	    width: 30%;
	    min-width: 25rem;
	}
	.niveaux #navigation ul {
	    width: 100%;
	}
	.niveaux #navigation ul .nav-button {
	    margin-right: 0rem;
	    width: 23%;
	    display: inline-block;
	    text-align: center;
	}
	.niveaux #navigation ul .nav-logo {
	    margin-right: 0rem;
	    margin-left: 0rem;
	    width: 100%;
	    text-align: center;
	    display: block;
	}
	#niveaux {
	    margin: 2rem 0rem;
	    background: transparent;
	    min-height: 30rem;
	}
	#niveaux .niveau {
	    width: 35%;
	}
	#niveaux .niveau:nth-child(even) {
	    margin-top: 21rem;
	}
	#niveaux .niveau span.chemin {
		display: none !important;
	}
	.idee_recu #wall {
	    width: 95%;
	    min-height: 35rem;
	    height: 100%;
	    margin: 0 auto;
	    margin-top: 0rem;
	    background-size: 100% 100%;
	}
	#question .the_question .coupe {
	    transform: translateX(50%) translateY(630px);
	}
	#navigation {
	    border-top: 2px solid #c4b2a1;
	    border-left: 2px solid #c4b2a1;
	    border-right: 2px solid #c4b2a1;
	}
	.niveau-orange #header #navigation {
	    border-top: 2px solid #CC6814;
	    border-left: 2px solid #CC6814;
	    border-right: 2px solid #CC6814;
	}
	.niveau-mauve #header #navigation {
	    border-top: 2px solid #383485;
	    border-left: 2px solid #383485;
	    border-right: 2px solid #383485;
	}
	.niveau-bleu #header #navigation {
	    border-top: 2px solid #EEEEEE;
	    border-left: 2px solid #EEEEEE;
	    border-right: 2px solid #EEEEEE;
	}
	.niveau-jaune #header #navigation {
	    border-top: 2px solid #C0B626;
	    border-left: 2px solid #C0B626;
	    border-right: 2px solid #C0B626;
	}
	.niveau-vert #header #navigation {
	    border-top: 2px solid #3DA762;
	    border-left: 2px solid #3DA762;
	    border-right: 2px solid #3DA762;
	}
	.niveau-blanc #header #navigation {
	    border-top:2px solid #c4b2a1;
	    border-left:2px solid #c4b2a1;
	    border-right:2px solid #c4b2a1;
	}
	#page #form-connexion #deja-inscrit {
		width: 100%;
	}
	#page #form-connexion #deja-inscrit .link_inscription {
		width: 95%;
		text-align: right;
	}
	.overlayer {
	    position: absolute;
	    padding-right: 10%;
	}
	#modal_aide, #modal_invite, #modal_classement, #modal_secret, #modal_parrain, #modal_gameover, #modal_cgu, #modal_matricule, #modal_retenir {
    	position: absolute;
    }
}
@media (min-width: 48em) and (max-width: 61.25em) { 
    .grid {
	    max-width: 70rem;
	    min-width: 70rem;
	} 
	.col-1-2, .col-6-12 {
	    width: auto;
	}
	#modal_aide, #modal_invite, #modal_classement, #modal_secret, #modal_gameover, #modal_cgu, #modal_matricule, #modal_retenir {
	    width: 80%;
	    min-width: 80%;
	    max-width: 80rem;
	    top: 5rem;
    	left: 10%;
	}
	#page #form-inscription .col-1-3,
	#page #form-connexion .col-1-3 {
	    width: 43%;
	}
	#page #form-inscription .col-1-3.bloc-final,
	#page #form-connexion .col-1-3.bloc-final {
	    width: 3rem;
    	padding-right: 0;
	}
	#page #form-inscription .col-2-3,
	#page #form-connexion .col-2-3 {
	    width: 55%;
	}
	#page #form-inscription .col-2-3 #mail, 
	#page #form-inscription .col-2-3 #domain-mail,
	#page #form-connexion .col-2-3 #mail, 
	#page #form-connexion .col-2-3 #domain-mail {
	    width: 36%;
	}
	#page #form-inscription .col-2-3 #equipe,
	#page #form-connexion .col-2-3 #equipe {
	    width: 95%;
	}
	#page #form-inscription #form-footer .valider,
	#page #form-connexion #form-footer .valider {
	    padding-right: 5rem;
	}
	#page #bloc-inscription .group-up,
	#page #bloc-connexion .group-up {
	    text-align: right;
	}
	#page #form-inscription,
	#page #form-connexion {
	    background-size: 100% 100%;
	}
	#page #form-inscription label,
	#page #form-connexion label {
	    font-size: 1.3rem;
	}
	#page #form-inscription #deja-inscrit,
	#page #form-connexion #deja-inscrit {
	    margin-top: 0;
	}
	#navigation ul .nav-logo {
	    margin-right: 15rem;
	    margin-left: 5rem;
	}  
	#navigation {
	    /* height: 14rem; */
	}
	#questions {
		margin-left: 6rem;
	}
	#header::after {
	    background-size: 100% 146px !important;
	}
	.niveaux #header::after {
	    background-size: 100% 143px !important;
	}
	#page #form-connexion .link_inscription {
		width: 100%;
	}
	#question .the_question h1 {
	    padding-top: 1rem;
	    padding-bottom: 1rem;
	}
	.reponses .les_propositions ul li label {
	    height: 3rem;
	}
	#question .reponses {
	    padding-bottom: 60px;
	}
	.reponses .les_propositions ul li label .label_reponse span {
		font-size: 1.2rem;
	}
	#question .the_question {
	    /* height: 50rem; */
	}
	#question {
	    /* min-height: 50rem; */
	}
	#question .the_question h1 legend {
		font-size: 1.5rem;
	}
	#question .the_question .level {
		font-size: 1.8rem;
		margin-top: 3rem;
	}
	#question .the_question .bird.wrong {
		/* width: 6rem;
	    height: 6rem; */
	    margin-right: 5rem;
	}
	#question .the_question .bird.right {
		/* width: 6rem;
	    height: 6rem; */
	    margin-right: 5rem;
	}
	#question .the_question .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(350px) translateY(20px);
		-moz-transform:translateX(350px) translateY(20px);
		-ms-transform:translateX(350px) translateY(20px);
		-o-transform:translateX(350px) translateY(20px);
		transform:translateX(350px) translateY(20px);
		width:18rem;
		height: 18rem;
		position: absolute;
	}
	#question .the_question .win1 .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(500px) translateY(20px);
		-moz-transform:translateX(500px) translateY(20px);
		-ms-transform:translateX(500px) translateY(20px);
		-o-transform:translateX(500px) translateY(20px);
		transform:translateX(500px) translateY(20px);
		width:18rem;
		height: 18rem;
		position: absolute;
	}
	#question .the_question .win2 .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(350px) translateY(150px);
		-moz-transform:translateX(350px) translateY(150px);
		-ms-transform:translateX(350px) translateY(150px);
		-o-transform:translateX(350px) translateY(150px);
		transform:translateX(350px) translateY(150px);
		width:18rem;
		height: 18rem;
		position: absolute;
	}
	#question .the_question .win3 .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(500px) translateY(150px);
		-moz-transform:translateX(500px) translateY(150px);
		-ms-transform:translateX(500px) translateY(150px);
		-o-transform:translateX(500px) translateY(150px);
		transform:translateX(500px) translateY(150px);
		width:18rem;
		height: 18rem;
		position: absolute;
	}
	#question .the_question .bird.coupe {
		display:block;
		background: url("img/coupe.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(400px) translateY(100px);
		-moz-transform:translateX(400px) translateY(100px);
		-ms-transform:translateX(400px) translateY(100px);
		-o-transform:translateX(400px) translateY(100px);
		transform:translateX(400px) translateY(100px);
		width:25rem;
		height: 25rem;
		position: absolute;
	}
	.reponses .la_resp {
		font-size: 1.4rem;
	}
	#question .the_question .result {
	    padding-top: 0;
	    margin-top: 0;
	    font-size: 1.4rem;
	    padding-bottom: 0;
	    width: 35%;
	}
	#question .reponses .reponse {
		min-height: 15rem;
	}
	.idee_recu #wall {
	    margin-top: 5rem;
	}
	.niveaux #navigation ul .nav-logo {
	    margin-right: 8rem;
	}
	.niveaux #navigation {
	    height: 14.2rem;
	}
	.menu-name {
	    width: 20%;
	}
	#question .the_question .coupe {
	    transform: translateX(400px) translateY(100px);
	}
	#navigation {
	    border-top: 3px solid #c4b2a1;
	    border-left: 3px solid #c4b2a1;
	    border-right: 3px solid #c4b2a1;
	}
	.niveau-orange #header #navigation {
	    border-top: 3px solid #CC6814;
	    border-left: 3px solid #CC6814;
	    border-right: 3px solid #CC6814;
	}
	.niveau-mauve #header #navigation {
	    border-top: 3px solid #383485;
	    border-left: 3px solid #383485;
	    border-right: 3px solid #383485;
	}
	.niveau-bleu #header #navigation {
	    border-top: 3px solid #EEEEEE;
	    border-left: 3px solid #EEEEEE;
	    border-right: 3px solid #EEEEEE;
	}
	.niveau-jaune #header #navigation {
	    border-top: 3px solid #C0B626;
	    border-left: 3px solid #C0B626;
	    border-right: 3px solid #C0B626;
	}
	.niveau-vert #header #navigation {
	    border-top: 3px solid #3DA762;
	    border-left: 3px solid #3DA762;
	    border-right: 3px solid #3DA762;
	}
	.niveau-blanc #header #navigation {
	    border-top:3px solid #c4b2a1;
	    border-left:3px solid #c4b2a1;
	    border-right:3px solid #c4b2a1;
	}
	.idee_recu #wall {
	    width: 30rem;
	}
	.idee_recu #wall h1, .idee_recu #wall p {
	    font-size: 2.8rem;
	}
	.idee_recu #wall h1 {
		font-size: 3.1rem;
	}
	#question button {
	    font-size: 1.6rem;
	    padding: 10px 10px 10px;
	    top: -6rem;
	}
	.reponses .les_propositions ul li .checkbox_simulee {
	    width: 3.5rem;
	    height: 3.5rem;
	    margin-top: 0.8rem;
	}
	#niveaux {
	    margin: 5rem 0rem;
	    background-size: 45rem 10rem;
	}
}
@media (min-width: 61.25em) and (max-width: 75em) {
    .grid {
	    max-width: 90rem;
	    min-width: 90rem;
	}  
	#modal_aide, #modal_invite, #modal_classement, #modal_secret, #modal_gameover, #modal_cgu, #modal_matricule, #modal_retenir {
	    width: 80%;
	    min-width: 80%;
	    max-width: 80rem;
	    top: 5rem;
    	left: 10%;
	}
	#page #form-inscription .col-1-3,
	#page #form-connexion .col-1-3 {
	    width: 43%;
	}
	#page #form-inscription .col-1-3.bloc-final,
	#page #form-connexion .col-1-3.bloc-final {
	    width: 5rem;
	}
	#page #form-inscription .col-2-3,
	#page #form-connexion .col-2-3 {
	    width: 55%;
	}
	#page #form-inscription .col-2-3 #mail, 
	#page #form-inscription .col-2-3 #domain-mail,
	#page #form-connexion .col-2-3 #mail, 
	#page #form-connexion .col-2-3 #domain-mail {
	    width: 35%;
	}
	#page #form-inscription .col-2-3 #equipe,
	#page #form-connexion .col-2-3 #equipe {
	    width: 95%;
	}
	#page #form-inscription #form-footer .valider,
	#page #form-connexion #form-footer .valider {
	    padding-right: 5rem;
	}
	#page #bloc-inscription .group-up,
	#page #bloc-connexion .group-up {
	    text-align: right;
	}
	#page #form-inscription {
		background-size: 100% 100%;
    	height: 60rem;
	}
	#navigation ul .nav-logo {
	    margin-right: 1rem;
	} 
	.menu-niveau {
	    width: 8rem;
	    padding: 0.5rem 0rem 0 0;
	}
	.menu-questions ul li {
		margin: 0 0.5rem;
	}
	#question .the_question .coupe {
	    transform: translateX(550px) translateY(100px);
	}
	#navigation .menu-questions ul {
	    margin-right: 1rem;
	}
	.menu-score {
		margin-right: 0;
	}
	#header::after {
	    background-size: 100% 146px !important;
	}
	.niveaux #header::after {
	    background-size: 100% 143px !important;
	}
	#page #form-connexion {
	    background-size: 100% 100%;
	}
	#page #form-connexion .link_inscription {
		width: 100%;
	}
	#question .the_question h1 {
	    padding-top: 2rem;
	    padding-bottom: 2rem;
	}
	#question .reponses {
	    padding-bottom: 65px;
	}
	#question .the_question {
	    /* height: 60rem; */
	}
	#question {
	    /* min-height: 60rem; */
	}
	#question .the_question .bird.wrong {
		/* width: 10rem;
	    height: 9rem;
	    margin-right: 6rem; */
	}
	#question .the_question .bird.right {
		/* width: 10rem;
	    height: 9rem;
	    margin-right: 6rem; */
	}
	#question .the_question .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(450px) translateY(30px);
		-moz-transform:translateX(450px) translateY(30px);
		-ms-transform:translateX(450px) translateY(30px);
		-o-transform:translateX(450px) translateY(30px);
		transform:translateX(450px) translateY(30px);
		width:25rem;
		height: 25rem;
		position: absolute;
	}
	#question .the_question .win1 .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(600px) translateY(30px);
		-moz-transform:translateX(600px) translateY(30px);
		-ms-transform:translateX(600px) translateY(30px);
		-o-transform:translateX(600px) translateY(30px);
		transform:translateX(600px) translateY(30px);
		width:25rem;
		height: 25rem;
		position: absolute;
	}
	#question .the_question .win2 .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(450px) translateY(150px);
		-moz-transform:translateX(450px) translateY(150px);
		-ms-transform:translateX(450px) translateY(150px);
		-o-transform:translateX(450px) translateY(150px);
		transform:translateX(450px) translateY(150px);
		width:25rem;
		height: 25rem;
		position: absolute;
	}
	#question .the_question .win3 .bird.flash {
		display:block;
		background: url("img/flash.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(600px) translateY(150px);
		-moz-transform:translateX(600px) translateY(150px);
		-ms-transform:translateX(600px) translateY(150px);
		-o-transform:translateX(600px) translateY(150px);
		transform:translateX(600px) translateY(150px);
		width:25rem;
		height: 25rem;
		position: absolute;
	}
	#question .the_question .bird.coupe {
		display:block;
		background: url("img/coupe.gif") no-repeat 100% 100% transparent;
		background-size: 100%;
		-webkit-transform:translateX(550px) translateY(100px);
		-moz-transform:translateX(550px) translateY(100px);
		-ms-transform:translateX(550px) translateY(100px);
		-o-transform:translateX(550px) translateY(100px);
		transform:translateX(550px) translateY(100px);
		width:25rem;
		height: 25rem;
		position: absolute;
	}
	.reponses .la_resp {
		font-size: 1.5rem;
	}
	#question .the_question .result {
	    padding-top: 0;
	    margin-top: 0;
	    font-size: 1.6rem;
	}
	.idee_recu #wall {
	    /** margin-top: 19.5rem; **/
	}
	#navigation {
	    border-top: 3px solid #c4b2a1;
	    border-left: 3px solid #c4b2a1;
	    border-right: 3px solid #c4b2a1;
	}
	.niveau-orange #header #navigation {
	    border-top: 3px solid #CC6814;
	    border-left: 3px solid #CC6814;
	    border-right: 3px solid #CC6814;
	}
	.niveau-mauve #header #navigation {
	    border-top: 3px solid #383485;
	    border-left: 3px solid #383485;
	    border-right: 3px solid #383485;
	}
	.niveau-bleu #header #navigation {
	    border-top: 3px solid #EEEEEE;
	    border-left: 3px solid #EEEEEE;
	    border-right: 3px solid #EEEEEE;
	}
	.niveau-jaune #header #navigation {
	    border-top: 3px solid #C0B626;
	    border-left: 3px solid #C0B626;
	    border-right: 3px solid #C0B626;
	}
	.niveau-vert #header #navigation {
	    border-top: 3px solid #3DA762;
	    border-left: 3px solid #3DA762;
	    border-right: 3px solid #3DA762;
	}
	.niveau-blanc #header #navigation {
	    border-top:3px solid #c4b2a1;
	    border-left:3px solid #c4b2a1;
	    border-right:3px solid #c4b2a1;
	}
	#question button {
	    font-size: 1.8rem;
	    padding: 12px 16px 12px;
	    top: -6.5rem;
	}
	#niveaux {
	    margin: 8rem 5rem;
	    background-size: 55rem 12rem;
	}
	#niveaux .niveau:nth-child(4) span.chemin, #niveaux .niveau:nth-child(7) span.chemin, #niveaux .niveau:nth-child(10) span.chemin {
		background-size: 100%;
	    width: 60rem;
	    height: 37rem;
	    margin-left: 10rem;
	    margin-top: -20rem;
	}
	.menu-name {
	    width: 12%;
	}
}
@media (min-width: 75em) { 
    .grid {
	    max-width: 114rem;
	    min-width: 114rem;
	}
	#modal_aide, #modal_invite, #modal_classement, #modal_secret, #modal_gameover, #modal_cgu, #modal_matricule, #modal_retenir {
	    width: 60%;
	    min-width: 60%;
	    max-width: 80rem;
	    top: 5rem;
    	left: 20%;
	}
}