/* ---------------------------- */
/*	   Fonts	*/
/* ---------------------------- */
@font-face {
    font-family: 'din-blackregular';
    src: url('fonts/din/din-black-webfont.eot');
    src: url('fonts/din/din-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/din/din-black-webfont.woff') format('woff'),
         url('fonts/din/din-black-webfont.ttf') format('truetype'),
         url('fonts/din/din-black-webfont.svg#din-blackregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

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

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

@font-face {
    font-family: 'din_medium';
    src: url('fonts/din/ff_din_medium-webfont.eot');
    src: url('fonts/din/ff_din_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/din/ff_din_medium-webfont.woff2') format('woff2'),
         url('fonts/din/ff_din_medium-webfont.woff') format('woff'),
         url('fonts/din/ff_din_medium-webfont.ttf') format('truetype'),
         url('fonts/din/ff_din_medium-webfont.svg#dinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.light	 	{ font-family: "din_lightregular", Arial, Helvetica, sans-serif; font-weight: normal;}
.regular 	{ font-family: "din_lightalternateregular", Arial, Helvetica, sans-serif; font-weight: normal;}
.medium 	{ font-family: "din_medium", Arial, Helvetica, sans-serif; font-weight: normal;}
.bold	 	{ font-family: "dincond-boldregular", Arial, Helvetica, sans-serif; font-weight: normal;}

h1 { text-transform: uppercase;}

.content-text { max-width: 380px; background-color: rgba(255,255,255,1); -webkit-box-shadow: 4px 7px 38px rgba(0,0,0,.08); -moz-box-shadow: 4px 7px 38px rgba(0,0,0,.08); box-shadow: 4px 7px 38px rgba(0,0,0,.08); margin: 0 auto; clear: both; text-align: justify; color: #8a8a8a; padding: 20px; float: right;}

#formulaire { float: right; background-color: rgba(255,255,255,1); -webkit-box-shadow: 4px 7px 38px rgba(0,0,0,.08); -moz-box-shadow: 4px 7px 38px rgba(0,0,0,.08); box-shadow: 4px 7px 38px rgba(0,0,0,.08); margin: 0 auto; clear: both; text-align: center; color: #8a8a8a; padding: 20px; min-width: 380px;}
#formulaire h2 {  color: #8a8a8a; text-transform: uppercase; font-size: 23px;}
#formulaire h2 span { color: #ccd800;}

#form #submit { background: #ccd800; margin: 0 auto; text-transform: uppercase; font-weight: bold; font-size: 14px; margin: 1em auto;}

#form .input, textarea {
	-webkit-border-radius: 17px/17px 17px 18px 18px;
	-moz-border-radius: 17px/17px 17px 18px 18px;
	border-radius: 17px/17px 17px 18px 18px;
	background-color: #eee;
	border : none;
	padding: 10px 60px;
	margin: 1em auto;
	text-align: center;
	display: inline-block;
}

textarea { display: inline-block; width: 70%; padding: 10px;}

#form .clear { width: 100%; display: inline-block;}
#submit {
	background: url("images/btn-submit.png") top center no-repeat;
	width: 170px;
	height: 36px;
	font-family: "FuturaHv", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 20px;
	text-transform: inherit;
	text-shadow: 0 2px rgba(0,0,0,.1);
	border: none;
	color: #FFFFFF;
	margin: 0 0 0 0;
	padding: 2px 10px 60px 25px;
}

.step2 .preform h3 { margin: 85px 0 0 0; font-size: 40px; letter-spacing: 3px;}


#footer { text-align: center;}
#footer ul#subnav { margin: 0 auto;}
#footer ul#subnav li { margin: 5px 20px; display: inline;}
#footer ul#subnav li a { text-decoration: none; color: #7c7c7c; font-size: 11px; text-transform: uppercase;}
#footer p.mention { font-size: 11px; color: #a9a9a9; line-height: 13px; letter-spacing: -.2px; text-align: justify; margin: 3em 0 0 0; display: inline-block;}

/* ---------------------------- */
/*	   DEBUG	*/
/* ---------------------------- */
.debug { border: 1px dotted red;}

/* ---------------------------- */
/*	   Mise en page générale	*/
/* ---------------------------- */
body 			{ color: #333; background: #FFFFFF; background: url("images/bg.jpg") top center repeat-x;}
#content 		{ background: url("images/bg_woman.jpg") top center no-repeat;}
#wrapper		{ position:relative; width:770px; margin:0 auto 0 auto; z-index: 9999; padding: 40px 0px 0px; min-height: 600px;}
.container 		{ margin: 0 auto;}
#mobile 		{ display: none;}
.hide		 	{ display: none;}
.center 		{ text-align: center;}
.underline 		{ text-decoration: underline;}
.uppercase 		{ text-transform: uppercase;}
.clear 			{ clear: both;}
.align-right  	{ text-align: right !important;}
.transitions 	{ -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;}

.wrapper-container { width: 100%; margin: 0 auto; position: relative; z-index: 20;}

/* ---------------------------- */
/*	   Header	*/
/* ---------------------------- */
#header { width: 770px; padding: 70px 0 0 0; z-index: 9999; margin: 0 auto; position: relative; display: block;}
#header #logo { width: 421px; margin: 0; margin: 0 auto; float: right; overflow: hidden;}
#header #logo img { width: 421px; height: 77px; overflow: hidden;}
#header h1 { padding: 0; text-align: center; letter-spacing: 1.1px; font-size: 16px; text-transform: uppercase;}
#header h1 span { color : #ccd800;}

/* ---------------------------- */
/*	   LEFT	*/
/* ---------------------------- */


.input {
	background-color: transparent;
	vertical-align: middle;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	text-align: left;
	padding: 0 0 0 13px;
	margin: 0 0 0 0;
}

.mandatory { font-size: 11px; color: #3292c0; padding: 1em 0 0 0;}
.denied-message { text-align: center;}
.denied-message h2 { font-size: 20px !important; line-height: 20px; padding: 140px 0 0 20px; margin: 0 0 10px 0;}

.accessoires { position: absolute; right: -284px; top: 0;}

/* ---------------------------- */
/*	   Footer	*/
/* ---------------------------- */
#footer { width: 420px; margin: 10px auto 0 auto; clear: both; padding: 20px 0 0 0; z-index: 9000; float: right;}

/* ---------------------------- */
/*	   Erreurs	*/
/* ---------------------------- */
#errors { margin: 0 0 20px 0;}
#error-message-container { background: none; position:absolute; height:100%; width:100%; top:0; left: 0;}
#error-message { position:absolute; top:0; left:30%; background: rgba(186, 0, 0, .8); text-align:center; color:#FFF; padding: .5em 0; font-family:"FuturaHv",Arial,Helvetica,sans-serif; font-weight:400; font-size:13px; width:40%; -moz-box-shadow:0 0 25px #C0C0C0; -webkit-box-shadow:0 0 25px #C0C0C0; box-shadow:0 0 25px #C0C0C0; z-index: 9999;}
#error-message h2 { font-size: 26px; font-weight: normal;color: #FFFFFF !important; text-align: center;}
#error-message-mobile { padding: 5px; font-size: 13px; font-weight: bold; border: 1px dashed red; color: red; display: none; margin-bottom: 10px; text-align: center; clear: both;}
input.error { background: #ffd4d4; color: #FFFFFF !important;}
label.error { display: none !important;}


/* hack Chrome / Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.group { margin: 0 0 2px 0;}
	#right #form { width: 310px;}
}