/*
Richard Landry
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
text-shadow: 2px 2px 6px black;
*/

html{
 height:100%;
 min-height:100%;
 }

body
{
	background-color: white;
	color: black;
	font-family: Times, serif; 
	font-size: 12px;
	line-height: 1.5;
	background-image: url('images/fond.png');
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	margin: 0 auto;
	height:100%;
	min-height:100%;

}



a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:link{color:inherit;}
a:active{color:inherit;}
a:visited{color:inherit;}
a:hover{ color:inherit; cursor:pointer; }

a[href^=tel] {
    color: inherit;
    text-decoration: none;
}

li { float:left ;}

input[type="text"], textarea {

background-color:rgba(255,255,255,0.7);


  }

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

  .bodyphone {	overflow: hidden;}

  
  .Telsize1{ font-size: calc(100% - .1em); }
  .Telsize2{ font-size: calc(100% - .2em); }
  .Telsize3{ font-size: calc(100% - .3em); }
  .Telsize4{ font-size: calc(100% - .4em); }
  .Telsize5{ font-size: calc(100% - .5em); }
  
  
  }

  
 .Telsize6 { font-size: .8em; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
/*	--------------------------------------------------
	Cadre principal
	-------------------------------------------------- */
#EspaceStar
{
position:  absolute;
width: 100%; 
height: 100%;
overflow: hidden;
left: 0px;
top: 0px;



}

#Star1, #Star3, #Star5, #Star7, #Star9
{
position:  absolute;
width: 26px; 
height: 25px;
left:-100px;
background-image: url('images/bulles.png');
background-size: cover;
}

#Star2, #Star4, #Star6, #Star8, #Star10
{
position:  absolute;
width: 51px; 
height: 50px;
left:-100px;
background-image: url('images/bulles.png');
background-size: cover;
}



#ShowBox
{
	width: 100%; 
	height: 100%;
	top: 0px;
	left: 0px;
    position: absolute;



}
#Show1, #Show2, #Show3, #Show4, #Show5, #Show6, #Show7, #Show8, #Show9, #Show10, #Show11, #ShowFill
{
	width: 100%; 
	height: 100%;
	top: 0px;
	left: 0px;
    position: absolute;
	
    opacity: 0.0;


	background-repeat: no-repeat;
}

#Show1 { background-image: url('photos/photo1.png'); }
#Show2 { background-image: url('photos/photo2.png'); }
#Show3 { background-image: url('photos/photo3.png'); }
#Show4 { background-image: url('photos/photo4.png'); }
#Show5 { background-image: url('photos/photo5.png'); }
#Show6 { background-image: url('photos/photo6.png'); }
#Show7 { background-image: url('photos/photo7.png'); }
#Show8 { background-image: url('photos/photo8.png'); }
#Show9 { background-image: url('photos/photo9.png'); }
#Show10 { background-image: url('photos/photo10.png'); }
#Show11 { background-image: url('photos/photo11.png'); }
#ShowFill { background-image: url('photos/photo3.png'); }


 


#ShowText1, #ShowText2, #ShowText3, #ShowText4, #ShowText5, #ShowText6, #ShowText7, #ShowText8, #ShowText9, #ShowText10 
{
    position: absolute;
    opacity: 0.0;
	color: black;
	z-index: 3;
	Font-size: 1.3em;
	
}

#ShowText1 { top: 200px; left:250px; width: 400px; height: 400px; }
#ShowText2 { top: 200px; left:140px; width: 400px; height: 400px; }
#ShowText3 { top: 250px; left:450px; width: 400px; height: 400px; }
#ShowText4 { top: 260px; left:150px; width: 400px; height: 400px; }
#ShowText5 { top: 0px; left:0px; width: 100px; height: 100px; }
#ShowText6 { top: 0px; left:0px; width: 100px; height: 100px; }
#ShowText7 { top: 0px; left:0px; width: 100px; height: 100px; }
#ShowText8 { top: 0px; left:0px; width: 100px; height: 100px; }
#ShowText9 { top: 0px; left:0px; width: 100px; height: 100px; }
#ShowText10 { top: 0px; left:0px; width: 100px; height: 100px; }





#ServicesBox
{
    position: absolute;
	width: 100%; 
	height: 370px;
	bottom: 60px;
	left: 0px;	
}

#ShowAvant1, #ShowAvant2, #ShowAvant3, #ShowAvant4, #ShowApres1, #ShowApres2, #ShowApres3, #ShowApres4
{
    position: absolute;
	width: 350px; 
	height: 350px;
	top: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 350px; border-style: double; border-color: white; border-width: 3px;
	opacity: 0.0;
}

#ShowAvant1, #ShowAvant2, #ShowAvant3, #ShowAvant4 { left: 175px; }
#ShowApres1, #ShowApres2, #ShowApres3, #ShowApres4 { right: 25px; }
#ShowAvant1 { background-image: url('photos/avant1.png'); }
#ShowApres1 { background-image: url('photos/apres1.png'); }
#ShowAvant2 { background-image: url('photos/avant2.png'); }
#ShowApres2 { background-image: url('photos/apres2.png'); }
#ShowAvant3 { background-image: url('photos/avant3.png'); }
#ShowApres3 { background-image: url('photos/apres3.png'); }
#ShowAvant4 { background-image: url('photos/avant4.png'); }
#ShowApres4 { background-image: url('photos/apres4.png'); }


.Shadow
{
		-moz-box-shadow:    0px 0px 9px 4px #ffffff;
		-webkit-box-shadow: 0px 0px 9px 4px #ffffff;
		box-shadow:         0px 0px 9px 4px #ffffff;
}


#Main
{
	width: 908px; 
	height: 1040px;
	top: 0px;
    position: relative;
	margin: 0 auto;

}


/*	--------------------------------------------------
	Entete et Pied de page 	pointer-events: none
	-------------------------------------------------- */

#entete
{    
	position: absolute;
	top: 0px;
	height: 197px;
	z-index: 2;
	background-image: url('images/entete.png');
	
	color: white;	
	text-shadow: 1px 1px 4px black;

	
}

#entete,  #pied
{
	width: 908px; 
}	

#ligne1, #ligne1a
{
	position: absolute;
	height: 197px;
	width: calc(50% - 454px);
}
#ligne1 
{ 
	background-image: url('images/ligne1.png'); 
	left: 0px;
	top: 0px;
}
#ligne1a { background-image: url('images/bulle1.png'); 
	left: 0px;
	top: 0px;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);




}

#ligne2, #ligne2a
{
	position: absolute;
	top: 0px;
	height: 197px;
	right: 0px;
	width: calc(50% - 454px);
}
#ligne2 { background-image: url('images/ligne2.png'); }
#ligne2a { background-image: url('images/bulle2.png'); }



#pied
{
    position: absolute;
	top: 885px;
	height: 77px;
	font-size: 1.3em;
	font-family: Times, serif; 
	font-weight:bolder;
	text-align:left;


	color: black;

	border-top: 1px solid black;

}

#logo,  #Flogo {
    position: absolute;
	left: 33px;
	top: 25px;
}




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

.gauche {
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
}	

.droite {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}	
	
#Menu
{
	top: 180px;
    position: relative;
	left: 0px;


	width: 240px; 
	height: 750px;
	color: white;
	z-index: 3;

}

#MenuB1, #MenuB2, #MenuB3, #MenuB4, #MenuB5, #MenuB5_2
{
    position:  absolute;
	text-align:center;
	width: 171px; 
	height: 145px;
	font-family: Times, serif; 
	font-size: 20px;
	line-height: 26px;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75);
	background-repeat: no-repeat;
}

#MenuB2, #MenuB3, #MenuB4
{
	background-image: url('images/pattegrise.png'); 
}
	
#MenuB1 { top: 10px; left: 0px; background-image: url('images/pattebleu.png'); }
#MenuB2 { top: 191px; left: 70px; }
#MenuB3 { top: 372px; left: 0px; }
#MenuB4 { top: 553px; left: 70px; }
#MenuB5, #MenuB5_2 { 	top: 120px; right: -20px; 
										overflow: hidden;
									background-image: url('images/osblanc.png'); 
									background-size: cover;
									width: 145px; 
									height: 145px;
									z-index: 4;}
									
									
#MenuB5_2 { 	background-image: url('images/oscontour.png'); }


.btattente 
{
	color: white;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-o-transition: 500ms;
	transition: 500ms;
}

.btattente2
{
	color: white;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-o-transition: 500ms;
	transition: 500ms;
}

.btover 
{
	color: red;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 40px #FFF;
}

.btover2
{
	color: red;
	text-shadow: 1 2px 4px rgba(0,0,0,0.75), 0 0 40px #FFF;
}


.btactif 
{
	color:  black ;
	transition: 50ms;
}

.Opacte {
    opacity: 0.25;
     filter: alpha(opacity=25);
}

/*	--------------------------------------------------
	Contenu ***********************************************************************************************************************  Contenu
	-------------------------------------------------- */

#Cadre
{
    position:  absolute;
	top: 127px;
	left: 0px;
	width: 100%; 
	height: 750px;
	overflow:hidden;

}
	
	
#Contenu
{
    position:  absolute;
	top: 0px;
	left: 0px;
	width: 100%; 
	height: 4001px;
    font-size: 1.2em;
	font-family: Times, serif; 
	

	}

#Accueil, #Services, #Realisations, #Historique, #Contact, #Commentaire
{
    position:  absolute;
	margin: auto;
	width: 100%; 
	height: 750px;
    font-size: .9em;
	font-family: Times, serif; 


    
}

#Accueill_A, #Accueill_A1, #Realisations_A, #Realisations_A1,#Historique_A, #Historique_A1,#Contact_A, #Contact_A1, #Commentaire_A, #Commentaire_A1
{
	position:  absolute;
    margin: 20px 0px 0px 10px;
	width: 888px; 
	height: 720px;
	background-size: cover;
	
	
}





#Fin
{
    position:  absolute;
	margin: auto;
	width: 1px; 
	height: 1px;
}

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

#Accueil { top: 0px; }


#Accueill_A
{	
    font-size: 1.5em;
	font-family: Times, serif; 
	font-weight:bolder;

	color: black ;


	text-shadow: 2px 2px 15px white;
}

#Accueill_1
{
	position: absolute;
    top: 65px;
	width: 340px; 
	height: 120px;
	
}

#Accueill_1
{
    left: 260px;
}


/*	--------------------------------------------------
	Services ******************************************************************************************************************** Services
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	
	
	-------------------------------------------------- */

#Services
{
	top: 750px;
}



#Services_A
{	
    font-size: 1.9em;
	font-family: Times, serif; 
	font-weight:bolder;
	overflow:hidden;
	color: black;
	text-shadow: 	2px 2px 5px white, -2px -2px 5px white, -2px 2px 5px white, 2px -2px 5px white,
							6px 6px 5px white, -6px -6px 5px white, -6px 6px 5px white, 6px -6px 5px white;


}

#Services_A, #Services_A1
{
	margin: 20px 0px 0px 10px;
	position:  absolute;
    
	width: 888px; 
	height: 720px;
	background-size: cover;

}


#Services_B
{
	right: 10px;
	top: 10px;
	position: absolute;
	width: 700px; 
	height: 300px;

}






/*	--------------------------------------------------
	Contact **************************************************************************************************************** Contact
	-------------------------------------------------- */


#Contact
{
	top: 1500px;
}
	


#Contact_A
{	
text-align:left; 

color: black;



}

	
#call1, #call2
{
    position:  absolute;
	width: 280px; 
	height: 40px;
    font-size: 2em;
	font-family: Times, serif; 

}

#call1
{
    top: 140px;
	left: 1130px;
}

#call2
{
    bottom: 140px;
	right: 1130px;
}

	
#contactform
{
    position: relative;

	margin: 30px 0px 0px 130px;
	width: 727px; 
	height: 550px;
    font-size: 1.0em;
	font-family: Times, serif; 



}
.centerform
{
text-align:center;
font-size: 1.4em;
}


#recip1, #recip2, #recip3, #recip4
{
 	position: absolute;
    font-size: 1.2em;
	font-family: Times, serif; 

}

#recip1
{
	left: 90px;
	top: 95px;
	width: 90px; 
	height: 100px;
	text-align: right;
}

#recip2
{
	left: 185px;
	top: 95px;
	width: 390px; 
	height: 100px;
}

#recip3
{
	left: 95px;
	top: 220px;
	width: 632px; 
	height: 80px;
}

#recip4
{
	left: 95px;
	bottom: 10px;
	left: 95px;
	width: 200px; 
	height: 30px;
}

#bouton
{
background-color: white;

}


/*	--------------------------------------------------
	Historique **************************************************************************************************************** Historique
	text-shadow: 2px 2px 5px black, 5px 0px 5px black, -6px 0px 5px black;
	-------------------------------------------------- */

#Historique
{
	top: 2250px;
}


#Historique_A
{	
	
    font-size: 1.4em;
	font-family: Times, serif; 
	font-weight:bolder;
	color: black;

}



#Historique_B {
	position:  absolute;

	width: 688px; 
	height: 720px;
	top: 0px;
	right: 0px;

}

.fondetbord {
	
	background-color:rgba(255,255,255,0.6); 
	border-radius: 15px; 
	border-width: 3px;	
	
	-moz-box-shadow:    0px 0px 9px 4px #ffffff;
	-webkit-box-shadow: 0px 0px 9px 4px #ffffff;
	box-shadow:         0px 0px 9px 4px #ffffff;
	
	
}

tab1 { padding-left: 1em; }
tab2 { padding-left: 2em; }
tab3 { padding-left: 3em; }
tab4 { padding-left: 4em; }


/*	--------------------------------------------------
	Commentaire **************************************************************************************************************** Historique
	-------------------------------------------------- */

#Commentaire
{
	top: 3000px;

}

#Commentaire_A
{	
	
    font-size: 1.4em;
	font-family: Times, serif; 
	font-weight:bolder;
	color: black;

}



#Commentaire_B {
	position:  absolute;
	overflow: scroll;
	width: 688px; 
	height: 680px;
	top: 40px;
	right: 0px;

}



/*	--------------------------------------------------
	Fin
	-------------------------------------------------- */

#Fin
{
	margin: 0px auto;
}



/*	--------------------------------------------------
	Réalisations **************************************************************************************************************** Réalisations
	-------------------------------------------------- */

#Realisations
{
	top: 3000px;
}


#Realisations_A
{	
	text-shadow: 1px 1px 4px black;
    font-size: 1.5em;
	font-family: Times, serif; 
	font-weight:bolder;

}

	
.miniature {
box-shadow: 3px 3px 1px #000000;
border-style: none;
width: 481px;
height: 270px;
}

.ProjetLook
{

		visibility: hidden;
		overflow: hidden;
		margin: -790px auto;
		width: 880px;
		height: 680px;
		border: 5px solid  red;		
		position: relative;
		z-index: 101;
		
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		

}

#RealisationsShow
{
		position:  relative;
		width: 880px;
		height: 680px;
		background-size: contain;
		background-position:center;
		background-repeat: no-repeat;
		
}


#BoutonDroit, #BoutonGauche
{
    position:  absolute;
	top:302px;
	width: 75px; 
	height: 79px;
	background-image: url(images/arrowsbig.png);
	background-repeat: no-repeat;
	
}


#BoutonGauche
{
	left: 0px;
	background-position: 0px 0px;
}

#BoutonDroit
{
	right: 0px;
	background-position: -74px 0px;
}


#BoutonDroit:hover, active { background-position: -74px -79px; }
#BoutonGauche:hover, active { background-position: 0px -79px; }

	

		

/*	--------------------------------------------------
	Reveal Modals **********************************************************************************************************  Reveal Modals 
	-------------------------------------------------- */
		
	.reveal-modal-bg { 
		
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	
	
	.reveal-modal {
		visibility: hidden;
		margin: -720px auto;
		width: 677px;
		height: 650px;
		
		background: #eee url(images/fondv.png) no-repeat -200px -80px;
		border-top: 5px solid white;
		border-bottom: 5px solid white;
		border-left: 5px solid white;
		border-right: 5px solid white;
		
		position: relative;
		z-index: 101;
		
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
		
			
    .reveal-grand { width: 1100px;}
	.reveal-petit { width: 975px;}
	
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal { 		} 
		
	.close-plus {
		 font-size: 30px;
		line-height: .5;
		position: absolute;
		top: 15px;
		right: 11px;
		color: red;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
	   }
	


	
/*	--------------------------------------------------
    Divers
	-------------------------------------------------- */

	
	
.center
{
text-align:center;
}

		

h1 
{
   	background-color: white; 
	color: black; 
}


.bioImg {
	margin: 20px 0px 0px; padding: 0px 0px 0px 15px; float: left;
}
.bioImg img {
	padding: 10px; border: 1px solid rgb(170, 170, 170);
.bioText {
	margin: 10px 0px 0px 150px; padding: 20px 0px 0px; text-align: left; color: rgb(54, 54, 54); line-height: 15px;
}
.bioText p {
	margin: 0px; padding: 0px 0px 15px;
}
.bioText strong {
	color: rgb(206, 132, 1); text-transform: uppercase; font-size: 12px;
}
.divider {
	margin: 0px; border-bottom-color: rgb(206, 206, 206); border-bottom-width: 1px; border-bottom-style: solid;
}