* { position: relative; }



*{
  margin: 0;
  padding: 0;
}

.body {
  font-family: "Lato", sans-serif;
}




* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header2 {
  padding: 30px;
  text-align: center;
  background:white;
  color:#1abc9c;
}
.logo2{
	float:left;
	display:block;
	margin-left:50px;
	margin-top:50px;
	z-index:1;
  position:absolute;
  height:120px;
}
.nb2 {
width:99%;
height:130px;
margin:10px 10px 100px 10px;	
  padding: ;
  text-align: ;
  bckground:white;
  color:;
}
.lg2{
display:none;	

}

/* Style the top navigation bar */
.navbar2 {
	
  overflow: hidden;
  width:180px;
  float: right;
 margin:36px 145px 10px 300px;
 z-index:3;
}

.navbar2 a { 	
  float:left;
  display:block;
  color: white;
  text-align: center;
  padding: 3px 2px;
  text-decoration: none;
  background-color:RGB(129,190,270);
  margin:5px 0px 0px 5px;
  width:180px;
  z-index:3;
}
.navbar2 a.selected  {
	clear:; 
	font-weight:bold;
	color:#086A87;
	text-shadow:none;
	background-color:#ddd;
}
.navbar2 .selected {
	background-color:#ddd;
	width:180px;
}
/* Right-aligned link */
.navbar2 a.right {
  float: right;
}

/* Change color on hover */
.navbar2 a:hover {
  background-color: #ddd;
  color:#086A87;
}


	
/*------------------------- acceuil index --------------------------*/

.logo{
	float:left;
	display:block;
	margin-left:50px;
	margin-top:20px;
	z-index:1;
  position:absolute;
  height:120px;
}

/*-------------------------	 -----------------------*/
body {
  font-family: "Lato", sans-serif;
}



/*-------------------------  expos	--------------------------*/
  font-family: Arial;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
  
}
#myBtn2B {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:#f6008a;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn2B:hover {
  background-color: #555;
}
#grapheA {
     position:relative;
     width:80%;
	 height:750px;
    font-family: sans-serif;
    font-size: 11px;
    color: #444;
   background-color:#CED8F6;
	margin:30px auto;
}
#lm p{
margin:10px auto;
font-size:25px;
color:white;
background-color:#F9B6ED;
border:2px solid #F9B6ED;
 line-height:30px; 
 font-weight:bold;
width:500px;
text-align:center;
}



.D1 {
  float:left;
  position: absolute;
  margin-top:100px;    
margin-left:100px;
text-align:center;
vertical-align:;
 font-size:20px;
 line-height:17px;
color:yellow;
border:2px solid lightgrey;
background-color:lightgrey;
   width:150px;
   height:30px;
   z-index:7;
}
.D1 a {
 text-decoration:none;
 color:yellow;
}	
#grapheC {
position:absolute;
width:200px;
height:100px;
margin-top:140px;    
margin-left:100px;
border:2px solid #E0E6F8;
background-color:#E0E6F8;
text-align:center;
vertical-align:;
 font-size:15px;
 line-height: 17px;
color:yellow;
font-weight:bold; 
}

/* Position the image container () */
.container2B {
  
  position: relative;
   margin-top:50px;
   float:right;
   display:inline-block;
   
}
/* Hide the images by default */
.mySlides2B {
  display: none;
  
}
.mySlides2B {
  float:right;
  width:550px;
  height:650px;
  background-color:lightblue;
  margin:30px 20px 30px 440px;
   position: absolute;
}
.mySlides2B img{
  display:;
  height:650px;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}
.hide2B {
  display: none;
  margin:-310px 70px 10px 370px;
   height:300px;
   width:200px;
}
.myDIV2B {
margin-top: 10px;
margin-left: 120px;
font-size:15px;
}    
.myDIV2B:hover + .hide2B {
  display: block;
  color:white;
   margin:-350px 70px 10px 130px;
   background-color:lightblue; 
   height:300px;
   width:200px;
}



/* Next & previous buttons */
.prev2B,
.next2B {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -40px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
    -webkit-user-select: none;
}
.prev2m,
.next2m {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -40px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
    -webkit-user-select: none;
}
.prev2m {
 position:absolute;	
display:none; 	
	
}
.next2m {
 position:absolute;	
display:none; 	
	
}
.p7{
float:;
  width:80px;
  margin:1px 40px -20px 40px;
  display:block; 
   height:50px;		
}
.am7 {
 position:absolute;
width:80px; 
display:none;

z-index:7;
height:50px;	
}

/* Position the "next button" to the right */
.next2B {
  right:0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a  color with a little bit see-through */
.prev2B:hover,
.next2B:hover {
 
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  }

/* Container for image text */



/* Responsive  expos  */
@media screen and (max-width:800px) {
	body{
	background-color:lightblue;
    	
	background-image:linear-gradient(lightblue, white);	
	}
	.header2{
	
	bckground-image:linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
	background-image:linear-gradient(white,lightblue);
	}
	.logo2{
	display:none;	
	}
	.lg2{
	
 mrgin:10px auto;
 
  float:none;
  psition:absolute;
   width:100%;
   margin:-150px auto;
   display:block;
position:absolute;
}
nb2 {

   float:none;
  position:absolute;
   width:100%;
 
    margin-left:auto;
	 margin-right:auto;
   display:block;
position:absolute;
}
.navbar2  {
	 margin-left:auto;
	 margin-right:auto;
  float:none;
 margin:160px auto;
  psition:absolute;
   display:block;
}
#grapheA {
background-color:white;	
}
.p7{
position:absolute;	
float:none;
  width:50px;
  margin:-121px 40px -20px 40px;
  display:none; 
   bckground-color:lightblue;
   height:50px;	
	
}
.am7{
display:block; 	
mrgin:auto;
margin-top:-10px;
margin-left:80%;
clor:blue;
background-color:white;
float:none;
    position:relative;
   width:auto;
  
z-index:7;
}
.prev2m {
 position:absolute;	
display:block; 	
bckground-color:yellow;
z-index:17;
wdth:auto;
width:30%;
height:50%;
color:yellow;
margin:30px 20px 10px -20px;
pdding:-120px;		
}
.next2m {
 position:absolute;	
display:block; 	
bckground-color:yellow;
margin:30px 20px 10px 20px ;
width:30%;
height:50%;
color:yellow;
mrgin:10px;
pdding:120px		
}
  #grapheA {
	  display:block;
	 position:relative;
	  width:100%;
	  height:;
	  float:none;
	 height:550px;
	 dsplay:none; 
	vrtical-align: middle;
    font-family: sans-serif;
    font-size: 11px;
    color: #444;
    background-color:white;
	 bckground-color:#CED8F6;
	}
  #grapheA {
   margin:150px auto;
   width:auto;

  }
  .D1 {
    mrgin-left:100px;
	mrgin-top:10px;
	hight:50px;
	psition:absolute;
    mrgin:-40px 20px 10px 100px;
	 margin:-40px auto;
	 width:auto;
	 float:none;
	 left:30%;
	 display:block;  
  }
 
  
 
 #lm p{

margin:-100px auto;
font-size:20px;
clor:#F9B6ED;
color:white;
background-color:#F9B6ED;
border:2px solid #F9B6ED;
 line-height:30px; 
 font-weight:bold;
width:auto;
width:80%;
psition:absolute;
text-align:center;
dsplay:inline-block;
}

  
	
 
  
  #grapheC {
display:none;
position:absolute;
width:200px;
height:100px;
margin-top:100px;    
margin-left:100px;
border:2px solid #E0E6F8;
background-color:#E0E6F8;
text-align:center;
vertical-align:;
 font-size:15px;
 line-height: 17px;
color:yellow;
font-weight:bold; 
}


.prev2B,
.next2B {
	mrgin:10px;
  background-color:;
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding:1px;
  pdding:110px;
  margin-top:-50px;
  color:white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
    -webkit-user-select: none;
}
.container2B {
  float:none;
   width:100%;
   margin:auto;
   display:block;
position:absolute; 
 }

.container2B>#P3A {
  position:absolute;
  text-align:center;
  bckground-color:yellow;
  clor:white;
  wdth:80%;
  mrgin:-180px 10px 10px 10px;
   margin:auto;
    fnt-weight: bold;
  fnt-size:15px;
  display:none;
  }

.mySlides2B {
  float:none;
  
  height:400px;
  background-color:lightblue;
  mrgin:50px 10px 10px 10px;
   margin: auto;
   position: absolute;
   text-align:center;
   vertical-align: middle;
   mrgin:-780px auto ;
   width:auto; 
}

#P3A{
margin:120px auto;
position:absolute;
dsplay:none;
}

.row2B {
	dsplay:none;
 margin:128px 20px 2px 100px;
  float:none;
  cntent: "";
  display:table;
  position:absolute;
  mrgin:410px 20px 2px 30px;
  clear:both;
   mrgin-left:20px;
   mrgin-top:-600px;
    width:100%;
}

p8 {
	
margin-top:670px;
color:blue;
bckground-color:lightblue;
float:none;
	margin:200px auto;
   position:absolute;
z-index:3;   
}



.hide2B {
  display: none;
  margin:-310px 70px 10px 370px;
   height:250px;
   width:140px;
   z-index:7;
}
.myDIV2B {

mrgin:-40px 70px 10px 120px;
margin-top: 20px;
margin-left:-70px;
z-index:7;
}    
.myDIV2B:hover + .hide2B {
  display: block;
  color:yellow;
   margin:-310px 70px 10px 130px;
   background-color:lightblue;
   height:250px;
   width:140px;
   z-index:7;
}

 #myBtn2B {
  display: none;
  position: fixed;
  bottom: 20px;
  rght:40px;
  lft:100px;
    left:80%;
  z-index: 99;
  font-size: 10px;
  border: none;
  outline: none;
  background-color:#f6008a;
  color: white;
  cursor: pointer;
  padding:10px;
  border-radius: 4px;
   width:10%;
   wdth:auto;
}



}








/*-------------------------  expos  galerie --------------------------*/

body {
  font-family: "Lato", sans-serif;
}



/*-------------------------Expos , Galerie screen   -------------*/
 
/* Responsive  expos galerie */






/*------------------- soins esthetique ---------------------*/


/* Responsive  soins esthetique */


/*-------------------------  blog	  --------------------------*/

.olcm p{
padding:5px -2px 5px 5px;
font-size:25px;
font-weight:bold;
line-height:1;		
color:yellow;
margin:4px 10px 4px 10px;	
}
.olcm{
clar:both;
margin:10px 50px 40px 750px;
pdding:12px 12px 22px 12px;
width:450px;
height:40px;
 color:yellow;
  text-align: center;
  background: #ddd;
  display:inline-block;
  z-index:1;
  position:absolute;
}	
h2{
clor:#f6008a;
color:#FA58F4;
}
.pg {
margin:80px 100px 120px 860px;
mrgin-top:100px;
wdth:200px;
height:40px;
 clor:yellow;
 brder:4px solid #FA58F4; 
  txt-align: center;
  display:block;
  z-index:1;
  position:absolute;	
}
.pg h2{
mrgin:20px 50px 2px 740px;
width:280px;
border:4px solid #FA58F4;
 text-align: center; 	
}




/*-------------------------	blog  --------------------------*/
body {
  font-family: "Lato", sans-serif;
}
.container4D {
  
  position: relative;
   margin-top:20px;
    float:left;
   display:inline-block;
   margin-left:20px;
   border:2px solid lightblue;
background-color:lightblue;
width:650px;
  height:750px;
   
}




/* Hide the images by default */
.mySlides4D {
  display: none;
   float:left;
   position:absolute;
display:inline-block;
width:auto;
height:90%;
background-color:lightblue;
margin:25px;
}
.mySlides4D img{
  height:100%;
   psition: absolute;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}
.hide4D {
  display: none;
  margin:-310px 70px 10px 370px;
   height:300px;
   width:200px;
}
.myDIV4D {
margin-top: 10px;
margin-left: 120px;
font-size:12px;
}    
.myDIV4D:hover + .hide4D {
  display: block;
  clor:yellow;
  color:white;
   margin:-350px 70px 10px 130px;
   background-color:lightblue;
  bckground-color:white; 
   height:300px;
   width:200px;
   font-size:12px;
}



/* Next & previous buttons */
.prev4D,
.next4D {
  cursor: pointer;
  position: absolute;
  tp: 40%;
   top:;
  width: auto;
  padding:12px;
  margin-top:50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
    -webkit-user-select: none;
	 background-color:lightblue;
}

.p8A{
float:;
  width:60px;
  margin:25px 40px 2px 480px;
  display:block; 
   bckground-color:lightblue;
   height:30px;	
mrgin-top:-20px;	
}

/* Position the "next button" to the right */
.next4D {
  right:0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a  color with a little bit see-through */
.prev4D:hover,
.next4D:hover {
  bckground-color: rgba(0, 0, 0, 0.8);
  background-color:lightblue;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  display:none;
  }

.graphG1{
float:right;
position:absolute;
display:inline-block;
width:40%;
height:600px;
background-color:white;
margin-right:20px;
margin-top:118px;
margin-left:50px;
z-ndex:4;
}

/*------------------- form comment intn priere message blog -------------------*/
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
	clear:both;
  bckground-color: #555;
  background-color:#FA58F4;
  color: white;
  padding: 5px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  psition:relative;
  margin:20px -58px 10px 140px;
  width: 280px;
  height:40px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position:absolute;
  background-color: white;
  margin:-430px 15px 10px 10px;
  z-index: 9;
  border:2px solid lightblue;
}

/* Add styles to the form container */
.form-container {
  max-width:400px;
  padding: 10px 10px 20px 10px;
  margin-top:20px;
  background-color: white;
  bottom:0px;
  border:2px solid bl;
  color:#0489B1; 
}
/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color:#04B486;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color:#FE2EF7;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

h2{
clor:#f6008a;
color:#FA58F4;
}
/*------------------- form comment intn priere message blog -------------------*/
body {
  margin: 0 auto;
  max-width:;
  padding: 0px 20px;
}

.container1 {
  brder: 2px solid #dedede;
  border: 2px solid #EFF8FB;
  background-color:#EFF8FB;
  border-radius: 5px;
  padding: 10px;
  margin:10px 10px 10px 10px;
}

.darker {
  border-color:#E0F2F7;
  background-color:#E0F2F7;
}

.container1::after {
  content: "";
  clear: both;
  display: table;
}

.cntainer1 img {
  
  max-width: 60px;
 
  border-radius: 50%;
}



.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}
/*-------------------------	blog  --------------------------*/


grph4D{
 width:40px;
  text-align: center;
  padding: 5px;
  background: #ddd;
  display:block;
  float:left;
  margin-top:250px;
  margin-left:800px;
  z-index:1;
  position:absolute;
}

body {
  font-family: "Lato", sans-serif;
}



#myBtn4D {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:#f6008a;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn4D:hover {
  background-color: #555;
}



  .footer4D {
	  dsplay:none;
  margin-top:900px;
  text-align: center;
  flot:none;
   width:auto;
     mrgin-bottom:110px;
}
.list-soc4D{
	float:right; margin-right:200px;margin-top:-60px;

 width:auto;
 }
 .list-soc4D p{float:left;margin-left:14px;}
 .list-soc4D p a{ display:block;}






/*-------------------------responsive blog --------------------------*/
 @media screen and (max-width:900px) {
 
.nb{
position:relative;
width:auto;
float:none;
margin: auto;	
}

.olcm{

float:none;
	margin:-70px auto;
 height:40px;
 text-align: center;
 position:absolute;
display:block;
width:80%;
margin-left:5%;
}		 
.olcm p{
padding:5px -2px 5px 5px;
font-size:20px;
font-weight:bold;
line-height:1;		
color:yellow;
 text-align: center;
  float:none;
  width:100%;
 position:absolute;
margin:5px auto;
display:block;	 
}

h2{
color:#FA58F4;
}

.header2{
	
margin-left:20px;	
	
	
}
grph4D{
 
}

.container4D {
background-size:; 
position:absolute;
float:none;
bckground-color:white;
brder:3px solid white;
  margin:-20px auto;
  padding: ;
 hight:100%;
 height:auto;
  width:100%;
 
 display:inline-block;
  mrgin-left:-20px;
}
.mySlides4D  {
position:absolute;
display:inline-block;
float:none;	
width:100%;
margin:5px auto;
height:500px;
}
.p{
  width:300px;
  text-align: center;
  padding: 5px;
  background: #ddd;    
margin:25px 15px 10px 11px;
 }
 .p8A{
margin-top:-5%;	 
margin-left:80%;	 
 }
.graphG1{ 
}

.graphG1{
float:none;
position:absolute;
display:block;
width:100%;
wdth:auto;
height:;
height:auto;
background-color:white;
margin:500px auto;
}

.pg h2{
margin:5px auto;
display:block;	
}

.pg {
	float:none;
	margin:510px auto;
  height:40px;
 text-align: center;
 position:absolute;
display:block;
width:100%;
 z-index:3; 
}
.open-button {
 background-color:#FA58F4;
  color: white;
 border: none;
  cursor: pointer;
  opacity: 0.8;
  float:none;
  margin:76px auto;
  width:auto;
   text-align: center;
display:block;
}
.open-button p{
  margin:auto;
 margin-top:8px;
  float:none;
  width:100%; 
}
.chat-popup {
	
float:none;
  margin:-610px auto;
  width:auto;	
	
}
#myBtn4D {
  display: none;
  position: fixed;
  right:;
  margin:auto;
  z-index: 99;
  font-size: 10px;
  border: none;
  outline: none;
  background-color:#f6008a;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  wdth:10%;
   width:auto;
   mrgin-left:-127px;
}
#mBtn4D {
width:7%;
height:7%;	
}	
  .footer4D {
  margin-top:1500px;
  text-align: center;
   width:auto;
}
.list-soc4D{
	float:none;margin-right:20px;margin-top:36px;

 width:auto;
 }
 .list-soc4D p{float:left;margin-left:14px;}
 .list-soc4D p a{ display:block;}

}
 

/*-------------------------	btn haut --------------------------*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:#f6008a;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
#scUp {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#scUp:hover {
  background-color: #555;
}

scUp{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}

@media screen and (max-width: 600px) {
	
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 10px;
  border: none;
  outline: none;
  background-color:#f6008a;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
#scUp {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
}

#scUp:hover {
  background-color: #555;
}

scUp{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}
}