* {
 margin: 0;
 padding: 0;
}


body,html {

font-family: 'Lato', sans-serif;


}


#page {
  width: 100%;
  height: 100%;

}


#citation {


font-size: 1em;
text-align:right;

}



/* ------------------ Eng --------------------- */

#eng{

position: absolute;
z-index: 3;
  top: 13px;
  right: 120px;

}

#eng a{
font-size: 1.1em;
padding: 15px 10px;
text-decoration: none;
color:#FFFFFF;
font-weight: bold;
}


#eng a:hover{
font-weight: none;
color: #01DFD7;
}




@media all and (max-width: 780px) {

	
#eng{

position: absolute;
z-index: 3;
  top: 10px;
  right: 5px;

}

#eng a{
font-size: 1em;
padding: 15px 10px;
text-decoration: none;
color:#FFFFFF;
font-weight: bold;
}


#eng a:hover{
font-weight: none;
color: #01DFD7;
}
	
	
	

	
	
	
	}







/* ------------------ Musique --------------------- */

#music{

position: absolute;
z-index: 3;
  top: 10px;
  right: 30px;

}




#music .bouton{
height: auto; 
margin: 0px 0px 0px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: solid 2px #FFFFFF; 
overflow: hidden; 
position: relative;
border-radius: 5px;
}


#music a{
font-size: 1.1em;
font-weight: bold;
padding: 15px 10px;
text-decoration: none;
color:#FFFFFF;
}


#music a:hover{
 color: #000; /* Fallback for older browsers */
 color: rgba(0, 0, 0, 0.5);
background-color:#FFFFFF;
}



#page-musique{
text-align:center;
}

#page-musique p{
padding-top: 5px;
font-size: 1em;
color:#a4a4a4;
}








/* ------------------ Musique --------------------- */







#logo{

width: 250px;
height: 250px;
border: solid 1px transparent;
margin:0px 0px 0px 0px; 
position: absolute;
z-index: 2;
  top: 30px;
  left: 60px;
}




#menu{ 
width: 100%;
height: 80px;
border: solid 1px transparent;
margin:0px 0px 0px 0px; 
background-color:#FFFFFF;
opacity: 0.9;
z-index:100;
} 

.fixNavigation{ 
position: fixed; 
top: 0; /* Mise en forme */ 

}



@media all and (max-width: 780px) {

	
#music {
display:none;
}
	
	
	
#logo{
width: 100px;
height: 100px;
border: 1px solid transparent;
margin:0px 0px 0px 0px; 
position: absolute;
z-index: 2;
  top: 10px; 
  left: 50%;
margin-left: -50px;
}
	
	
	

	
	
	
	}










/*--------------- Menu Mobile -------------------------------------------------------*/


#nav-trigger {
  display: none;
  text-align: right; 
  margin: 13px 16px 0px 0px;
  border: 1px solid transparent;
  }
  
  
  #nav-trigger span {
    display: inline-block;
    padding: 0px 10px 6px 10px;
	margin: 0px 0px 0px 0px;
    border: 1px solid transparent;
    color: #FFFFFF;
	font-size: 1.2em;
    cursor: pointer;
    text-transform: uppercase; 
	}
	
	

	
  #nav-trigger span:after {
    display: inline-block;
	margin: 10px 10px 10px 10px;
    width: 30px;
    height: 20px;
    content: "";
	border: 1px solid transparent;
	background-image: url(images/menu.png);
	background-repeat: no-repeat;
	  
	  }
	  
	  
   #nav-trigger span:hover {
    background-color: transparent;
	border: 1px solid #a4a4a4;
	border-radius: 5px;
	  
	  }
	  
	  
    #nav-trigger span.open:after {
	
  	border: 1px solid transparent;
	background-image: url(images/menu.png);
	background-repeat: no-repeat;
	  
	  }


/*--------------- Menu déroulant Mobile -------------------------------------------------------*/	
	
	
nav#nav-mobile {
  position: relative;
  display: none; 
  margin: 11px 0px 0px 0px;
z-index:100;

  }
  

  
  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #FFFFFF;
	}
	
	
	
	
  nav#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0 5px;
	border-top: solid 1px #d8d8d8;
	}
	
	
    nav#nav-mobile li:last-child {
      border-bottom: none; 
	  }
	  
	  
  nav#nav-mobile a {
    display: block;
	text-decoration: none;
    color: #a4a4a4;
    padding: 10px 30px; 
	}
	
	
    nav#nav-mobile a:hover {
      background-color: #01DFD7;
      color: #FFFFFF; 
	  }	
	
	
	nav#nav-mobile a.active{
color: #a4a4a4;
font-weight:bold;
text-decoration: none; 
} 



/*---------------  Big Menu -------------------------------------------------------*/
	
	
	
#logo-barre{
float: left;
width: 250px;
height: 70px;
border: solid 1px transparent;
margin:3px 0px 0px 30px; 

}	
	

@media all and (max-width: 780px) {

	
#music {
display:none;
}
	

	
	
#logo-barre{
float: left;
width: 200px;
height: 56px;
border: solid 1px transparent;
margin: 12px 0px 0px 10px; 

}
	
	
	}

	
	
nav {
  margin-bottom: 0px; 
  }

  
nav#nav-main {
 font-size: 1.2em;
 float:right;
 
 margin: 22px 10px 0px 0px;
 border: 1px solid transparent;
 
  }
  
  nav#nav-main ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; 
	}
	
	
	
	
  nav#nav-main li {
    display: inline-block;
    padding: 0px 5px 0px 1px; 
	
	}
	
	
    nav#nav-main li:last-child {
      border-right: none; 
	  
	  }
	  
	  
  nav#nav-main a {
    display: block;
	text-decoration: none;
    color: #a4a4a4;
    padding: 5px 12px; 
	
	}
	

    nav#nav-main a:hover {
   

      color: #01DFD7; 
	  
	  }


nav#nav-main a.active{

color: #01DFD7;


}









@media(max-width: 1015px) {
  #nav-trigger {
    display: block; }

  nav#nav-main {
    display: none; }

  nav#nav-mobile {
    display: block; } 
	
	

	

	
}

/*---------------  Accueil Info -------------------------------------------------------*/




#info{
width: 90%;
border: 0px solid transparent;
margin: 0px auto 0px;
text-align: center;
padding: 150px 0px 150px 0px;
}



#info p  {
font-size:3em;
text-align: center;
margin: 0px 0px 0px 0px;
color: #01DFD7;
line-height: 0.95;
}



@media all and (max-width: 780px) {


	#info{
width: 95%;
border: 0px solid transparent;
margin: 0px auto 0px;
text-align: center;
padding: 40px 0px 40px 0px;
}



#info p  {
font-size:1.8em;
text-align: center;
margin: 0px 0px 0px 0px;
color: #01DFD7;
line-height: 0.95;
}
	
	
	}



@media all and (max-width: 600px) {


	#info{
width: 85%;
border: 0px solid transparent;
margin: 0px auto 0px;
text-align: center;
padding: 40px 0px 40px 0px;
}



#info p  {
font-size:1.4em;
text-align: center;
margin: 0px 0px 0px 0px;
color: #01DFD7;
line-height: 0.95;
}
	
	
	}






/*---------------  Accueil équipe -------------------------------------------------------*/


#equipe{
width: 100%;
border: 1px solid transparent;
margin: 0px 0px 0px 0px;
padding-top:60px;
padding-bottom: 80px;
background-color:#01DFD7;
text-align: center;
z-index:10;
}



#contenu-equipe {
width: 90%; 
height: auto; 
text-align:center;
margin: 0px auto 0px;
border: 1px solid transparent;
}

#contenu-equipe h1  {
font-weight: 200;
font-size:3em;
text-align: center;
margin: 60px 0px 30px 0px;
color: #FFFFFF; 
line-height: 0.95;
}



.box{ 

width: 600px; 
height: 600px; 
margin: 20px 40px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;

text-align:left;/* On réinitialise les élements centré a gauche */	
			
}


.box h2 {
margin: 20px 0px 10px 0px;
font-size:1.9em;
text-align: center;
color: #FFFFFF; 
}






.box #photo {
margin: 0px auto 0px;
width: 512px; 
height:314px;
border: 0px solid #a4a4a4;

}


.box p {
margin: -3px 0px 0px 0px;
font-size:1.2em;
text-align: center;
color: #FFFFFF; 
}


.num {
font-size:1.2em;
font-weight:bold; 
}

#equipe .bouton{
height: auto; 
margin: 30px 0px 60px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: solid 2px #FFFFFF; 
overflow: hidden; 
position: relative;
border-radius: 5px;
}


#equipe a{
font-size: 1.2em;
font-weight: bold;
padding: 15px 15px;
text-decoration: none;
color:#FFFFFF;
}


#equipe a:hover{
color:#a4a4a4;

}





@media all and (max-width: 780px) {


.box h2 {
margin: 20px 0px 10px 0px;
font-size:1.5em;
}
	
	.box p {
margin: -3px 0px 0px 0px;
font-size:1em;
font-weight:bold;
}
	
	

.box{ 
width: 300px; 
height: 400px; 	
margin: 10px 0px;
}


.box #photo {
width: 300px; 
height:184px;
}



	
	#equipe .bouton{
margin: 10px 0px 10px 0px;
}


#equipe a{
font-size: 1em;
padding: 15px 15px;
}
	
	
	
	
	}












/*---------------  Accueil apropos -------------------------------------------------------*/

#apropos{
width: 100%;
border: 0px solid transparent;
margin: 0px auto 0px;
text-align: center;
}


#text-apropos {
width: 80%;
border: 1px solid transparent;
margin: 0px auto 0px;
padding: 150px 0px 60px 0px;


}

#text-apropos h1  {
font-weight: 200;
font-size:3em;
text-align: center;
margin: 0px 0px 40px 0px;
color: #01DFD7; 
line-height: 0.95;
}


#text-apropos p  {
margin: 0px 100px 0px 100px;
font-size:1.5em;
line-height: 1.2;
color: #a4a4a4; 

}


#text-apropos a{

font-weight: bold;
color: #a4a4a4;
text-decoration: none;
}


#text-apropos a:hover{
color:#FFFFFF;
color: #01DFD7;
}




.bouton{
height: auto; 
margin: 30px 0px 100px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: solid 2px #01DFD7; 
overflow: hidden; 
position: relative;
border-radius: 5px;

}


.bouton a{
font-size: 1.5em;
font-weight: bold;
padding: 15px 15px;
text-decoration: none;
color:#01DFD7;
}


.bouton a:hover{
color:#FFFFFF;
background-color:#01DFD7;
}



@media all and (max-width: 780px) {


#text-apropos {
padding: 60px 0px 30px 0px;
width: 90%;
}

#text-apropos h1  {
font-size:2em;
margin: 0px 0px 30px 0px;
}

#text-apropos p  {
margin: 0px auto 0px;
font-size:1.2em;
}

#apropos .bouton{
margin: 10px 0px 40px 0px;
}

#apropos a{
font-size: 1.1em;
}
	
	}

	

@media all and (min-width: 599px) {


#apropos .bouton-eng{
display: none;
}


}
	

@media all and (max-width: 600px) {


#text-apropos {
padding: 60px 0px 30px 0px;
}

#text-apropos h1  {
font-size:2em;
margin: 0px 0px 30px 0px;
}

#text-apropos p  {
margin: 0px auto 0px;
font-size:1em;
}


#apropos .bouton{
display: none;
}



#apropos a{
font-size: 1em;
}
	
	#apropos .bouton-eng{
height: auto; 
margin: 30px 0px 100px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: solid 2px #01DFD7; 
overflow: hidden; 
position: relative;
border-radius: 5px;
}


#apropos .bouton-eng a{
font-size: 1em;
font-weight: bold;
padding: 15px 15px;
text-decoration: none;
color:#01DFD7;
}


#apropos .bouton-eng a:hover{
color:#FFFFFF;
background-color:#01DFD7;
}
	
	
	}

/*---------------  Services -------------------------------------------------------*/


#accueil-services{
width: 100%;
height: auto;
border: 0px solid transparent;
margin: 0px auto 0px;
background-image: url("images/bg-accueil.png");
text-align:center;
}



#contenu-accueil-services {
width: 100%; 
height: auto; 
text-align:center;
margin: 0px auto 0px;
border: 1px solid transparent;
padding-bottom: 40px;
}

#contenu-accueil-services h1  {
font-weight: 200;
font-size:3em;
text-align: center;
margin: 120px 0px 60px 0px;
color: #01DFD7; 
line-height: 0.95;
}



.boxe{ 

width: 300px; 
height: 300px; 
margin: 0px 20px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;

text-align:left;/* On réinitialise les élements centré a gauche */	
			
}


.boxe h2 {
margin: 0px 0px 20px 0px;
font-size:1.8em;
text-align: center;
color: #01DFD7; 
font-weight: 300;
}



.boxe h2 a{
color: #01DFD7; 
text-decoration: none;
}

.boxe h2 a:hover{
font-weight:bold;
}





.boxe p {
margin: 10px 0px 4px 0px;
font-size:1.1em;
text-align: center;
color: #a4a4a4; 
}


.boxe #photo-services {
margin: 0px auto 0px;
width: 300px; 
height: 200px;
border: 1px solid transparent;

}



#accueil-services .bouton{
height: auto; 
margin: 20px 0px 100px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: solid 2px #01DFD7; 
overflow: hidden; 
position: relative;
border-radius: 5px;
}


#accueil-services .bouton a{
font-size: 1.5em;
font-weight: bold;
padding: 15px 15px;
text-decoration: none;
color:#01DFD7;
}


#accueil-services .bouton a:hover{
color:#FFFFFF;
background-color:#01DFD7;
}






@media all and (max-width: 780px) {





#contenu-accueil-services h1  {
font-size:1.8em;
margin: 60px 0px 40px 0px;
font-weight:bold;
}
	
	
.boxe h2 {
font-size:1.4em;
font-weight:bold;
}
	
	
	.boxe #photo-services {
margin: 0px auto 0px;
width: 250px; 
height: 167px;
border: 1px solid transparent;
}
	
	.boxe{ 
width: 250px; 
height: 275px; 		
}
	
	
	#accueil-services .bouton{
margin: 20px 0px 60px 0px;
}


#accueil-services a{
font-size: 1em;
}
	
	.boxe h2 a{
color: #01DFD7; 
text-decoration: none;
}

.boxe h2 a:hover{
font-weight:normal;
}

	
	}










/*---------------  Commentaires -------------------------------------------------------*/


#commentaires{
width: 100%;
height: auto;
border: 1px solid transparent;
margin: 0px auto 0px;
padding-bottom: 20px;
}





#commentaires h1 {
font-weight: 200;
font-size:3em;
text-align: center;
margin: 60px 0px 20px 0px;
color: #01DFD7; 
line-height: 0.95;
}



#mobile-com {
width: 98%;
height: auto;
border: 1px solid transparent;
margin: 0px auto 0px;
padding-bottom: 20px;
}

#mobile-com h1 {
font-size:1.8em;
margin: 20px 0px 15px 0px;
font-weight: 200;
text-align: center;
color: #01DFD7; 
line-height: 0.95;
}







@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}







@media all and (max-width: 780px) {

#commentaires h1 {
font-size:1.8em;
margin: 20px 0px 15px 0px;

}
	
#commentaires{
width: 95%;

}

	
	}


@media all and (max-width: 600px) {

#commentaires{
display:none;
}

	
}
	
	
@media all and (min-width: 601px) {



#mobile-com{
display:none;

}

	
	}
	
	
	
	

	
	
/*---------------  hours -------------------------------------------------------*/
	
	
#hours{
width: 85%;
height: auto;
border: 0px solid transparent;
margin: 0px auto 0px;
background-color: #FFFFFF;
text-align:center;
}
	
	
#hours h1 {
font-size:3em;
margin: 30px 0px 15px 0px;
font-weight: 200;
color: #01DFD7; 
line-height: 0.95;
}
	
	
#hours p{
font-size:1.1em;
margin: 0px 0px 5px 0px;
color: #a4a4a4; 
}	
	
	
	
	
	
	

@media all and (max-width: 600px) {


#hours h1 {
font-size:2em;
margin: 30px 0px 15px 0px;
font-weight: 200;
color: #01DFD7; 
line-height: 0.95;
}
	
	
#hours p{
font-size:1em;
margin: 0px 0px 5px 0px;
color: #a4a4a4; 
}	
	
	
	
	}	
	
	
	
	
	
	

/*---------------  Footer -------------------------------------------------------*/


#footer{
width: 100%;
height: auto;
border: 0px solid transparent;
margin: 0px auto 0px;
background-color: #01DFD7;
text-align:center;
}



#contenu-footer {
width: 100%; 
height: auto; 
text-align:center;
margin: 0px auto 0px;
border: 1px solid transparent;
}


#contenu-footer .bloc_footer{ 

width: 300px; 
height: 350px; 
margin: 20px 20px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;

text-align:left;/* On réinitialise les élements centré a gauche */	
			
}



#contenu-footer .bloc_footer h2 {
margin: 20px 0px 20px 0px;
font-size:1.3em;
text-align: center;
color: #FFFFFF; 

}


#contenu-footer .signature{ 
font-size: 1.2em;
color:#FFFFFF;
font-weight:bold;
text-align: center;
padding: 0px 0px 8px 0px;		
}

#contenu-footer p{ 
font-size: 1.1em;
color:#FFFFFF;
text-align: center;
font-weight:bold;
}


#contenu-footer .tel{ 
font-size: 1.1em;
color:#FFFFFF;
font-weight:bold;
text-align: center;
padding: 10px 0px;		
}



.bloc_footer a{
text-decoration: none;
color:#FFFFFF;
margin: 0px 0px 5px 0px;
}


.bloc_footer  a:hover{
font-weight: normal;
}


#facebook {
width: 300px; 
height: 350px; 
margin: 0px auto 0px;
border: 1px solid transparent;
}



#gmcollin {
width: 300px; 
height: 85px; 
margin: 0px auto 0px;
border: 1px solid transparent;
background-image: url("images/gmcollinlogo.png");
}


#norme {
width: 300px; 
height: 94px; 
margin: 0px auto 5px;
border: 1px solid transparent;
background-image: url("images/esthetique-limar-norme.jpg");
}

#maitre {
width: 300px; 
height: 94px; 
margin: 0px auto 0px;
border: 1px solid transparent;
background-image: url("images/esthetique_limar_maitre.jpg");
}








#copyright {
font-size: 1em;
width: 100%; 
height: auto; 
margin: 0px auto 0px;
padding-bottom:8px;
border: 1px solid transparent;
color: #FFFFFF;
}


#copyright a{
text-decoration: none;
color:#FFFFFF;
}


#copyright a:hover{
font-weight: normal;
}






@media all and (max-width: 780px) {


#contenu-footer .bloc_footer h2 {
margin: 20px 0px 20px 0px;
font-size:1.2em;
}


#contenu-footer .signature{ 
font-size: 1.1em;
padding: 0px 0px 8px 0px;		
}

#contenu-footer p{ 
font-size: 1em;	
}


#contenu-footer .tel{ 
font-size: 1em;
padding: 10px 0px;		
}



#contenu-footer .bloc_footer{ 
width: 300px; 
height: auto; 
margin: 0px auto 20px;
border: 1px solid transparent; 
}




#copyright {
font-size: 0.9em;
margin: 60px auto 0px;
}



	
	}













.boutonUp{
	position: fixed;
	
	right: 20px;
	bottom: 40px;
	
	height: 51px;
	width: 51px;
	
	background-image: url(images/fleche_haut.png);
	background-repeat:no-repeat;
	
	border: 1px solid transparent;
	cursor: pointer;
	display:none;
	z-index:100;
}