/*
 * @autor : dynamic creative
 * @date : 2013
 */

/* ---------------------------- */
/*	   Mise en page générale	*/
/* ---------------------------- */
#nav_wrap { position:fixed; bottom:10px; left:0; width:100%; z-index: 99999; }
nav {  position:relative; width:500px; margin:0 auto; text-align:center;  }
nav > a { position:relative; display:inline-block; width:50px; height:50px; margin-right:15px; background:#63c6e5; border-radius: 25px; behavior: url(js/PIE.htc); }
nav > a > span { display:none; }
nav > a:hover, nav > a.active { background:#ec736a; }
nav > a.deactive { background:#63c6e5; }

#header_wrap { position:fixed; width:100%; height:80px; z-index:99999; background:none; }
#header_wrap > header { position:relative; width:1000px; margin:0 auto;  }
#header_wrap > header > .logo { position:absolute; top:10px; left:0; width:159px; height:79px; }
#header_wrap > header > .slogan { position:absolute; top:50px; left:160px; width:800px; height:39px; line-height:39px; background-color:#63c6e5; font-size:19px; color:#ffffff; text-align:center; }
#header_wrap > header > .logo_bottom { position:absolute; top:105px; left:0; width:161px; height:23px; }

.slide { position:relative; width:100%; min-height:700px; }
.slide > article { position:relative; width:1000px; margin:0 auto; }
.slide > article > header { position:relative; height:60px; }
.slide > article > header > .slogan { position:absolute; left:0; top:0; width:100%; height:50px; line-height:50px; text-align:center; font-size:20px; color:#63c6e5; }
.slide#accueil > article > header > .slogan { color:#ffffff; }
.slide > article > header > .logo { position:absolute; left:1px; top:51px; width:199px; height:99px; }
.slide > article > header > .logo_bottom { position:absolute; left:1px; top:170px; width:199px; height:43px; }
.slide > article > header > h1 { position:relative; padding-left:180px; line-height:24px; text-transform: uppercase; font-size:24px; font-weight:normal; color:#4c4c4c; }
.slide > article > section { position:relative; margin:0 0 0 180px; }
.slide > article > section > .col { float:left; width:290px; margin-right:30px; }

#accueil { background:url(../img/bg_home.jpg) center top no-repeat; background-size: cover; }
.slide#accueil > article > header > h1 { position:absolute; left:0; padding:0; top:240px; width:100%; line-height:65px; text-align:center; text-transform: uppercase; font-size:60px; font-weight:bold; color:#ffffff; }
.slide#accueil > article > header > h1 > span { font-size: 70px; }

.slide#changez > article > header > h1 { position:relative; line-height:normal; text-transform: uppercase; font-size:24px; font-weight:normal; color:#4c4c4c; }
.slide#changez > article > section { height:160px; margin:0 0 20px 0; }
.slide#changez > article > section > img, .slide#entrepreneur > article > section.wide > img { float:left; margin-right:20px; }
.slide#changez > article > section > h2 { margin-bottom:10px; font-size:24px; font-weight:normal; color:#ec736a; text-transform:uppercase; line-height:24px; }
.slide#changez > article > section + section > h2 { color:#63c6e5; }
.slide#changez > article > section + section + section > h2 { color:#acca58; }
.slide#changez > article > section > p { margin:0; }
.slide#changez > article > section > ul { margin-left:200px; }

#architecte { background:url(../img/bg_slide_blue.png) center top repeat; overflow:hidden; }
.slide#architecte > article > section > h2 { margin-bottom:30px; line-height:20px; font-size:18px; font-weight:normal; }
.slide#architecte > article > section > div > h3 { margin:17px 0 40px; font-size:24px; font-weight:bold; color:#ec736a; }
.slide#architecte > article > section > div + div > h3 { color:#63c6e5; }
.slide#architecte > article > section > div + div + div > h3 { color:#acca58; }
.slide#architecte > article > section > .col { float:left; width:250px; margin-right:0; text-align:center; }
.slide#architecte > article > section > div > ul { margin:0; list-style: none; }
.slide#architecte > article > section > div > ul > li { text-align:left; display:inline-block; width:198px; height:21px; margin-bottom:10px; line-height:20px; font-size:12px;
	padding-left:22px;
	/*box-shadow: 3px 3px 4px #aaaaaa; border-radius: 10px; behavior: url(js/PIE.htc);*/
}
ul.b1 > li{ background:url(../img/b1.gif) left top no-repeat; }
ul.b2 > li{ background:url(../img/b2.gif) left top no-repeat; }
ul.b3 > li{ background:url(../img/b3.gif) left top no-repeat; }

#entrepreneur { background:url(../img/bg_slide_green.png) center top repeat; overflow:hidden; }
.slide#entrepreneur > article > section { font-size: 12px; margin-bottom:20px; }
.slide#entrepreneur > article > section.wide { /*height:200px;*/ margin:0 0 20px 0; font-size:12px; }
.slide#entrepreneur > article > section > h2 { margin-bottom:12px; font-size:18px; font-weight:normal; position:relative; top:-4px; }
.slide#entrepreneur > article > section > div > b { color:#ec736a; }
.slide#entrepreneur > article > section > q { display:inline-block; margin-top:50px; font-size:22px; color:#63c6e5; }
.slide#entrepreneur > article > section > h3 { font-weight:normal; }
.slide#entrepreneur > article > section > ul { margin-left:200px; }
.slide#entrepreneur > article > section > .col { width:100%; margin-right:20px; margin-bottom:20px; font-size:14px; }

#contact { background:url(../img/bg_slide_white.png) center top repeat; }
#contact > article { /*min-height:800px;*/ background:url(../img/bg_contact.jpg) center -120px; repeat; height:620px; }
.slide#contact > article > section > h2 { margin-bottom:40px; font-size:20px; font-weight:normal; }
.slide#contact > article > section > p { font-size:15px; }
.slide#contact > article > section > address { font-size:15px; font-style: normal; }
.slide#contact > article > section > address > h2 { font-size:20px; font-weight: normal; }
.slide#contact > article > section > address > img { margin-right:10px; }
#contact > footer { position:relative; width:100%; height:200px; font-family: Arial, Verdana, FreeSans, sans-serif; font-size:11px; color:#888787; background:url(../img/bg_slide_footer.png) center top repeat; }
#contact > footer > section { position:relative; width:1000px; margin:0 auto; }
#contact > footer > section > p { padding:112px 0 0 250px; }
#contact > footer > section > .logo_footer { position:absolute; left:0px; top:50px; width:200px; height:101px; }

.ciel {color:#63c6e5;}
/* ---------------------------- */
/*		    Responsive  		*/
/* ---------------------------- */
/*Mobile et tablette*/
@media screen and (max-width: 1024px) {
	#header_wrap > header > .logo { left:20px; }
	#header_wrap > header > .slogan { left:180px; }
	#header_wrap > header > .logo_bottom { left:20px; }
	.slide { min-width:1000px; }
	.slide#changez > article { padding-left:20px; width:980px; }
	.slide#architecte > article > section { margin-left: 100px; }
	.slide#architecte > article > header > h1 { padding-left: 100px; }
	.slide#entrepreneur > article > section { padding-left: 20px; }
	.slide#entrepreneur > article > section > ul { padding-right:20px; }
	.slide#entrepreneur > article > header > h1 { padding-left: 200px; }
	
}


@media screen and (max-width: 767px) {
	nav { width:100%; /*position:fixed; right:10px; top:25px; z-index: 1000;*/ }
	nav > a { width:30px; height:30px; margin-right:10px; border-radius: 15px; behavior: url(js/PIE.htc); }
	
	.slide {  min-height:auto; min-width:100%; }	
	.slide > article { width:auto; padding:0; padding-top:140px; }
	.slide > article > section { margin:0; padding:0 10px;}
	.slide > article > header > h1 { /*margin-top:20px;*/ font-size:20px; line-height:22px; }
	.slide > article > header > .slogan { padding-top:5px; font-size:12px; }
	
	
	#header_wrap > header { text-align:center; width:100%; }
	#header_wrap > header > .logo { position:relative; left:auto; top:5px; }
	#header_wrap > header > .slogan { position:relative; left:auto; width:100%; line-height:16px; padding:5px 0; top:10px; height:auto; font-size:14px; }
	#header_wrap > header > .logo_bottom { display:none; }
	
	.slide#accueil { min-height:480px; background:url(../img/bg_home.jpg) 75% top no-repeat; background-size: 300%; }
	.slide#accueil > article > header > h1 { line-height:normal; font-size:24px; top:0; }
	.slide#accueil > article > header > h1 > span { font-size: 24px; }
	
	.slide#changez > article { padding-left:0; }
	.slide#changez > article { width:100%; /*padding:0;*/ }
	.slide#changez > article > section > img { margin:0 25px; }
	.slide > article > header > h1 { position:relative; left:auto; top:auto; text-align:center; padding:0; }

	
	.slide#changez > article > header > .slogan, .slide#architecte > article > header > .slogan, .slide#entrepreneur > article > header > .slogan, .slide#contact > article > header > .slogan,
	.slide#changez > article > header > .logo, .slide#architecte > article > header > .logo, .slide#entrepreneur > article > header > .logo, .slide#contact > article > header > .logo { display:none; }	.slide#changez > article > header > h1 { font-size:22px; }
	.slide#changez > article > section { height:auto; min-height:auto; margin:0 0 20px 0; padding-left:10px; }
	.slide#changez > article > section > h2 { font-size:18px; margin-bottom:15px; }
	.slide#changez > article > section > img { float:none; margin:0 0 10px 0; }
	.slide#changez > article > section > ul { margin-left:25px; margin-bottom:30px;  }
	
	/*.slide#architecte > article { padding-top:140px; }*/
	.slide#architecte > article > section { margin-left: auto; }
	.slide#architecte > article > header > h1 { padding-left:0; }
	.slide#architecte > article > section { text-align:center; }
	.slide#architecte > article > section > h2 { margin:20px 0; text-align:left; }
	.slide#architecte > article > section > .col { float:none; display:inline-block; margin-bottom:20px; }
	.slide#architecte > article > section > div > h3 { margin:17px 0 20px; }
	
	.slide#architecte > article > section > h2 { line-height:normal; font-size:18px; }
	.slide#architecte > article > section > div > h3 { font-size:18px; }
	.slide#architecte > article > section > .col + .col + .col { margin-bottom:60px; }
	
	
	/*.slide#entrepreneur > article { padding-top:140px; }*/
	.slide#entrepreneur > article > section > ul { margin-left:0; }
	.slide#entrepreneur > article > section > ul { padding-left:10px; }
	.slide#entrepreneur > article > header > h1 { padding-left: 0; }
	.slide#entrepreneur #img-entr { display:none; }
	.slide#entrepreneur > article > section.wide { height:auto; min-height:200px; margin-top:20px; }
	.slide#entrepreneur > article > section { height:auto; }
	
	.slide#entrepreneur > article > section { margin-top:20px; }
	.slide#entrepreneur > article > section > q { font-size:16px; margin-top:20px; }
	
	/*.slide#contact > article { padding-top:140px; }*/
}