/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter');

body, html{ border:0px; margin:0px; padding:0px;font:13px/16px Georgia, serif; color:#000000; text-align:justify;}

div#top{ width:100%; position:relative; float:left; height:146px; text-align:center; background:url(../charte/bg-top.png); z-index:999; }
	div#top.floatable {position: fixed;top: 0px; left:0px; margin:0px; z-index:99999; height:54px; background-position:bottom;}
	div#top.floatable div#content_top .logo, div#top.floatable div#content_top .menu, div#top.floatable div#content_top .menu ul, div#top.floatable div#content_top .menu ul li, div#top.floatable div#content_top .menu ul li a{ height:50px;}
	div#top.floatable div#content_top #menu2{ font:16px/50px Georgia, serif; padding-top:0px;}
	div#top.floatable div#content_top #menu2 img{ max-width:40px; padding-top:5px;}
	div#top.floatable div#content_top .menu ul li a{ padding:0px 5px 0px 5px;font:14px/20px Georgia, serif;}
	div#top.floatable div#content_top .menu ul li ul.ssmenu{ display:none; position:absolute; top:52px; left:0px; border:1px solid #f1f1f1; height:auto; width:auto; float:left;}
	div#content_top{ margin:auto; height:146px;}
	div#top div#content_top .logo{ float:left; height:138px; font:16px/20px Georgia, serif; text-transform:uppercase; text-align:justify; letter-spacing:0.3em; padding:4px;}
	@media screen and (max-width: 900px) {div#content_top{ width:100%;}}
	@media screen and (min-width: 901px) {div#content_top{ width:900px;}div#top div#content_top .logo{ min-width:50%; letter-spacing:0.1em;}}
	@media screen and (min-width: 1201px) {div#content_top{ width:1200px;}}
	div#top div#content_top #menu2{ float:right; height:142px; width:50%; font:16px/50px Georgia, serif;}
	div#top div#content_top #menu2 img{ display: inline-table; float:left;}
	div#top div#content_top #menu2 a { display:block; text-align:center; position:relative;}
	div#top div#content_top .menu{ float:right; height:142px;}
	div#top div#content_top .menu ul{ padding:0px; margin:0px; border:0px; height:142px; float:left;}
	div#top div#content_top .menu ul li{ padding:0px; margin:0px; border:0px; height:142px; float:left; list-style-type:none; position:relative;}
	div#top div#content_top .menu ul li a{ margin:0px; border:0px; height:56px; float:left; border-bottom:6px; padding:80px 5px 0px 5px;font:14px/29px Georgia, serif; text-transform:uppercase; text-align:justify; color:#000000; text-decoration:none;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
	div#top div#content_top .menu ul li a:hover{ border-bottom:6px solid #9bc509; background:#f1f1f1;}
	div#top div#content_top .menu ul li.close{ display:none;}
	div#top div#content_top .menu ul li a .arrow{border:0px;-webkit-transition: -webkit-transform .4s ease-in-out;transition: transform .4s ease-in-out;}
	div#top div#content_top .menu ul li:hover a >.arrow{    -ms-transform: rotate(90deg); /* IE 9 */-webkit-transform: rotate(90deg); /* Safari */transform: rotate(90deg);}
	div#top div#content_top .menu ul li:hover > ul.ssmenu{ display:block;}
	div#top div#content_top .menu ul li:hover > a{ border-bottom:6px solid #9bc509; background:#f1f1f1;}
	div#top div#content_top .menu ul li ul.ssmenu{ display:none; position:absolute; top:142px; left:0px; border:1px solid #f1f1f1; height:auto; width:auto; float:left; background:#FFFFFF;}
	div#top div#content_top .menu ul li ul.ssmenu li{ width:100%; float:left; height:30px;}
	div#top div#content_top .menu ul li ul.ssmenu li a{height:30px; padding:0px; text-align:justify;font:14px/30px Georgia, serif; border:0px;white-space: nowrap; display:block; width:100%;}
	div#top div#content_top .menu ul li ul.ssmenu li a:hover{ background:#f1f1f1;}

	@media screen and (max-width: 900px) {
		div#top div#content_top #menu2{ display:block; padding-top:45px;}
		div#top div#content_top .menu{ display:none;}
		div#top div#content_top .menu{ position:absolute; top:146px; left:0px; width:100%; z-index:9999999; background:#FFFFFF; }
		div#top div#content_top .menu ul{ width:100%;}
		div#top div#content_top .menu ul li{ width:100%; height:auto; background:#FFFFFF; border:1px solid #f1f1f1;}
		div#top div#content_top .menu ul li.close, div#top.floatable div#content_top .menu ul li.close{ display:block; background-color:#2B2B2B; text-align:center; color:#FFFFFF}
		div#top div#content_top .menu ul li.close a, div#top.floatable div#content_top .menu ul li.close a{ display:block; background-color:#2B2B2B; text-align:center; color:#FFFFFF;}
		div#top div#content_top .menu ul li.close img{ float:left; padding:5px; max-height:30px;}
		div#top div#content_top .menu ul li a{ height:auto; padding:10px; width:100%;font:14px/29px Georgia, serif;}
		div#top div#content_top .menu2:hover > div#top div#content_top .menu{ display:block;}
		div#top div#content_top .menu ul li:hover > ul.ssmenu{ display:none;}
		div#top div#content_top .menu ul li a .arrow{ display:none;}
		div#top div#content_top .menu ul li ul.ssmenu{ display:none; position:absolute; top:146px; left:0px; border:1px solid #f1f1f1; height:auto; width:100%; float:left; background:#FFFFFF;}
		div#top.floatable div#content_top .menu ul li a{font:14px/29px Georgia, serif;}
		}
	@media screen and (min-width: 901px) {div#top div#content_top #menu2{ display:none;}}	

	div#first{ float:left; width:100%; text-align:center;}
	
	/*gestion des projets*/
	div#first.projet{ width:100%; height:600px; position:relative; float:left; z-index:1; margin-top:-8px; }
	div#first.projet .diaporama2{ margin:auto; height:600px; position:relative;}
	div#first.projet .diaporama{ width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; float:left; background-position:top;}
	div#first.projet .contenu_p{  background:#FFFFFF; padding:10px; position:absolute; float:left; z-index:1000;}
	div#first.projet .contenu_p a.fleche_bottom{ position:absolute; height:40px; width:40px; padding:15px; top:calc(50% - 35px); right:-35px; border-radius:70px; background: #9bc509; display:block;}
	div#first.projet .contenu_p a.fleche_bottom:hover{ background:#000000;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
	
	div#first.projet .contenu_p a.fleche_next{ position:absolute; height:30px; width:30px;top:-40px; left:40px; background: #9bc509; display:block; padding:5px;}
	div#first.projet .contenu_p a.fleche_next:hover{ background:#000000;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
	div#first.projet .contenu_p a.fleche_previous{ position:absolute; height:30px; width:30px;top:-40px; left:0px; background: #9bc509; display:block; padding:5px;}
	div#first.projet .contenu_p a.fleche_previous:hover{ background:#000000;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
		div#top.floatable div#content_top .menu ul li a{font:14px/54px Georgia, serif;}
	@media screen and (max-width: 500px) {
		div#first.projet .contenu_p{ width:calc(100% - 20px); bottom:0px; left:0px;}
		div#first.projet .contenu_p a.fleche_bottom{ position:absolute; height:40px; width:40px; top:-40px; right:calc(50% - 20px); border-radius:0px; padding:0px;}	
		div#first.projet .diaporama2{ width:100%;}
		}
	@media screen and (min-width: 501px) 
	{
		div#first.projet .contenu_p{ width:440px; bottom:20px; left:20px;}	
		div#first.projet .diaporama2{ width:100%;}
	}
	@media screen and (min-width: 1200px) 
	{	
		div#first.projet .diaporama2{ width:1200px;}
	}
	
	div#second{ margin:auto; padding:20px 0px 0px 0px;}
	@media screen and (max-width: 900px) {div#second{ width:100%;}}
	@media screen and (min-width: 901px) {div#second{ width:900px;}}
	@media screen and (min-width: 1201px) {div#second{ width:1200px;}}
	div#second .case, div#second .case2, div#second .case4{ float:left;font:14px/50px Georgia, serif; text-transform:uppercase;}
		div#second .case a, div#second .case2 a{ text-decoration:none; color:#000000;}
		div#second .case a:hover, div#second .case2 a:hover, div#second .case4 a:hover{ background:none;}
		div#second .case a img, div#second .case2 a img, div#second .case4 a img{ border:0px; float:none;}
		div#second .case a .image, div#second .case2 a .image, div#second .case4 a .image{ float:left;  position:relative; width: 100%; text-align: center;}
		div#second .case a .image .hover, div#second .case2 a .image .hover, div#second .case4 a .image .hover{ position:absolute; display:none; bottom:0px; right:20px; width:35px; height:58px; background:url(../charte/btn-plus.png);}
		div#second .case a .image img, div#second .case2 a .image img, div#second .case4 a .image img{ width:100%;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
.case2 a .image img{height: 175px !important; width: auto !important;}
		div#second .case a .titre{ font:18px/30px Georgia, serif; color:#9bc509; padding-top:10px; text-align:left;}
div#second .case2 a .titre{ font:18px/30px Georgia, serif; color:#9bc509; padding-top:10px; width:100%; text-align:center;}
		div#second .case a .icone, div#second .case2 a .icone{ float:left; padding:5px 5px 5px 5px; max-width:40px;}
		div#second .case a .baseline, div#second .case2 a .baseline{float:left; width:100%; text-align:center;}div#second .case a .baseline img{ float:none;}
	div#second .case:hover > a .image .hover, div#second .case2:hover > a .image .hover, div#second .case4:hover > a .image .hover{ display:block;}
	div#second .case:hover > a .image img, div#second .case2:hover > a .image img, div#second .case4:hover > a .image img{opacity: 0.4; filter: alpha(opacity=40);  background:none;}
	@media screen and (max-width: 500px) {div#second .case{ width:100%;}}
	@media screen and (min-width: 501px) {div#second .case{ width:48%; margin:1%}}
	@media screen and (min-width: 901px) {div#second .case{  width:280px; margin:10px;}}
	@media screen and (min-width: 1201px) {div#second .case{ width:360px; margin:20px;}}
	
	@media screen and (max-width: 500px) {div#second .case2{ width:100%;}}
	@media screen and (min-width: 501px) {div#second .case2{ width:48%; margin:1%}}
	@media screen and (min-width: 901px) {div#second .case2{  width:205px; margin:10px;}}
	@media screen and (min-width: 1201px) {div#second .case2{ width:260px; margin:20px;}}
	
	@media screen and (max-width: 500px) {div#second .case4{ width:48%; margin:1%;}}
	@media screen and (min-width: 501px) {div#second .case4{ width:31%; margin:1%}}
	@media screen and (min-width: 901px) {div#second .case4{  width:170px; margin:5px;}}
	@media screen and (min-width: 1201px) {div#second .case4{ width:220px; margin:10px;}}
	
	
	
	div#footer{ width:100%; position:relative; float:left; height:130px; text-align:center; background:url(../charte/bg-bottom.png); padding-top:16px; margin-top:-4px;}
	div#footer div.footer2{ margin:auto;}
	@media screen and (max-width: 900px) {div#footer div.footer2{ width:100%;}}
	@media screen and (min-width: 901px) {div#footer div.footer2{ width:900px;}}
	@media screen and (min-width: 1201px) {div#footer div.footer2{ width:1200px;}}
	div#footer div.footer2 .bloc1{ float:left; width:50%; text-align:justify;}
	div#footer div.footer2 .bloc2{ float:left; width:50%; text-align:right; text-transform:uppercase; letter-spacing:0.3em;}
	@media screen and (max-width: 900px) {div#footer div.footer2 .bloc1, div#footer div.footer2 .bloc2{ width:100%}}
	
	/*  Class diverses  */
	div#btn_up{position: fixed;bottom: 15px;right: 25px;cursor: pointer;display:none;z-index:999999;}
	div.div100{ float:left; width:100%; text-align:justify;}
	div.div56{ float:left; width:56%; text-align:justify;}
	div.div44{ float:left; width:44%; text-align:justify;}
	div.div18{ float:left; width:18%; text-align:justify;}
	div.div38{ float:left; width:38%; text-align:justify;}
	div.div82{ float:left; width:82%; text-align:justify;}
	div.pad10{ padding:10px;}
	div.marg10{ margin:10px 0px 10px 0px; float:left;}
	.bggris{ background:#efeeee;}
	.bgvert{ background:#9bc509;}
	img.icone{ float:left; padding:5px 20px 5px 20px; max-width:40px;}
	
	.case3{ float:left; margin:10px; width:calc(100% - 20px);}
	.case3 a{ text-decoration:none; float:left; display:block;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; width:100%;}
	.case3 a:hover{ background:#989898;}
	.case3 .bordure{ border-top:1px solid #FFFFFF; padding:30px 0px 30px 0px; float:left; width:100%;}
	.case3 .bordure2{ border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF;  padding:30px 0px 30px 0px; float:left; width:100%;}
	.case3 img{ float:left; margin:0px 10px 0px 0px;}
	.case3 .titre{font:16px/25px Georgia, serif; color:#9bc509;}
	.case3 .titre2{font:16px/25px Georgia, serif; color:#000000;}
	.case3 .titre3{font:16px/40px Georgia, serif; color:#000000; text-transform:uppercase; letter-spacing:0.3em;}
	.case3 .contenu{font:12px/16px Georgia, serif; color:#000000;}
	
	.font1{font:14px/50px Georgia, serif; text-transform:uppercase;}
	.font2{font:14px/25px Georgia, serif; text-transform:uppercase;}
	.fontvert{ color:#9bc509;}
	.fontblanc{ color:#FFFFFF;}
	.taillemin{ min-height:500px;}
	.handwrite{ font:18px/40px 'Architects Daughter';}
	
	
/* 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;}

.fancy_logement:hover{ opacity:0.8;}
	
	@media screen and (max-width: 900px) {div.div56, div.div44{ width:100%;}}
	
	
	a.btn{ width:300px; border-radius:5px; background:#FFFFFF; border:1px solid #000000; text-decoration:none; text-align:center; margin:auto; text-transform:uppercase;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear; float:none; color:#000000;font:16px/34px Georgia, serif; display:inline-block; position:relative;}
	a.btn:hover{ background:#9bc509;}
	/* Balises */
	h1{ font:18px/30px Georgia, serif; text-transform:uppercase; text-align:left; letter-spacing:0.3em; padding:0px; border:0px; float:left; width:100%;}
	h2{ font:16px/16px Georgia, serif; text-transform:uppercase; text-align:left; letter-spacing:0.3em; padding:0px; padding-top:20px; border:0px; float:left; width:100%;}
	a{ text-decoration:none; color:#000000;}