/* Initialisation */
* 								{ padding:0; margin:0; border: none; }
a, a:active,
a:focus,
input:focus, input,
textarea:focus					{ outline:none; }
:focus 							{ outline:none;}
::-moz-focus-inner 				{ border:0;}
table							{ border-collapse: collapse; }
a								{ text-decoration: none; color: #939598; }
ul								{ list-style-type: none; }
h1,h2,h3,h4,h5,h6,b				{ font-weight: normal; }
strong							{ font-weight: bold; }

html								{}
body 							{ font: normal 13px/16px Helvetica, Arial, sans-serif; color: #fff; }

body.loading					{ overflow: hidden; }
body.loading #loader
{
	display: block;
}

#loader
{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 20000;
	background: #000;
}

#loader img
{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -64px;
	margin-left: -64px;
}

/* -- LAYER #5 : STATIC HEADER / FOOTER -- */
/* Header */
header							{ position:fixed; width:100%; z-index:1000; }
.wrapper						{ position: relative; margin: 0 auto; width:875px; padding: 0 0 0 40px; }

.logo							{ position: absolute; left: 40px; top: 55px; }
#logob							{ display: none; }

/* Top Menu */
#topNav ul						{ position: absolute; right: 0; top: 30px; }
#topNav ul li						{ float: left; margin: 0 0 0 10px; font: bold 10px/16px Helvetica, Arial, sans-serif; color: #fff; text-transform: uppercase; cursor: default; }
#topNav ul li a						{ transition: color .5s; -moz-transition: color .5s; -webkit-transition: color .5s; -o-transition: color .5s; }
#topNav ul li a.active				{ color: #fff; }
#topNav ul li a:hover				{ color: #fff; }
#topNav .dark li					{ color: #000; }
#topNav .dark li a:hover			{ color: #000; }

/* Main Menu */
#mainNav ul						{ position: absolute; right: 0; top: 100px; }
#mainNav ul li						{ float: left; margin: 0 0 0 35px; font: bold 18px/20px Helvetica, Arial, sans-serif; }
#mainNav ul li a					{ transition: color .5s; -moz-transition: color .5s; -webkit-transition: color .5s; -o-transition: color .5s; }
#mainNav ul li a:hover				{ color: #fff; }
#mainNav ul li a.active				{ color: #fff; cursor: default; }
#mainNav .dark li a:hover			{ color: #000; }
#mainNav .dark li a.active			{ color: #000; }

/* Footer */
.maskoverlay					{ display: none; }

footer							{ position: absolute; left:0; top: 989px; width: 875px; height: 74px; z-index:1000; clear:both; width:100%;}

footer .facebookBtn				{ position: absolute; left: -3px; top: 0; width: 86px; height: 74px; background: url('../images/sprites/btn_fbook.png') no-repeat 0 0; }
footer .facebookBtn a				{ position: absolute; top: 0; left: 0; display: block; width: 86px; height: 74px; background: url('../images/blank.gif') repeat 0 0; }
footer .facebookBtn a:active		{ background: url('../images/sprites/btn_fbook.png') repeat -172px 0; }

footer ul								{ position: absolute; left: 90px; top: 0px; }
footer ul li								{ float: left; margin: 0 15px 0 0; font: normal 10px/12px Helvetica, Arial, sans-serif; color: #939598; }
footer ul li a							{ color: #939598; transition: color .5s; -moz-transition: color .5s; -webkit-transition: color .5s; -o-transition: color .5s; }
footer ul li a:hover						{ color: #fff; }

footer p.loi-25 {
	position: absolute;
	left: 90px;
	top: 20px;
	font: normal 10px/12px Helvetica, Arial, sans-serif;
	line-height: 1.3em !important;
	color: #939598 !important;
	text-align: left !important;
	margin-right: 135px !important;
}

footer p.loi-25 a {
	color: #939598;
	text-decoration: underline;
	transition: color .5s;
}

footer p.loi-25 a:hover {
	color: #ffffff;
}

#engagement_page footer p.loi-25 a:hover {
	color: #000000;
}

.blanko								{ position: absolute; display: block; right: 12px; top:0px; font: normal 10px/12px Helvetica, Arial, sans-serif; color: #939598; font-weight: bold;
										transition: color .5s; -moz-transition: color .5s; -webkit-transition: color .5s; -o-transition: color .5s; }
.blanko:hover					{ color: #fff; }

#page							{ position:relative; margin:auto; width:100%; text-align:left; height: 1064px; }
#content						{ position:absolute; width:100%; }
#content section					{ position:absolute; float:left; width:100%; height: 1064px; z-index:50; z-index:900; }
#content article					{ position:relative; height: 845px; width: 875px; margin: 0 auto; padding: 220px 0 0 40px; }

#home_page						{ left:0; width:100% !important; }
#commitment_page				{ left:1500px; }
#services_page					{ left:3000px; }
#portfolio_page					{ left:4500px; }
#contact_page					{ left:6000px; }

#bg-layer						{ position:absolute; width:8000px; height: 1064px; left:0; top:0; z-index:10; overflow:hidden; background: url('../images/bg_layer.gif') repeat 0 39px; }
#bg-layer-shade					{ position:fixed; width:100%; height:667px; left:0; top:0; z-index:20; background: url('../images/backshade.png') repeat-x 0 0; }

/* -- LAYER #3: CONTENT -- */
.black							{ color: black; }
.yellow							{ color: #fff200; }

#content						{ position: relative; }
#content h1						{ font: normal 40px/44px Helvetica, Arial, sans-serif; color: #000; }
#content h2						{ margin: 0 0 10px 0; font: bold 40px/60px Helvetica, Arial, sans-serif; }
#content h3						{ margin: 0 0 10px 0; font: bold 60px/60px Helvetica, Arial, sans-serif; color: #fff; }
#content h4						{ font: normal 18px/18px Helvetica, Arial, sans-serif; color: #fff200; }
#content h5						{ margin: 0 0 10px 0; font: bold 18px/18px Helvetica, Arial, sans-serif; color: #fff;  }
#content p						{ margin: 0 0 35px 0; }

#segment-1,
#segment-2,
#segment-3,
#segment-4,
#segment-5 						{ position:absolute;height:1064px; }

#segment-1						{ width:4000px; left:0; z-index:80; }
.segment11						{ background: transparent url('../images/seg11.png') no-repeat 10000px 0; }
.segment12 						{ background: transparent url('../images/seg12.png') no-repeat 10000px 0; }
.segment13 						{ background: transparent url('../images/seg13.png') no-repeat 10000px 0; }

#segment-2 						{ width:4000px; left:1500px; background: url('../images/seg2.png') no-repeat 10000px 0; z-index:100 }
#segment-3						{ width:3400px; left:3000px; z-index:100; }
#segment-4						{ width:4000px; left:3950px; background: url('../images/seg4.png') no-repeat 10000px 0; z-index:100 }
#segment-5						{ width:2300px; left:5000px; z-index:100 }

#band1 							{ position:absolute; top:230px; left:0; 	  width:1439px; height:100%; z-index:90; }
#band2 							{ position:absolute; top:0; 	left:10000px; width:843px; height:479px; z-index:90; }
#champagne						{ position:absolute; top:132px; left:10000px; width:692px; height:932px; z-index:950; line-height:0; font-size:0; }
#band3 							{ position:absolute; top:480px; left:10000px; width:1974px; height:583px; z-index:90; line-height:0; font-size:0; }
#band4 							{ position:absolute; top:325px; left:10000px; width:2288px; height:584px; z-index:90; }

#nextbtn						{ position: fixed; right: 0; top: 50%; margin: -23px 0 0 0; width: 47px; height: 72px; background: url('../images/arrow.png') no-repeat -47px 0; z-index: 1000; }
#nextbtn:hover					{ background-position: -47px -72px; }
#prevbtn						{ position: fixed; display:none; left: 0; top: 50%; margin: -23px 0 0 0; width: 47px; height: 72px; background: url('../images/arrow.png') no-repeat 0 0; z-index: 1000; }
#prevbtn:hover					{ background-position: 0 -72px; }

.step							{ position: absolute; }
.fader							{ display: none; }

/* -- PAGE DEFINITION -- */
/* Home */
#band1 .step						{ display: none; }
#ruban1Step1					{ left: 0; top: 248px; }
#ruban1Step2					{ left: 42px; top: 248px; }
#ruban1Step3					{ left: 126px; top: 248px; }
#ruban1Step4					{ left: 210px; top: 248px; }
#ruban1Step5					{ left: 379px; top: 247px; }
#ruban1Step6					{ left: 546px; top: 101px; }
#ruban1Step7					{ left: 632px; top: 101px; }
#ruban1Step8					{ left: 716px; top: 98px; }
#ruban1Step9					{ left: 883px; top: 97px; }
#ruban1Step10					{ left: 884px; top: -48px; }
#ruban1Step11					{ left: 884px; top: -191px; }
#ruban1Step12					{ left: 944px; top: -230px; }

#facebookBox					{ position: relative; left: 515px; top: 285px; width: 245px; padding: 0 0 18px 0; text-align: right; }
#facebookBox #logoFbook			{ position: absolute; left: 152px; top: -28px; }
#facebookBox #fbLink				{ position: absolute; right: 3px; bottom: 35px; width: 15px; height: 9px; background: url('../images/sprites/arrow.png') no-repeat 0 0; }
#facebookBox #fbLink:hover		{ background-position: -15px 0; }
#facebookBox #fbLink:active		{ background-position: -30px 0;}

/* Engagement */
#commitment_page h2				{ color: #000; text-align: right; }
#commitment_page p				{ line-height: 20px; color: #000; text-align: right; }

/* Services */
#services_page article				{ height: 865px; padding-top: 200px; }

.box 							{ position: relative; float: left; width: 212px; margin: 0 40px 30px 0; font: bold 18px/20px Helvetica, Arial, sans-serif; color: #fff; }
.box a							{ position: absolute; display: block; top:0; left:0; width: 212px; background: url('../images/blank.gif') repeat 0 0; height:100%; }
.box .maskoverlay				{ position: absolute; display: none; left: 0; top: 0; width: 212px; height: 102px; font: bold 22px/102px Helvetica, Arial, sans-serif; color: #fff; text-align: center; }
.box .double						{ padding: 30px 0 0 0; height: 72px; line-height: 22px; }
.boxBtn							{ position: absolute; right:0; top: 0; display: block; width: 23px; height: 23px; background: url('../images/sprites/btn_box.gif') no-repeat 0 0; }
.box a:active .boxBtn 			{ background-position: 0 -23px; }

#services_page .box .maskoverlay		{ background: url('../images/services/overlay.png') repeat-x center 0; }
#services_page .box p					{ margin: 0 0 10px 0; }
#servicesWrapper				{ position: relative; }
.serviceDesc					{ position: absolute; left: 0; top: 0; display: none; width: 346px; min-height: 235px; padding: 45px 40px 40px 330px; color: #000; background: url('../images/bg_yellow.png') repeat 0 0; }
.serviceDesc .servicePicture		{ position: absolute; left: 40px; top: 45px; }
#services_page .serviceDesc h1		{ font: bold 26px/28px Helvetica, Arial, sans-serif; margin: 0 0 10px 0; }
#services_page .serviceDesc p			{ margin: 0 0 10px 0; }
.serviceDesc ul					{ list-style-type: disc; margin: 0 0 0 25px; }
.serviceDesc ul li					{ padding: 0 0 0 10px; }
.serviceDesc .closeBtn			{ position: absolute; top: 0; right: 0; width: 23px; height: 23px; background: url('../images/sprites/btn_close.jpg') no-repeat 0 0; }
.serviceDesc .closeBtn:hover		{ background-position: 0 -23px; }

.downbarrow						{ position: absolute; top: 240px; right: 0; display: block; width: 44px; height: 44px; background: url('../images/black-down.gif') no-repeat 0 0; }
.upbarrow						{ position: absolute; top: 570px; right: 0; display: block; width: 44px; height: 44px; background: url('../images/black-up.gif') no-repeat 0 0; }
.downwarrow						{ position: absolute; top: 240px; right: 40px; display: block; width: 44px; height: 44px; background: url('../images/white-down.gif') no-repeat 0 0; }
.upwarrow						{ position: absolute; top: 690px; right: 40px; display: block; width: 44px; height: 44px; background: url('../images/white-up.gif') no-repeat 0 0; }
.uparrow						{ display:none; }

/* Realisations */
#portfolio_page article						{ height: 885px; padding-top: 180px; }

#portfolio_page .box .maskoverlay			{ background: url('../images/realisations/overlay.png') repeat-x 0 0; font-size: 20px; }
#portfolio_page .box .ativeoverlay		{ display: none; position: absolute; left: 0; top: 0; width: 212px; height: 102px; background: url('../images/realisations/select.png') repeat 0 0; }
#portfolio_page .activebox .ativeoverlay	{ display: block; }
#portfolio_page .box						{ height: 102px; margin: 0 15px 15px 0;  }
#portfolio_page .box a					{ height: 102px; }

.realisationDesc				{ position: relative; width: 875px; height: 355px; color: #000; display:none; }
.realisationDesc .ctc			{ position: absolute; top: 0; left: 0; width: 875px; height: 355px; display:none; }
.cycle							{ float: left; width: 430px; height: 330px; margin: 0 30px 0 0; }
.cycleText						{ padding: 0 0 0 440px; }

#portfolio_page .cycleText h1	{ font: bold 24px/24px Helvetica, Arial, sans-serif; margin: 0 0 25px 0; }
#portfolio_page .cycleText h2	{ font: bold 12px/12px Helvetica, Arial, sans-serif; margin: 0; text-transform: uppercase; }
#portfolio_page .cycleText p		{ margin: 0 0 20px 0; }
.realisationDesc .closeBtn		{ position: absolute; top: 0; right: 0; width: 23px; height: 23px; background: url('../images/sprites/btn_close.jpg') no-repeat 0 0; }
.realisationDesc .closeBtn:hover	{ background-position: 0 -23px; }
.realisationDesc .nextBtn		{ position: absolute; top: 0; right: 33px; width: 23px; height: 23px; background: url('../images/sprites/btn_next.gif') no-repeat 0 0; }
.realisationDesc .nextBtn:hover	{ background-position: 0 -23px; }

/* Contact */
#contact p						{ margin-bottom: 25px; }
#phone							{ position: absolute; left: 40px; top: 360px; }

.contactBtn						{ position: relative; float: left; display: block; width: 164px; padding: 0 0 0 30px; margin: 0 20px 130px 0; font: bold 13px/30px Helvetica, Arial, sans-serif; color: #000; background: url('../images/sprites/btn_contact.jpg') no-repeat 0 0; }
.contactBtn:hover				{ background-position: 0 -30px; color: #fff200; }
.contactBtn:active				{ background-position: 0 -60px; }
.contactBtn span					{ position: absolute; left: 13px; top: 11px; display: block; width: 7px; height: 8px; background: url('../images/sprites/arrow_contact.png') no-repeat 0 0; }
.contactBtn:hover span			{ background-position: 0 -12px; }

.ID								{ float: left; width: 265px; }
.ID ul li							{ font-weight: bold; padding: 0 0 3px 15px; background: url('../images/sprites/arrow_contact.png') no-repeat 0 -20px; }
.ID ul li a							{ color: #fff; transition: color .5s; -moz-transition: color .5s; -webkit-transition: color .5s; -o-transition: color .5s; }
.ID ul li a:hover					{ color: #fff120; }

#infoContact					{ position: absolute; right: 112px; top: 330px; }
#infoContact a					{ color: #fff; transition: color .5s; -moz-transition: color .5s; -webkit-transition: color .5s; -o-transition: color .5s; }
#infoContact a:hover				{ color: #fff200; }

.clear:							{display:inline-block}
.clear:after					{content:".";display:block;height:0;clear:both;visibility:hidden}
* html .clear						{height:1%}
.clear							{display:block}