/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

body, html{ border:0px; padding:0px; margin:0px; width:100%; height:100%; font:14px/20px 'Roboto', sans-serif;}
img{ border:0px;} a{ text-decoration:none; color:rgba(0,0,0,1.00);} ul, li{ padding:0px; margin:0px; border:0px; list-style-type:none;}
.loader{	background: url('charte/loader.gif') 50% 50% no-repeat rgba(0, 0, 0, 0.9);	cursor: wait;	height: 100%;	left: 0;	position: fixed;	top: 0;	width: 100%;	z-index: 99999999;}
.loader h1{		background: none;		border: none;		color: #FFFFFF; font:60px/60px 'Roboto', sans-serif;		font-variant: small-caps;		font-weight: 500;		height: 700px;		line-height: 700px;		margin: 0 0 10px;		padding: 0;		text-align: center; text-transform:uppercase;}
/* --- Menu --- */
div#menu{ position:fixed; width:100%; height:90px; border-bottom:2px solid #3d322d; z-index:8000; background-color:#FFFFFF;box-shadow: 0px 0px 12px #555;}
div#menu .icone{ float:left; width:60px; height:60px; padding:15px; cursor:pointer; z-index:8000;}
div#menu .menu_titre{ float:left; width:42px; height:90px; z-index:11;}
div#menu .baseline{font:18px/90px 'Roboto', sans-serif; text-transform:uppercase; color:#b5393a; padding:0px 0px 0px 20px; float:left;}
div#menu .logo{ float:left; width:150px; height:90px; z-index:11; background:#b5393a; text-align:center; font:18px/20px 'Roboto', sans-serif; text-transform:uppercase; color:rgba(255,255,255,1.00);}
div.opacity{ background:rgba(0,0,0,0.60); position:absolute; top:0px; left:0px; z-index:7999;}
div#menu_complet{ position:fixed; width:50%; height:auto; z-index:999998; background-color:#FFFFFF; left:-50%; top:0px;}
div#menu_complet .icone{ float:left; width:60px; height:60px; padding:15px; cursor:pointer; z-index:999999;}
div#menu_complet ul { width:100%; float:left;}
div#menu_complet ul li{ width:90%; float:left; padding-left:10%; border-top:1px solid #dddddd;}
div#menu_complet ul li a{ width:100%; min-height:60px; height:auto; float:left; padding:7px 0px 7px 0px; background:center right;}
div#menu_complet ul li a .font1{ color:#b5393a;font:24px/26px 'Roboto', sans-serif;}
div#menu_complet ul li a .font2{ color:#000000;font:18px/20px 'Roboto', sans-serif;}
div#menu_complet ul li a:hover{ background:url(../charte/fleche-menu.png) center right no-repeat; transition: all 0.5s ease-in;}

div.navigation{ position:fixed; right:0px; top:calc(50% - 50px); background:rgba(0,0,0,0.50); border-bottom-left-radius:5px;  border-top-left-radius:5px; width:15px; padding:10px; z-index:9999999; }
div.navigation a.nav-link{ width:15px; height:15px; display:block; border-radius:15px; background:none; border:1px solid rgba(255,255,255,1.00); margin:0px 0px 5px 0px;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
div.navigation a.nav-link:hover{ background:#FFFFFF;}
div.navigation a.nav-link.current{ background:#FFFFFF;}

div#first2, section.section2{ float:left; width:100%; height:auto; position:relative;}
section.section2{ min-height:50%;}
div#first{ float:left; width:100%; position:relative; min-height:100%; height:auto; overflow:hidden;}
section.section{ float:left; width:100%; position:relative; height:auto;}/*calc(100% - 40px);}*/
div#first div#diaporama{ width:100%; height:100%; background-size:cover; float:left;}

@media screen and (max-width: 320px) {
	div#first div#diaporama.premier{background:url(../img/smartphone/maison-bois.jpg) center; background-size:cover;}
	div#first div#diaporama.second{background: url(../img/smartphone/madrier.jpg) center; background-size:cover;}
	div#first div#diaporama.troisieme{background:url(../img/tablette/ecologie-maison.jpg) center; background-size:cover;}
	div#first div#diaporama.quatrieme{background:url(../img/smartphone/maison-architecture.jpg) center; background-size:cover;}
	div#first div#diaporama.cinquieme{background:url(../img/smartphone/maison-bien-etre.jpg) center; background-size:cover;}
	div#second{ margin:auto; width:100%;}
	}
@media screen and (min-width: 321px) {
	div#first div#diaporama.premier{background:url(../img/tablette/maison-bois.jpg) center; background-size:cover;}
	div#first div#diaporama.second{background:url(../img/tablette/madrier.jpg) center; background-size:cover;}
	div#first div#diaporama.troisieme{background:url(../img/tablette/ecologie-maison.jpg) center; background-size:cover;}
	div#first div#diaporama.quatrieme{background:url(../img/tablette/maison-architecture.jpg) center; background-size:cover;}
	div#first div#diaporama.cinquieme{background:url(../img/tablette/maison-bien-etre.jpg) center; background-size:cover;}
	div#second{ margin:auto; width:100%;}
}
@media screen and (min-width: 900px) {
	div#first div#diaporama.premier{background:url(../img/pc/maison-bois.jpg) center; background-size:cover;}
	div#first div#diaporama.second{background:url(../img/pc/madrier.jpg) center; background-size:cover;}
	div#first div#diaporama.troisieme{background:url(../img/pc/ecologie-maison.jpg) center; background-size:cover;}
	div#first div#diaporama.quatrieme{background:url(../img/pc/maison-architecture.jpg) center; background-size:cover;}
	div#first div#diaporama.cinquieme{background:url(../img/pc/maison-bien-etre.jpg) center; background-size:cover;}
	div#second{ margin:auto; width:100%;}
}
@media screen and (min-width: 1200px) 
{
	div#second{ margin:auto; width:1200px;}
}
div#first div#diaporama .degrade1{ position:absolute; right:0px; top:0px; height:100%; width:100px; background:url(../charte/degrade-gris.png);}
div#first div#diaporama .degrade2{ position:absolute; right:0px; top:0px; height:100%; width:100px; background:url(../charte/degrade-blanc.png);}

@media screen and (max-width: 320px) {
	div#first div#diaporama .degrade1, div#first div#diaporama .degrade2,div#menu .baseline, .navigation,.next{ display:none;}
.titre{ position:absolute; top:50px; left:0px; float:left; z-index:99999;}
.titre h1 span.font1{ background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:40px/40px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:10px;}
.titre h1 span.font2{background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:30px/30px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:10px;}
.titre h2 span.font1{ background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:40px/40px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:10px;}
.titre h2 span.font2{background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:30px/30px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:10px;}
h2{font:20px/20px 'Roboto', sans-serif; font-weight:400; text-transform:uppercase;}
}
@media screen and (min-width: 321px) {
	div#first div#diaporama .degrade1, div#first div#diaporama .degrade2,div#menu .baseline, .navigation,.next{ display:none;}
.titre{ position:absolute; top:100px; left:0px; float:left; z-index:7999;}
.titre h1 span.font1{ background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:40px/40px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:10px;}
.titre h1 span.font2{background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:30px/30px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:10px;}
.titre h2 span.font1{ background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:40px/40px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:10px;}
.titre h2 span.font2{background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:30px/30px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:10px;}
h2{font:20px/20px 'Roboto', sans-serif; font-weight:400; text-transform:uppercase;}
}
@media screen and (min-width: 900px) {
div#first div#diaporama .degrade1{ position:absolute; right:0px; top:0px; height:100%; width:100px; background:url(../charte/degrade-gris.png); display:block;}
div#first div#diaporama .degrade2{ position:absolute; right:0px; top:0px; height:100%; width:100px; background:url(../charte/degrade-blanc.png); display:block;}
.navigation,div#menu .baseline,.next{ display:block;}
.titre{ position:absolute; top:200px; left:0px; float:left; z-index:7999;}
.titre h1 span.font1{ background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:60px/60px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:70px;}
.titre h1 span.font2{background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:36px/36px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:70px;}
.titre h2 span.font1{ background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:60px/60px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:70px;}
.titre h2 span.font2{background-color:rgba(255,255,255,0.50); float:left; z-index:999;font:36px/36px 'Roboto', sans-serif; font-weight:500; text-transform:uppercase; padding-left:70px;}
h2{font:36px/36px 'Roboto', sans-serif; font-weight:400; text-transform:uppercase;}
}

.next{ background:rgba(0,0,0,0.80); position:absolute; bottom:0px; left:calc(50% - 35px); width:70px; height:102px; border-top-left-radius:5px; border-top-right-radius:5px; z-index:7999;}
.next:hover .bas{ padding-top:8px;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
.next hr{ padding:0px; margin:0px; border:0.2px dashed rgba(255,255,255,1.00); float:left; width:100%;}
.next div.scroll{ position:absolute; top:19px; left:32px;display:none; width:6px; height:0px; background:#b5393a; border-radius:2px;}
.next:hover div.scroll{ display:block; height:10px;}

@media screen and (max-width: 480px) {
.hauteur_100{ height:auto; min-height:50%;}
	.div100{ float:left; width:100%;}
.div100_2{ float:left; width:98%; padding:1%;}
.div50{ float:left; width:100%; position:relative;}
.div50_2{ float:left; width:98%; padding:1%;}
.div30{ float:left; width:100%;}
.div30_2{ float:left; width:98%; padding:1%;}
.div30_3{ float:left; width:98%; padding:0% 0% 0% 2%;}
.div60_2{ float:left; width:98%; padding:1%;}
.div25{ float:left; width:100%;}
.div25_2{ float:left; width:98%; padding:1%;}
.texte{ width:98%; padding:1%; float:left;}
.texte_2{ width:98%; padding:1%; float:left; height:auto;}}
@media screen and (min-width: 481px) {
.hauteur_100{ height:auto; min-height:50%;}
	.div100{ float:left; width:100%;}
.div100_2{ float:left; width:98%; padding:1%;}
.div50{ float:left; width:100%; position:relative;}
.div50_2{ float:left; width:98%; padding:1%;}
.div30{ float:left; width:33%;}
.div30_2{ float:left; width:31%; padding:1%;}
.div30_3{ float:left; width:31%; padding:0% 0% 0% 2%;}
.div60_2{ float:left; width:98%; padding:1%;}
.div25{ float:left; width:25%;}
.div25_2{ float:left; width:23%; padding:1%;}
.texte{ width:98%; padding:1%; float:left;}
.texte_2{ width:98%; padding:1%; float:left; height:auto;}
}
@media screen and (min-width: 901px) {
.hauteur_100{ height:100%;}
	.div100{ float:left; width:100%; display:block; position:relative;}
.div100_2{ float:left; width:98%; padding:1%;}
.div50{ float:left; width:50%; position:relative;}
.div50_2{ float:left; width:48%; padding:1%;}
.div30{ float:left; width:33%;}
.div30_2{ float:left; width:31%; padding:1%;}
.div30_3{ float:left; width:31%; padding:0% 0% 0% 2%;}
.div60_2{ float:left; width:64%; padding:1%;}
.div25{ float:left; width:25%;}
.div25_2{ float:left; width:23%; padding:1%;}
.div20{ float:left; width:17%;}
.div20_2{ float:left; width:15%; padding:1%;}
.texte{ width:calc(100% - 3% - 40px); padding:50px 3% 0px 40px; float:left; max-width:600px;}
.texte_2{ width:calc(100% - 3% - 40px); padding:50px 3% 0px 40px; float:left; height:auto;}}

@media screen and (max-width: 900px) {
.texte2{ width:auto; position:absolute; top:20px; right:0px; z-index:7999; text-align:right;}
.texte2 .accroche {background-color:rgba(255,255,255,0.50); text-align:right; padding:0px 20px 0px 5px; margin:0px 0px 5px 0px;font:20px/30px 'Roboto', sans-serif; color:#5d5d5d; text-transform:uppercase; float:right;white-space:nowrap;}
.texte2 .accroche img{ float:left; padding:5px; height:20px;}
}
@media screen and (min-width: 901px) {
.texte2{ width:auto; position:absolute; top:200px; right:0px; max-width:600px; z-index:7999; text-align:right;}
.texte2 .accroche {background-color:rgba(255,255,255,0.50); text-align:right; padding:0px 40px 0px 5px; margin:0px 0px 20px 0px;font:30px/40px 'Roboto', sans-serif; color:#5d5d5d; text-transform:uppercase; float:right;}
.texte2 .accroche img{ float:left; padding:5px;}
}

.stats{ color:#b5393a;font:50px/60px 'Roboto', sans-serif;}
.txtsmall{font:10px/14px 'Roboto', sans-serif;}
.txtmiddle{font:12px/16px 'Roboto', sans-serif;}
.txtmiddle2{font:14px/20px 'Roboto', sans-serif;}
.txtlarge{font:16px/22px 'Roboto', sans-serif;}
.txtlargex{font:20px/25px 'Roboto', sans-serif;}
.txtlargexx{font:25px/30px 'Roboto', sans-serif;}
.txtlargexxx{font:30px/40px 'Roboto', sans-serif;}

.bg_gris{ background:#f2f2f2;}
.bg_noir{ background:#0f0f0f;}
.txt_rouge{ color:#b5393a;}
.txt_blanc{ color:#FFFFFF;}

.case{ float:left; width:42%; margin:2% 4% 2% 4%; height:200px;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; overflow:hidden; text-align:center; position:relative;}
.case a{ display:block; position:relative;}
.case a .on{ background:rgba(255,255,255,0.60); line-height:200px;  position:absolute; top:0px; left:0px; width:100%; height:100%;  -webkit-transition: opacity 0.5s ease-in-out;  -moz-transition: opacity 0.5s ease-in-out;  -o-transition: opacity 0.5s ease-in-out;  transition: opacity 0.5s ease-in-out;  opacity:0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);}
.case a:hover > .on{   opacity:1;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=1);}

.case2{ display:inline-table; width:200px; margin:10px; height:200px;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; overflow:hidden; text-align:center; position:relative; text-align:center;}
.case2 a{ display:block; position:relative;}
.case2 a img{ max-height:200px;}
.case2 a .on{ background:rgba(255,255,255,0.60); line-height:200px;  position:absolute; top:0px; left:0px; width:100%; height:100%;  -webkit-transition: opacity 0.5s ease-in-out;  -moz-transition: opacity 0.5s ease-in-out;  -o-transition: opacity 0.5s ease-in-out;  transition: opacity 0.5s ease-in-out;  opacity:0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);}
.case2 a:hover > .on{   opacity:1;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=1);}

.caseactu{ display:inline-table; width:200px; padding:5px; height:320px;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
.caseactu:hover{ background:#b5393a;}
.caseactu:hover > img{ opacity:0.6;}
.caseactu img{ max-width:200px;}
.caseactu h3{font:20px/20px 'Roboto', sans-serif; font-weight:400; text-transform:uppercase;}

/* --- Bouton */ 

@media screen and (max-width: 900px) {
a.btn{ width:auto; display:inline-table; height:30px; font:20px/30px 'Roboto', sans-serif; padding:0px 10px 0px 10px;  text-transform:uppercase; background:rgba(255,255,255,1.00); border:1px solid #3d322d; color: #3d322d; -moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; }
a.btn img{ padding:5px 0px 0px 10px; float:right }
a.btn:hover{ color:rgba(255,255,255,1.00); background:#b5393a;}
}
@media screen and (min-width: 901px) {
a.btn{ width:auto; display:inline-table; height:40px; font:30px/40px 'Roboto', sans-serif; padding:0px 10px 0px 10px;  text-transform:uppercase; background:rgba(255,255,255,1.00); border:1px solid #3d322d; color: #3d322d; -moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; }
a.btn img{ padding:5px 0px 0px 10px; float:right }
a.btn:hover{ color:rgba(255,255,255,1.00); background:#b5393a;}
}

a.btn_top{ position:absolute; width:70px; height:50px; top:-50px; z-index:9999999; right:50px; background:rgba(0,0,0,0.50); border-top-left-radius:5px;  border-top-right-radius:5px; text-align:center; display:block;}


/* Fil d'arianne*/
div#fil{float:left;width:100%;font:10px/16px Arial, Helvetica, sans-serif;}
div#fil a{width:100%;text-decoration:none;font:10px/16px Arial, Helvetica, sans-serif;color:#999;}
div#fil a:hover{color:#999;}

/*Formulaie*/
input, textarea, select { background:#f2f2f2; border-radius:5px;}
input:focus, textarea:focus, select:focus{ border-color:#b5393a;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}


/* Galerie photo */
a.fancy_logement{ display:inline-block; width:250px; height:250px; text-align:center; overflow:hidden; margin:1px 1px 0px 0px; -moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
a.fancy_logement img{ text-align:center; height:100%; -moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
a.fancy_logement:hover img{ opacity:0.7; -moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}