a {
  text-decoration: none;
  color: #000;
}
a:hover {
  text-decoration: none;
  color: #F00;
}
.ctab {
  position: relative;
  margin: auto;
  padding: 7px 15px 12px 15px;
  transition: all 0.2s ease;
}
.ctab:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 18px;
  background: rgba(23, 80, 183, 0.3);
  width: 36px;
  height: 36px;
  transition: all 0.3s ease;
}
.ctab span {
  color: #000;
  position: relative;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ctab svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.ctab:hover:before {
  width: 100%;
  background: rgba(23, 80, 183, 0.3);
}
.ctab:hover svg {
  transform: translateX(0);
}
.ctab:active {
  transform: scale(0.96);
}
.ctao {
  position: relative;
  margin: auto;
  padding: 7px 15px 12px 15px;
  transition: all 0.2s ease;
}
.ctao:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 18px;
  background: rgba(255,68,0,0.3);
  width: 36px;
  height: 36px;
  transition: all 0.3s ease;
}
.ctao span {
  color: #000;
  position: relative;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ctao svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.ctao:hover:before {
  width: 100%;
  background: rgba(255,68,0,0.3);
}
.ctao:hover svg {
  transform: translateX(0);
}
.ctao:active {
  transform: scale(0.96);
}
.ctav {
  position: relative;
  margin: auto;
  padding: 7px 15px 12px 15px;
  transition: all 0.2s ease;
}
.ctav:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 18px;
  background: rgba(0,102,0,0.3);
  width: 36px;
  height: 36px;
  transition: all 0.3s ease;
}
.ctav span {
  color: #000;
  position: relative;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ctav svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.ctav:hover:before {
  width: 100%;
  background: rgba(0,102,0,0.3);
}
.ctav:hover svg {
  transform: translateX(0);
}
.ctav:active {
  transform: scale(0.96);
}
.parent {
  display: flex; /* contexte sur le parent */
  float: left;
}
.enfant {
  margin: auto;
}
.cercle{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#FCF9E0;
	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;
}
.cercle2{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#FCF9E0;
	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;
}
.cercle3{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#FCF9E0;
	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;
}
/*sections*/
.container {
width: 925px;
margin: auto;
padding: 60px;
background: #FCF9E0;
border: 1px solid #F39D1D;
border-radius: 10px;
}
.video{
	text-align: right; 
	margin-top: 0px; 
	margin-bottom:0px;
}
.adsense{
box-sizing: border-box; 
width: 100%; 
text-align: center; 
margin: 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;
}
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;
}
@media screen and (max-width : 1110px){
.container {
width: 99%;
margin: auto;
align-items: center;
-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
#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%;
}
}
/*********************************/
/* Menu vertical (items flottants) */
/*********************************/
#cinq {
width: 100%;
list-style: none ;
margin: 0 ;
padding: 0 ;
}
#cinq li {
width: 100%;
border: 2px solid #E3D6BE;
border-radius: 20px;
margin-bottom: 5px;
}
#cinq li a {
display: block ;
background-color: white;
background-image: url(images/trait_rose.png);
background-repeat: no-repeat; 
background-origin: border-box;
background-position-x: 32px;
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 : 1000px){
#cinq li a {
background-position-x: 22px;
font-size: 0.8em;
padding-left: 5px;
}
}