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

#fond-contener{
	width: 100%;
	height: 1260px;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	background-color:rgba(255,255,255,0.7);}



#contener{
	width: 1024px;
	height:1220px;
	margin-top: 20px;
	left: 50%;
	margin-left: -512px;
	position: absolute;

	
}

h0{font-family: 'Roboto', sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-align: justify;
	color: #d39f04;
}

h1{font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: justify;
	color: #d39f04;
}

h2{	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	text-align: justify;
	color: #000000;
}

h3{	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	text-align: justify;
	color: white;
}


#fond1{
	width: 695px;
	height: 610px;
	background-image:url("../images/fond1pyramide.jpg");
    position: absolute;
	margin-top:250px;
	opacity: 1;

}


#fond-photo{
	width: 30%;
	height: 414px;
	margin-top: 20px;
	float: right;
	background-color:#ffffff;
	opacity: 1;
}

#fond-salon{
	width: 50%;
	height: 330px;
	top: 910px;
	position: relative;
	margin: 0 auto;
	float: left;
	background-color:rgba(255,255,255,1);
	opacity: 1;
}

#contenu1{
	width: 615px;
	height: 200px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left:40px;
	padding-right: 40px;
	position: absolute;
	margin-left:0px;
	text-align: left;
	display: block;
}


#texte1{
	width: 615px;
	height: 200px;
	background-color:white;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-left:0px;
	margin-right: 0px;
	text-align: left;
	display: block;
}  


#contenu2{
	width: 268px;
	height: 180px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left:40px;
	padding-right: 40px;
	position: absolute;
	margin-top:446px;
	margin-left:0px;
	text-align: left;
	display: block;
}

#texte2{
	width: 268px;
	height: 180px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
		margin-left:0px;
	margin-right: 0px;
	position: absolute;
	text-align: left;
	display: block;
}

#contenu3{
	width: 268px;
	height: 180px;
	background-color:black;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: white;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left:40px;
	padding-right: 40px;
	position: absolute;
	margin-top:446px;
	margin-left:347px;
	text-align: left;
	display: block;
}

#texte3{
	width: 268px;
	height: 180px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: white;
		margin-left:0px;
	margin-right: 0px;
	position: absolute;
	text-align: left;
	display: block;
	opacity: 1;
}


#menu1{
	width: 300px;
	height:414px;
	background-color:white;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-top: 0px;
	margin-left:724px;
	text-align: center;
	display: block;
}

#menu2{
	width: 300px;
	height: 414px;
	background-color:green;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-top: 445px;
	margin-left:724px;
	text-align: center;
	display: block;
	opacity: 1;
}



#photo-salon{
	width: 1024px;
	height: 330px;
	margin-top: 890px;
	position: absolute;
	background-image: url("../images/fond_salon_pyramide.jpg");
	background-size: cover;
}


#photo1{
	width: 50%;
	height: 187px;
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color:white;
	padding-top: 143px;
	margin-top: 0px;
	background-color: black;
    position: absolute;
	background-size: cover;
	text-align: center;
	opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

	
}



#photo2{
	width: 50%;
	height: 187px;
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color:black;
	padding-top: 143px;
	margin-top: 0px;
	margin-left: 512px;
	background-color: #d39f04;
    position: absolute;
	background-size: cover;
	text-align: center;
	opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

	
}



/*/////////////////////////////TABLETTE//////////////////////////////*/



@media only screen and (min-width:650px) and (max-width:1044px) {
	

#fond-contener{
	width: 100%;
	height: 980px;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	background-color:rgba(255,255,255,0.7);}



#contener{
	width: 100%;
	height:940px;
	margin-top: 20px;
	left: 0;
	margin-left: 0;
	position: absolute;

	
}

h0{font-family: 'Roboto', sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-align: justify;
	color: #d39f04;
}

h1{font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: justify;
	color: #d39f04;
}

h2{	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	text-align: justify;
	color: #000000;
}

h3{	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	text-align: justify;
	color: white;
}


#fond1{
	width: 695px;
	height: 610px;
	background-image:url("../images/fond1pyramide.jpg");
    position: absolute;
	margin-top:250px;
	opacity: 0;
	display: none;

}


#fond-photo{
	width: 30%;
	height: 414px;
	margin-top: 20px;
	float: right;
	background-color:#ffffff;
	opacity: 0;
	display: none;
}

#fond-salon{
	width: 50%;
	height: 330px;
	top: 910px;
	position: relative;
	margin: 0 auto;
	float: left;
	background-color:rgba(255,255,255,1);
	opacity: 0;
	display: none;
}

#contenu1{
	width: 100%;
	height: 200px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left:0px;
	padding-right: 0px;
	position: absolute;
	margin-left:0px;
	text-align: left;
	display: block;
}


#texte1{
	width: 90%;
	height: 200px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-left:30px;
	margin-right:30px;
	text-align: left;
	display: block;
}  


#contenu2{
	width: 50%;
	height: 180px;
	background-color:#d39f04;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left:0px;
	padding-right: 0px;
	position: absolute;
	margin-top:260px;
	margin-left:0px;
	text-align: left;
	display: block;
}

#texte2{
	width: 90%;
	height: 180px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	margin-left:30px;
	margin-right: 30px;
	position: absolute;
	text-align: left;
	display: block;
}

#contenu3{
	width: 50%;
	height: 180px;
	background-color:black;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: white;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left:0px;
	padding-right: 0px;
	position: absolute;
	margin-top:260px;
	margin-left:50%;
	text-align: left;
	display: block;
}

#texte3{
	width: 90%;
	height: 180px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: white;
	margin-left:30px;
	margin-right: 30px;
	position: absolute;
	text-align: left;
	display: block;
	opacity: 1;
}


#menu1{
	width: 50%;
	height:414px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-top: 530px;
	margin-left:0%;
	text-align: center;
	display: block;
}

#menu2{
	width: 50%;
	height: 414px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-top: 530px;
	margin-left:50%;
	text-align: center;
	display: block;
	opacity: 1;
}	
	
	
#photo-salon{
	width: 100%;
	max-height: 330px;
	position: relative;
	margin-top: 900px;
	background-image: url("../images/fond_salon_pyramide.jpg");
	background-position: center;
	background-position:inherit;
	background-size: cover;
	display: none;
}


#photo1{
	width: 50%;
	height: 187px;
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color:white;
	padding-top: 143px;
	margin-top: 0px;
	background-color: black;
    position: absolute;
	background-size: cover;
	text-align: center;
	display: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
   
	
}


#photo2{
	width: 50%;
	height: 187px;
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color:black;
	padding-top: 143px;
	margin-top: 0px;
	margin-left: 512px;
	background-color: #d39f04;
    position: absolute;
	background-size: cover;
	text-align: center;
	display: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

	
}

}



/*/////////////////////////////TELEPHONE//////////////////////////////*/

@media only screen and (max-width:650px){
	
		

#fond-contener{
	width: 100%;
	height: 1700px;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	background-color:rgba(255,255,255,0.7);}



#contener{
	width: 100%;
	height:1735px;
	margin-top: 20px;
	left: 0;
	margin-left: 0;
	position: absolute;
	

	
}

h0{font-family: 'Roboto', sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-align: justify;
	color: #d39f04;
}

h1{font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: justify;
	color: #d39f04;
}

h2{	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	text-align: justify;
	color: #000000;
}

h3{	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	text-align: justify;
	color: white;
}


#fond1{
	width: 695px;
	height: 610px;
	background-image:url("../images/fond1pyramide.jpg");
    position: absolute;
	margin-top:250px;
	opacity: 0;
	display: none;

}


#fond-photo{
	width: 30%;
	height: 414px;
	margin-top: 20px;
	float: right;
	background-color:#ffffff;
	opacity: 0;
	display: none;
}

#fond-salon{
	width: 50%;
	height: 330px;
	top: 910px;
	position: relative;
	margin: 0 auto;
	float: left;
	background-color:rgba(255,255,255,1);
	opacity: 0;
	display: none;
}

#contenu1{
	width: 100%;
	height: 300px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left:0px;
	padding-right: 0px;
	position: absolute;
	margin-left:0px;
	text-align: left;
	display: block;
}


#texte1{
	width: 90%;
	height: 300px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-left:30px;
	margin-right:30px;
	text-align: left;
	display: block;
}  


#contenu2{
	width: 100%;
	height: 200px;
	background-color:#d39f04;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	padding-top: 15px;
	padding-bottom: 30px;
	padding-left:0px;
	padding-right: 0px;
	position: absolute;
	margin-top:320px;
	margin-left:0px;
	text-align: left;
	display: block;
}

#texte2{
	width: 90%;
	height: 200px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	margin-left:30px;
	margin-right: 30px;
	position: absolute;
	text-align: left;
	display: block;
}

#contenu3{
	width: 100%;
	height: 200px;
	background-color:black;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: white;
	padding-top: 15px;
	padding-bottom: 30px;
	padding-left:0px;
	padding-right: 0px;
	position: absolute;
	margin-top:520px;
	margin-left:0%;
	text-align: left;
	display: block;
}

#texte3{
	width: 85%;
	height: 200px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: white;
	margin-left:30px;
	margin-right: 30px;
	position: absolute;
	text-align: left;
	display: block;
	opacity: 1;
}


#menu1{
	width: 100%;
	height:414px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-top: 800px;
	margin-left:0%;
	text-align: center;
	display: block;
}

#menu2{
	width: 100%;
	height: 414px;
	background-color:transparent;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	position: absolute;
	margin-top: 1250px;
	margin-left:0%;
	text-align: center;
	display: block;
	opacity: 1;
}


	
	
	
	
	
#photo-salon{
	width: 100%;
	max-height: 330px;
	position: relative;
	margin-top: 900px;
	background-image: url("../images/fond_salon_pyramide.jpg");
	background-position: center;
	background-position:inherit;
	background-size: cover;
	display: none;
}


#photo1{
	width: 50%;
	height: 187px;
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color:white;
	padding-top: 143px;
	margin-top: 0px;
	background-color: black;
    position: absolute;
	background-size: cover;
	text-align: center;
	display: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
   
	
}


#photo2{
	width: 50%;
	height: 187px;
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color:black;
	padding-top: 143px;
	margin-top: 0px;
	margin-left: 512px;
	background-color: #d39f04;
    position: absolute;
	background-size: cover;
	text-align: center;
	display: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

	
}


	
}