/*rouge:#CE0000*/

/*bleu #296a87*/
/* gris background #DDDDDD*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;

	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


blockquote{  font-size:1.05em; background: url(../images/bquote.png) no-repeat 0px 5px; 

padding-left:90px; line-height:1.6em; margin-top:20px; min-height:60px;
}

@font-face {
    font-family: 'ChakraPetch-Regular';
    src: url('ChakraPetch-Regular.woff2.html') format('woff2'),
         url('ChakraPetch-Regular.woff') format('woff'),
         url('ChakraPetch-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ChakraPetch-Bold';
    src: url('ChakraPetch-Bold.woff2.html') format('woff2'),
         url('ChakraPetch-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ChakraPetch-Bold';
    src: url('ChakraPetch-Bold.woff2.html') format('woff2'),
         url('ChakraPetch-Bold.woff') format('woff'),
         url('ChakraPetch-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


body{ background:#fff;     font-family: 'ChakraPetch-Regular';}


#bigblocfirst{background:#fff; 
  max-width:1140px;
  margin:20px auto; 
padding-left:20px;}

#bigblocfirstgrille{background:#fff; 
  max-width:1140px;
  margin:20px auto; 
padding-left:20px;}


header{ z-index:10; margin:0px; 
  margin:0; padding:0px 0 0px 00px; background-color:white; 
 width:100%;}

#entete{ margin:0 auto; }

#titrereal{margin:10px 0 32px 0}

a:focus {outline:0; border:none;} 
a img {border:none;}
.spip_documents_right{margin:0 0 10px 10px}
.spip_documents_left{margin:0 10px 10px 0}


a{color:black; text-decoration:none;}

#chaproyarchi{
font-size:1.1em; margin:0 0 5px; position:relative; 
 line-height:25px;letter-spacing:1px; 
	}

.chapuis{font-family: 'ChakraPetch-Bold'; color:black; text-decoration:none;}
.architectes{font-size:.9em; color:black; text-decoration:none;}



#conteneur {margin:0px 5px 46px 0px; padding-top:0px;}

.marged{padding-top:90px !important}

#colleft { float: left; width: 185px; margin-right:45px;}
#contenu { float: left; max-width: 700px; }




#centrehome{margin:10px 5% 0 0;}


/*#centrehome img{
  filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
}*/

#nav li > a{
  margin-bottom: 0px; 
font-size: 1em; padding:10px 30px 0px 0; text-decoration: none; 
  display:inline-block;	
color:#999;
}

#nav li ul li{margin-left:0px;}
#nav li ul li a{border:1px solid #eee; margin-top:0px; }

#nav li a:hover{color:black;}
#nav li a.on{
    font-family: 'ChakraPetch-Bold';
  text-decoration:none; color:black; }
  
a.on{
    font-family: 'ChakraPetch-Bold';
  text-decoration:none; color:black; }  

#nav li a:active{color:#296a87;}

#ariane{clear:both; margin-bottom:20px;}

#ariane a{color:#296a87; text-decoration:none;}

h1{font-size:1em;  font-family: 'ChakraPetch-Regular';
  margin:10px 0 0 0px; color:#000}

#fichetech{
float:right;
  width:30%;
  margin:50px 0 20px 0;
}

#letexteprojet{width:65%; text-align: justify; margin:20px 0;}

strong{font-weight: bold;  color:black;}



	.wrap {  max-width:1000px; clear:both; position: relative; 
    width:90%; 
  padding:0px; background-color:white; height:205px;}
	div.slider    { overflow:hidden;  width:100%; height:200px !important; }
	div.slider ul { margin:0; padding:0; height:160px; }
	div.slider li { float:left; list-style:none; margin:0 23px 0 0; height:115px;
  text-align:center; line-height:0px; font-size:25px; position:relative;}


  
  .loupe{
      width:30px;
      height:30px;
      z-index:50000;
      display:block;
      position:absolute;
      bottom:-83px;
      right:3px;   
    }
    
    .loupe img{opacity:0.5} 
   
 div.slider li:hover  .loupe img{opacity:1} 
    
	
	.controls{position: absolute; top:0px; left:0; width:100%; z-index:5; }

	.prev-slide{position:absolute; top:87px; left:2px; background-image: url(../images/slide-left-off.png); 
  width:19px; height:25px; }
	.prev-slide:hover{background-image: url(../images/slide-left-hover.png);}
	.prev-slide:active{background-image: url(../images/slide-left-active.png);}
	
	.next-slide{position:absolute; top:87px; right:0px;  background-image: url(../images/slide-right-off.png); 
  width:19px; height:25px;}
	.next-slide:hover{background-image: url(../images/slide-right-hover.png);}
	.next-slide:active{background-image: url(../images/slide-right-active.png);}
	

#letexte{  max-width:900px; font-size:1em; line-height:1.5em;  width:90%; 
  padding:0; background-color:white; margin:22px 0 0 0; color:#555}


h3{font-family:'ChakraPetch-Bold'; font-size:1.15em; line-height:1.5em; color:black;
  margin:20px 0 0px;}


p{margin-bottom: .8em;}

#bigpict{
width:90%; margin-bottom:20px;}
#bigpict img{width:100%;}

#colorbox {box-sizing: content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}



#cBoxContent img{max-width:100% !important; max-height:100% !important;}  
  
    
#rubrique h1{position:absolute; bottom:7px; left:27px;}
  
  


#lefond{
  width:calc(90% - 140px);

  margin-left:150px;
  position:fixed;
  z-index:-10;
  top:0;
  overflow:hidden; max-width:1200px;
  margin-right:10%;

}



#lefond img{max-width:none; max-width:1198px;}


/*ISOTOPE*/


/* ---- button ---- */

.button {
  display: inline-block;
  padding: 5px 20px  5px 0px;
  margin-bottom: 10px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  background-color:transparent;
  color:#999;
}

.button:hover {
color:black;
}

.button:active,
.button.is-checked {
 color: #296a87;
}

.button.is-checked {
    font-family: 'ChakraPetch-Bold'; color:black;
}

.button:active {
 color: #296a87;
}

/* ---- button-group ---- */
.button-group{display:block; clear:both; margin-bottom:20px}
.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  margin-left: 0;
  margin-right: 1px;
}

/* ---- isotope ---- */

.grid {

}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item a {float:left;  display:block;
 width:250px; height: 250px;  text-decoration:none;  margin:0 20px 20px 0;
}

   
.element-item span{margin:-40px 10px 0 10px; 
  padding:4px 5px 6px 7px;
  line-height:.9em; z-index:9;
position:relative; color:bmack; 
  background-color:rgba(255, 255, 255, 0.9);
 display:block; visibility: hidden;}

.element-item:hover span{visibility:visible;}


.mediasimport{width: 100%; float:left; overflow:hidden;}

 .videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    margin-bottom: 20px;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
} 
 



.realisationcontainer{overflow:hidden;}
.realisationcontainer span{display:block; margin-top:30px;}
.realisationcontainer a
{ padding-right:20px;}

.realisationcontainer a img{margin:0}


.grid-item { width: 48%; }

.groupreal{width:100%}

@media (max-width: 1024px) {
.element-item a { width:245px; height: 245px; }
}




@media (max-width: 840px) {

#bigblocfirst{background:#fff;  }
#lefond div img{width:840px; }
.mediasimport{width:100%; }
header{ z-index:10; margin:0px;  width:auto;
position:relative; z-index:10; top:auto; left:auto;
  margin:0; padding: 0  0px; background-color:white; }
#fichetech{
float:none;
  width:100%;
  margin:30px 0 20px 0;
  	 -webkit-column-count:2;
    -webkit-column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    column-count:2;
    column-gap:20px;
  }

#letexteprojet{width:100%; text-align: justify; margin:20px 0;}



}




@media (max-width: 820px) {
.element-item a { width:200px; height: 200px;  }
}


@media (max-width: 700px) {
.element-item a { width:170px; height: 170px; }
  

}
@media (max-width: 600px) {
.element-item a {width:160px; height: 160px; }
}

@media (max-width: 564px) {
.element-item a {width:200px; height: 200px;}
}

@media (max-width: 500px) {
.element-item a {width:160px; height: 160px;}
}

@media (max-width: 420px) {
.element-item a {width:155px; height: 155px; }
}


@media (max-width: 374px) {
.element-item a {width:280px; height: 280px;}
}




footer{font-size:.9em; margin-bottom:50px; border-top:1px solid #888;
  margin:50px 0 50px 0; padding-top:20px; color:#888}

#sommaire footer{margin:50px 5% 50px 0;}

footer a{ color:#888; text-decoration:none;}

#suivant-precedent{border-top:1px solid #888; margin:50px 0; padding-top:20px; clear:both;}
#suivant-precedent a{text-decoration:none; color:#888;}
#suivant-precedent a:hover{color:black;}
#suivant{right:9%; float:right;}


#suivant span:after{content:"\25BA "; margin-left:5px; font-size:.8em;}
#precedent span:before{content:"\25C4 "; margin-right:5px; font-size:.8em;}

i, em{font-style: italic;}

.spip_documents{font-size:0.8em; margin-bottom:30px;}





/*---------------------------------*/

.nivoSlider-wrap{margin:0}

.nivoSlider-wrap.nav-bullet .nivo-controlNav {
	position: relative;
  right:0;
  top:auto;
  bottom:0;
  float:right;

}

#leslider{  width:100%;
  display:block;
  clear:both;
  overflow:hidden;

}


.nivoSlider-wrap.nav-bullet .nivo-controlNav a{
  background:none #999;
  text-indent:-9999px;
  width:13px;
  height:13px;
}

.nivoSlider-wrap.nav-bullet .nivo-controlNav a.active{

    background-color: #000;
}
.nivoSlider-wrap.nav-bullet .nivo-controlNav a:hover{

    background-color:#555;
}


/*.nivoSlider img {

  
    filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
  
}*/


footer img{opacity:0.45}

footer a:hover img{opacity:1}





.nivo-directionNav a {
 	display:block;
 	width:40%;
 	height:100%;
 	background:url("../images/arrow-left.png") no-repeat 0 50% ;
 	text-indent:-9999px;
}
.nivo-directionNav a:active {

 	background:url("../images/arrow-left-active.png") no-repeat 0 50% ;

}  

 a.nivo-nextNav
{
  background:url("../images/arrow-right.png") no-repeat 95% 50%;
right:0px;
} 
 a:active.nivo-nextNav
{
  background:url("../images/arrow-right-active.png") no-repeat 95% 50%;

} 






.nivo-directionNav a {
	position:absolute;
	top:0%;
	z-index:9;
	cursor:pointer;
}

.blocs_replie, .blocs_titre
{font-size:1.2em;     font-family: 'ChakraPetch-Bold';
  background-image: none !important;
padding-left:0 !important; margin-top:0px !important;
  z-index:10; position:relative; 
  width:120px;
}

.blocs_titre a{color:#999}
.blocs_titre a:hover{    color:black}


@media (max-height: 1000px) and (min-width:900px) {
#centrehome img,
.slides li img, 
.flexslider, 
.article-neuf img {max-width:700px !important;}
}

@media (max-height: 900px) and (min-width:800px){
#centrehome img,
.slides li img, 
.flexslider, 
.article-neuf img{max-width:600px !important;}
}

@media (max-height: 780px) and (min-width:680px){
#centrehome img,
.slides li img, 
.flexslider, 
.article-neuf img {max-width:580px !important;}

}



@media (max-height: 700px) and (min-width:600px) {
#centrehome img,
.slides li img, 
.flexslider, 
.article-neuf img {max-width:540px !important; }
}

@media (max-height: 600px) and (min-width:500px) {
#centrehome img,
.slides li img, 
.flexslider, 
.article-neuf img {max-width:400px !important;  }
}




#flexpub{display:flex; flex-wrap:wrap;}

#flexpub h3{font-size:1em; line-height:1em; margin:5px 0 0 0}

.unmag{width:25%; padding: 0 20px 30px 0;}

.unmag > *{margin:0}



@media (max-width:800px) {
        .unmag{width:33%; padding: 0 20px 30px 0;}
}

@media (max-width:600px) {

        .unmag{width:50%; padding: 0 20px 30px 0;}
}








#newsite{margin:50px 0 80px;}

#newsite a{color:#888;}
#newsite a:hover{text-decoration: underline; color:#000;}