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

@import url(http://fonts.googleapis.com/css?family=Ultra);
/* font-family: 'Ultra', serif; */

@import url(http://fonts.googleapis.com/css?family=Volkhov);
/* font-family: 'Volkhov', serif; */

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
/* font-family: 'Pathway Gothic One', sans-serif; */

*{margin:0; padding:0; border:none;}
a{text-decoration:none;}
.content{max-width:1024px; margin:0 auto; position:relative;}

/*html {-webkit-text-stroke: 0.25px;} /* Chrome font fix */

body{
	width:100%; height:auto;
	margin:0 auto;
	font-size:18px; color:#fff;
}

h1{
	font-family: 'Ultra', serif;
	font-size:5.5em; text-transform:uppercase; font-weight:400;
	line-height:100%; letter-spacing:7px;
	text-shadow: 0px 3px 4px #000000;
	filter: dropshadow(color=#000000, offx=0, offy=3);
}
h1 img{margin-bottom:-15px;}

h3{	
	font-family: 'Volkhov', serif;
	font-size:30px; text-transform:uppercase;
	font-weight:400; letter-spacing:2px;
	text-shadow: 0px 2px 4px #000000;
	filter: dropshadow(color=#000000, offx=0, offy=2);
	margin-top:10px;
}
h4{
	font-family: 'Ultra', serif;
	font-size:1.8em; font-weight:400;
	text-transform:uppercase;
}
p{
	font-family: 'Volkhov', serif;
	font-size:1em; font-weight:400;
	margin-bottom:30px; text-align:center;
	line-height:32px;
}

.erreur{ border:#F00 solid 1px;}
	
header{width:100%; height:620px; margin-top:0; padding-top:20px; margin-bottom:-40px; z-index:1; position:relative;}
nav{
	background:url(../_img/back-menu.png) top repeat-x;
	 width:100%; height:209px;
	 margin:auto; text-align:center;
	 
}

nav ul{margin:auto; vertical-align:top;}
nav ul li{
	font-family: 'Pathway Gothic One', sans-serif;
	font-size: 1.9em; color:#fff;
	margin:35px 20px 0;
	text-transform:uppercase;
	display: inline-block;
	*display: inline;
	zoom: 1; vertical-align:top;
	padding-top:5px;
}
nav ul li a{color:#fff;}
nav ul li a:hover{border-bottom:solid #fff 1px;}
nav ul li.logo a:hover{border:none;}

nav ul li img{margin-top:-50px; vertical-align:text-top;}
nav ul li.lang{padding-top:2px !important; margin-left:0;}
nav ul li.lang a{
	background:url(../_img/lang.png);
	background-position:0 0;
	width:45px; height:37px;
	display:block;
	font-size:.7em; padding-top:8px; color:#222;
}
nav ul li.lang a:hover{background-position:0 -53px; border-bottom:none !important;}
#home.content{text-align:center;}
section{margin-bottom:-20px;}
.rotator{position:fixed; top:0; left:0; z-index:0;text-align:center; padding-bottom:40px; height:696px; width:100%;}


section#apropos{
	background:url(../_img/back-apropos-v3.png) top repeat;
	width:100%; min-height:300px;
	padding:60px 0 20px;
	position:relative; z-index:2;
}
#apropos .banner, #apropos .banner:after{width:195px;}
#apropos .title{width:290px;}
#apropos h2{ color:#222222;}
#apropos p{margin-bottom:15px;}

section#portefolio{
	background:url(../_img/back-portefolio.png) top repeat;
	width:100%; min-height:400px;
	padding:60px 0 16px;
	position:relative; z-index:3;
	

	
}
#portefolio .content {max-width:1200px;}
#portefolio .banner, #portefolio .banner:after{width:260px;}
#en #portefolio .banner, #en #portefolio .banner:after{width:220px;}
#portefolio .title{width:360px;}
#portefolio h2{ color:#354050;}

#portefolio ul{margin:auto; text-align:center; margin:10px 0 30px;}
#portefolio ul li{
	font-family: 'Pathway Gothic One', sans-serif;
	font-size:1.7em; color:#fff; text-transform:uppercase;
	margin:0 20px;
	display: inline-block;
	*display: inline;
	zoom: 1;
}
#portefolio ul li a{color:#fff;}
#portefolio ul li:first-child{margin-left:0;}
#portefolio ul li:last-child{margin-right:0;}
#portefolio ul.foliolinks a:hover{border-bottom:solid #fff 1px;}
.thumb{
	position:relative;
	width:135px; height:136px;
	display: inline-block;
	*display: inline;
	zoom: 1;
	border:solid #fff 10px;
	-webkit-box-shadow:  0px 0px 4px 3px rgba(0, 0, 0, 0.7);
	box-shadow:  0px 0px 4px 3px rgba(0, 0, 0, 0.7);
	margin:3px;
}
.thumb .photo{
	background:url(../_img/thumb_empty.png) top no-repeat;
	position:absolute; top:0; left:0;
	width:135px; height:136px;
	z-index:2px;
}
.thumb .photo img{width:135px;}
/*.thumbs  a:nth-child(6n+1) .thumb{ margin-left:0;}
.thumbs a:nth-child(6n+6) .thumb{ margin-right:0;}*/


section#services{
	background:url(../_img/back-services.jpg) top repeat;
	width:100%; min-height:300px;
	padding:40px 0 40px;
	border-top: solid #000 2px;
	-webkit-box-shadow:  0px -5px 5px 5px rgba(0, 0, 0, 0.5);
        box-shadow:  0px -5px 5px 5px rgba(0, 0, 0, 0.5);
		position:relative; z-index:4;
}

#services .banner, #services .banner:after{width:270px;}
#services .title{width:360px;}
#services h2{ color:#303236;}

#services img{
	border:solid #fff 10px;
	-webkit-box-shadow:  0px 0px 4px 3px rgba(0, 0, 0, 0.7);
	box-shadow:  0px 0px 4px 3px rgba(0, 0, 0, 0.7);
	float:left; margin-right:40px;
}
#services h4{margin-top:-10px;}


#services ul li{
	font-family: 'Volkhov', serif;
	font-size:1em; text-transform:uppercase;
	margin-top:22px; padding-left:20px;
	list-style:inside; line-height:15px;
}

#services ul li a{color:#FFF;}
#services ul li a:hover{color:rgba(255,255,255,.5);}

.services{width:910px; margin:auto;}
#services p{max-width:800px; margin:auto; margin-bottom:30px;}

section#contact{
	background:url(../_img/back-contact.png) top no-repeat;
	width:100%; min-height:300px;
	padding:60px 0 80px;
	position:relative; z-index:5;
}

#contact .banner, #contact .banner:after{width:175px;}
#contact .title{width:265px;}
#contact h2{ color:#303236;}
#contact h4.form{margin:-9px 0 12px;}
#contact h4 img{vertical-align:middle;}
#contact h4 img:first-child{margin-right:20px;}
#contact h4 img:last-child{margin-left:20px;}

#contact #sent{display:none;}
.map{
	position:relative;
	width:482px; height:392px;
	border:solid #fff 10px;
}
.map .photo{
	position:absolute; top:0; left:0;
	background:url(../_img/map.jpg) top no-repeat;
	width:100%; height:100%;
}
.map .icon{
	position:absolute; top:98px; left:254px;
	width:50px; height:150px;
}
	
.map .txt{
	font-family: 'Ultra', serif;
	position:absolute; left:0; bottom:0;
	width:100%; height:auto;
	background-color: rgba(0, 0, 0, 0.7);    
        color: rgba(0, 0, 0, 0.7);
	padding:10px 0;
	text-align:center;
}
.map .txt p{margin:0;}
input{
	font-family: 'Volkhov', serif; font-size:1em; color:#fff;
	background:url(../_img/denim-noir.png) top repeat;
	height:50px;
	margin:5px 0; padding:0 10px;
	border:solid #000 1px;
	-webkit-box-shadow:  0px 0px 2px 1px rgba(255, 255, 255, 0.1);
    box-shadow:  0px 0px 2px 1px rgba(255, 255, 255, 0.1);
}
.bouton{
	background:#fff;
	font-family: 'Ultra', serif; color:#303236;
	font-size:1.4em;
	height:42px;border:none;
	text-transform:uppercase;
	width:505px; letter-spacing:1px;

}
.bouton:hover{background:#000; color:#fff;}

textarea{
	font-family: 'Volkhov', serif; font-size:1em; color:#fff;
	background:url(../_img/denim-noir.png) top repeat;
	width:482px; height:140px;
	margin-top:5px; padding:10px;
	border:solid #000 1px;
	-webkit-box-shadow:  0px 0px 2px 1px rgba(255, 255, 255, 0.1);
        box-shadow:  0px 0px 2px 1px rgba(255, 255, 255, 0.1);
}

footer{
	background:url(../_img/back-bottom.png) top repeat-x;
	width:100%; height:91px;
	text-align:center;
	border-top: solid #000 0px;
	-webkit-box-shadow:  0px -5px 5px 5px rgba(0, 0, 0, 0.5);
        box-shadow:  0px -5px 5px 5px rgba(0, 0, 0, 0.5);
		position:relative; z-index:6;
}
footer img{margin-top:30px;}


/* *** banner *** */
.title{height:80px; position:relative; margin:auto; margin-top:20px;}
.banner {
   position: absolute;
   height: 0px;
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 60px solid white;
}
.banner:after {
   content:"";
   position: absolute;
   height: 0px; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 60px solid white;
   margin: 0 0 0 -50px;
}
h2{ 
	position:absolute; left:0; top:10px;
	font-family: 'Ultra', serif; font-size:1.7em;
	font-weight:400;text-transform:uppercase;
	vertical-align:middle;
	z-index:4;
	-webkit-text-stroke: 0.25px;
}

.antispam { display:none;}

@media screen and (max-width: 1680px){
nav .right .simpleright{display:none;}
nav .right .simpleleft{display:none;}

#services section ul li div{top:10%}
#services section ul.insta li div{top:8%}
/*#services h2{ font-size:3.1em;}*/

}

@media screen and (max-width: 1520px){
nav .logo{max-width:50%; margin-bottom:12px;}
nav .right ul li{
	font-size:1.6em;
	margin:43px 10px 0;
}
/*#services h2{ font-size:2.9em;}*/
#services section ul li div p{font-size:.9em;}
}

@media screen and (max-width: 1400px){
	body{ font-size:17px;}
	nav .left{
	width:600px;
}
	.doubleleft{display:none;}
	/*nav .logo{margin-bottom:19px; margin-left:-30px;}*/
	footer .partners span{display:block;}
	
	#apropos .logo{ max-width:40%;}
	nav .right ul li{
	font-size:1.8em;
	margin:45px 10px 0;
}
}

@media screen and (max-width: 1280px){
	/*nav .right ul li{font-size:1.7em;}*/
	nav ul li{font-size:1.4em; margin:35px 12px;}
	nav ul li.lang a{
	background-position:0 -4px;
	font-size:1em; padding-top:4px;
	}
	nav ul li.lang a:hover{	background-position:0 -57px;}
	
	#services section ul li{
	clear:both;
	width:100%;
	}
	#services section ul li.text{
	width:100%;
	}
	#services section ul li{
	width:100%;
	}
	/*#services h2{font-size:4em;}*/
	#services section ul li div p{
		font-size:1.17em;
		line-height:1.6em;
	}
	
	#apropos section ul li{
	width:42%;
	padding:0 2% 5%;
}
}

@media screen and (max-width: 1140px){
	nav .left{width:550px; margin-right:-120px;}
	/*nav .logo{margin-bottom:29px; margin-left:-80px;}*/
	nav .right ul li{
	font-size:1.4em;
	margin:47px 8px 0;
}
	/*#services h2{font-size:3.3em;}*/
	#services section ul li div p{
		font-size:1.17em;
		line-height:1.6em;
	}
	#services section ul li div{top:6%}
	#services section ul.insta li div{
	top:3%
}

}