/*sections*/
.container {
width: 1250px;
margin: auto;
font-size: 1.1em;
text-align: left;
}
.encadrer-un-contenu{ 
border: 2px solid #AA3399; 
border-radius:10px;
padding: 8px; 
}
.titre {
	font-size: 1.8em;
	font-weight: bold;
	width: 600px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    color: #355E91;
    border: 3px solid #ff0000;
	border-radius:18px;
	padding: 10px;
	margin-top: 16px;
	margin-bottom: 11px;
}
.texte{
padding-left: 30px;
}
#label{
	font-size:50px;
}
#champ{
	font-size:80px; 
	color:red; 
	font-weight:bold;
	width:auto;
}

.annonce {
	width: 1250px;
	margin: auto;
	text-align: center;
	height: auto;
	}
#chimie {
margin: auto;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
width: 200px;
background: #F39D1D;
border-radius: 10px;
color: FFF;
font-weight:bold;
font-size: 1.2em;
text-align:center;
}
h0 {
padding:0px;
color: #fff;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.1em;
}
h1 {
padding-bottom:0px;
color: #E00;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 1em;
}
h2 {
padding-bottom:1px;
color: #F46200;
text-align: left;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.9em;
}
h3 {
padding: 0px;
margin: 0px;
color: #F46200;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.01em;
}
h4 {
color: #008800;
font-weight: normal;
text-align: left;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.9em;
}
h5 {
padding-bottom:0px;
color: #E00;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: .2em;
}
table, td, th {
font-size:1.1em;	
width: 100%;
border-collapse: collapse;
}
th, td {
font-weight:bold;
width: 30px;
padding: 5px;
border: 1px solid black;
text-align: center;
float:none;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.well{
width: 1250px;
margin: auto;
font-size: 1.1em;
text-align: left;
min-height:20px;
padding:19px;
margin-bottom:20px;
background-color:#f5f5f5;border:1px solid #e3e3e3;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
box-shadow:inset 0 1px 1px rgba(0,0,0,.05)
}
#somme{
text-align: center;
font-weight: bold;
font-size:100;
color:red;
margin: 0;
}
.video-responsive { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}
.video-responsive iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}
button{
  border:none;
  background-color: #D0D7EE;
  color: #444444;
  padding: 10px 15px;
  border-radius: 7px;
  cursor: pointer;
  font-family:Verdana, Geneva, sans-serif;
  transition: all 0.5s ease;
  font-size:0.8em;
  text-decoration:none;
}
button:hover{
  border:none;
  background: #ffa502;
  transition: .1s;
  color: #222222;
  padding: 10px 15px;
  border-radius: 7px;
  cursor: pointer;
  font-family:Verdana, Geneva, sans-serif;
  font-size:0.8em;
  text-decoration:none;
}
.question-true-visited{
  background: #ffa502;
  border: 3px solid #3E53A8;
}
.question-false-visited{
  background: #ffa502;
  border: 3px solid #3E53A8;
}
#text-success{color:#090}
#text-danger{color:red}
#stop{
  background-color: #ff0002;
}
#bovideo {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gavideo  {
width: 57%;
float:left;
margin-left: 0em;
text-align: left;
}
#drvideo {
width: 43%;
float:right;
}
#bom {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gam  {
float:left;
width: 100%;
text-align: top;
text-align: left;
padding-left:20px;
margin:auto;
margin-top:0;
}
#drm {
float:right;
width: 451px;
margin:auto;
}
#bobouton {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gabouton  {
float:left;
width: 57%;
margin-right:auto;
text-align: left;
}
#drbouton {
width: 43%;
float:right;
text-align: right;
margin-left:auto;
background-color: #ffffff;
}
.inline {
	padding-top: 5;
	vertical-align: middle;
	display:inline-block;
	height: 1em;
	float: left;
	text-align: right;
	padding-right: 15px;
	margin: auto;
	}
.lienv {
	color: #009955 ;
	font: 0.9em 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
	}
.lienv:hover {
	color: #f40 ;
	font: 0.9em 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
	}
#boite {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gauche  {
float:left;
width: 40%;
margin:auto;
}
#droite {
width: 60%;
float:right;
text-align: left;
}
#centrer {
text-align: center;
margin: auto;
}
.parent {
  display: flex; /* contexte sur le parent */
  float: left;
}
.enfant {
  margin: auto;
}
.cerclebleu{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#ffffff;
	border:3px solid #016087;
    height:25px;
    text-align:center;
    border-radius:25px;
    line-height: 25px;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #016087;
    font-weight: bold;
}
@media screen and (max-width : 1700px){
table, td {
font-size:0.9em;
font-weight:normal;
}
th {
font-size:0.9em;
font-weight:normal;
}
}
@media screen and (max-width : 1300px){
.annonce {
	width: 100%;
	text-align: center;
	height: auto;
	}
}
.cercleorange{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#ffffff;
	border:3px solid #CF5003;
    height:25px;
    text-align:center;
    border-radius:25px;
    line-height: 25px;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #CF5003;
    font-weight: bold;
}
.cerclevert{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#ffffff;
	border:3px solid #008000;
    height:25px;
    text-align:center;
    border-radius:25px;
    line-height: 25px;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #008000;
    font-weight: bold;
}
.titre {
	width: 600px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.1em;
    color: #355E91;
    font-weight: bold;
	border: 3px solid #ff0000;
	border-radius:18px;
	padding: 10px;
	margin-top: 16px;
	margin-bottom: 11px;
}
.chapitre{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.6em;
    color: #355E91;
    font-weight: bold;
	margin-top: 15px;
	margin-bottom: 0px;
}
.conclusionc {
	width: 600px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.2em;
    color: red;
	background: #FCF9E0;
    font-weight: bold;
	border: 3px solid #355E91;
	border-radius:18px;
	padding: 40px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.conclusionl {
	width: 750px;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.2em;
    color: red;
	background: #FCF9E0;
    font-weight: bold;
	border: 3px solid #355E91;
	border-radius:18px;
	padding: 40px;
	margin-top: 10px;
	margin-bottom: 15px;
}
#i{
  font-style: italic; 
}
#b{
font-weight: bold; 
}
#s{
text-decoration: underline;
}
#red {
color: red;
}
#rf {
color: red;
font-weight: bold;
}
#rs{
color: red;
text-decoration: underline red;
}
#sortir {
clear:both;
}
#rfs{
color: red;
font-weight: bold;
text-decoration: underline red;
}
#blue {
color: #355E91;
}
#bf {
color: #355E91;
font-weight: bold;
}
#bclairf {
color: #0066ff;
font-weight: bold;
}
#bs{
color: #355E91;
text-decoration: underline #355E91;
}
#bfs{
color: #355E91;
font-weight: bold;
text-decoration: underline #355E91;
}
#sr{
text-decoration: underline #ff0000;
}

@media screen and (max-width : 1250px){
th, td {
font-size: 1.1em;
padding: 6px;
}
#droite {
text-align: center;
}
.container {
width: 99%;
padding-left: 5px;
margin: auto;
font-size: 1.3em;
margin-top: 0px;
}
.well{
width: 1050px;
margin: auto;
font-size: 1.0em;
text-align: left;
min-height:18px;
padding:17px;
margin-bottom:18px;
background-color:#f5f5f5;border:1px solid #e3e3e3;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
box-shadow:inset 0 1px 1px rgba(0,0,0,.05)
}
#somme{
text-align: center;
font-weight: bold;
font-size:90;
color:red;
margin: 0;
}
#label{
	font-size:45px;
}
#champ{
	font-size:75px; 
	color:red; 
	font-weight:bold;
	width:auto;
}
}
@media screen and (max-width : 1110px){
.container {
width: 99%;
padding-left: 5px;
margin: auto;
font-size: 1.2em;
margin-top: 0px;
}
#droite {
text-align: center;
}
.titre {
	width: 300px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 0.8em;
    color: #355E91;
    font-weight: normal;
	border: 3px solid #ff0000;
	border-radius:17px;
	padding: 10px;
	margin-top: 12px;
	margin-bottom: 10px;
}
.chapitre{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.1em;
    color: #355E91;
    font-weight: bold;
	margin-top: 20px;
	margin-bottom: 15px;
}
.conclusionc {
	width: 500px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: red;
	background: #FCF9E0;
    font-weight: bold;
	border: 2px solid #355E91;
	border-radius:18px;
	padding: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.conclusionl {
	width: 500px;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: red;
	background: #FCF9E0;
    font-weight: bold;
	border: 2px solid #355E91;
	border-radius:18px;
	padding: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
#chimie {
margin: auto;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px
position: relative;
width: 180px;
background: #F39D1D;
border-radius: 10px;
color: FFF;
font-weight:bold;
font-size: 1em;
text-align:center;
}
h1{
margin: auto;
font-size: 0.9em;
width: 100%;
}
#label{
	font-size:40px;
}
#champ{
	font-size:70px; 
	color:red; 
	font-weight:bold;
	width:auto;
}
}
@media screen and (max-width : 800px){
th, td {
font-size: 1.0em;
padding: 3px;
}
#bovideo {
flex-direction: column;
}
#gavideo {
margin: auto;
}
#drvideo {
margin: auto;
}
.container {
width: 99%;
padding-left: 5px;
margin: auto;
font-size: 1em;
margin-top: 0px;
}
.well{
width: 95%;
margin: auto;
font-size: .9em;
text-align: left;
min-height:15px;
padding:15px;
margin-bottom:16px;
background-color:#f5f5f5;border:1px solid #e3e3e3;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
box-shadow:inset 0 1px 1px rgba(0,0,0,.05)
}
#somme{
text-align: center;
font-weight: bold;
font-size:80;
color:red;
margin: 0;
}
#label{
	font-size:35px;
}
#champ{
	font-size:60px; 
	color:red; 
	font-weight:bold;
	width:auto;
}
}
/*********************************/
/* Menu vertical (items flottants) */
/*********************************/
#cinq {
width: 500px;
list-style: none ;
margin: 0 ;
padding: 0 ;
}
#cinq li {
float: left;
width: 500px;
border: 2px solid #E3D6BE;
border-radius: 20px;
margin-bottom: 5px;
}
#cinq li a {
display: block ;
background-color: #FCF9E0;
background-image: url(images/trait_rose.png);
background-repeat: no-repeat; 
background-origin: border-box;
background-position-x: 40px;
border-radius: 20px;
color: #000 ;
font: 1em 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
line-height: 1em ;
padding: 5px;
padding-left: 10px;
text-align: left;
text-decoration: none ;
}
#cinq li a.bilan {
color: #E00 ;
font-weight:bold;
text-transform: uppercase;
}
#cinq li a:hover, #cinq li a:focus, #cinq li a:active, #cinq li a.bilan:hover{
background-color: #DE1818;
color: #fff ;
}
@media screen and (max-width : 1250px){
#cinq {
width: 505px;
}
#cinq li {
width: 505px;
}
#cinq li a {
background-position-x: 31px;
}
}
@media screen and (max-width : 1000px){
.well{
width: 95%;
margin: auto;
font-size: .9em;
text-align: left;
min-height:13px;
padding:13px;
margin-bottom:13px;
background-color:#f5f5f5;border:1px solid #e3e3e3;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
box-shadow:inset 0 1px 1px rgba(0,0,0,.05)
}
th, td {
font-size: 1.0em;
padding: 3px;
}
#bovideo {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gavideo  {
float:left;
width: 41%;
margin:auto;
}
#drvideo {
width: 59%;
float:right;
text-align: right;
}
#cinq {
width: 316px;
}
#cinq li {
width: 316px;
}
#cinq li a {
background-position-x: 23px;
font-size: 0.8em;
padding-left: 5px;
}
}
@media screen and (max-width : 760px){
.well{
width: 95%;
margin: auto;
font-size: .9em;
text-align: left;
min-height:13px;
padding:13px;
margin-bottom:13px;
background-color:#f5f5f5;border:1px solid #e3e3e3;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
box-shadow:inset 0 1px 1px rgba(0,0,0,.05)
}
th, td {
font-size: .9em;
padding: 2px;
}
#somme{
text-align: center;
font-weight: bold;
font-size:70;
color:red;
margin: 0;
}
#label{
	font-size:30px;
}
#champ{
	font-size:50px; 
	color:red; 
	font-weight:bold;
	width:auto;
}
.conclusionc {
	width: 298px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: red;
	background: #FCF9E0;
    font-weight: normal;
	border: 1px solid #355E91;
	border-radius:18px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.conclusionl {
	width: 298px;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: red;
	background: #FCF9E0;
    font-weight: normal;
	border: 1px solid #355E91;
	border-radius:18px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.titre {
	width: 298px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 0.8em;
    color: #355E91;
    font-weight: normal;
	border: 3px solid #ff0000;
	border-radius:14px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#boite {
width: 99%;
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
#gauche  {
width:99%;
padding-left: 0px;
padding-top: 0px;
}
#droite {
width:99%;
text-align: center;
}
}
#bo {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga  {
float:left;
width: 50%;
margin:auto;
}
#dr {
width: 50%;
float:right;
text-align: right;
background-color: #ffffff;
margin:auto;
}
@media screen and (max-width : 1250px){
#dr {
text-align: center;
}
}
@media screen and (max-width : 760px){
#bovideo {
width: 99%;
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
#gavideo  {
width:99%;
padding-left: 0px;
padding-top: 0px;
}
#drvideo {
width:99%;
text-align: center;
}
#bo {
width: 99%;
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
#ga  {
width:99%;
padding-left: 0px;
padding-top: 0px;
}
#dr {
width:99%;
text-align: center;
}
}