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


body{ background-color:white; margin-top: 0px;  margin-bottom: 0px; font-size:17px}
.police-1{font-family: 'Pompiere', cursive;font-smoothing: antialiased; -webkit-font-smoothing: antialiased; letter-spacing:1.5px }
.police-2{font-family: 'Droid Serif', serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; letter-spacing:1.5px }
.clear{clear:right}
#logo{width:100%; text-align:center; margin-left:auto; margin-right:auto; position:relative}

.mentions{ font-family:Georgia, "Times New Roman", Times, serif; font-size:1.1em; font-color:black;font-smoothing: antialiased;-webkit-font-smoothing: antialiased; line-height: normal; text-align:justify}
/*balise de changement de fond de page*/

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic; 
}


/*DIV*/
#container{ width:155px; height:auto;}
.fond{ box-shadow:grey 0 0 10px 0px;-webkit-box-shadow: grey 0 0 10px 0px  ;-moz-box-shadow: grey 0 0 10px 0px ;-o-box-shadow: grey 0 0 10px 0px }
.taupe-2{ background-color:#c7ed7c}
.taupe{ background-image:-webkit-linear-gradient(90deg, #9C0, #066); background-image:-o-linear-gradient(0deg, #9C0, #066); background-image:-moz-linear-gradient(0deg, #9C0, #066); background-image:-ms-linear-gradient(0deg, #9C0, #066); background-image:linear-gradient(0deg, #9C0, #066);}

#contenant{ width:100%; height:auto; left:0; top:0; margin:0; padding:0; border:none; position:absolute}

.chapitre{float:left; width:100%; height:auto}
.contenu{float:left;height: auto; width:100%;}


/*FOOTER*/
.footer{ position:relative;height:auto; margin:0 auto 0 auto;float:left; text-align:center;}
.footer-contenu{float:left;height: auto; width:auto;margin-bottom:40px; padding-bottom: 10px;}
.credit-logo{float:left; height:auto; width:200px; margin-left:auto; margin-right:auto;}
.footer-image{width:auto; height:auto;float:left;}


	
/*LIENS*/
a, a:hover{text-decoration: none;}

#contact a,a:link {color: white;}
#contact a:hover{color: black;}
a:link {color: white;}
.footer a{color: grey;}

.footer a:hover{color: black;}


/*textes*/

.section p{line-height: 25px;display: block;float: left;width: auto;margin-left:automargin-right:auto;padding: 0; font-family: 'Pompiere', cursive;font-smoothing: antialiased; -webkit-font-smoothing: antialiased; letter-spacing:1.5px }
.section p:first-letter{float:left; font-size:1.2em;}

header{color:white}
nav{ width:100%; text-align: center}

h1{ display:block; text-align:center;}
h2{ display:block;}
h3{ display:inline; width:auto;clear:right; background-color:white; border-radius:5px; padding:5px}
h4{ display:block; font-size:1.4em; font-weight:100;text-align:center}
#annuaire{ color: #000; font-size: 2em; font-weight:bold; text-align:left}

#annonces span{font-size:0.8em; margin:0 ; padding:0; text-align:right}
.big_letter{font-size:1.3em;}
.txt-right{ text-align:right}

.blanc{ color:#FFF; font-weight: lighter}
.noir{ color:#000; font-weight:200 }
.blanche{ color:#FFF;font-weight:100}
.noire{ color:#000; font-weight:200}
.vert{ color:#669900;font-weight:bold;}
.verte{color:#496c02; text-align:center}



		
.italic{ font-style:italic}		
.sepia{filter: sepia(1);-webkit-filter: sepia(1);-moz-filter: sepia(1);-o-filter: sepia(1);-ms-filter: sepia(1); opacity:0.5}
.sepia:hover{filter: sepia(0);-webkit-filter: sepia(0);-moz-filter: sepia(0); -o-filter: sepia(0); -ms-filter: sepia(0); opacity:1}
.fb-like{ float:right;width:59px; height:21px; position: relative; margin:5px 0 5px 0;  padding:5px;  display:block}



/*Forme des DIV*/




.blackround{ height:auto; border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; -o-border-radius:25px; -moz-border-radius:25px; border:1px; border-color:black; border-style: solid;}
.blackround_image{ width:auto; height:auto; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -moz-border-radius:20px; border:1px; border-color:black; border-style: solid; float:left}

.round-1{border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px;}
.round{border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px;}
.shadow_inset{box-shadow: 0px 0px 10px RGBa(0,0,0,0.4) inset;-webkit-box-shadow: 0px 0px 10px RGBa(0,0,0,0.4)inset;-moz-box-shadow: 0px 0px 10px RGBa(0,0,0,0.4)inset;-o-box-shadow: 0px 0px 10px RGBa(0,0,0,0.4)inset; -ms-box-shadow: 0px 0px 10px RGBa(0,0,0,0.4)inset}
 .shadow_inset-2{box-shadow:black 5px 5px 5px  inset;-webkit-box-shadow:black 5px 5px 5px  inset;-moz-box-shadow: black 5px 5px 5px  inset;-o-box-shadow: black 5px 5px 5px  inset; -ms-box-shadow:black 5px 5px 5px  inset;}
.round2{border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px;}
.shadow{box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-webkit-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-moz-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-o-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4); -ms-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4)}
.shadow2{box-shadow: 5px 5px 10px RGBa(0,0,0,0.4);-webkit-box-shadow: 5px 5px 10px RGBa(0,0,0,0.4);-moz-box-shadow: 0px 0px 10px RGBa(0,0,0,0.4);-o-box-shadow: 0px 0px 10px RGBa(0,0,0,0.4); -ms-box-shadow: 0px 0px 10px RGBa(0,0,0,0.4)}
.round_shadow{float:left ;height:auto;border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; -moz-border-radius:20px;box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-webkit-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-moz-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-o-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4)}
.text-shadow{text-shadow:black 2px 2px 2px;-webkit-text-shadow:black 5px 10px 2px;-moz-text-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-o-text-shadow: 0px 0px 20px RGBa(0,0,0,0.4); -ms-text-shadow: 0px 0px 20px RGBa(0,0,0,0.4)}



	/*créer un lien avec une seule image et le js content-hover*/
.top-menu-2{width:100%; position:fixed; z-index:10; bottom:30px;  float:left}
.top-menu{width:100%; height:auto; float : left; margin-bottom:50px; clear:right; padding-top:25px }
.top-menu img{border-radius:500px; width:100%; height:100%}
.top-menu-2 img{border-radius:500px; width:100%; height:100%}
.bg{background: url(../images/bouton-home.png) no-repeat; width:30px; height:30px; transition:background-size .5s ease-out; background-size:100%; overflow:hidden; cursor:pointer; position:relative; display:block; margin:auto;border-radius:5px;   }
.bg:hover{ border-radius:50px; background-origin:border-box; position:relative;}
	/*zoom images cartes de visites on top*/

nav{margin:0; border:0;}
nav span{ color:#c9cbc4}
nav a{ text-decoration:none; }

img{-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#entretien-1,#entretien-2,#entretien-3{-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#supp-1 p{text-align:left; margin:0 0 0 10%}
#supp-2 p{text-align:left; margin:0 0 0 10%}
#supp-3 p{text-align:left; margin:0 0 0 5%}
titre-support1{text-align:center}
titre-support2{text-align:center}
titre-support3{text-align:center}

#doigt{opacity:0.7}
#doigt-entretien{ }

span#presentation{ display:block; text-align:center;line-height:25px }
span#contact{ display:block; text-align:center; line-height:25px }
#chapter{ height:10px; width:100%; }

@media (min-width: 990px){.navbar .nav {width: 880px;margin-left: auto;margin-right: auto/*centrage du menu déroulant*/}}

@media (min-width: 990px){
.taupe-menu{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0);}
.taupe-footer{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:auto;   }
.content-2{width:50%;heigth:50%; margin:0px; border:0; }
.content{position:relative; float:left;height:auto; width:100%; margin:0 0 120px 0; border:0; }
#section_presentation{height:1000px}
h6{ display:block; font-size:1.4em; font-weight:100;text-align:center}
#logo img{width:120px; height:auto}




/*flip carte*/
.supports{min-width:990px; text-align:center; height:auto; margin:auto;  }
h5{display:block; font-size:1.2em; font-weight:100;text-align:center; margin-top:80px}
#proj-1{border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px; float:left  ;margin-top:5px}
#proj-2{border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px;float:left ;margin-top:5px}
#proj-3{ border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px;float:left  ;margin-top:5px}

.back-2{ width:100%;height:100%;}
.back-2 span{
	text-align: center;
	display: block;
	width: 320px;
	height: 300px;
	color: white;
	padding: 35px 15px 15px 15px;
	background-color: #066;
	border-radius: 5px;
	;
	margin-top: 3px
}
.front-2{background-color:#99cc00;width: 350px;height: 350px;border-radius:5px;}
.front-2 span{padding-top:90px; display: block; width: 350px;height:auto; }

#p4{}
#p5{}
#p6{}


/*flip image*/
.auto{max-width: 350px; max-height: 350px;}
#proj-1-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px; float:left}
#proj-2-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px 5px 5px 0; float:left;  clear:left}
#proj-3-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px; float:left}
#p1{}
#p2{}
#p3{}




/*flip entretien*/

#support_entretien{
	min-width: 990px;text-align: center;height: auto;margin: auto;}
	
#entretien-1,#entretien-2,#entretien-3{display:block; float:left;  border-radius: 5px; border:0px solid black; width:350px; height:350px; margin:5px}
.front-1 {width: 350px;height: 350px; margin:0px; border-radius:5px; float:left; background-color:#99cc00;  }
.front-1 span{padding-top: 0px;display: block;width: 350px;height: 350px; background-color: #9C0;}
.front-1 p{ color:white; text-align:center; font-style:inherit}
.back-1 {width: 350px;height: 350px; margin:0;   }

#entretien-4{width:350px; height:340px; border-radius:5px; float:left; margin:5px}
#entretien-5{width:350px; height:340px; border-radius:5px; float:left;margin:5px}
#entretien-6{ width:350px; height:340px; border-radius:5px; float:left;margin:5px}
#titre-support2{margin:0 0 35px 0}
#titre-support3{margin:0 0 55px 0;}
#titre-support1{margin:0 0 35px 0}
#doigt-entretien{opacity:0.7;  display:block; bottom:20px; position:absolute;  width:100%; height:80px;}
/**/


span#contact{margin-bottom:50px; }

nav img{ margin:20px}
nav img:hover{ transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg)}

h1{
	margin: 110px 0 0 0;
	font-size: 2em;
	padding-bottom: -40px;
	width: 100%
}
h2{font-size:2em; border-bottom:solid 1px;max-width: 600px;margin-left:auto; margin-right:auto; position:relative; }
h3{ margin-left:20px}
h4{text-align:center; margin-top:0; padding-top:0; width:100%}

section{max-width: 1090px;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0;margin-top:40px; font-size:1em}
.trait{ border-bottom:solid 1px white; width:600px; height:1px; margin: 10px auto 25px auto; text-align:center}
.left{float:left; display:block; clear:left; max-width: 900px;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0;margin-top:40px; font-size:1em}
.image-right{float:right; width:250px; height:250px; margin:20px 0px 0 0px; }
#image_1{float:left; width:250px; height:250px; margin:0px 0 0 50px; }

#create-1{ width:100px; height:auto; position: absolute; z-index:1;border:5px white solid;transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -webkit-transform:rotate(-10deg)}
#create-1:hover{ width:400px; height:auto;position: absolute;margin-top:0px; margin-left:-20px;border:5px white solid; z-index:4;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg) }
#create-2{ width:100px; height:auto; position: absolute; z-index:2;margin-top:90px; margin-left:20px; border:5px white solid;transform:rotate(+20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -webkit-transform:rotate(20deg) }
#create-2:hover{ width:400px; height:auto;position: absolute;margin-top:0px; margin-left:-20px;border:5px white solid;z-index:4; transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-3{ width:120px; height:auto;position: absolute; z-index:3;margin-top:40px; margin-left:105px;border:5px white solid;transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg) }
#create-3:hover{ width:400px; height:auto;position: absolute;margin-top:0px; margin-left:0px;border:5px white solid;z-index:4;transform:rotate(0deg)}
#create-4{ width:90px; height:auto;position: absolute; z-index:3;margin-top:120px; margin-left:75px;border:5px white solid;transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg) }
#create-4:hover{ width:300px; height:auto;position: absolute;margin-top:40px; margin-left:105px;border:5px white solid;z-index:4;transform:rotate(0deg)}

#image_2{float:left; width:250px; height:250px; margin:0px 0 0 50px; }
#image_3{float:left; width:250px; height:250px; margin:50px 0 0 50px; }
#image_4{float:left; width:250px; height:250px; margin:50px 0 0 50px; }
#image_5{float:right; width:235px; height:400px; margin:-70px 0 0 0;padding-right:0px }




.footer{width:100%; height:auto; margin:auto; text-align:center; margin-bottom:80px;  }
.footer p{display:block; font-family: inherit;line-height: 20px; font-size:0.9em; margin-left:auto; margin-right:auto; text-align:center; position:relative; width:940px}

#realisation_img{
	max-width: 640px;
	height: 850px;
	margin: 10px auto 120px auto;
}
.images_rea{width:150px; height:auto;  float:left;margin:5px 5px 20px 5px;}
.images_rea img{ max-height:90px;width:140px;border:solid 5px white;}
.images_rea img:hover{-webkit-transform: scale(3); -moz-transform: scale(3);-o-transform: scale(3); transform: scale(3);box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-webkit-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-moz-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-o-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4); -ms-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4)}
#realisation_img span{display:block;font-size:0.6em; color:white; max-width:150px;text-align:center }
#rea-20{}
#rea-13{clear:left}

}


	
@media (min-width: 768px) and (max-width:1095px){

.taupe-menu{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:1000px;
   }
.taupe-footer{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:auto;   }
.content-2{width:50%;heigth:50%; margin:0px; border:0; }
.content{position:relative; float:left;height:auto; width:100%; margin:0; border:0;padding:10px }
#section_projet{ margin:0 0 90px 0}
#section_creation{margin:0 0 60px 0; height:auto; padding-bottom:120px}
#section_entretien{margin:0 0 -120px 0; height:auto;}
#section_realisation{margin:0 0 60px 0}
h6{ display:block; font-size:1.4em; font-weight:100;text-align:center}
#logo img{width:120px; height:auto; margin-bottom:120px}

/*flip carte*/
.supports{width:725px; text-align:center; height:auto; margin:auto;  }
h5{display:block; font-size:1.2em; font-weight:100;text-align:center; margin-top:80px}
#proj-1{border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px; float:left  ;margin-top:5px}
#proj-2{border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px;float:left ;margin-top:5px}
#proj-3{ border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px;float:left  ;margin-top:5px}

.back-2{ width:100%;height:100%;}
.back-2 span{ text-align:center; display:block; width:320px; height:300px; color:white;  padding:35px 15px 15px 15px; background-color:#066;border-radius:5px; ;margin-top:3px}
.front-2{background-color:#99cc00;width: 350px;height: 350px;border-radius:5px;}
.front-2 span{padding-top:90px; display: block; width: 350px;height:auto; }

#p4{}
#p5{}
#p6{}


/*flip image*/
.auto{max-width: 350px; max-height: 350px;}
#proj-1-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px; float:left}
#proj-2-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px; float:left;}
#proj-3-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px; float:left}
#p1{}
#p2{}
#p3{}











/*flip entretien*/
#support_entretien{width: 720px; text-align: center; height:1250px;margin: auto;}
#entretien-1,#entretien-2,#entretien-3{display:block; float:left;  border-radius: 5px; border:0px solid black; width:350px; height:350px; margin:5px}
.front-1 {width: 350px;height: 350px; margin:0px; border-radius:5px; float:left; background-color:#99cc00;  }
.front-1 span{padding-top: 0px;display: block;width: 350px;height: 350px; background-color: #9C0;}
.front-1 p{ color:white; text-align:center; font-style:inherit}
.back-1 {width: 350px;height: 350px; margin:0;   }
#entretien-4{width:350px; height:340px; border-radius:5px; float:left; margin:5px}
#entretien-5{width:350px; height:340px; border-radius:5px; float:left;margin:5px; clear:left}
#entretien-6{ width:350px; height:340px; border-radius:5px; float:left;margin:5px}
#doigt-entretien{opacity:0.7; display:block; bottom:20px; position:absolute;  width:100%; height:80px; }
#titre-support2{margin:0 0 35px 0}
#titre-support3{margin:0 0 55px 0;}
#titre-support1{margin:0 0 35px 0}
/**/

nav img{ margin:20px 5px 20px 5px}
nav img:hover{ transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg)}
span#contact{margin-bottom:50px;}
h1{margin-top:80px;font-size:2em;}
h2{font-size:2em; border-bottom:solid 1px;max-width: 600px;margin-left:auto; margin-right:auto; position:relative; }
h3{ margin-left:20px}

section{max-width: 899px;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0;margin-top:40px; font-size:1em}
.trait{ border-bottom:solid 1px white; width:600px; height:1px; margin: 10px auto 25px auto; text-align:center}
.left{float:left; display:block; max-width: 95%;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0; font-size:1em; clear:both}
.image-right{float:left;width:250px; height:250px; margin:20px auto 0 auto; text-align:center; clear:both  }
#image_1{float:left; height:250px;width:250px; margin:20px auto 0 32%;clear:left }
#image_2{float:left; width:250px; height:250px; margin:20px auto 0 20%; clear:left}
#image_3{float:left; width:250px; height:250px; margin:20px auto 0 10%;clear:left }
#image_4{float:left; width:250px; height:250px; margin:50px 0 0 0;clear:right }
#image_5{float:left; width:235px; height:250px; margin:0 0 0 30%; clear:left }

#create-1{ width:100px; height:auto; position: absolute; z-index:1;border:5px white solid;transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -webkit-transform:rotate(-10deg)}
#create-1:hover{ width:400px; height:auto;position: absolute;margin-top:0px; margin-left:-20px;border:5px white solid; z-index:4;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg) }
#create-2{ width:100px; height:auto; position: absolute; z-index:2;margin-top:90px; margin-left:20px; border:5px white solid;transform:rotate(+20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -webkit-transform:rotate(20deg) }
#create-2:hover{ width:400px; height:auto;position: absolute;margin-top:0px; margin-left:-20px;border:5px white solid;z-index:4; transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-3{ width:120px; height:auto;position: absolute; z-index:3;margin-top:40px; margin-left:105px;border:5px white solid;transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg) }
#create-3:hover{ width:400px; height:auto;position: absolute;margin-top:0px; margin-left:0px;border:5px white solid;z-index:4;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-4{ width:90px; height:auto;position: absolute; z-index:3;margin-top:120px; margin-left:75px;border:5px white solid;transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg) }
#create-4:hover{ width:300px; height:auto;position: absolute;margin-top:40px; margin-left:105px;border:5px white solid;z-index:4;transform:rotate(0deg)}





.footer{ position:relative; max-width:899px; height:auto; margin:0 auto 0 auto; text-align:center}
.footer p{display:block; float:left; font-family: inherit;line-height: 20px; font-size:0.9em; width:auto; margin-left:auto; margin-right:auto; text-align:center; }

#realisation_img{ max-width:650px; height:850px;  margin:10px auto 120px auto; text-align:center}
.images_rea{max-width:150px; height:auto;  float:left;margin:5px}
.images_rea img{ max-height:90px;width:140px;border:solid 5px white;}
.images_rea img:hover{-webkit-transform: scale(3); -moz-transform: scale(3);-o-transform: scale(3); transform: scale(3);box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-webkit-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-moz-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-o-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4); -ms-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4)}
#realisation_img span{ display:block;font-size:0.6em; color:white; max-width:150px; text-align:center }
}
#rea-13{clear:left}
	
	
@media (min-width: 360px) and (max-width: 767px){
.content{position:relative; float:left;height:auto; width:98%; margin:0px; border:0;padding: 0 1% 0 1% }

.taupe-menu{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:auto;}
.taupe-footer{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:auto;}
#section_projet{ margin:0 0 90px 0}
#section_creation{margin:0 0 60px 0; height:auto; padding-bottom:120px}
#section_entretien{margin:0 0 60px 0; height:auto;}
#section_realisation{margin:0 0 90px 0; padding-bottom:60px; height:auto}
h6{ display:block; font-size:1.4em; font-weight:100;text-align:center}
#logo img{width:120px; height:auto; margin-bottom:120px}

/*flip carte*/
.supports{width:360px; text-align:center; height:auto; margin:auto;  }
h5{display:block; font-size:1.2em; font-weight:100;text-align:center; margin-top:80px}
#proj-1{border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px; float:left  ;margin-left:5px}
#proj-2{border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px;float:left ;margin-left:5px}
#proj-3{ border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:350px; height:350px;float:left  ;margin-left:5px}

.back-2{ width:100%;height:100%;}
.back-2 span{ text-align:center; display:block; width:320px; height:300px; color:white;  padding:35px 15px 15px 15px; background-color:#066;border-radius:5px; ;margin-top:3px}
.front-2{background-color:#99cc00;width: 350px;height: 350px;border-radius:5px;}
.front-2 span{padding-top:90px; display: block; width: 350px;height:auto; }

#p4{}
#p5{}
#p6{}


/*flip image*/
.auto{max-width: 350px; max-height: 350px;}
#proj-1-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px; float:left}
#proj-2-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px; float:left;}
#proj-3-bis{width:350px; height:350px; border:0px solid black; border-radius:5px; margin:5px; float:left}
#p1{}
#p2{}
#p3{}






/*flip entretien*/
#support_entretien{width: 360px; text-align: center; height:1250px;margin: auto;}
#entretien-1,#entretien-2,#entretien-3{display:block; float:left;  border-radius: 5px; border:0px solid black; width:350px; height:350px; margin:5px}
.front-1 {width: 350px;height: 350px; margin:0px; border-radius:5px; float:left; background-color:#99cc00;  }
.front-1 span{padding-top: 0px;display: block;width: 350px;height: 350px; background-color: #9C0;}
.front-1 p{ color:white; text-align:center; font-style:inherit}
.back-1 {width: 350px;height: 350px; margin:0;   }
#entretien-4{width:350px; height:340px; border-radius:5px; float:left; margin:5px 5px 15px 5px}
#entretien-5{width:350px; height:340px; border-radius:5px; float:left;margin:5px 5px 15px 5px}
#entretien-6{ width:350px; height:340px; border-radius:5px; float:left;margin:5px 5px 15px 5px}
#doigt-entretien{opacity:0.7;  display:block; bottom:20px; position:absolute;  width:100%; height:80px;}
#titre-support2{margin:10px 0 35px 0}
#titre-support3{margin:10px 0 35px 0}
#titre-support1{margin:10px 0 35px 0}
/**/



nav img{ margin:20px 5px 20px 5px}
nav img:hover{ transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg)}
span#contact{margin-bottom:50px;}
h1{margin-top:80px;font-size:2em;}
h2{font-size:2em; border-bottom:solid 1px;max-width: 600px;margin-left:auto; margin-right:auto; position:relative; }
h3{ margin-left:20px}


section{max-width: 899px;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0;margin-top:40px; font-size:1em}
.trait{ border-bottom:solid 1px white; width:60%; height:1px; margin: 10px auto 25px auto; text-align:center}
.left{float:left; display:block; max-width: 95%;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0; font-size:1em; clear:both}
.image-right{float:left;width:250px; height:250px; margin:20px auto 0 auto; text-align:center; clear:both  }
#image_1{
	float: left;
	height: 220px;
	width: auto;
	margin: 20px auto 0 60px;
	clear: left
}


#image_2{
	float: left;
	height: 250px;
	width: auto;
	margin: 20px auto 0 120px;
	clear: left
}



#image_3{
	float: left;
	height: 250px;
	width: auto;
	margin: 20px auto 0 120px;
	clear: left
}


#image_4{
	float: left;
	height: 250px;
	width: auto;
	margin: 20px auto 0 120px;
	clear: left
}


#image_5{
	float: left;
	height: 300px;
	width: auto;
	margin: 20px auto 0 100px;
	clear: left
}

#create-1{ width:120px; height:auto; position: absolute; z-index:1;border:5px white solid;transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -webkit-transform:rotate(-10deg)}
#create-1:hover{ width:300px; height:auto;position: absolute;margin-top:0px; margin-left:-20px;border:5px white solid; z-index:4;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg) }
#create-2{ width:120px; height:auto; position: absolute; z-index:2;margin-top:90px; margin-left:20px; border:5px white solid;transform:rotate(+20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -webkit-transform:rotate(20deg) }
#create-2:hover{ width:300px; height:auto;position: absolute;margin-top:0px; margin-left:-20px;border:5px white solid;z-index:4; transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-3{ width:120px; height:auto;position: absolute; z-index:3;margin-top:40px; margin-left:105px;border:5px white solid;transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg) }
#create-3:hover{ width:300px; height:auto;position: absolute;margin-top:0px; margin-left:0px;border:5px white solid;z-index:4;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-4{ width:90px; height:auto;position: absolute; z-index:3;margin-top:120px; margin-left:75px;border:5px white solid;transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg) }
#create-4:hover{ width:200px; height:auto;position: absolute;margin-top:40px; margin-left:105px;border:5px white solid;z-index:4;transform:rotate(0deg)}


.footer{ position:relative; max-width:767px; height:auto; margin:0 auto 0 auto; text-align:center}
.footer p{display:block; float:left; font-family: inherit;line-height: 20px; font-size:0.8em; width:auto; margin-left:auto; margin-right:auto; text-align:center; }

#realisation_img{ max-width:400px; height:auto;  margin:10px auto 40px auto; text-align:center}
.images_rea{max-width:140px; height:auto;  float:left;margin:30px}
.images_rea img{ max-height:90px; width:150px; border:solid 5px white;}
.images_rea img:hover{-webkit-transform: scale(2); -moz-transform: scale(2);-o-transform: scale(2); transform: scale(2);box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-webkit-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-moz-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-o-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4); -ms-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4)}
#realisation_img span{display:block;font-size:0.6em; color:white; max-width:150px; text-align:center }
#rea-16{clear:left; }
}


	
@media (min-width: 340px) and (max-width: 600px){
	
.content{position:relative; float:left;height:auto; width:98%; margin:0px; border:0;padding: 0 1% 0 1% }

.taupe-menu{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:auto;}
.taupe-footer{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:auto;}
h6{ display:block; font-size:1.2em; font-weight:100;text-align:center}
#logo img{width:120px; height:auto; margin-bottom:120px}

/*flip projet*/
.supports{width:300px; text-align:center; height:auto; margin:auto}
h5{display:block; font-size:1.1em; font-weight:100;text-align:center; margin-top:80px}
.back-2{width:300px;height:100%; border-radius:5px;  }
.back-2 span{ text-align:center; display:block; width:97%; height:97%; color:white;  padding:2% 2% 2% 2%;background-color:#066;border-radius:5px; margin-left:5px}
.front-2{background-color:#99cc00;width:100%;height:100%;border-radius:5px;margin-left:5px}
.front-2 span{padding-top:70px; display:block; width:100%; height:auto; background-color:#9C0;  border-radius:5px;margin:auto;}
#proj-1{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }
#proj-2{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }
#proj-3{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }

#p6{width:300px;height:300px; clear:both}
#p5{width:300px;height:320px;  clear:both}
#p4{width:300px;height:320px;  clear:both}

/*flip auto*/
#img-1{float:left;}
#img-2{float:left; }
#img-3{float:left}
.auto{width: 200px; max-height: 300px;  }
.projets-image{border:0px solid black; border-radius:5px; margin:5px 5px 0 0; float:left}
#proj-1-bis{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }
#proj-2-bis{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }
#proj-3-bis{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }


#p1{width:300px; height:300px; border:0px solid black; border-radius:5px; margin:0 5px 10px 5px; float:left}
#p2{width:300px; height:300px; border:0px solid black; border-radius:5px; margin:0 5px 0 5px; float:left}
#p3{width:300px; height:300px; border:0px solid black; border-radius:5px; margin:0 5px 40px 5px; float:left}







/*flip entretien*/
#support_entretien{width:310px; text-align:center; height:auto; margin:auto}
#entretien-1,#entretien-2,#entretien-3{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:300px; height:300px; margin:0  5px 10px 5px}
.front-1 {width: 280px;height: 300px; margin:0px; border-radius:5px; float:left; background-color:#99cc00}
.front-1 span{padding-top:0px;display: block; }
.front-1 p{ color:white; text-align:left; font-style:inherit; padding:0; display:block; width:280px}
#supp-1, #supp-2, #supp-3{ color:white; text-align:center; font-style:inherit; padding:0 10px 0 10px; display:block; }
.back-1 {width:300px;height: 300px;  }

#titre-support2, #titre-support3{margin:-10px 0 0px 0}
#titre-support1{margin:3px 0 0px 0}

#entretien-4{width:300px; height:300px; border-radius:5px; float:left;margin: 0 0 5px 0}
#entretien-5{width:300px; height:300px; border-radius:5px; float:left;margin: 0 0 5px 0}
#entretien-6{ width:300px; height:300px; border-radius:5px; float:left;margin: 0 0 300px 0}
#titre-support2{margin:10px 0 35px 0}
#titre-support3{margin:0px 0 15px 0}
#titre-support1{margin:10px 0 35px 0}
/**/
#doigt-entretien{opacity:0.5; display:block; bottom:20px; position:absolute;  width:100%; height:80px; }
/**/





nav img{ margin:20px 5px 20px 5px}
nav img:hover{ transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg)}
span#contact{margin-bottom:30px;}
h1{margin-top:30px;font-size:2em;}
h2{font-size:2em; border-bottom:solid 1px;max-width: 600px;margin-left:auto; margin-right:auto; position:relative; }
h3{ margin-left:20px}

section{max-width: 767px;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0;margin-top:40px; font-size:1em}
.trait{ border-bottom:solid 1px white; width:60%; height:1px; margin: 10px auto 25px auto; text-align:center}

.left{float:left; display:block; max-width: auto;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0; font-size:1em; clear:both}
.image-right{float:left;width:auto; height:200px; margin:20px auto 0 auto; text-align:center; clear:both  }
#image_1{float:left; height:250px;width:auto; margin:auto auto auto 40px;clear:left }
#image_2{float:left; height:250px;width:auto; margin:auto auto auto 40px;clear:left }
#image_3{float:left; height:250px;width:auto; margin:auto auto auto 40px;clear:left }
#image_4{float:left; height:250px;width:auto; margin:auto auto auto 40px;clear:left }
#image_5{float:left; height:300px;width:auto; margin:30px auto auto 40px;clear:left }

#create-1{ width:100px; height:auto; position: absolute; z-index:1;border:5px white solid;transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -webkit-transform:rotate(-10deg)}
#create-1:hover{ width:250px; height:auto;position: absolute;margin-top:0px; margin-left:-20px;border:5px white solid; z-index:6;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg) }
#create-2{ width:130px; height:auto;position: absolute;margin-top:0px; margin-left:150px;border:5px white solid; z-index:4;transform:rotate(20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -webkit-transform:rotate(20deg) }
#create-2:hover{ width:250px; height:auto;position: absolute;margin-top:0px; margin-left:60px;border:5px white solid;z-index:4; transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-3{ width:120px; height:auto;position: absolute; z-index:3;margin-top:40px; margin-left:70px;border:5px white solid;transform:rotate(10deg) ; -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg)}
#create-3:hover{ width:250px; height:auto;position: absolute;margin-top:0px; margin-left:0px;border:5px white solid;z-index:4;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-4{ width:90px; height:auto;position: absolute; z-index:3;margin-top:120px; margin-left:75px;border:5px white solid;transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); -webkit-transform:rotate(60deg) }
#create-4:hover{ width:200px; height:auto;position: absolute;margin-top:40px; margin-left:70px;border:5px white solid;z-index:4;transform:rotate(0deg)}



/*Réalisations*/
#realisation_img{ width:150px; height:auto;  margin:10px auto 40px auto; text-align:center; }
.images_rea{width:150px; height:auto; margin:8px ; }
.images_rea img{ max-height:auto; width:150px; border:4px solid white}
.images_rea img:hover{-webkit-transform: scale(1.8); -moz-transform: scale(1.8);-o-transform: scale(1.8); transform: scale(1.8);box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-webkit-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-moz-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-o-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4); -ms-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4)}
#realisation_img span{ display:block;font-size:0.6em; color:white; max-width:150px; text-align:center }
#rea-15{clear:right; }

/*Footer*/
.footer{ position:relative; max-width:100%; height:auto; margin:0 auto 0 auto; text-align:center}
.footer p{display:block; float:left; font-family: inherit;line-height: 20px; font-size:0.8em; width:auto; margin-left:auto; margin-right:auto; text-align:center; }
}


	
@media (min-width: 240px) and (max-width: 340px){
	
.content{position:relative; float:left;height:auto; width:98%; margin:0px; border:0;padding: 0 1% 0 1% }
.taupe-menu{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-linear-gradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:auto;}
.taupe-footer{ background-image:-webkit-linear-gradient(90deg, #066, #9C0);  background-image:-o-linear-gradient(0deg, #066, #9C0); background-image:-moz-linear-gradient(0deg, #066, #9C0); background-image:-ms-lineargradient(0deg, #066, #9C0); background-image:linear-gradient(0deg, #066, #9C0); height:auto;}
#section_projet{ margin:0 0 90px 0;height:2100px}
#section_creation{margin:0 0 60px 0; height:auto;}
#section_entretien{margin:0 0 60px 0; height:auto;}
#section_realisation{margin:0 0 90px 0; height:auto; padding-bottom:40px}
h6{ display:block; font-size:1.1em; font-weight:100;text-align:center}
#logo img{width:120px; height:auto; margin-bottom:120px}

/*flip projet*/
.supports{width:240px; text-align:center; height:auto; margin:auto;}
h5{display:block; font-size:1em; font-weight:100;text-align:center; margin-top:80px}
.back-2{height:100%; border-radius:5px;}
.back-2 span{ text-align:center; display:block; width:230px; height:98%; color:white; border-radius:5px; padding-top:10px;   background-color:#066; }
.front-2{background-color:#99cc00;width:100%; height:100%; border-radius:5px }
.front-2 span{padding-top:50px; display:block; width:100%; height:auto;margin:auto; }


#proj-1{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }
#proj-2{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }
#proj-3{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:100%;  margin-bottom:10px }

#p4{width:230px;height:340px;clear:both; margin-left:5px}
#p5{width:230px;height:380px; clear:both; margin-left:5px}
#p6{width:230px;height:250px; clear:both; margin-left:5px}



/*flipcard auto*/
.auto{width: 230px; height:230px; }
#img-1{float:left; }
#img-2{float:left;  }
#img-3{float:left; }


#p1{width:230px; height:230px; border:0px solid black; border-radius:5px; margin:0 5px 10px 5px; float:left}
#p2{width:230px; height:230px; border:0px solid black; border-radius:5px; margin:0 5px 10px 5px; float:left}
#p3{width:230px; height:230px; border:0px solid black; border-radius:5px; margin:0 5px 40px 5px; float:left}


/*flip entretien*/
#support_entretien{width:240px; text-align:center; height:auto; margin:auto}
.front-1 {width:215px;height: 220px; margin:0px; border-radius:5px; float:left; background-color:#99cc00; margin:5px }
.front-1 span{padding-top:0px;display: block;margin:5px }
.front-1 p{ color:white; text-align:left; font-style:inherit; padding:0 10px 0 0; display:block; width:190px}
#supp-1, #supp-2, #supp-3{ color:white; text-align:center; font-style:inherit; padding:0 10px 0 10px; display:block; font-size:0.9em; } 
.back-1 {width: 235px;height: 235px; margin:5px 0 0 0; }
#entretien-1,#entretien-2{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:240px; height:240px;}
#entretien-3{display:block; float:left;  border-radius: 5px;  text-align:center;  color:white;  border:0px solid black; width:240px; height:240px;}
#supp-1{width:215px; height:230px;}
#supp-2{width:215px; height:200px; padding-top:30px}
#supp-3{width:215px; height:230px;}
#supp-3 back-1{width:215px; height:230px; background-color:#000}
#titre-support2{margin:-20px 0 0px 0}
#titre-support3{margin:-15px 0 5px 0; font-size:1.1em}
#titre-support1{margin:0}


#entretien-4{width:240px; height:240px; border-radius:5px; float:left; margin: 5px 0 0 0}
#entretien-5{width:240px; height:240px; border-radius:5px; float:left; margin: 5px 0 0 0}
#entretien-6{width:240px; height:240px; border-radius:5px; float:left; margin: 5px 0 0 0}
#doigt-entretien{opacity:0.7;  display:block; bottom:20px; right:10px; position:absolute;  width:80px; height:80px;}
/**/




nav img{ margin:20px 5px 20px 5px}
nav img:hover{ transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg)}
span#contact{margin-bottom:25px;}
h1{margin-top:30px;font-size:2em;}
h2{font-size:2em; border-bottom:solid 1px;max-width: 600px;margin-left:auto; margin-right:auto; position:relative; }
h3{ margin-left:20px}


section{max-width: 767px;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0;margin-top:40px; font-size:1em}
.trait{ border-bottom:solid 1px white; width:60%; height:1px; margin: 10px auto 25px auto; text-align:center}

.left{float:left; display:block; max-width: auto;height: auto;margin-left:auto; margin-right:auto; position:relative; padding:0; font-size:1em; clear:both}
.image-right{float:left;width:auto; height:200px; margin:20px auto 0 auto; text-align:center; clear:both  }
#image_1{float:left; height:300px;width:auto; margin:auto auto auto 20px;clear:left }
#image_2{float:left; height:300px;width:auto; margin:auto auto auto 20px; clear:left }
#image_3{float:left; height:300px;width:auto; margin:auto auto auto 20px;clear:left }
#image_4{float:left; height:300px;width:auto; margin:auto auto auto 20px;clear:left }
#image_5{float:left; height:400px;width:auto; margin:30px auto auto 20px;clear:left }

#create-1{ width:100px; height:auto; position: absolute; z-index:1;border:5px white solid;transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -webkit-transform:rotate(-10deg)}
#create-1:hover{ width:250px; height:auto;position: absolute;margin-top:0px; margin-left:-20px;border:5px white solid; z-index:6;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg) }
#create-2{ width:120px; height:auto;position: absolute;margin-top:0px; margin-left:70px;border:5px white solid; z-index:4;transform:rotate(20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -webkit-transform:rotate(20deg) }
#create-2:hover{ width:250px; height:auto;position: absolute;margin-top:0px; margin-left:-15px;border:5px white solid;z-index:7; transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-3{ width:120px; height:auto;position: absolute; z-index:4;margin-top:70px; margin-left:100px;border:5px white solid;transform:rotate(10deg) ; -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg)}
#create-3:hover{ width:250px; height:auto;position: absolute;margin-top:0px; margin-left:-15px;border:5px white solid;z-index:8;transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg)}
#create-4{ width:90px; height:auto;position: absolute; z-index:5;margin-top:120px; margin-left:75px;border:5px white solid;transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); -webkit-transform:rotate(60deg) }
#create-4:hover{ width:200px; height:auto;position: absolute;margin-top:40px; margin-left:10px;border:5px white solid;z-index:9;transform:rotate(0deg)}

.footer{ position:relative; max-width:100%; height:auto; margin:0 auto 0 auto; text-align:center}
.footer p{display:block; float:left; font-family: inherit;line-height: 20px; font-size:0.8em; width:auto; margin-left:auto; margin-right:auto; text-align:center; }

#realisation_img{ width:150px; height:auto;  margin:10px auto 40px auto; text-align:center}
.images_rea{max-width:150px; height:auto; margin:2px auto auto auto; text-align:center; }
.images_rea img{ max-height:auto;max-width:150px;border:solid 5px white;}
.images_rea img:hover{-webkit-transform: scale(1.5); -moz-transform: scale(1.5);-o-transform: scale(1.5); transform: scale(1.5);box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-webkit-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-moz-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4);-o-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4); -ms-box-shadow: 0px 0px 20px RGBa(0,0,0,0.4)}
#realisation_img span{display:block;font-size:0.6em; color:white; max-width:150px;text-align:center }
}