@charset "UTF-8";

/*##################################################*/
/*#################### GENERAL #####################*/
/*##################################################*/

body, html {height: 100%;width: 100%;margin: 0;padding: 0;font-family: OpenSansLight, Arial, Helvetica, sans-serif;font-weight:normal;font-style:normal;color: #000;text-align:center;}

@media screen and (max-width: 699px) {
	body, html {-moz-text-size-adjust:none;-webkit-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
}
section, footer { margin:0; padding:0; overflow:hidden;  position:relative;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
 }
 
@media screen and (max-width: 1349px) {
section, footer { width:100%; }	
}
@media screen and (min-width: 1350px) {
section, footer { width:88%; }
}

h1 { font-weight:bold; text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; }
h2 { font-weight:normal; text-transform:uppercase; font-family: "Times New Roman", Times, serif; }
h3 { font-weight:bold; text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; }
p { font-weight:normal; font-family: OpenSansLight, Arial, Helvetica, sans-serif; }
a { cursor:pointer; color:#000; text-decoration:none;  }
span.after {background:#fff; display:block; width:15%; height:1px; margin:0 auto;}
span.after2 {background:#392819; display:block; width:15%; height:1px; margin:0 auto;}
h1 span, h2 span, h3 span { font-weight:normal; }

@media screen and (max-width: 699px) { /*mobile*/
body { font-size:1rem; }
h1 { font-size:1.5rem;  }
h2 { font-size:1.4rem;  }
h3 { font-size:1.5rem; }
p  { font-size:1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { /*tablette*/
body { font-size:1.3rem; }
h1 { font-size:5rem;  }
h2 { font-size:1.8rem;  }
h3 { font-size:3rem; }
p { font-size:1.3rem; }
}
@media screen and (min-width: 1350px) { /*desktop*/
body { font-size:1.3rem; }
h1 { font-size:5rem;  }
h2 { font-size:1.8rem;  }
h3 { font-size:3rem; }
p { font-size:1.3rem; }
}

/*##################################################*/
/*#################### HEADER ######################*/
/*##################################################*/
@media screen and (max-width: 1349px) {
#header { width:100%; height:100%; position:fixed; top:0; right:-100%; margin:0; padding:0; z-index:50; overflow:auto; background-color:#FFF; text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; font-weight:normal; 
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
-webkit-transition:right 1s ease; -moz-transition:right 1s ease; -o-transition:right 1s ease; transition:right 1s ease; }
#burger { display:block; cursor:pointer; width:5rem; height:5rem; position:fixed; top:0; right:0; z-index:70; }
#burger img { width:2rem; height:2rem; margin:1.5rem; }
#burger img+img { width:1.5rem; height:1.5rem; margin:1.75rem; }
#burger1 { display:block; }
#burger2 { display:none; }
#header ul { display:block; width:100%; margin:0; padding:0; }
#header li { display:block; width:100%; margin:0.5rem 0; }
#header li a  { color:#333; display:block; width:40%; padding:0.5rem 0; margin:0 auto; text-decoration:none; cursor:pointer; }
#agencements span:first-child { color:#333; display:block; width:40%; padding:0.5rem 0; margin:0 auto; text-decoration:none; }
#header li a:hover { color:#ff9933; }
#header li.selected span, #header li span+span { display:block; width:2rem; height:1px; margin:0.5rem auto 0 auto; }
#header li.selected { padding-bottom:0;}
#header li.selected a { color:#ff9933; }
#header li.selected span { background:#ff9933; }
li#agencements { padding-bottom:0;}
#header li span+span { background:#333; }
#header ul li ul { display:block; width:100%; margin:0; padding:0; }
#header ul li ul li { display:block; widh:100%; margin:0.5rem 0; padding:0.5rem 0; }
#header ul li ul li a { color:#999; }
#header li img {width:10rem; height:auto; }
}
@media screen and (max-width: 699px) {
#header { font-size:1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) {
#header { font-size:1.3rem; }
}
@media screen and (min-width: 1350px) {
#header { width:12%; height:100%; position:fixed; top:0; margin:0; padding:0; z-index:50; background-color:#FFF; text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; font-weight:normal; font-size:1rem;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
-webkit-transition:right 1s ease; -moz-transition:right 1s ease; -o-transition:right 1s ease; transition:right 1s ease; }
#burger { display:none; }
#header ul { display:block; width:100%; margin:0; padding:0; }
#header li { display:block; widh:100%; margin:0.5rem 1rem; padding:0.5rem 0; }
#header li a { color:#333; display:block; text-decoration:none; cursor:pointer; }
#header li span { color:#333; display:block; text-decoration:none; }
#header li a:hover { color:#ff9933; }
#header li.selected span, #header li span+span { display:block; width:2rem; height:1px; margin:0.5rem auto 0 auto; }
#header li.selected { padding-bottom:0;}
#header li.selected a { color:#ff9933; }
#header li.selected span { background:#ff9933; }
li#agencements { padding-bottom:0;}
#header li span+span { background:#333; }
#header ul li ul { display:block; width:100%; margin:0; padding:1rem 0 0 0; }
#header ul li ul li { display:block; widh:100%; margin:0.5rem 0; padding:0.5rem 0; }
#header ul li ul li a { color:#999; }
#header li img { width:100%; height:auto; }
.right-20 { right:-20%; }
.right-0 { right:0; }
}
@media screen and (min-width: 2000px) {
#header li img { width:50%; height:auto; }	
}
	
	
/*##################################################*/
/*#################### LAYOUT ######################*/
/*##################################################*/
/*****IMG100 IMG50*****/
.img100 img { width:100%;height:auto;display:block; float:left; }
.img50 img { width:50%;height:auto;display:block; float:left; }

/*****BACKGROUND-COLOR******/

/*PARTICULIERS*/
.bg-particuliers { background-color:#94785b; }
.bg-pcuisine { background-color:#a28465; }
.bg-psalledebain { background-color:#8a7055; }
.bg-psejour { background-color:#584735; }
.bg-pchambre { background-color:#94785b /*#a18363*/; } 
.bg-pdressing { background-color:#745e47; }
.bg-pbureau { background-color:#8a7055 /*#584735*/; } 
.bg-pescalier { background-color:#745e47; }
.bg-pexterieur { background-color:#94785b; }
.bg-pspeciaux { background-color:#584735 /*#94785b*/; }  

/*PROFESSIONNELS*/
.bg-professionnels { background-color:#7c6551; }
.bg-prmagasin { background-color:#9f8a79; }
.bg-prdivers { background-color:#ad8d72; }
.bg-prhall { background-color:#7c6551; }
.bg-prreunion { background-color:#b69980; }
.bg-prrestauration { background-color:#977b63; }
	

/*COLLECTIVITES*/
.bg-collectivites { background-color:#685e59; }
.bg-cspectacle { background-color:#a0938b; }
.bg-chall { background-color:#867b75; }
.bg-cfetes { background-color:#58504b; }
.bg-cmediatheque { background-color:#a0938b; }
.bg-cdivers { background-color:#867b75/*#ccbeb6*/; }
.bg-chotelier { background-color:#a0938b; }

/*PROJETS AZ*/
.bg-projetsaz { background-color:#82aeb6; }
.bg-azspera { background-color:#65878d; }
.bg-azrunabout { background-color:#4f6a70; }
.bg-azsaloncoiffure { background-color:#8fbbc4; }
.bg-az4 { background-color:#65878d; }
.bg-az5 { background-color:#8fbbc4; }
.bg-azbarpatio { background-color:#7ca6ae; }
.bg-azcolisage { background-color:#4f6a70; }
.bg-az8 { background-color:#82aeb6; }
.bg-az9 { background-color:#4f6a70; }

.texture-creme { background-image:url(../images/texture-creme.png); color:#392819;  }

/*****TITRE1*****/
.titre1 {-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;	background-position:center;	color:white;}
#down { display:block; width:100%; height:5rem; position:absolute; bottom:0; left:0; text-align:center; }
#down img { width:3rem; height:3rem; padding:0rem 1rem 2rem 1rem; cursor:pointer; }

@media screen and (max-width: 699px) { 
	.titre1 { padding-left:5%; padding-right:5%;  }
	#down img { width:2rem; height:2rem; padding:1.5rem; cursor:pointer; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation: portrait) { 
	.titre1 { padding-left:12.5%; padding-right:12.5%; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation: landscape) { 
	.titre1 { padding-left:20%; padding-right:20%;  }
}
@media screen and (min-width: 1350px) { 
	.titre1 { padding-left:20%; padding-right:20%;  }
}

/*****ECART 1*****/
@media screen and (max-width: 699px) { 
	.ecart1 { padding-left:5%; padding-right:5%; }
	.ecart1 p {line-height: 1.5rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation: portrait) { 
	.ecart1 { padding-left:12.5%; padding-right:12.5%; }
	.ecart1 p {line-height: 2rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation: landscape) { 
	.ecart1 { padding-left:20%; padding-right:20%; }
	.ecart1 p {line-height: 2rem; }
}
@media screen and (min-width: 1350px) { 
	.ecart1 { padding-left:20%; padding-right:20%; }
	.ecart1 p {line-height: 2rem; }
}

/*##################################################*/
/*#################### SPECIFIC ####################*/
/*##################################################*/
/*****CATEGORIE DE REF*****/
.col1, .col2 { float:left; margin:0; padding:0; }
.bloc1, .bloc2, .bloc3, .imgbloc, .lienbloc { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.bloc1, .bloc2, .bloc3 { overflow:hidden; margin:0; padding:0; width:100%; }
.imgbloc, .lienbloc { position: relative; float:left; background-color:rgba(255,153,51,0); -webkit-transition:background-color 1s ease;-moz-transition:background-color 1s ease;-o-transition:background-color 1s ease; transition:background-color 1s ease;}
.lienbloc:hover { background-color:rgba(255,153,51,1);}
.bloc1 .imgbloc, .bloc1 .lienbloc, .bloc2 .imgbloc, .bloc2 .lienbloc { width:50%; }
.bloc3 .imgbloc, .bloc3 .lienbloc { width:100%; }
.left .imgbloc { float:left;}
.right .imgbloc { float:right;}
.imgbloc img { width:100%; height:auto; }

.lienbloc { text-align:left; }
.lienbloc a { position:absolute; left:0; bottom:0; width:100%; height:100%; }
.lienbloc .fleche { display:block; position:absolute;left:0; bottom:0; width:5rem; height:5rem; margin:0; padding:0; float:left;  } 
.lienbloc a:hover .fleche {  }
.lienbloc h3 { font-weight:normal; color:white; }

@media screen and (max-width: 699px) { 
	.col1, .col2 { width:100%; }
	.lienbloc h3 { font-size:1.1rem; }
	.lienbloc { padding:1rem; }
	.lienbloc img { width:1.5rem; height:1.5rem; margin:2.5rem 2.5rem 1rem 1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.col1, .col2 { width:100%; }
	.lienbloc h3 { font-size:1.8rem; }
	.lienbloc { padding:1.5rem; }
	.lienbloc img { width:2rem; height:2rem; margin:1.5rem; }
}
@media screen and (min-width: 1350px) { 
	.col1, .col2 { width:44%; }
	.lienbloc h3 { font-size:1.8rem; }
	.lienbloc { padding:1.5rem; }
	.lienbloc img { width:2rem; height:2rem; margin:1.5rem; }
}

/*****CATEGORIE PROJET AZ*****/
@media screen and (max-width: 699px) { 
	.projetaz { padding-left:5%; padding-right:5%; }
	.projet-spera { background-image:url(../images/projets-az/peniche-le-spera/peniche-bar-spera0_small.jpg); }
	.projet-runabout { background-image:url(../images/projets-az/runabout/projet-runabout0_small.jpg); }
	.projet-salon-coiffure { background-image:url(../images/projets-az/salon-de-coiffure/salon-coiffure0_small.jpg); }
	.projet-colisage  { background-image:url(../images/projets-az/colisage/colisage0_small.jpg); }
	.projet-patio { background-image:url(../images/projets-az/bar-le-patio/patio0_small.jpg); }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.projetaz { padding-left:12.5%; padding-right:12.5%; }
	.projet-spera { background-image:url(../images/projets-az/peniche-le-spera/peniche-bar-spera0_medium.jpg); }
	.projet-runabout { background-image:url(../images/projets-az/runabout/projet-runabout0_medium.jpg); }
	.projet-salon-coiffure { background-image:url(../images/projets-az/salon-de-coiffure/salon-coiffure0_medium.jpg); }
	.projet-colisage  { background-image:url(../images/projets-az/colisage/colisage0_medium.jpg); }
	.projet-patio { background-image:url(../images/projets-az/bar-le-patio/patio0_medium.jpg); }
}
@media screen and (min-width: 1350px) and (max-width: 1999px) { 
	.projetaz { padding-left:20%; padding-right:20%; }
	.projet-spera { background-image:url(../images/projets-az/peniche-le-spera/peniche-bar-spera0_big.jpg); }
	.projet-runabout { background-image:url(../images/projets-az/runabout/projet-runabout0_big.jpg); }
	.projet-salon-coiffure { background-image:url(../images/projets-az/salon-de-coiffure/salon-coiffure0_big.jpg); }
	.projet-colisage  { background-image:url(../images/projets-az/colisage/colisage0_big.jpg); }
	.projet-patio { background-image:url(../images/projets-az/bar-le-patio/patio0_big.jpg); }
}
@media screen and (min-width: 2000px) { 
	.projetaz { padding-left:20%; padding-right:20%; }
	.projet-spera { background-image:url(../images/projets-az/peniche-le-spera/peniche-bar-spera0_full.jpg); }
	.projet-runabout { background-image:url(../images/projets-az/runabout/projet-runabout0_full.jpg); }
	.projet-salon-coiffure { background-image:url(../images/projets-az/salon-de-coiffure/salon-coiffure0_full.jpg); }
	.projet-colisage { background-image:url(../images/projets-az/colisage/colisage0_full.jpg); }
	.projet-patio { background-image:url(../images/projets-az/bar-le-patio/patio0_full.jpg); }
}

.vignettesprojet { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*****PAGE DE REF*****/
.vignettes { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.vignettes img { display:block; float:left; height:auto; margin:0; padding:0; cursor:pointer; background-color:rgba(255,153,51,1); }

#lightbox { width:100%; height:100%; background-color:rgba(0,0,0,0.8); position:fixed; top:0; left:0; text-align:center; z-index:70; overflow:auto; display:none; padding-top:5rem; padding-bottom:5rem; }

#lightbox p { margin:2rem auto; text-align:left; color:white; }
#lightbox img { background-image:url(../images/progress.gif); background-position:center center; background-repeat:no-repeat; -webkit-background-size:1rem;-moz-background-size:1rem;-o-background-size:1rem;background-size:1rem; }
#fermer { width:5rem; height:5rem; position:absolute; top:0; right:0; background-image:url(../images/close-blanc.svg); -webkit-background-size:1.5rem;-moz-background-size:1.5rem;-o-background-size:1.5rem;background-size:1.5rem; background-position:center; background-repeat:no-repeat; cursor:pointer; }
#fermer:hover { background-image:url(../images/close-orange.svg); }

@media screen and (max-width: 699px) { 
	.vignettes img { width:50%; }
	.hz img { width: 90%; height:auto;}
	.vt img { width: 70%; height:auto;}
	.hz p { width: 90%; }
	.vt p { width: 70%; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.vignettes img { width:50%; }
	.hz img { width: 80%; height:auto;}
	.vt img { width: 60%; height:auto;}
	.hz p { width: 80%; }
	.vt p { width: 60%; }
}
@media screen and (min-width: 1350px) { 
	.vignettes img { width:25%; }
	.hz img { width: 50%; height:auto;}
	.vt img { width: 30%; height:auto;}
	.hz p { width: 50%; }
	.vt p { width: 30%; }
}
.vignettesprojet img { display:block; float:left; width:50%; height:auto; margin:0; padding:0; }


/*##################################################*/
/*#################### FOOTER ######################*/
/*##################################################*/
/*****NAV*****/
#nav { height:5rem; background-color:#FFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#nav div { position:absolute; top:0; height:5rem; overflow:hidden; }
#nav a {display:block; }
#nav p { text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif;  }
#nav .prev { left:0; text-align:left; }
#nav .next { right:0; text-align:right; }
#nav .prev .fleche { float:left; }
#nav .next .fleche { float:right; }
#nav .fleche { display:block; width:5rem; height:5rem; margin:0; padding:0; float:right;  } 
#nav .prev img, #nav .next img { width:2rem; height:2rem; margin:1.5rem; display:block; }
#nav .fleche img+img { display:none;}
@media screen and (max-width: 699px) { 
#nav .next, #nav .next2 { width:100%;  }
#nav .prev { display:none; }
#nav p { font-size:1rem; padding:2rem; }
#nav .next img { width:2rem; height:2rem; margin:1.5rem 1rem 1.5rem 2rem; display:block; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
#nav div { width:40%;  }
#nav .retours {  width:20%;left:40%; }
#nav .retours .fleche { margin:0 auto; float:none; }
#nav p { font-size:1.3rem; padding:1.6rem; }
}
@media screen and (min-width: 1350px) { 
#nav div { width:40%;  } 
#nav .next2 {display:none;}
#nav .retours { width:20%; left:40%; }
#nav .retours .fleche { margin:0 auto; float:none; }
#nav p { font-size:1rem; padding:1.8rem; }
#nav a:hover { color:#ff9933;}
#nav a:hover .fleche img { display:none; }
#nav a:hover .fleche img+img { display:block; }
}

/*****NAV2*****/
#nav2 { height:5rem; background-color:#FFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#nav2 div { position:absolute; top:0; height:5rem; overflow:hidden; }
#nav2 a {display:block; }
#nav2 p { text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif;  }
#nav2 .prev { left:0; text-align:left; }
#nav2 .next { right:0; text-align:right; }
#nav2 .prev .fleche { float:left; }
#nav2 .next .fleche { float:right; }
#nav2 .fleche { display:block; width:5rem; height:5rem; margin:0; padding:0; float:right;  } 
#nav2 .prev img, #nav2 .next img { width:2rem; height:2rem; margin:1.5rem; display:block; }
#nav2 .retours img { width:2rem; height:2rem; margin:1.5rem; display:block; }
#nav2 .fleche img+img { display:none;}
@media screen and (max-width: 699px) { 
#nav2 div { width:30%; }
#nav2 .retours { width:40%; left:30%; }
#nav2 .retours .fleche { margin:0 auto; float:none;}
#nav2 p { display:none; }
#nav2 .prev img { width:2rem; height:2rem; margin:1.5rem 2rem 1.5rem 1rem; display:block; }
#nav2 .next img { width:2rem; height:2rem; margin:1.5rem 1rem 1.5rem 2rem; display:block; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
#nav2 div { width:40%;  }
#nav2 .next2 {display:none;}
#nav2 .retours {  width:20%;left:40%; }
#nav2 .retours .fleche { margin:0 auto; float:none; }
#nav2 p { font-size:1.3rem; padding:1.6rem; }
}
@media screen and (min-width: 1350px) { 
#nav2 div { width:40%;  } 
#nav2 .next2 {display:none;}
#nav2 .retours a { position:absolute; top:0; width:100%; }
#nav2 .retours { width:20%; left:40%; }
#nav2 .retours .fleche { margin:0 auto; float:none;}
#nav2 p { font-size:1rem; padding:1.8rem; }
#nav2 a:hover { color:#ff9933;}
#nav2 a:hover .fleche img { display:none; }
#nav2 a:hover .fleche img+img { display:block; }
}

/*****FOOTER*****/
@media screen and (max-width: 699px) { 
footer { height:6rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
footer { height:4rem; }
}
@media screen and (min-width: 1350px) { 
footer { height:4rem; }
}
footer { background-color:#ebebeb; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
footer p { padding:1.4em 0; font-size:1rem;}

/*##################################################*/
/*#################### CORRECTIFS ##################*/
/*##################################################*/

/*****EFFET APPARITION AU SCROLL*****/
@media screen and (min-width: 1350px) { 
.apparition p, .apparition img { -webkit-transition:opacity 1s ease;-moz-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease; }
#nav a, #nav2 a, #header li a, #header li span {-webkit-transition:color 0.5s ease;-moz-transition:color 0.5s ease;-o-transition:color 0.5s ease;transition:color 0.5s ease; }
}

/****MYDEVICE****/
#mydevice {display:none;}
@media screen and (max-width: 699px) { #mydevice { float:left;} }
@media screen and (min-width: 700px) and (max-width: 1349px) { #mydevice {float:right;} }
@media screen and (min-width: 1350px) { #mydevice {float:none;} }
@media screen and (max-width: 1999px) { #mydevice { position:relative;} }
@media screen and (min-width: 2000px) { #mydevice { position:absolute;} }
img {vertical-align: bottom; }