body
{
   width: 90%;
   height: 800px;
   margin: auto; 
   margin-top: 20px; 
   margin-bottom: 20px; 
   background-color: #FFFFFF;
}


#header
{
  width: 100%;
  height: 80px;
  margin: 0px;
  border-bottom-style: solid;
     background: #695A55 ; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgb(236,233,232), rgb(105,90,85)); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(rgb(236,233,232), rgb(105,90,85)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgb(236,233,232), rgb(105,90,85)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgb(236,233,232), rgb(105,90,85)); /* Standard syntax */


}


#subheader
{
  width: 100%;
  height: 30px;
  margin: 0px;
  padding-top : 10px;
}


h1 {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 2.2em;
	padding-top: 25px;
	text-align: center;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
	padding: 2px;
	text-align: center;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
	padding: 2px;
	text-align: center;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
	padding: 2px;
	text-align: center;
}


p {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
	padding: 2px;
	text-align: center;
}


                          
.contenu
{
  width: 100%;
  height: 600px;
  background-color: #695A55;
  padding-top: 20px;
}



.flex-container {
    display: -webkit-flex;    
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 25%;
    height: 100%;
    float: left;
       -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
 
}

.flex-item {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
    width: 200px;
    height: 150px;
    margin: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
    
}

.flex-item:hover
{	
    width: 300px;
    height: 300px;
}


@media only screen and (max-width: 768px) 
{
[class*="flex-"] { display:none; }

}

.btnpied
{
   background-image: url("../img/imgpied.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 8%;
}


.btnvisage
{
   background-image: url("../img/imgvisage.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 8%;
}


.btncorps
{
   background-image: url("../img/imgcorps.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 8%;
}

.btnnews
{
   background-image: url("../img/imgnews.png");
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 8%;
}

.btncontact
{
   background-image: url("../img/logo2020.png");
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 8%;
}

.btnepilation
{
   background-image: url("../img/epil1.png");
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 8%;
}

.flip {
    font-size: 16px;
    padding: 10px;
    text-align: center;
    margin: auto;
  	border-radius: 8%;

}


/************************/

.panel {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
	height: 95%;
	width:50%;
	float: left;
  border-bottom-style: solid;
	border-bottom-color : #f58f7a;
  border-radius: 8%;

}

 

#panel1 { display: none; }
#panel2 { display: none; }
#panel3 { display: none; }
#panel4 { display: none; }
#panel5 { padding-top : 0px; }
#panel0 { display: none;}
#panel6 { display: none;}

@media only screen and (max-width: 768px) 
{
.panel
{
  width: 100%;
}
#panel1 { display: block; }
#panel2 { display: block; }
#panel3 { display: block; }
#panel4 { display: block; }
#panel5 { display: block; }
#panel6 { display: block; }
}

img {
    border-radius: 8px;
}
#footer
{	
  width: 100%;
  height: 30px;
  background-color: #695A55;
}


table {
    border-collapse: collapse;
    width: 100%;
    
}

th {
    text-align: right;
    background-color:#f58f7a;
    color:#FFFFFF;
}

td {
	  padding-left: 15px;
    text-align: left;
}

tr:nth-child(even){background-color: #f2f2f2}

.txtpanel {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
	padding-left : 10px;
	text-align: left;
}

.txtpetit {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
	padding-left : 10px;
	text-align: left;
}

.bottom
{
	padding : 50px;
	text-align: center;
	float:left;
}

.mention
{
	padding : 50px;
	text-align: center;
	color:#000000;
}