@charset "UTF-8";
/* CSS Document */

/********************* Header + menu *********************/

body{
	font-family: verdana;
}

h1{
	font-weight: bold;
	font-size: 5em;
	text-align: center;
	margin: 0;
}
h2{
	text-align: center;
}

header img{
	display: block;
    margin-left: auto;
    margin-right: auto;
	width: 100%;
}

/*

#menuprincipal{
	text-align: center;
	width: 100%;
	margin-top: 40px;
	position: fixed;
}

#menuprincipal ul{
	padding: 0;
	margin: 0;
}

#menuprincipal li{
	display: inline-block;
	width: 10%;
	
}

#menuprincipal a{
	color: #ffffff;
	text-decoration:none;
}

#menuprincipal a:hover{
	background: black;
	padding: 20px;
	color: #ffffff;
}*/

#allmenu{
	
}

#menu {
	text-align: center;
	width: 100%;
	margin-top: 40px;
	position: fixed;
}

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 display: inline-block;
 margin:auto;
 padding:0;
 background-color:black;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:#FFD700;
 }

#menu ul li ul {
 display:none;
 }

#menu ul li:hover ul {
 display:block;
	width: 0;
 }
#menu li:hover ul li {
 float:none;
 }

#menu li ul {
 position:absolute;
 }

/* *********************Jours d'ouverture************************/
#ouverture{
	width: 100%;
}

#col1{
	float:left;
	width: 30%;
}
#col1 p{
	text-align: right;
	font-size: 1.5em;
	margin-right: 10%;
	text-transform: uppercase;
}

#col2 {
	float:left;
	width: 40%;
}
#col2 p{
	font-size: 1.5em;
	margin-left: 5%;
}

#col3 {
	float:left;
	width: 30%;
}
#col3 p{
	font-size: 1.5em;
	margin-left: 5%;
	color: #999999
}

/* *********************coiffure H F E************************/

#coiffure{
	width: 100%;
}

#col1coiffe{
	float:left;
	width: 33.3%;
	height: 500px;
}
#col1coiffe p{
	text-align: center;
	margin-top: 16%;
}
.boulevard{
	color: #c59d5f;
	font-family: boulevard;
	font-size: 5em;
}
.sex{
	text-transform: uppercase;
	font-size: 3em;
}
.sex2{
	text-transform: uppercase;
	font-size: 3em;
	color: #ffffff;
}
.plus1{
	margin-top: 20%;
}
.plus{
	color: #c59d5f;
	text-decoration: underline;
}

#col2coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col2coiffe p{
	text-align: center;
	margin-top: 16%;
}

#col3coiffe {
	float:left;
	width: 33.3%;
	height: 500px;
}
#col3coiffe p{
	text-align: center;
	margin-top: 16%;
}

#col4coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}

#col5coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}

#col6coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}

#col7coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}

#col8coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}

#col9coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col10coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col11coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col12coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col9coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col13coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col14coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col15coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col16coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col17coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}#col18coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col19coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col20coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col21coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}
#col22coiffe {
	float:left;
	width: 33.3%;
	background: #000000;
	height: 500px;
}


#videos {width: 100%;}
#video1{
	float:left;
}
#video2{
	float:left;
}
#video3{
	float:left;
}

/* *********************domicile************************/
#domicile{
	clear: both;
}
#domicile img{
	width: 100%;
}


/* *********************services home************************/
#servicehome{
	width: 80%;
	margin: 0 auto;
}
#servicehome img{
	width:100%;
}
#colgauche{
	float: left;
}
#coldroite{
	float: right;
}

#coloration{
	
}
#meches{
	
}
#permanente{
	
}
#defrissage{
	float: left;
}
#tieanddye{
	
}
#tieanddye img{
	width:50%;
}

/* *********************carousel produits************************/


#allslider{
	background: #333333;
}

#allslider p{
	text-align: center;
	padding-top: 2%;
	font-size: 3em;
	text-transform: uppercase;
	color: #fff;
}

div#slider { 
	width: 80%;
	overflow: hidden;
	margin: 0 auto; }

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
}

div#slider figure img { width: 4.66%; height: auto; float: left; padding: 1%;}

@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%; }*/
}

/* *********************logos************************/

#logo{
	background: #ebebeb;
	text-align: center;
}

/* *********************contact home************************/

#contact_home{
	width: 80%;
	margin: 0 auto;
	margin-top: 5%;
}

#contact_home img{
	float: left;
	width: 50%;
}

#contactpagehome{
	padding-top: 17%;
	padding-left: 65%;
}

.contact_info{
	font-size: 3em;
	font-weight: bold;
	color: #333333;
}

.info{
	
}

/* *********************footer************************/


footer{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background: #000000;
}

footer p{
	color: #ffffff;
}
#col1footer{
	width: 40%;
	float: left;
	background: black;
	height: 200px;
}
#col2footer{
	width: 20%;
	float: left;
	background: black;
	height: 200px;
}
#col3footer{
	width: 40%;
	float: left;
	background: black;
	height: 200px;
}

.titrefooter{
	color: #333333;
	font-size: 2em;
	font-weight: bold;
	color: #ffffff;
}
.ouverturefooter{
	color: #666666;
}

/* *********************PAGE SERVICES************************/

#coupehomme{
	width: 100%;
	text-align: center;
	background: #f8f5f1;
	overflow: hidden;
}

#coupehomme p{
	font-size: 2em;
	font-weight: bold;
	text-transform: uppercase;
}

#coupehomme img{
	width: 50%;
}

#colcoupe1{
	float: left;
	width: 25%;
}
#colcoupe2{
	float: left;
	width: 25%;
}
#colcoupe3{
	float: left;
	width: 25%;
}
#colcoupe4{
	float: left;
	width: 25%;
}
#colcoupe5{
	float: left;
	width: 25%;
	clear: both;
}
#colcoupe6{
	float: left;
	width: 25%;
}
#colcoupe7{
	float: left;
	width: 25%;
}
#colcoupe8{
	float: left;
	width: 25%;
}
#colcoupe9{
	float: left;
	width: 25%;
	clear: both;
}
#colcoupe10{
	float: left;
	width: 25%;
}

#listeprix{
	width: 100%;
	background: #ebebeb;
	overflow: hidden;
}

#colprix1{
	float: left;
	width: 33.3333333333333%;
}
#colprix2{
	float: left;
	width: 33.3333333333333%;
}
#colprix3{
	float: left;
	width: 33.3333333333333%;
}

.nomprix{
}
.prixnom{
	float: right;
}
.nometprix{
	border-bottom: 1px solid #999999;
	width: 60%;
	margin: 0 auto;
	margin-bottom: 5%;
}

/* *********************PAGE SALON************************/

#lesalon{
	width: 80%;
	margin: 0 auto;
}
#lesalon p{
	padding: 10%;
}
#saloncol1{
	width: 50%;
	float: left;
}
#saloncol2{
	
}

.fling-minislide {width:50%; height:710px; overflow:hidden; position:relative; }
.fling-minislide img{ position:absolute; animation:fling-minislide 25s infinite; opacity:0; width: 100%; height: auto;}

@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(7){animation-delay:0s;}
.fling-minislide img:nth-child(6){animation-delay:3s;}
.fling-minislide img:nth-child(5){animation-delay:6s;}
.fling-minislide img:nth-child(4){animation-delay:9s;}
.fling-minislide img:nth-child(3){animation-delay:12s;}
.fling-minislide img:nth-child(2){animation-delay:15s;}
.fling-minislide img:nth-child(1){animation-delay:18s;}

/* *********************contact************************/

#contact{
	width: 80%;
	margin: 0 auto;
}
#contact p{
	font-size: 0.85em;
	text-align: left;
}
#contactcol1{
	width: 25%;
	float: left;
}
#contactcol2{
	width: 25%;
	float: left;
}
#contactcol3{
	width: 25%;
	float: left;
}
#contactcol4{
	width: 25%;
	float: left;
}


/* *********************MEDIA QUERIES************************/

@media screen and (max-width: 1024px)

{
	
body{
	font-family: verdana;
}
	
h1{
	font-size: 4em;
	}
	
#menu{
	z-index: 1;
	}
	
#servicehome{
	width: 65%;
	margin: 0 auto;
}

#contactpagehome {
    padding-top: 7%;
    padding-left: 65%;

}
	
.titrefooter {
	font-size: 1em;
	}
	
.nometprix{
	width: 90%;
	}
.prixnom{
	font-size: 0.8em;
	}
.nomprix{
	font-size: 0.8em;
	}
#coupehomme p{
	font-size: 1em;
	}
	
#lesalon p {
    padding: 0%;
    font-size: 0.9em;
}

#contact {
    width: 90%;
}

.fling-minislide {
    height: 365px;
}

footer {
    margin: 40px auto;

}
}

@media screen and (max-width: 740px)

{
	
body{
	font-family: verdana;
}
	h1{font-size: 2em;}
	
	#col2 p{
		font-size: 1em;
	}
	#col3 p{
		font-size: 1em;
	}
	#col1coiffe{
		float: none; height: 235px; width: 100%; 
	}
	#col2coiffe{float: none; height: 235px; width: 100%}
	#col3coiffe{float: none; height: 235px; width: 100%}
	
	#col1coiffe p{margin-top: 0;}
	#col2coiffe p{margin-top: 0;}
	#col3coiffe p{margin-top: 0;}
	
	.plus1{margin-top: 0;}
	
	#tieanddye img {width: 69%;}
	.info {font-size: 0.8em;}
	#contactpagehome {padding-top: 3%;padding-left: 65%;}
	
	#col1footer{float: none; margin: 0 auto;}
	#col2footer{float: none; margin: 0 auto;}
	#col3footer{float: none; margin: 0 auto;}
	
	#saloncol1 {width: 100%; float: none;}
	
	.fling-minislide {height: 579px; width: 100%}
	
	#contactcol1 { width: 100%;float: none; margin: 0 auto;}
	#contactcol2 {width: 100%; float: none; margin: 0 auto;}
	#contactcol3 {width: 100%;float: none; margin: 0 auto;}
	#contactcol4 {width: 100%;float: none; margin: 0 auto;}
	#contact p{text-align: center;}
	h3{text-align: center;}
	#contact img{margin-left: 46%;}

}



@media screen and (max-width: 320px)

{
	body{
	font-family: verdana; background: lightgrey;
}
	
	
	
	
	
}