/* 	HTML5 Boilerplate
 
	html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
	v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/* End of Reset CSS 

fonts.css from the YUI Library: developer.yahoo.com/yui/ */

body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/* 
 * HTML5 Boilerplate - minimal base styles 
 */

body, select, input, textarea { 
  color: #444; 
  /* font-family: Georgia, serif;  */   
}
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: visible; overflow-x: hidden; }
a:hover, a:active { outline: none; }
a:hover { color: #036; }
ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; } 
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre { 
  padding: 15px; 
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}
textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { 
      border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red; 
 -webkit-box-shadow: 0px 0px 5px red; 
         box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

/* By default the selection color is pink */
::-moz-selection{ background: #ffde58; color:#000000; text-shadow: none; }
::selection { background:#ffde58; color:#000000; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #FF5E99; } 
button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }


/* 
 * Non-semantic helper classes 
 */

/* for image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers */
.hidden { display: none; visibility: hidden; } 

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position: absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

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

/* Clearfix */
.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;	
} 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

img { display: block; }
.form_paiement img{
	display:inline-block;
}

/*
    // ========================================== \\
   ||                                              ||
   ||               Your styles !                  ||
   ||                                              ||
    \\ ========================================== //
*/

a:link, a:visited, a:hover, a:active { outline:none } 

html {
	overflow: auto;
}

strong {
	font-weight: bold;
	line-height: 100%;
}

body {
	background: #202020;
	width: 100%;
	min-width: 900px;
	height: 100%;
	font-family: "open_sanssemibold", sans-serif;
	font-size: 16px;
	line-height: 22px;
	color: #fff;
	position: absolute;
}

#droite {
	position: absolute;
	min-width: 200px;
	width: 25%;
	height: 100%;
	right: 0;
	background: #e1e1e1;
	overflow: auto;
}

#gauche {
	position: absolute;
	width: 85%;
	height: 100%;
	left: 0;
	background: #fff;
}

#photo {
	position: absolute;
	width: 100%;
	height: 63%;
	top: 0;
	overflow: hidden;
	background: #000;
}
#photo img {
	position: absolute;
}

#questions {
	position: absolute;
	width: 100%;
	height: 37%;
	background: #202020;
	bottom: 0;
	overflow: auto;
}
#questions.faux {
	background: #480000;
}
#questions.juste {
	background: #384800;
}

.barre_decompte {
	position: absolute;
	height: 4px;
	background: #5f5f5f;
	width: 100%;
}
#decompte {
	height: 4px;
	background: #6a9f25;
	width: 0%;
	
	-webkit-transition: background 1000ms ease;
	-moz-transition: background 1000ms ease;
	-ms-transition: background 1000ms ease;
	-o-transition: background 1000ms ease;
	transition: background 1000ms ease;
}
#decompte.orange {
	background: #d97000;
}
#decompte.red {
	background: #b22727;
}

.padding {
	padding: 10px 5%;
}

.questions {
	list-style: none;
	margin-left: 0;
	margin-top: 10px;
}

.questions .reponse {
	margin-top: 4px;
	padding-bottom: 3px;
	border-bottom: 1px dashed #fff;
    overflow: auto;
}
.questions .reponse .text {
	float: left;
}
.questions .reponse .choix {
	float: right;
}
.questions .reponse .lettre {
	float: left;
	margin-left: 20px;
	cursor: pointer;
}
.correction .questions .reponse .lettre {
	cursor: auto;
}
.questions .reponse .lettre span {
	font-family: "open_sansextrabold", sans-serif;
	margin-left: 5px;
}
.questions .reponse .lettre p {
	display: inline;
}
.questions .reponse .lettre:hover {
	color: #ffb911;
}
.correction .questions .reponse .lettre:hover {
	color: #fff;
}
	
.questions .sousquestions {
	margin-top: 4px;
}


.repjuste-div{
	display: inline-block;
}

.repjuste {
	font-size: 15px;
	margin-bottom: 7px;
	background-color: purple;
	padding: 2px 4px 2px 4px;
	border-radius: 5px;
}

#questions .lib {
	font-size: 21px;
	line-height: 25px;
	font-weight: normal;
}

.lib .num {
	float: left;
	font-family: "bebas_neue", sans-serif;
	font-size: 17px;
	line-height: 17px;
	padding: 1px 3px;
	background: #fff;
	margin-top: 3px;
	margin-right: 7px;
	color: #202020;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#droite .infos {
	position: absolute;
	width: 100%;
}

#montre {
	position: relative;
	width: 110px;
	height: 110px;
	margin: auto;
	font-family: "bebas_neue", sans-serif;
	color: #202020;
	margin-bottom: 20px;
}

#montre #temps {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 11px;
	font-size: 70px;
	line-height: 70px;
	color: #779900;
}
#montre #temps.orange {
	color: #d97000;
}
#montre #temps.red {
	color: #b22727;
}
#montre .sec {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 12px;
	color: #727272;
	font-size: 28px;
	line-height: 28px;
}

#boitier {
	position: relative;
	width: 177px;
	height: 304px;
	background: url('../images/boitier.png') no-repeat;
	margin: auto;
}

#boitier .question {
	position: absolute;
	font-size: 75px;
	line-height: 75px;
	font-family: "bebas_neue", sans-serif;
	color: #202020;
	left: 51px;
	top: 26px;
}

#boitier .reponseselect {
	position: absolute;
	font-family: "open_sansextrabold", sans-serif;
	left: 134px;
	top: 35px;
	color: #99977f;
	font-size: 12px;
	line-height: 14px;
}

#boitier .reponseselect .select {
	color: #202020;
}

#boitier .boutons {
	position: absolute;
	left: 21px;
	top: 117px;
}
#boitier .boutons .bout {
	width: 61px;
	height: 27px;
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	font-family: "open_sansextrabold", sans-serif;
	padding-top: 6px;
	background: url('../images/boutons.png') 0 0 no-repeat;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
	cursor: pointer;
	margin-bottom: 10px;
}
#boitier .boutons .bout:hover {
	background: url('../images/boutons.png') 0 -33px no-repeat;
}
#boitier .boutons .bout:active {
	background: url('../images/boutons.png') 0 -99px no-repeat;
}
#boitier .boutons .bout.select {
	background: url('../images/boutons.png') 0 -66px no-repeat;
}
#boitier .boutons .bout.select:hover {
	background: url('../images/boutons.png') 0 -99px no-repeat;
}
#boitier .boutons.dejavalid .bout:hover {
	background: url('../images/boutons.png') 0 0 no-repeat;
}
#boitier .boutons.dejavalid .bout:active {
	background: url('../images/boutons.png') 0 0 no-repeat;
}
#boitier .boutons.dejavalid .bout.select:hover {
	background: url('../images/boutons.png') 0 -66px no-repeat;
}
#boitier .boutons.dejavalid .bout {
	cursor: default;
}

#boitier .boutonscorr {
	position: absolute;
	right: 21px;
	top: 117px;
}
#boitier .boutonscorr .bout {
	width: 61px;
	height: 27px;
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	font-family: "open_sansextrabold", sans-serif;
	padding-top: 6px;
	background: url('../images/boutons.png') 0 0 no-repeat;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
	cursor: pointer;
	margin-bottom: 10px;
	position: relative;
}
#boitier .boutonscorr .bout:hover {
	background: url('../images/boutons.png') 0 -33px no-repeat;
}
#boitier .boutonscorr .bout:active {
	background: url('../images/boutons.png') 0 -99px no-repeat;
}
#boitier .boutonscorr .bout.select {
	background: url('../images/boutons.png') 0 -66px no-repeat;
}
#boitier .boutonscorr .bout.select:hover {
	background: url('../images/boutons.png') 0 -99px no-repeat;
}

#boitier .boutonscorr .bout.juste {
	background: url('../images/boutons.png') 0 -198px no-repeat;
}
#boitier .boutonscorr .bout.faux {
	background: url('../images/boutons.png') 0 -132px no-repeat;
}
#boitier .boutonscorr .bout .correction {
	display: none;
	position: absolute;
	padding: 15px;
	right: 66px;
	width: 500px;
	bottom: -8px;
	text-align: right;
	font-family: "open_sanssemibold", sans-serif;
	font-size: 14px;
	line-height: 19px;
	cursor: auto;
	-webkit-box-shadow: 0 0 15px 5px rgba(0,0,0,0.3);
	box-shadow: 0 0 15px 5px rgba(0,0,0,0.3);
	-webkit-border-radius: 10px;
	border-radius: 10px;
	z-index: 999;
}
#boitier .boutonscorr .bout:hover .correction {
	display: block;
}
#boitier .boutonscorr .bout.faux .correction {
	background: #b72929;
}
#boitier .boutonscorr .bout.juste .correction {
	background: #77a622;
}

#boitier .corr  {
	position: absolute;
	right: 21px;
	top: 117px;
	width: 61px;
	height: 25px;
	font-size: 15px;
	line-height: 15px;
	text-align: center;
	font-family: "open_sansextrabold", sans-serif;
	padding-top: 8px;
	background: url('../images/boutons.png') 0 -132px no-repeat;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
	cursor: pointer;
	margin-bottom: 10px;
}
#boitier .corr:hover {
	background: url('../images/boutons.png') 0 -165px no-repeat;
}
#boitier .corr.nope {
	opacity: 0.6;
}
#boitier .corr:active {
	background: url('../images/boutons.png') 0 -132px no-repeat;
}

#boitier .valid  {
	position: absolute;
	right: 21px;
	bottom: 15px;
	width: 61px;
	height: 25px;
	font-size: 15px;
	line-height: 15px;
	text-align: center;
	font-family: "open_sansextrabold", sans-serif;
	padding-top: 8px;
	background: url('../images/boutons.png') 0 -198px no-repeat;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
	cursor: pointer;
	margin-bottom: 10px;
}
#boitier .valid:hover {
	background: url('../images/boutons.png') 0 -231px no-repeat;
}
#boitier .valid:active {
	background: url('../images/boutons.png') 0 -198px no-repeat;
}

#player_ui .jp-pause, #player_ui .jp-play {
	float: right;
	width: 25px;
	height: 21px;
	font-size: 16px;
	line-height: 16px;
	padding-top: 4px;
	color: #fff;
	background: #202020;
	text-align: center;
	text-decoration: none;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer;
}

.tools {
	padding: 10px;
	position: absolute;
	width: 100%;
	box-sizing: border-box;
}

.tools h1 {
	font-size: 25px;
	line-height: 25px;
	font-family: "bebas_neue", sans-serif;
	color: #202020;
	font-weight: normal;
}

.tools h2 {
	font-size: 22px;
	line-height: 22px;
	font-family: "bebas_neue", sans-serif;
	color: #202020;
	font-weight: normal;
	margin-top:25px;
}

.questionscorr {
	position: relative;
	width: 208px;
	margin: auto;
	overflow: auto;
	margin-bottom: 20px;
}
.questionscorr .question {
	width: 25px;
	height: 19px;
	float: left;
	text-align: center;
	background: #606060;
	margin-bottom: 1px;
	margin-right: 1px;
	font-size: 13px;
	padding-top: 6px;
	line-height: 13px;
	color: #fff;
	text-decoration: none;
	background: #77a622;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	opacity: 0.7;
	-ms-filter: “alpha(opacity=75)”; /* ie 8 */
	filter: alpha(opacity=75); /* ie lt 7 */
}
.questionscorr .question.faux {
	background: #b72929;
}
.questionscorr .question.select {
	opacity: 1;
	-ms-filter: “alpha(opacity=100)”; /* ie 8 */
	filter: alpha(opacity=100); /* ie lt 7 */
}
.questionscorr .question:hover {
	opacity: 1;
	-ms-filter: “alpha(opacity=100)”; /* ie 8 */
	filter: alpha(opacity=100); /* ie lt 7 */
}
.corrsuivant2 a{
	color: #fff;
	text-decoration:none;
}
.corrsuivant,.corrsuivant2 {
	display: block;
	margin: auto;
	width: 80%;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 12px;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	font-family: "bebas_neue", sans-serif;
	font-size: 25px;
	line-height: 25px;
	background: #7daa24;
	background: -moz-linear-gradient(top,  #659a1c 0%, #9abd2c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#659a1c), color-stop(100%,#9abd2c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #659a1c 0%,#9abd2c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #659a1c 0%,#9abd2c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #659a1c 0%,#9abd2c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #659a1c 0%,#9abd2c 100%); /* W3C */
	-webkit-box-shadow: 1px 1px 0 0 #5e791b;
	box-shadow: 1px 1px 0 0 #5e791b;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.corrsuivant:hover,.corrsuivant2:hover {
	background: -moz-linear-gradient(top,  #9abd2c 0%, #659a1c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9abd2c), color-stop(100%,#659a1c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #9abd2c 0%,#659a1c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #9abd2c 0%,#659a1c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #9abd2c 0%,#659a1c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #9abd2c 0%,#659a1c 100%); /* W3C */
	color: #fff;
}
.corrsuivant:active,.corrsuivant2:active {
	background: -moz-linear-gradient(top,  #9abd2c 0%, #4a6e17 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9abd2c), color-stop(100%,#4a6e17)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #9abd2c 0%,#4a6e17 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #9abd2c 0%,#4a6e17 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #9abd2c 0%,#4a6e17 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #9abd2c 0%,#4a6e17 100%); /* W3C */
	color: #fff;
}

#correction {
	width: 80%;
	margin: auto;
}

#correction h2 {
	display: inline-block;
	font-size: 25px;
	line-height: 25px;
	font-family: "bebas_neue", sans-serif;
	color: #fff;
	font-weight: normal;
	background: #202020;
	padding-bottom: 1px;
	padding-left: 2px;
	padding-right: 2px;
}
#correction h3 {
	font-size: 20px;
	line-height: 20px;
	font-family: "bebas_neue", sans-serif;
	color: #555555;
	font-weight: normal;
	margin-top: 10px;
}
.corrreponses {
	overflow: auto;
	margin-top: 2px;
}
.corrreponses .rep {
	float: left;
	font-size: 15px;
	line-height: 15px;
	text-align: center;
	font-family: "open_sansextrabold", sans-serif;
	background: #91b500;
	padding: 6px 8px;
	margin-right: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.corrreponses .rep.faux {
	background: #af0000;
}
#correction .corrtexte {
	background: #fff;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 17px;
	color: #202020;
	padding: 10px;
	margin-top: 10px;
}
#fermer {
	float: right;
	width: 25px;
	height: 21px;
	font-size: 16px;
	line-height: 16px;
	padding-top: 4px;
	color: #fff;
	background: #af0000;
	text-align: center;
	text-decoration: none;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer;
	margin-left: 4px;
}

#fin_fond {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0.15;
}
#fin_fond img {
	position: absolute;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
	filter: alpha(opacity=15);
}

#fin_corps {
	position: absolute;
	text-align: center;
}

#fin_corps h1 {
	display: inline-block;
	font-size: 22px;
	line-height: 22px;
	font-family: "bebas_neue", sans-serif;
	color: #202020;
	font-weight: normal;
	background: #fff;
	padding: 4px 7px;
	margin-bottom: 5px;
}

#fin_corps .resultat {
	position: relative;
	width: 200px;
	margin: auto;
	font-size: 83px;
	line-height: 83px;
	font-family: "bebas_neue", sans-serif;
	color: #fff;
}
#fin_corps.juste .resultat span {
	color: #caf017;
}
#fin_corps.faux .resultat span {
	color: #ff4a4a;
}
#fin_corps .fautes {
	position: absolute;
	font-size: 22px;
	line-height: 22px;
	font-family: "bebas_neue", sans-serif;
	color: #fff;
	margin-left: 200px;
	margin-top: 30px;
	width: 100px;
	text-align: left;
}
#fin_corps.juste .fautes {
	color: #caf017;
}
#fin_corps.faux .fautes {
	color: #ff4a4a;
}

#fin_corps .texte {
	font-size: 14px;
	line-height: 20px;
	margin: auto;
	margin-top: 40px;
	width: 700px;
}
#fin_corps .texte h2 {
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 5px;
}

#fin_corps .boutons {
	margin: auto;
	width: 470px;
	overflow: auto;
	margin-top: 20px;
}
#fin_corps .boutons a {
	display: block;
	font-size: 14px;
	line-height: 14px;
	width: 215px;
	padding-top: 16px;
	padding-bottom: 16px;
	background: #caf017;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: #000;
	text-decoration: none;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
#fin_corps .boutons a.inscription {
	width: 450px;
	
}
#fin_corps .boutons a:hover {
	opacity: 0.7;
}
#fin_corps .boutons a.correction {
	background: #caf017;
}
#fin_corps .boutons a.tests {
	background: #53a0c8;
}
#fin_corps .boutons a.partage {
	background: url('../images/btn_partage.png') no-repeat;
	color:white;
	width:186px;
	height:33px;
	display:block;
	margin-left:85px;
	margin-top:20px;
	padding-top: 20px;
	padding-left:100px;
}

#fin_corps .stats {
	margin-top: 50px;
}
#fin_corps .stats .theme {
	display: inline-block;
	opacity: 0.7;
	margin-left: 7px;
	margin-right: 7px;
}
.ie7 #fin_corps .stats .theme, .ie8 #fin_corps .stats .theme  {
	display: inline;
	zoom: 1;
}
#fin_corps .stats .theme .titre {
	font-size: 14px;
	line-height: 20px;
	opacity: 0.5;
}

#fin_corps .stats .theme .pourc {
	font-family: "bebas_neue", sans-serif;
	font-size: 54px;
	line-height: 54px;
}

#correction .titre_corr{
	color:#b22727;
	margin-left: 10px;
}

#correction .titre_corr.juste{
	color:#779900;
}

.barre_avancement{
	
	height:4px;
	background-color:#d1d1d1;
	display:block;
	margin-top:10px;
}
.avancement{
	height:4px;
	background-color:black;
}

@media screen and (max-width: 980px) {
	body {
		min-width: 0;
	}
	#gauche {
		position: relative;
		width: 100% !important;
		height: auto !important;
	}
	#photo {
		position: relative;
		height: auto;
	}
	#photo img {
		position: relative;
		width: 100% !important;
		left: 0 !important;
		top: 0 !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		height: auto !important;
	}
	#photo #animation {
		position: relative;
		width: 100% !important;
		left: 0 !important;
		top: 0 !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		height: auto !important;
	}
	#photo #animation video {
		position: relative !important;
	}
	#droite {
		position: relative;
		width: 100%;
		height: auto;
		min-width: 0;
	}
	#questions {
		position: relative;
		height: auto;
	}
	#questions .padding {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.questions .reponse {
		padding-bottom: 10px;
		margin-top: 10px;
	}
	.padding {
		margin-top: 0 !important;
		margin-left: 0 !important;
	}
	.questions .reponse .text {
		padding-top: 15px;
		padding-bottom: 15px;
	}	
	.correction .questions .reponse .text {
		padding-top: 0;
		padding-bottom: 0;
	}	
	.questions .reponse .lettre {
		padding: 15px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background: rgba(255,255,255,0.3);
		margin-left: 10px;
	}
	.correction .questions .reponse .lettre {
		padding: 0;
		background: transparent;
	}
	.questions .reponse .lettre.select {
		background: rgba(255,255,255,0.8);
		color: #202020;
	}
	#questions .lib {
		font-size: 17px;
		line-height: 21px;
	}
	.lib .num {
		font-size: 14px;
		line-height: 14px;
		padding: 1px 2px;
	}
	
	#droite .infos {
		margin-top: 0 !important;
		margin-left: 0 !important;
		position: relative;
		overflow: auto;
	}
	
	#boitier {
		width: auto;
		height: auto;
		background: transparent;
	}
	#boitier .boutonscorr {
		position: relative;
		overflow: auto;
		left: 0;
		top: 0;
		display:table;
		width: 100%;
	}
	#boitier .boutonscorr .bout {
		margin-bottom: 0;
		height: auto;
		background: #ff7c0e;
		padding: 20px 0;
		display:table-cell;
		border: 1px solid #e1e1e1;
	}
	
	#boitier .boutons {
		position: relative;
		overflow: auto;
		left: 0;
		top: 0;
		margin-bottom: 95px;
		display:table;
		width: 100%;
		border-top: 1px solid #e1e1e1;
	}
	#boitier .boutons.dejavalid {
		margin-bottom: 0;
	}
	#boitier .boutons .bout, #boitier .boutons .bout:hover, #boitier .boutons.dejavalid .bout:hover {
		margin-bottom: 0;
		height: auto;
		background: #ff9311;
		padding: 20px 0;
		display:table-cell;
		border: 1px solid #e1e1e1;
	}
	#boitier .boutons .bout.select, #boitier .boutons .bout.select:hover, #boitier .boutons.dejavalid .bout.select:hover {
		background: #a75621;
	}
	
	#boitier .corr {
		position: fixed;
		width: 50%;
		float: left;
		height: auto;
		height: 55px;
		padding-top: 40px;
		background: #ac2525;
		margin: 0;
		top: auto;
		bottom: 0;
		left: 0;
		right: auto;
	}
	#boitier .corr:hover {
		background: #d34646;
	}
	#boitier .corr.nope {
		opacity: 1;
		background: #621313;
	}
	#boitier .valid {
		position: fixed;
		width: 50%;
		float: left;
		height: 55px;
		padding-top: 40px;
		background: #81ac25;
		margin: 0;
		bottom: 0;
		right: 0;
	}
	#boitier .valid:hover {
		background: #a8d546;
	}
	#boitier .question, #boitier .reponseselect {
		display: none;
	}
	
	#boitier .boutonscorr .bout.juste {
		background: #81ac25;
	}
	#boitier .boutonscorr .bout.faux {
		background: #ac2525;
	}
	#boitier .boutonscorr .bout:hover {
		background: #000;
	}
	#correctiontexte {
		position: relative;
		background: #575757;
		color: #fff;
		padding: 20px;
	}
	.corrsuivant {
		box-shadow: none;
		width: 100%;
		border-radius: 0;
		padding-bottom: 20px;
		padding-top: 20px;
		margin-top: 1px;
	}
	.dejavalid {
		opacity: 0.5;
	}
	.tools {
		position: relative;
	}
	#correction {
		width: auto;
		padding: 20px;
	}
}

@media screen and (max-width: 980px) and (orientation:landscape) {
	#boitier .corr, #boitier .valid {
		height: 34px;
		padding-top: 20px;
	}
	#boitier .boutons {
		margin-bottom: 54px;
	}
}

@media screen and (max-height: 800px) {
	.reponse {
		font-size: 14px;
		line-height: 17px;
	}
}

@media screen and (max-height: 600px) {
	.reponse {
		font-size: 11px;
		line-height: 13px;
	}
}


@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; border: 0; }
  a, a:visited { color: #444 !important; text-decoration: none; }
  a:after { content: ""; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
  img { border: 0 !important; display: inline; }
  
  #printbutton { display: none; }
}


.fond_partage{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	display:none;
}
.box_partage{
	position:absolute;
	top:50%;
	left:50%;
	width:513px;
	height:137px;
	background-color:white;
	border-radius:4px;
	margin-top:-68px;
	margin-left:-256px;
	color:black;
	text-align:center;
	display:none;
}
.btn_fermer_partage{
	top:-24px;
	left:-24px;
	position:relative;
	margin-bottom:-24px;
}
.cover_mobile{
	width:100%;
	height:100vh;
	position:absolute;
	background-color:rgba(145,181,0,0.98);
	color:white;
	text-align:center;
	padding-top:20vh;
	box-sizing:border-box;
	font-size:1em;
	display:none;
	top:0;
	left:0;
}
.title_mobile_question,.title_mobile_reponse{
	font-size:2em;
	line-height:2em;
	text-transform:uppercase;
}