html, body {
 margin: auto;
 padding: 0; 
 font-family: Georgia, "DejaVu Serif", Norasi, serif;
 background-color: #7D94B6 ;
  min-width:100%;
}

header
{
width: 100%;
background-color:#7D94B6;
color: white;
font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
font-size:25px ;
text-align: center; 
position:fixed;
top: 0; 
left: 0;
right: 0;
padding-right:75px;
padding-top:10px;
padding-bottom:10px;
height:45px;
display:block;
}

#navMenu {
  display: none;
  transition: all 0.3s ease;
}

#navMenu.active {
  display: block;
  position:fixed;
  margin:auto;
  width:100%;
  top: 65px; 
  left: 0;
  right: 0;
  text-align: center;
  background-color: white;
  height:300px;
}

table.colonne 
{
background-color:white;
display:table; 
padding:0;	
text-align: center;
border:0;
margin-top:50px;
width:90%;
margin:auto;
}

table.colonne tr 
{
 margin:auto;   
 padding:0;	
 text-align: center;
}

table.colonne tr th
{
padding-left:30px;
padding-right:30px;
padding-bottom:25px; 
font-family:  Georgia, "DejaVu Serif", Norasi, serif;
font-size:20px;
color:#000000;
text-align: center;
width:25%;
}

table.colonne tr td
{
padding-left:30px;
padding-right:30px;
padding-bottom:25px;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-size:20px;
color:#000000;
text-align: center;
border:0;
width:25%;
}

table.colonne tr th:hover
{
background-color: #FFAEC9;
border-color:#696969 #DCDCDC #DCDCDC #696969;
}

 

 
aside#bin {
position: fixed;
right: 100px;
bottom: 150px;
border:4px solid;
border-color:#DCDCDC #696969 #696969 #DCDCDC;
background-color:transparent;
width:520px;
} 

aside#bin
{
position: fixed;
right: 150px;
bottom: 150px;
border:0;
background-color:transparent;
width:520px;
height:260px;
text-align:center;
}
aside#chat:hover
{
position: fixed;
right: 0px;
bottom: 150px;
border:0;
background-color:transparent;
width:520px;
height:260px;
text-align:center;
}

aside#chat
{
position: fixed;
border:0;
right:-400px;
bottom:150px;
background-color:transparent;
width:520px;
height:260px;
text-align:left;
}

aside#chat1
{
position: fixed;
right: 0px;
bottom: 150px;
border:0;
background-color:transparent;
width:520px;
height:260px;
text-align:center;
}

label.success{
width:120px;
margin:0;
padding:0;
}

#submit
{
margin:auto;
}

#fichier1
{
margin-left:-50px;
}

label.avis
{
	width: 120px;
}

td
{
border: 1px solid black;
}

.bandeau {
display:float;
margin:auto;
border:0;
margin-top:0px;
text-align:center;
background-color: white;
width:100%;
}

#band {
display:inline-block;
margin: auto;
width:1260px;
text-align:center;
}

h1 {
 font-size: 180%; 
 color: black; 
 text-align: center;
 }
h2 {
 font-size: 150%; 
 color: red; 
 padding-left: 15px;
 }
p,ul,li,td {
 color: black; 
 }
a:link {
 color:black;
 text-decoration:none;
 }
a#lienext
{
color:blue;
} 
a#inscrire 
{
color:blue;
}
a#inscrire:active, a#inscrire:focus
{
color:red;
}
 a#inscrire:hover {
 color: red;
 text-decoration: none;
}

a:hover {
 color: blue;
 text-decoration: none;
}
td a:hover {
 color: blue;
 text-decoration: underline overline #FF3028;
}
a:active, a:focus {
 color: blue;
}
footer {
padding-top:60px;
margin-bottom:20px;
background-color:#7D94B6;
height: 100px;
width:100%;
text-align:center;
}
.description
{
clear:right;
clear:left;
font-size:15px;
text-align:left;
background-color: white; 
padding-top:50px;
border:0;
margin-bottom:200px;
width:100%;
}

div.description p 
{
margin-left:50px;
margin-right:50px;
}
div.description h3
{
margin-left:50px;
margin-right:50px;
}

img.infographie {
    display: block;
    margin-left: auto;
    margin-right: auto;
	width:820px;
	}

.produit
{
clear:right;
clear:left;
width:100%;
position:float;
background-color: white; 
padding-top:80px;
padding-bottom:80px;
border:0;
font-size:20px;
text-align:left;
}
div.produit label{
margin:0px;
padding:0px;
width:100px;
}

div.produit h2{
margin-top:50px;
text-align:center;
color:black;
margin-bottom:50px;
}

div.produit h1{
margin-left:30px;
text-align: left;

}
div.produit h3{
margin-left:30px;
text-align: left;

}
div.produit p
{
margin-left:30px;
margin-right:30px;
}


div.produit  button{
		  padding-left:20px;
          font-size: 30px;
          font-family: Arial, Helvetica, sans-serif;
          padding: 10px;
          border: none;
          background-color: #FFAEC9;
          color: black;
          border-radius: 3px;
          box-shadow: 6px 6px 20px 4px;
          cursor: pointer;
          outline: none;
          transition: 0.2s;
      }

      button:hover{
          transform: scale(1.2);
          box-shadow: 6px 6px 27px 4px;
	}
.post
{
text-align:left;
background-color: transparent; 
font-family:  Georgia, "DejaVu Serif", Norasi, serif;display: block;
margin:auto;
padding-top:100px;
padding-bottom:20px;
width: 60%;
}
.post img
{
padding-top:10px;
padding-bottom:20px;
}
.post a img
{
padding:0;
margin:0;
}

div.centre p
 {
text-indent:10px;
text-align:left;
margin-left:10px;
margin-right:10px;
}

.centre
{
text-align:center;
background-color: white;
margin:auto;
width:100%;
}

div.centre p 
{
margin-left:100px;
margin-right:100px;
}


#description
{
background-color: white; 
font-family: Impact;
font-size: 100%;
display: block;
margin-top: 50px;
margin-left:50px;
margin-bottom:500px;
width: 960px;
}
table#tarifs
{
background-color:white;
}

table
{
border:ridge 5px #B0C4DE;
background-color:white;
}
table td       
{
border:inset 1px #000;
background-color:white;
}
table tr#ROW1  {background-color:#B0C4DE;color:white; font-family: Comic Sans MS, Comic Sans, cursive; font-size: 24px;}
table tr#ROW2  {background-color:white; font-family: Comic Sans MS, Comic Sans, cursive; font-size: 24px:}
table tr#ROW3  {background-color:#DCDCDC; color:white; font-family: Comic Sans MS, Comic Sans, cursive; font-size: 24px:}
table td#CELL {border:inset 4px red; background-color:navy;}

.fin
{
display:block;
width:100%;
background-color:white;
padding:0;
}
img.arriere
{
margin-bottom:-5px;
padding:0;
width:100%;
height:230px;
background-color:transparent;
}

.right {
float:right;
font-family: Impact;
width:10%;
height:200px;
text-align:left;
background-color:white;
}
.left {
float:left;
padding-left: 10%;
margin-bottom:50px;
width:80%;
text-align:center;
height:200px;
background-color:white;
}

.contenu
{
margin-left:5%;
margin-right:5%;
clear:right;
clear:left;
text-align:center;
background-color:white;
width:90%;
}

p.pleft 
{
text-align: left;
width:50%;
margin-left:30%;
}

ul.pleft 
{
text-align:left;
}
li.pleft
{
text-align:left;
margin-left:20%;
padding-left:20%;
}

.field
{
width:40%;
}
div.essai{
display:block;
clear:right;
clear:left;
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
text-align:center;
font-size:30px;
width:60%;
background-color:white;
}
div.essai:hover{
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-size:40px;
width:100%;
background-color:#FFAEC9;
text-align:center;
height:100%;
}
div.essai  a table
{
margin:auto;
padding-top:20px;
width:80%;
background-color:transparent;
list-style: none;
border:0;
}
div.essai  a tr th
{
width:200px;
background-color:transparent;
list-style: none;
}
div#essai{
display:block;
clear:right;
clear:left;
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
text-align:center;
font-size:30px;
width:60%;
background-color:white;
}
div#essai:hover{
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-size:40px;
width:100%;
background-color:#FFAEC9;
text-align:center;
height:100%;
}
div#essai  a table
{
margin:auto;
padding-top:20px;
width:80%;
background-color:transparent;
list-style: none;
border:0;
}
div#essai  a tr th
{
width:200px;
background-color:transparent;
list-style: none;
}
div#essai1{
display:block;
clear:right;
clear:left;
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
text-align:center;
font-size:30px;
width:60%;
background-color:white;
}
div#essai1:hover{
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-size:40px;
width:100%;
background-color:#FFAEC9;
text-align:center;
height:100%;
}

div#essai1  a table
{
margin:auto;
padding-top:20px;
width:80%;
background-color:transparent;
list-style: none;
border:0;
}
div#essai1  a tr th
{
width:200px;
background-color:transparent;
list-style: none;
}


div.colonne1{
	display:block;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 16px;
	margin-left:5%;
	margin-right:0%;
	float:left; 
	width: 30%;
	background-color: #FFFFFF;
}
div.colonne2{
	display:block;
	font-family: 'Roboto', Arial, sans-serif; 
	font-size: 16px;
	margin-left:0%;
	margin-right:0%;
	float:left; 
	width: 30%;
	background-color: #FFFFFF;
}
div.colonne3{
	display:block;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 16px;
	margin-left:0%;
	margin-right:5%;
	float:left; 
	width: 30%;
	background-color: #FFFFFF;
}
div.colonne3 img{
margin-left:150px;
}
article#mosaique
{ 
font-family: 'Roboto', Arial, sans-serif;
font-size: 100%;
display: block;
margin: 50px;
width: 960px;
background-color:white;
}


div#boutique{
font-family: 'Roboto', Arial, sans-serif; 
font-size: 16px;
margin-left:10px;
margin-right:10px;
float:left; 
width: 300px;
}

p#boutique{
background-color:white;
}
nav ul
{
list-style-type:none;
}
nav ul li {
 margin-top:10px;
 margin-left:20px;
 margin-right:20px;
 float:left; 
 font-family: Impact;
 font-size:120%;
 color:#000000;
 list-style: none;
 text-align: center;

 }
nav ul li a {
 display:block;   
 color:black;
 text-decoration:none;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 padding-right:0px;
 padding-left:0px;
 }
nav ul li a:hover {
 background-color: #FFAEC9;

 } 


nav ul li.bouton
{
display:inline;
background-image:url("ovale.jpg");
background-repeat: no-repeat;
background-position: center;
background-color:white;
width:92px;
height:30px;
padding-top:10px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
text-align:center;
margin-bottom:30px;
}
nav ul li.bouton:hover 
{
display:inline;
background-color:white;
background-image:url("ovale1.jpg");
background-repeat: no-repeat;
background-position: center;
width:92px;
height:30px;
text-align:center;
padding-top:10px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
margin-bottom:30px;
}

nav ul li.bouton ul li
{
position:relative;
text-align:center;
top:45px;
visibility: hidden;
background-color:white;
}

nav ul li.bouton ul 
{
width:420px;
visibility: hidden;
}

nav ul li.bouton:hover ul 
{
visibility: visible;
margin:auto;
margin-left:-200px;
display:block;
}


nav ul li.bouton:hover ul li
{
text-align:center;
margin:0;
padding:0;
position:relative;
left:0;
top:0;
visibility: visible;
border:solid;
background-color:white;
width:200px;
}
nav ul li.bouton:hover ul li:hover
{
background-color:#FFAEC9;
}

nav ul li.bouton:hover ul li a img
{
text-align:center;
margin-top:10px;
width:200px;
}



nav ul li div.ovale
{
width:98px;
height:42px;
font-family: Impact;
text-align:center;
background-color:transparent;
}

nav ul li div.ovale:hover
{
width:98px;
height:42px;
text-align:center;
background-color:transparent;
}

form.help{
background-color : #7D94B6;
}

form#question
{
position:float;
bottom:100px;
right:100px;
width:520px;
height:260px;
background-image:url("chat.png");
background-size:contain;
background-repeat:no-repeat;
text-align:center;
font-family:Impact;
}
form#question textarea
{
margin-left:-30px;
margin-top:05px;
line-height: 1.5;
border-radius: 50px;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #999;
text-align:center;
}
form#question label
{
display:block; 
font-size: 120%;
margin-right:0;
margin-left:20px;
margin-top:70px;
width:30px;
float:left;
}
img.imgleft
{
float:left;
}
img.objectBox
{
height:800px;
width:600px;
text-align:center;
border:0;
}
img#image2
{
height:960px;
border:0;
margin-left: 100px;
}


#CGVchecked
{
font-size:40px;
height:40px;
width:40px;

}

#nombre
{
font-size:40px;
}

nav img
{
text-align:center;
float:center;
}

.responsive
{
text-align:center;
display: block;
margin-top:70px;
width:100%;
}
.responsive a img
{
text-align:center;
background-color:white;
height:200px;
}
.responsive a
{
text-align:center;
}
.responsive a img:hover
{
background-color:#FFAEC9;
}
.form2{width:620px;height:420px;background:#FFFFFF;border-radius:8px;box-shadow:0 0 40px -10px #50505a;margin:auto;padding:2;max-width:calc(100vw - 40px);box-sizing:border-box;font-family:'Montserrat',sans-serif;position:relative ; text-align:center}
.form2 h2{margin:auto;padding:10px;width:180px;color:#50505a;border-bottom:3px solid #78788c}
.form2 input{width:200px;padding:10px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;font-family:'Montserrat',sans-serif;transition:all .3s;border-bottom:2px solid #bebed2}
.form2 input:focus{border-bottom:2px solid #78788c}
.form2 input#message{ width:240px; height:120px ;padding:10px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;font-family:'Montserrat',sans-serif;transition:all .3s;border-bottom:2px solid #bebed2 }
.form2 input:focus{border-bottom:2px solid #78788c}
.form2 button{padding:8px 12px;margin:auto;font-family:'Montserrat',sans-serif;border:2px solid #78788c;background:0;color:#000000;cursor:pointer;transition:all .3s}
.form2 button:hover{background:#78788c;color:#fff}
.contact{content:'Soutien scolaire';position:absolute;bottom:-35px;right:-15px;background:#50505a;color:#fff;width:320px;padding:16px 4px 16px 0;border-radius:6px;font-size:13px;box-shadow:10px 10px 40px -14px #000}
span{margin:0 5px 0 15px}
.contact a {color:#fff}
.autre {display:none}
#click {
display:block;
float:left;
font-weight: bold;
}
#timer {
font-weight: bold;
}
 .image {
    float: left;
    margin-right: 20px;
  }
  .content {
    overflow: hidden;
  }
 
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  .button:hover {
    background-color: #0056b3;
  }