@charset "UTF-8";
/* CSS Document */

body, div, h1,h2, form, fieldset, input, textarea, footer,p {
	margin: 0; padding: 0; border: 0; outline: none;
}

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

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

}

body{
	background:#444444;
	margin:0 auto;
	padding:0;
	color: #7c7873;
}

#container{
	width:100%;
	background:url(../images/background.png) no-repeat top left;
	margin:0 auto;
	overflow: hidden;
}

#screenBack{
	width:100%;
	margin:0 auto;
	overflow: hidden;
}
	

#header{
	height:500px;
	margin:0 auto;
}

#menu{
	position:absolute;
	width:306px;
	z-index:10;
	top:0;
	right:60px;
}

#btnMedia{
	float:left;
	margin:0 auto;
}

#btnMedia a{
	display:block;
	width:102px;
	height:130px;
	background:url(../images/btnMedia.png) no-repeat;
	background-position: 0px -72px;
}

#btnGraph{
	float:left;
	margin:0 auto;
}

#btnGraph a{
	display:block;
	width:102px;
	height:130px;
	background:url(../images/btnGraph.png) no-repeat;
	background-position: 0px -72px;
}

#btnIllu{
	float:left;
	margin:0 auto;
}

#btnIllu a{
	display:block;
	width:102px;
	height:130px;
	background:url(../images/btnIllu.png) no-repeat;
	background-position: 0px -72px;
}

#titleBlock{
	width:760px;
	height:250px;
	margin:0 auto;
	padding-top:130px;
	padding-right:40px;
}

#titleGraph{
	position:relative;
	height:150px;
	width:539px;
	display:block;
	float:right;
	z-index:1;
}

#titleIllu{
	position:relative;
	height:150px;
	width:538px;
	display:block;
	float:right;
	z-index:1;
}

#devisGraph{
	position:relative;
	bottom:-125px;
	left:440px;
	z-index:5;
	display:block;
	height:139px;
	width:312px;
}

#devisGraph a{
	display:block;
	height:139px;
	width:312px;
	background:url(../images/devisGraph.png) no-repeat top left;
}

#devisGraph a:hover{
	background-position:bottom left;
}

#devisIllu{
	position:relative;
	bottom:-125px;
	left:400px;
	z-index:5;
	display:block;
	height:141px;
	width:350px;
}

#devisIllu a{
	display:block;
	height:141px;
	width:350px;
	background:url(../images/devisIllu.png) no-repeat top left;
}

#devisIllu a:hover{
	background-position:bottom left;
}

#devisMedia{
	position:relative;
	bottom:-125px;
	left:361px;
	z-index:5;
	display:block;
	height:143px;
	width:388px;
}

#devisMedia a{
	display:block;
	height:143px;
	width:388px;
	background:url(../images/devisMedia.png) no-repeat top left;
}

#devisMedia a:hover{
	background-position:bottom left;
}

#content{
	margin:0 auto;
	width:800px;
}

#block{
	display:block;
	height:500px;
	margin:0 auto 100px;
}

#colonLeft{
	width:345px;
	float:left;
	text-align:center;
	height:100%;
}

#mainImage{
	margin:0 auto;
	width:345px;
	height:483px;
}

#colonRight{
	width:435px;
	float:right;
	text-align:center;
	height:100%;
}

#titleProject{
	margin:0 auto;
	width:434px;
	height:88px;
	text-align:center;
}

#textProject{
	margin:30px 55px 40px 45px;
	width:335px;
}

#textProject p{
	text-align:justify;
	font-family:'ExoThin', Arial, sans-serif;
	line-height:15px;
	font-size:11px;
	color:#e3e2de;
	letter-spacing:1.5px;
}

#lineOne{
	margin:0 auto 15px;
	width:390px;
	height:120px;
}

#image1{
	margin:0 15px 0 0;
	width:120px;
	height:120px;
	float:left;
	background:#888;
}

#image2{
	margin:0 15px 0 0;
	width:120px;
	height:120px;
	float:left;
	background:#888;
}

#image3{
	margin:0;
	width:120px;
	height:120px;
	float:left;
	background:#888;
}

#lineTwo{
	margin:0 auto;
	width:390px;
	height:120px;
}

#image4{
	margin:0 15px 0 0;
	width:120px;
	height:120px;
	float:left;
	background:#888;
}

#image5{
	margin:0 15px 0 0;
	width:120px;
	height:120px;
	float:left;
	background:#888;
}

#image6{
	margin:0;
	width:120px;
	height:120px;
	float:left;
	background:#888;
}

.buyIllu a{
	display: block;
	height: 120px;
	width: 120px;
	background: url('../images/btnBuyIllu.jpg') no-repeat left top;
}

.buyIllu a:hover{
	background-position: left bottom;
}

.wwwIllu a{
	display: block;
	height: 120px;
	width: 120px;
	background: url('../images/btnWwwIllu.jpg') no-repeat left top;
}

.wwwIllu a:hover{
	background-position: left bottom;
}

.buyGraph a{
	display: block;
	height: 120px;
	width: 120px;
	background: url('../images/btnBuyGraph.jpg') no-repeat left top;
}

.buyGraph a:hover{
	background-position: left bottom;
}

.wwwGraph a{
	display: block;
	height: 120px;
	width: 120px;
	background: url('../images/btnWwwGraph.jpg') no-repeat left top;
}

.wwwGraph a:hover{
	background-position: left bottom;
}

.buyMedia a{
	display: block;
	height: 120px;
	width: 120px;
	background: url('../images/btnBuyMedia.jpg') no-repeat left top;
}

.buyMedia a:hover{
	background-position: left bottom;
}

.wwwMedia a{
	display: block;
	height: 120px;
	width: 120px;
	background: url('../images/btnWwwMedia.jpg') no-repeat left top;
}

.wwwMedia a:hover{
	background-position: left bottom;
}

#footer{
	padding-top:100px;
	height:800px;
	background:url(../images/footBack.png) no-repeat bottom right;
}

#devisEnd{
	display:block;
	height:50px;
}

p {text-shadow:0 1px 0 #fff; font-size:24px;}
#wrap {width:530px; margin:20px auto 0; height:700px; font-family: 'YanoneKaffeesatzRegular';}
h1 {margin-bottom:20px; text-align:center;font-size:48px; text-shadow:0 1px 0 #ede8d9; }


	#form_wrap { overflow:hidden; height:446px; position:relative; top:0px;
		-webkit-transition: all 1s ease-in-out .3s;
		-moz-transition: all 1s ease-in-out .3s;
		-o-transition: all 1s ease-in-out .3s;
		transition: all 1s ease-in-out .3s;}
	
	#form_wrap:before {content:"";
		position:absolute;
		bottom:128px;left:0px;
		background:url('../images/before.png');
		width:530px;height: 316px;}
	
	#form_wrap:after {content:"";position:absolute;
		bottom:0px;left:0;
		background:url('../images/after.png');
		width:530px;height: 260px; }

	#form_wrap.hide:after, #form_wrap.hide:before {display:none; }
	#form_wrap:hover {height:776px;top:-200px;}


	form {background:#f7f2ec url('../images/letter_bg.png'); 
		position:relative;top:200px;overflow:hidden;
		height:200px;width:400px;margin:0px auto;padding:20px; 
		border: 1px solid #fff;
		border-radius: 3px; 
		-moz-border-radius: 3px; -webkit-border-radius: 3px;
		box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
		-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
		-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
		-webkit-transition: all 1s ease-in-out .3s;
		-moz-transition: all 1s ease-in-out .3s;
		-o-transition: all 1s ease-in-out .3s;
		transition: all 1s ease-in-out .3s;}


		#form_wrap:hover form {height:530px;}

		label {
			margin: 11px 20px 0 0; 
			font-size: 16px; color: #b3aba1;
			text-transform: uppercase; 
			text-shadow: 0px 1px 0px #fff;
		}

		input[type=text], textarea {
			font: 14px normal normal uppercase helvetica, arial, serif;
			color: #7c7873;background:none;
			width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
			border:1px solid #f8f5f1;
			-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
			-moz-box-shadow: inset 0px 0px 1px #726959;
			-webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
			box-shadow:  inset 0px 0px 1px #b3a895;
		}	

		textarea { height: 80px; padding-top:14px;}

		textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.35);}

		#form_wrap input[type=submit] {
			position:relative;font-family: 'YanoneKaffeesatzRegular'; 
			font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff;
			width:100%; text-align:center;opacity:0;
			background:none;
			cursor: pointer;
			-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 
			-webkit-transition: opacity .6s ease-in-out 0s;
			-moz-transition: opacity .6s ease-in-out 0s;
			-o-transition: opacity .6s ease-in-out 0s;
			transition: opacity .6s ease-in-out 0s;
		}

		#form_wrap:hover input[type=submit] {z-index:1;opacity:1;
			-webkit-transition: opacity .5s ease-in-out 1.3s;
			-moz-transition: opacity .5s ease-in-out 1.3s;
			-o-transition: opacity .5s ease-in-out 1.3s;
			transition: opacity .5s ease-in-out 1.3s;}

			#form_wrap:hover input:hover[type=submit] {color:#435c70;}






/*-- Design Ecran --*/


@media screen and (min-width:1024px) {
	
	#container{background-attachment:fixed;}
	#footer{background:none;}
	#screenBack{background:url(../images/footBack.png) no-repeat bottom right;background-attachment:fixed;}
	#menu{position:fixed;}
	
	
}