@import url("reset.css");
	
@font-face {
    font-family: 'CenturyGothicBold';
    src: url('font/century-gothic-bold-2-webfont.eot');
    src: url('font/century-gothic-bold-2-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/century-gothic-bold-2-webfont.woff') format('woff'),
         url('font/century-gothic-bold-2-webfont.ttf') format('truetype'),
         url('font/century-gothic-bold-2-webfont.svg#CenturyGothicBold') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
	font-family: 'CenturyGothic';
	src: url('font/century_gothic-webfont.eot');
	src: url('font/century_gothic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('font/century_gothic-webfont.woff') format('woff'),
		 url('font/century_gothic-webfont.ttf') format('truetype'),
		 url('font/century_gothic-webfont.svg#CenturyGothicRegular') format('svg');
	font-weight:normal;
	font-style: normal;
}
	

html , body {
	height: 100%;
	background:#11a1dd;
}

a {
	text-decoration:none;
	color:#fff;
}

	/* *** *** *** *** header *** *** *** *** */

	#wrap > header {
		position: absolute;
		width:100%;
		z-index:16;
	}
	
	
	
	/* *** *** *** *** menu *** *** *** *** */

	.menuplus{
		background: url(../images/nav_open_close.png) no-repeat scroll 0 0 transparent;
		display: block;
		height: 34px;
		margin-left: 10px;
		position: absolute;
		top: 30px;
		width: 34px;
	}

	nav#top {
		display:block;
		float:left;
		width:600px;
		height:158px;
		margin-left:44px;
		z-index:17;
		position:absolute;
	}

		nav#top ul li {
			width:105px;
			height:105px;
			float:left;
			margin-right:22px;
		}
				
		nav#top ul li.iec {
			width:158px;
			height:158px;
		}
		
		nav#top ul li.ier {
			width:127px;
			height:127px;
		}
				
		nav#top ul li a{
			width:105px;
			height:105px;
			float:left;
			color:white;
			text-align:center;
			font:18px CenturyGothicBold,Tahoma,Arial,Serif;
			border-radius: 80px;
			background:#222222;
			position: absolute;
		}
		
		nav#top ul li a.active{
			background: #FFFFFF !important;
			color: #19a5d1 !important;
		}
		

		nav#top ul li a.contact , nav#top ul li a.agence{
			line-height:100px;
		}
				
		nav#top ul li a.references{
			width:127px;
			height:127px;
			line-height: 122px;
		}

		nav#top ul li a.competences{
			width:158px;
			height:158px;
			line-height: 153px;
		}

		
	/* *** *** *** *** menu *** *** *** *** */
    .btn-facebook {
      float: right;
      margin-top: 14px;
      width: 66px;
      height: 26px;
      overflow: hidden;
      margin-right: 25px;
    }
    
    .fb-like-box {
		margin: -32px 0 0 -62px;
    }
     
		#follow_social {
			width:32px;
			height:96px;
			font-size:0;
			float:right;
			margin-top:10px;
			margin-right:10px;
		}
				
		#follow_social a{
			display:block;
			width:32px;
			height:32px;
			text-align:center;
			margin-bottom:5px;
			color:#212A2B;
		}
		
		#follow_social ul{
			height:32px;
			overflow:hidden;
		}
			.partager {
				display:block;
				background : url(../images/like.png);
				border-radius:32px;
			}
			
			.twitter_follow ,.facebook_follow,.googleplus_follow{
				display:none;
				background :url(../images/twitter.png); /* #2D2D2D  */
				border-radius:32px;
			}
			
			.facebook_follow {
				background :url(../images/facebook.png);
			}
			
			.googleplus_follow {
				background :url(../images/googleplus.png);
			}
		

	/* *** *** *** *** body *** *** *** *** */
	
	#wrap {
		position:relative;
		height:100%;
		width:100%;
		overflow:hidden;
	}

	.loader {
		width:260px;
		height:249px;
		position:absolute;
		top:-20%;
		left:50%;
		margin-top:-124px;
		margin-left:-130px;
	}
	
	.loader > .percent {
		color: #FFFFFF;
		font: 30px CenturyGothic,Tahoma,Arial,Serif;
		left: 50%;
		margin-left: -40px;
		margin-top: 45px;
		position: absolute;
		top: 50%;
		width: 80px;
		text-align: center;
	}
	
		#accueil , #agence , #competences, #competences_visuel , #references , #contact,#intro{
			clear:both;
			width:100%;
			height:100%;
			position:absolute;
			/*background-image: url(../../images/frontoffice/accueil.jpg);
			background-repeat:no-repeat;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			background-position:center 30%;*/
			display:none;
			overflow:hidden;
		}
		
		section .bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}
		
		#competences .bg,
		#competences_visuel .competences .bg ,
		#competences_visuel .flash .bg,
		#competences_visuel .mobile .bg,
		#competences_visuel .ecommerce .bg {
			top: auto;
			bottom: 0;
		}
		
		.construction{
			background:#000 !important;
		}
		
		#intro{
			background: url(../images/compteur.jpg) no-repeat;
			/*background-size:cover;*/
			display:block;
			width:980px;
			max-height:737px;
			position:absolute;
			left:50%;
			margin-left:-490px;
			top:50%;
			margin-top:-368px;
		}
		
		#accueil {
			display:none;
		}

			#accueil .slogan_txt ,#agence .slogan_txt , #references .slogan_txt , #contact .slogan_txt{
				width:422px;
				height:195px;
				left:39px;
				color: #222;
				position:absolute;
				bottom:53%;
			}
			
			
			#accueil .slogan_txt{
				bottom: 32%;
				height: 258px;
				width: 535px;
			}

			.slogan_txt  strong{
				color: #ffffff;
			}

			.slogan_txt h2{
				font: 40px CenturyGothicBold,Tahoma,Arial,Serif;
				margin-left: -3px;
				margin-top: -11px;
				word-spacing: -6px;
			}
			
			.slogan_txt h3 {
				font: 30px CenturyGothicBold,Tahoma,Arial,Serif;
				margin-top: -15px;
				word-spacing: -2px;
			}
			
			.slogan_txt h4{
				font : 20px CenturyGothicBold,Tahoma,Arial,Serif;
				margin-left: 2px;
				margin-top: -6px;
				word-spacing: -4px;
				margin-bottom: 6px;
			}
		
			#accueil .slogan_txt h2{
				font-size:50px;
			}
			
			#accueil .slogan_txt h3{
				font-size:40px;
			}
			
			#accueil .slogan_txt .h33{
				font-size:30px;
				color:#222;
				margin-top: -8px;
				position: absolute;
			}

			#accueil .slogan_txt .h34{
				font-size:30px;
				color:#fff;
				margin-top: -8px;
				 position: absolute;
			}
						
			#accueil .slogan_txt .h33 strong{
				font-size:40px;
				color:#222;
			}
			
			#accueil .slogan_txt .h34 strong{
				font-size:40px;
				color:#fff;
			}
						
			#accueil .slogan_txt .h40{
				font-size:25px;
				color:#ffffff;
				margin-top: -8px;
				position: absolute;
			}
			
			#accueil .slogan_txt .h40 strong{
				font-size:30px;
				color:#ffffff;
			}
			
			.slogan_txt .ctz{
				color: #222222;
				font-size: 13px;
				line-height: 22px;
				position: absolute;
				top: 200px;
				font:bold 12px/22px CenturyGothic,Tahoma,Arial,Serif;
			}
			
			.slogan_txt .ctz .starC{
				color: #222222;
				display: inline-block;
				float: left;
				font-size: 25px;
			}
			
			#accueil .slogan_txt .h1{
				font-size:30px;
				color:#222;
				margin-top: -8px;
				position: absolute;
				top:0;
			}
			
			#accueil .slogan_txt .h1 strong{
				font-size:40px;
				color:#222;
			}
			
			#accueil .slogan_txt .h2{
				font-size:25px;
				color:#ffffff;
				margin-top: -8px;
				position: absolute;
				top:45px;
			}
			
			#accueil .slogan_txt .h2 strong{
				font-size:30px;
				color:#ffffff;
			}
			
			#accueil .slogan_txt .h3{
				font-size:30px;
				color:#222;
				margin-top: -8px;
				position: absolute;
				top:78px;
			}
			
			#accueil .slogan_txt .h3 strong{
				font-size:40px;
				color:#222;
			}
			
			#accueil .slogan_txt .h4{
				font-size:30px;
				color:#fff;
				margin-top: -8px;
				position: absolute;
				top:120px;
			}
			
			#accueil .slogan_txt .h4 strong{
				font-size:40px;
				color:#fff;
			}
			
			#accueil .slogan_txt .h5{
				font-size:30px;
				color:#222;
				margin-top: -8px;
				position: absolute;
				top:162px;
			}
			
			#accueil .slogan_txt .h5 strong{
				font-size:40px;
				color:#222;
			}
			
			.slogan_txt .more{
				background: url(../images/more.png) no-repeat scroll 0 3px transparent;
				display: block;
				float: left;
				height: 22px;
				margin-right: 5px;
				margin-top: 0;
				width: 17px;

			}
			
			#accueil .slogan_txt .more{
				background:none;
				position: absolute;
				top:205px;
				font-size: 29px;
				line-height: 30px;
			}
			
			#accueil .slogan_txt .agence,#accueil .slogan_txt .contact{
				margin-left:15px;
				position: absolute;
				top: 205px;
				font:14px/26px CenturyGothicBold,Tahoma,Arial,Serif;
			}

			.slogan_txt a, .slogan_txt span{
				background: url(../images/bgsloganhref.png) no-repeat  -161px 3px;
				display: block;
				margin-top:0;
				padding-bottom:6px;
				font : 18px CenturyGothicBold,Tahoma,Arial,Serif;
				color: #fff;
			}
			
			.slogan_txt a{
				float: left;
			}
			
		.twitter_news {
			display:block;
			width:107px;
			height:112px;
			right:100px;
			top:38%;
			position:absolute;
		}
		
			.twitter_news img{
				position:absolute;
				right:0;
				top:-10px;
			}
			
			.twitter_news p{
				display: none;
			}
					
		.twitter_news_hover {
			display:block;
			width:490px;
			height:132px;
			top:38%;
			background:url(../images/twitter_news_hover.png) 0 47px no-repeat;
		}
		
			.twitter_news_hover p,.twitter_news_hover ul{
				color: white;
				display: block;
				font: 13px/20px CenturyGothic,Tahoma,Arial,Serif;
				padding: 0 11px;
				position: relative;
				width: 362px;
				background:#222B2B;
				margin-top:57px;
				min-height:28px;
			}
			
			.twitter_news ul li a:hover{
				color: #0ECCF8;
			}
			
			.twitter_news_hover .bottom{
				background:url(../images/twitter_news_hover_btm.png) no-repeat transparent;
				display:block;
				height:8px;
				position:absolute;
				width:384px;
			}
		
		#agence {
			background-image: url(../images/agence.jpg);
		}
		
			#agence .slogan_txt {
				width: 535px;
				height:151px;
				color:#11a1dd;
				bottom:44%;
			}

			#agence .slogan_txt .hw2{
				font-size:33px;
				line-height:60px;
			}
			
			#agence .slogan_txt .hw1{
				font-size:35px;
				line-height:60px;
			}
						
			#agence .slogan_txt h2{
				font-size:50px;
			}
			
			#agence .slogan_txt h3{
				font-size:40px;
			}
						
			#agence .desription {
				position:absolute;
				bottom:32%;
				right:25%;
				margin-right:-235px;
				right:23%;
				width:470px;
				padding-bottom: 20px;
				background: url(../images/bg_description.png);
				color:#fff;
				padding-left:20px;
				padding-right:20px;
			}
			
			#agence .desription header{
			font:32px CenturyGothicBold,Tahoma,Arial,Serif;
			margin-top:35px;
			}
			
			#agence .desription p{
			margin-top:10px;
			font:13px/20px CenturyGothic,Tahoma,Arial,Serif;
			}
			
			#agence .desription p b{
			font-weight:bold;
			}
			
		#competences {
			background-image: url(../images/competences.jpg);
		}

			#list_competences{
				margin-left:-458px;
				width:786px;
				width:917px;
				height:524px;
				height:393px;
				font:18px/20px CenturyGothicBold,Tahoma,Arial,Serif;
				color:#fff;
				z-index:9;
				position: absolute;
				top:50%;
				margin-top:-196px;
			}	
				#list_competences li {
					float:left;
					width:130px;
					height:130px;
					margin-right:1px;
					margin-bottom:1px;
				}
			
				#list_competences li a, #list_competences .box ,#list_competences .vide ,#list_competences .hover{
					float:left;
					width:124px;
					height:124px;
					text-align:center;
					line-height: 130px;
					border:3px solid #11a1dd;
					z-index:10;
					background:#0084bb;
				}
				
				#list_competences .vide{
					background:none;
					border:3px solid transparent;
				}	
				
				#list_competences .vide:hover{
					background:none;
				}				

				
		#competences_visuel {
			background:none;
		}
		
		#competences_visuel > div{
			/*background-repeat:no-repeat;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			background-position:center 30%;*/
			height: 100%;
			width:100%;
			position: absolute;	
			display: none;
			overflow:hidden;
		}

		
		#competences_visuel > div.facebook{
			background-image: url(../images/fb.jpg);
		}
		
		#competences_visuel > div.webdesign{
			background-image: url(../images/design.jpg) ;
		}
		
		#competences_visuel > div.flash{
			background-image: url(../images/flash.jpg) ;
			background-position:center bottom;
		}
		
		#competences_visuel > div.ecommerce{
			background-image: url(../images/ecommerce.jpg) ;
			background-position:center bottom;
		}
		
		#competences_visuel > div.php{
			background-image: url(../images/php.jpg) ;
		}
		
		#competences_visuel > div.html5{
			background-image: url(../images/html5.jpg) ;
		}
		
		#competences_visuel > div.cms{
			background-image: url(../../images/cms.jpg) ;
		}
		
		#competences_visuel > div.mobile{
			background-image: url(../images/mobile.jpg) ;
			background-position:center bottom;
		}
				
			#competences_visuel > div > article{
				height:225px;
				position:absolute;
				margin-top:230px;
				right:75px;
				color:#fff;
				bottom: 32%;
			}
		
				#competences_visuel > div > article > h3 ,#intro > hgroup > h3{
					background: none repeat scroll 0 0 #000000;
					font: 27px/23px CenturyGothicBold,Tahoma,Arial,Serif;
					padding: 7px 10px 10px;
					color:#fff;
					display:inline-block;
				}
		
				#intro > hgroup > h3{
					padding: 4px 4px 7px;
					width: 45px;
				}
				
				#intro > #compteur ,#intro > #compteurFloat{
					font: 64px CenturyGothicBold,Tahoma,Arial,Serif;
					position: absolute;
					left:455px;
					top: 150px;
					color:#fff;
				}
				
				#intro > #compteurFloat{
					background:url(../images/compteur.png) no-repeat;
					width:475px;
					height:55px;
					display:block;
					left:430px;
					top:172px;
				}
				
				#intro > #compteur > span{
					font: 20px CenturyGothicBold,Tahoma,Arial,Serif;
					color:#fff;
					vertical-align: middle;
				}
				
				
				#intro > hgroup{
					left: 510px;
					position: absolute;
					top: 400px;
				}
			
				#competences_visuel > div > article > h1,#intro > hgroup > h1{
					background: none repeat scroll 0 0 #000000;
					font: 135px/97px CenturyGothicBold,Tahoma,Arial,Serif;
					margin-top: 2px;
					padding: 7px 0 15px;
					width: 247px;
					color:#fff;
				}
			
				#intro > hgroup > h1{
					font: 56px/56px CenturyGothicBold,Tahoma,Arial,Serif;
					width: 430px;
					padding: 0 0 6px 6px ;
				}
				
				#competences_visuel > div.facebook > article > h1{
				 font: 80px/80px CenturyGothicBold,Tahoma,Arial,Serif;
				padding: 0 0 0 8px;
				width: 390px;
				}
				
				#competences_visuel > div.webdesign > article > h1{
					font: 85px/85px CenturyGothicBold,Tahoma,Arial,Serif;
					padding: 0 0 20px 7px;
					width: 467px;
				}
				
				#competences_visuel > div.html5 > article > h1{
					font: 85px/74px CenturyGothicBold,Tahoma,Arial,Serif;
					padding: 0 0 6px 2px;
					width: 286px;
				}
				
				#competences_visuel > div.flash > article > h1{
					font: 85px/85px CenturyGothicBold,Tahoma,Arial,Serif;
					padding: 0 0 10px 9px;
					width: 432px;
				}
				
				#competences_visuel > div.cms > article > h1{
					font: 114px/82px CenturyGothicBold,Tahoma,Arial,Serif;
					padding: 7px 0 15px 4px;
					width: 256px;
				}
				
				#competences_visuel > div.ecommerce > article > h1{
					font: 75px/42px CenturyGothicBold,Tahoma,Arial,Serif;
					height: 62px;
					padding: 0 0 0 5px;
					width: 490px;
				}
				
				#competences_visuel > div.mobile > article > h1{
					font: 75px/70px CenturyGothicBold,Tahoma,Arial,Serif;
					margin-top: 2px;
					padding: 0 0 5px 5px;
					width: 258px;
				}
				
				#competences_visuel > div > article > p{
					background: #1290B1;
					font: 16px/20px CenturyGothic,Tahoma,Arial,Serif;
					margin-top: 2px;
					min-height: 65px;
					padding: 10px;
					width: 510px;
				}
				
				#competences_visuel > div.facebook > article > p{
					background:#005bad;
				}
				
				#competences_visuel > div.webdesign > article > p{
					background:#0e698e;
				}
				
				#competences_visuel > div.html5 > article > p{
					background:#004865;
				}
				
				#competences_visuel > div.flash > article > p,
				#competences_visuel > div.cms > article > p,
				#competences_visuel > div.ecommerce > article > p,
				#competences_visuel > div.mobile > article > p{
					background:#19a5d1;
				}
				
				#competences_visuel > nav{
					width:100%;
					height:47px;
					position:absolute;
					bottom:92px;
					overflow:hidden;
					float:left;
				}
			
				#competences_visuel > nav > ul {
					position: absolute;
					left:0;
					width:100%;
				}
				
					#competences_visuel > nav > ul > li {
						float: left;
						position:relative;
						width: 12.5%;
						background: url(../images/bg_items_competences.png) bottom repeat-x;
						height: 47px;
					}
												
					#competences_visuel > nav > ul > li > a{
						display:block;
						width:99%;
						float:left;
						color:#fff;
						text-align:center;
						font:14px/38px CenturyGothic,Tahoma,Arial,Serif;
						height:40px;
						border-width: 0 1px;
						border-right-color: #167FAB;
						border-left-color: #4EB4E0;
						border-style: solid;
						margin-top: 7px;
					}


					#competences_visuel > nav > ul > li > .LastArticle{
					   
						background:url(../images/bg_items_competences_hover.png) repeat-x;
						margin-top: 3px;
						border-color: #191919;
						height: 44px;
						line-height: 42px;
					}

					#competences_visuel > nav > ul > li > .hover{
						background: url(../images/bg_items_competences_hover.png) 0 44px repeat-x;
						margin-top: 3px;
						height: 44px;
						border:none;
						width: 100%;
						line-height: 46px;
					}
						
			#references {
				background-image: url(../images/references.jpg);
			}
			
				#references .slogan_txt {
					bottom:55%;
					bottom:50%;
					width: 862px;
					height:151px;
				}
				
				#references .slogan_txt h3{
					font-size:35px;
				}

				#references .slogan_txt h4{
					font-size:24px;
					word-spacing: 1px;
				}
				
				#references .slogan_txt a{
					margin-top:15px;
				}
				
				#references .slogan_txt .more{
					margin-top:16px !important;
				}
				
				#list_references{
					float:left;
					height:200px;
					width:100%;
					overflow:hidden;
					padding-left:39px;
					padding-right:29px;
					position:absolute;
					top:53%;
				}
						
					#list_references > ul {
						height:200px;
						position:relative;
						left:0;
					}

						#list_references > ul > li{
							float:left;
							width:200px;
							height:200px;
							margin-right:10px;
						}
						
					#list_references > .dragMe {
						display:none;
						width:62px;
						height:53px;
						position:absolute;
						top:-33px;
						left:52.6%;
						background:url(../images/img_drag.png) no-repeat;
					}
					
					#references > .dragMe {
						display:block;
						width:62px;
						height:53px;
						position:absolute;
						top:53%;
						left:52.6%;
						background:url(../images/img_drag.png) no-repeat;
					}
					
			#contact {
				background-image: url(../images/contact.jpg);
			}
			
				#contact > .infoConatct {
					bottom: 17%;
					display: block;
					height: 427px;
					position: absolute;
					width: 435px;
				}

				#contact .slogan_txt {
					width:432px;
					width:522px;
					height:100px;
					top:0;
					left:0;
				}
				
				#contact .slogan_txt h3{
					font-size:30px;
					line-height:50px;
				}
				
				#contact .slogan_txt h4{
					font-size:20px;
					line-height:22px;
					padding:0;
					margin:0;
					word-spacing: 1px;
					color: #252626;
				}
				
				#contact .slogan_txt span{
					margin-top:15px;
					width:432px;
					background:url(../images/fleshbas.png) no-repeat scroll left 4px transparent;
					padding-left:24px;
				}
				
				#contact address.france , #contact address.maroc{
					float:left;
					position:absolute;
					bottom: 130px;
					margin-left:39px;
					padding-top:10px;
					width:430px;
					height:110px;
					background: url(../images/bg_description.png);
					font:14px/18px CenturyGothic,Tahoma,Arial,Serif;
					color:#fff;
				}

				#contact address.maroc{
					bottom: 0px;
				}

					#contact  address > a > img{
						margin-right:20px;
						margin-left:9px;
						float: left;
					}
					
					address > #mapmaroc ,address > #mapfrance{
						width:175px;
						height:100px;
						display:block;
						margin-right:20px;
						margin-left:9px;
						float: left;
						overflow:hidden;
						background:url(../images/address_map_maroc.jpg);
					}
					
					address > #mapfrance{
						background:url(../images/address_map_france.jpg);
					}
					
					#mapfrancezoom,#mapmaroczoom{
						width: 408px;
						height:228px;
						position: absolute;
						z-index: 2;
						background: white url(../images/address_map_france_zoom.png) center center no-repeat;
						padding: 10px;
						border: 1px solid #11A1DD;
						opacity: 0;
						margin-top: -10px;
						margin-left: 0;
						left: 0;
					}

					#mapmaroczoom{
						background: white url(../images/address_map_maroc_zoom.png) center center no-repeat;
						margin-top: -140px;
					}
					
					address .close{
						width:0 !important;
						height:0 !important;
						padding: 0 !important;
					}
					
					#contact  address > strong{
						font:18px/21px CenturyGothicBold,Tahoma,Arial,Serif;
					}

					#contact address > span{
						line-height:35px;
						display: block;
						width: 100%;
						height: 18px;
					}
						
					#contact address > span.fr{
						line-height: 32px;
					}
					
			#contactez_nous , #contactez_nous_confirm {
				right:0;
				width:352px;
				height:375px;
				padding: 20px 20px 35px;
				background: url(../images/bg_description.png);
				position: absolute;
				bottom:17%;
				z-index:16;
				margin-right: 39px;
			}
			
			 #contactez_nous_confirm{
				height: 100px;
				bottom: 17%;
				margin-bottom: 275px;
			}

			#contactez_nous_confirm > h2{
				color: #FFFFFF;
				font: 35px/35px CenturyGothicBold,Tahoma,Arial,Serif;
				margin-bottom: 5px;
			}

			#contactez_nous_confirm > p{
				color: #FFFFFF;
				font: 16px CenturyGothicBold,Tahoma,Arial,Serif;
				margin-bottom: 15px;
			}
			
			#contactez_nous_confirm > .more{
				background: url("../images/retour.png") no-repeat scroll center center transparent;
				display: block;
				float: left;
				height: 22px;
				margin-right: 5px;
				margin-top: 5px !important;
				width: 17px;
			}

			#contactez_nous_confirm > .close{
				background: url("../images/bgsloganhref.png") no-repeat -161px 3px;
				display: block;
				font: 18px/29px CenturyGothicBold,Tahoma,Arial,Serif;
				height: 29px;
				margin-left: 24px;
				width: 54px;
			}
			
				.close_hover{
					background-size:75px;
				}

						
				#contactez_nous > fieldset{
					width:350px;
				}

				#contactez_nous > fieldset > legend{
					display:none;
				}
				
				#contactez_nous > fieldset > label {
					float:left;
					font:15px/15px CenturyGothicBold,Tahoma,Arial,Serif;
					color:#fff;
					width:100%;
				}
				
				#contactez_nous > fieldset > label span{
					color:#C94722;
				}
				
				#contactez_nous > fieldset > .input_txt{
					float: left;
					width: 340px;
					height: 35px;
					margin-top: 8px;
					margin-bottom: 10px;
					border: none;
					padding-left: 10px;
					font: 15px CenturyGothic,Tahoma,Arial,Serif;
					color: #000;
					border: none;
					outline:0;
				}
				
				#contactez_nous > fieldset > .nom{
					width:184px;
					height: 15px;
				}
				
				#contactez_nous > fieldset > .prenom{
					width:162px;
					height: 15px;
				}
				
				#contactez_nous > fieldset > .ptnom{
					float:right;
					width: auto;
				}
				
				#contactez_nous > fieldset > .ptprenom{
					width: auto;
				}				
				
				.empty {
					background:#FFBABA !important;
					color:#D90D19 !important;
				}
				
				#contactez_nous > fieldset > textarea{
					float: left;
					width: 340px;
					height: 115px;
					margin-top: 8px;
					margin-bottom: 10px;
					border: none;
					padding-left: 8px;
					font: 15px CenturyGothic,Tahoma,Arial,Serif;
					color: #000;
					outline: 0;
				}
				
				#contactez_nous > fieldset > .flesh {
					background: url(../images/bg_btn_envoyer.png) no-repeat scroll center center transparent;
					display: block;
					float: left;
					height: 22px;
					width: 17px;
					margin-top: 2px;
				}
				
				#contactez_nous > fieldset > .input_btn {
					background: url(../images/bgsloganhref.png) no-repeat -161px -1px;
					border: none;
					color: #fff;
					font: bold 15px/25px CenturyGothic,Tahoma,Arial,Serif;
					cursor: pointer;
					margin-left: 5px;
					padding: 0 0 7px;
					height:26px;
					 float: left;
				}
						
		#footer {
			width:100%;
			position:absolute;
			bottom: 0;
			z-index:17;
		}
		/**-----------------------	 Award	 -----------------------**/
		.award_wrap {
			display:none;
			background:#fff;
			width:100%;
			height:245px;
			height:100px;
			overflow:hidden;
			padding: 10px 0;
			background: #ffffff url(../images/bg_footer.gif) ;
		}
		
		#list_award ul  {
			width: 100%;
			padding-right: 10px;
			
		}
		#list_award ul li {
			float: right;
			margin-right: 10px;
		}
		/***/
		.job_wrap {
			display:none;
			background:#fff;
			width:100%;
			height:245px;
			height:300px;
			overflow:hidden;
			padding-top: 48px;
			background: #ffffff url(../images/bg_footer.gif) ;
		}
		
		
		
			.job_wrap > aside {
				float: left;
				margin-left: 40px;
				margin-right:45px;
				font : 17px CenturyGothic,Tahoma,Arial,Serif;
			}
			
				.job_wrap > aside h3  {
					font : 28px CenturyGothicBold,Tahoma,Arial,Serif;
				}
				
					.job_wrap > aside h3 > strong  {
						color: #11a1dd;
					}
				
				.job_wrap > aside h4 {
					font : 19px CenturyGothicBold,Tahoma,Arial,Serif;
				}
				
				.job_wrap > aside > p {
					width: 185px;
					margin-top:20px;
				}
			
					.job_wrap > aside > p > .email{
						color: #11a1dd ;
					}
					
			#nos_offres {
				float: left;
				margin-left: 65px;
				font : 17px CenturyGothic,Tahoma,Arial,Serif;
			}
							
				#nos_offres > ul {
					width:100%;
					height:250px;
				}
				
				#nos_offres > ul > li{
					float: left;
					height: 250px;
					margin-bottom: 10px;
					overflow: hidden;
					width:630px;
					width:700px;
					display:none;
				}
							
				#nos_offres article{
					width:665px;
					margin-right:15px;
					overflow:hidden;
				}
				
				
				#nos_offres .current{
					display:block;
				}	
				
				#nos_offres article > h4{
						font : 19px CenturyGothicBold,Tahoma,Arial,Serif;
						color:#11a1dd;
						margin-bottom:20px;
					}

					#nos_offres article p ,#nos_offres article ul li{
						width: 665px;
						font-size: 14px;
						text-align: justify;
						margin-bottom:10px;
						font-size:12px;
						line-height:18px;
					}
					
					#nos_offres article p ,#nos_offres article ul li{
						line-height:14px;
					}
			
			
				#nos_offres > nav {
					height: 20px;
					margin-top:15px;
				}
			
					#nos_offres > nav > ul li {
						float: left;
						padding-top: 2px;
					}
			
					#nos_offres > nav > ul .title{
						background: url(../../images/frontoffice/bgnosoffer.png) no-repeat scroll 0 0 transparent;
						color: #FFFFFF;
						font: 14px CenturyGothicBold,Tahoma,Arial,Serif;
						height: 21px;
						padding-left: 10px;
						padding-top: 4px;
						width: 88px;
					}

						#nos_offres > nav > ul li a{
							background: url(../images/pagination.png);
							display: block;
							float: left;
							margin-left: 10px;
							margin-top:5px;
							width: 13px;
							height: 13px;
						}
			
						#nos_offres > nav > ul .active{
							background: url(../images/pagination.png) 13px 0;
						}

		
		.mentionlegal_wrap {
			background:#fff url(../images/bg_mentionlegal.gif);
			width:510px;
			width:340px;
			height:0;
			height:100%;
			right:0;
			position:absolute;
			bottom:0;
			z-index:16;
		}
		
			.mentionlegal_wrap > .mention_legal {
				width:476px;
				width:306px;
				height:65%;
				overflow:hidden;
				margin-left:25px;
			}
		
				.mentionlegal_wrap  h2 {
					font: bold 17px CenturyGothicBold,Tahoma,Arial,Serif;
					margin-left:25px;
					margin-top:30px;
					margin-bottom:20px;
				}
				
				.mention_legal div{
					height:3574px;
				}

				.mention_legal  p{
					font:11px CenturyGothic,Tahoma,Arial,Serif;
					margin-bottom:15px;
					margin-right:36px;
				}
				
				.mention_legal  h3{
					font:bold 11px CenturyGothic,Tahoma,Arial,Serif;
					margin:10px 0;
					margin-right:36px;
				}
		
				.mentionlegal_wrap > .close{
					position:absolute;
					display:block;
					width:32px;
					height:32px;
					background:url("../images/close.png") no-repeat;
					font-size:0;
					top:20px;
					right:40px;
					border-radius:32px;
				}

	/* *** *** *** *** footer *** *** *** *** */

	footer {
		width:100%;
		height:101px;
		background:url(../images/bg_footer.png) repeat-x;
		top: 0;
		position: relative;
	}

		#logo {
			width:132px;
			height:67px;
			background:url(../images/logo.png) no-repeat;
			margin-top:29px;
			margin-left:39px;
			float: left;
			font-size:0;
			color:#000;
		}
				
		h1#slogan {
			width:260px;
			height:34px;
			margin-top:42px;
			margin-left:10px;
			float: left;
			border-left:1px solid #11a1dd;
			font:20px/30px CenturyGothic,Tahoma,Arial,Serif;
			color:#ffffff;
			padding-left:8px;
		}
		
		#breadCrumb {
			bottom: 30px;
			display: block;
			float: left;
			left: 440px;
			position: absolute;
		}

		#breadCrumb ul{
			height:20px;
			font:13px CenturyGothic,Tahoma,Arial,Serif;
			width:auto;
			color:#11a1dd;
		}
		
		#breadCrumb ul li{
		   float:left;
		   padding:0 2px;
		   text-transform: capitalize;
		   height: 20px;
		   display: block;
		}
		
		#breadCrumb ul li a{
			color:#11a1dd;
		}
			
		nav#bottom {
			float: right;
			height: 101px;
			position: absolute;
			right: 0;	
			padding-left: 24px;
			background:url("../../images/bg_footer_cover.png") repeat-x scroll 0 0 transparent;
			/*max-width: 675px;*/
			max-width: 720px;
		}
		
			
			/********new footer********/
			
			nav#bottom ul li{
				float: right;
				position: relative;
				display: block;
				height: 92px;
				margin-top: 9px;
			}
			
			nav#bottom ul li.lisup{
				background: url(../images/separator.png) no-repeat 2px 40px transparent;
				width: 10px;
			}

			nav#bottom ul li.li1{
				background:none;
				overflow: hidden;
				width: 0;
			}
			
			nav#bottom ul li.li2{
				background:none;
				overflow: hidden;
			}
			
			nav#bottom ul .separator{
				margin-right:25px;
				margin-left:25px;
				margin-top:49px;
				width:5px;
				height:6px;
				background:url(../images/separator.png) no-repeat;
			}
			
				nav#bottom ul li a{
					background: url(../images/bg_btn_foot.png) no-repeat;
					background-position: 0 92px;
					display: block;
					font: 11px/85px CenturyGothicBold,Tahoma,Arial,Serif;
					height: 100%;
					text-align: center;
					padding: 0 40px;
				}
				
				nav#bottom ul li .msgNewsletter {
					margin-top: 30px;
					color: #11A1DD;
					display: none;
					height: 20px;
					width: 300px;
					font: 13px/23px CenturyGothic,Tahoma,Arial,Serif;
					position: absolute;
				}
				
				nav#bottom ul li #formNewsletter{
					width:300px;
					padding: 28px 0;
					overflow: hidden;
					display: none;
				}
				
				/********new footer********/
					
					nav#bottom ul li a.hover{
						background: url(../images/bg_btn_foot.png) no-repeat ;
						padding-left: 15px;
						margin-left:15px;
						background-position:0 92px;
					}
				
				nav#bottom ul li #newsletter{
					width:0;
					height:36px;
					display:block;
					margin-top: 32px;
					margin-right: 25px;
					overflow:hidden;
				}

				nav#bottom ul li #form_newsletter{
					display:block;
					width:260px;
				}
				
						nav#bottom ul li form legend{
							display:none !important;
						}
		
						nav#bottom ul li form .input_txt{
							background:#404040;
							width:176px;
							height:30px;
							border:none;
							padding-left:8px;
							color:#fff;
							font:12px CenturyGothic,Tahoma,Arial,Serif;
							float: left;
						}
						
					nav#bottom ul li form .input_btn {
						background: url("../images/bg_btn_submit.png") no-repeat scroll 10px center transparent;
						border: medium none;
						color: #11A1DD;
						cursor: pointer;
						float: left;
						font: bold 11px/29px CenturyGothic,Tahoma,Arial,Serif;
						height: 32px;
						padding: 0 0 0 10px;
						width: 70px;
						outline: 0;
						}
						
	/* *** *** *** *** animation *** *** *** *** */

		.display{
			display:block!important;
		}
		
		.nodisplay{
			display:none!important;
		}
		
		.displaymention{
			height:100%;
		}
		
	/* *** *** *** *** Scroll *** *** *** *** */

	.jspContainer
	{
		overflow: hidden;
		position: relative;
	}

	.jspPane
	{
		position: absolute;
	}

	.jspVerticalBar
	{
		position: absolute;
		top: 0;
		right: 0;
		width: 16px;
		height: 100%;
	}

	.jspHorizontalBar
	{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 16px;
	}

	.jspVerticalBar *,
	.jspHorizontalBar *
	{
		margin: 0;
		padding: 0;
	}

	.jspCap
	{
		display: none;
	}

	.jspHorizontalBar .jspCap
	{
		float: left;
	}

	.jspTrack
	{
		background: #000000;
		position: relative;
		width: 2px;
	}

	.jspDrag
	{
		background: #000000; /**Mouss**/
		cursor: pointer;
		left: 3px;
		position: relative;
		width: 7px;
	}

	.jspHorizontalBar .jspTrack,
	.jspHorizontalBar .jspDrag
	{
		float: left;
		height: 100%;
	}

	.jspArrow
	{
		background: #6CD079;
		text-indent: -20000px;
		display: block;
		cursor: pointer;
	}

	.jspArrowDown
	{
		background: url(../images/downarrow.png) no-repeat;
		border:1px solid #D6F49F;
		border-top:0;
	}

	.jspArrowUp
	{
		background: url(../images/uparrow.png) no-repeat;
		border:1px solid #D6F49F;
		border-bottom:0;
	}

	.jspArrow.jspDisabled
	{
		cursor: default;
		background: #F78526;
	}

	.jspVerticalBar .jspArrow
	{
		height: 16px;
	}

	.jspHorizontalBar .jspArrow
	{
		width: 16px;
		float: left;
		height: 100%;
	}

	.jspVerticalBar .jspArrow:focus
	{
		outline: none;
	}

	.jspCorner
	{
		background: #eeeef4;
		float: left;
		height: 100%;
	}

	/* Hack for IE6 3 pixel bug :( */
	* html .jspCorner
	{
		margin: 0 -3px 0 0;
	}
	
	
	#twitter_update_list li {
	list-style-type: none;
	}