/*font face*/
@font-face {
	font-family: 'IstokWebRegular';
	src: url('../fonts/Istock/IstokWeb-Regular-webfont.eot');
	src: url('../fonts/Istock/IstokWeb-Regular-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/Istock/IstokWeb-Regular-webfont.woff') format('woff'),  url('../fonts/Istock/IstokWeb-Regular-webfont.ttf') format('truetype'),  url('../fonts/Istock/IstokWeb-Regular-webfont.svg#IstokWebRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'IstokWebItalic';
	src: url('../fonts/Istock/IstokWeb-Italic-webfont.eot');
	src: url('../fonts/Istock/IstokWeb-Italic-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/Istock/IstokWeb-Italic-webfont.woff') format('woff'),  url('../fonts/Istock/IstokWeb-Italic-webfont.ttf') format('truetype'),  url('../fonts/Istock/IstokWeb-Italic-webfont.svg#IstokWebItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'IstokWebBold';
	src: url('../fonts/Istock/IstokWeb-Bold-webfont.eot');
	src: url('../fonts/Istock/IstokWeb-Bold-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/Istock/IstokWeb-Bold-webfont.woff') format('woff'),  url('../fonts/Istock/IstokWeb-Bold-webfont.ttf') format('truetype'),  url('../fonts/Istock/IstokWeb-Bold-webfont.svg#IstokWebBold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'IstokWebBoldItalic';
	src: url('../fonts/Istock/IstokWeb-BoldItalic-webfont.eot');
	src: url('../fonts/Istock/IstokWeb-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/Istock/IstokWeb-BoldItalic-webfont.woff') format('woff'),  url('../fonts/Istock/IstokWeb-BoldItalic-webfont.ttf') format('truetype'),  url('../fonts/Istock/IstokWeb-BoldItalic-webfont.svg#IstokWebBoldItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'AeroMaticsStencilBold';
    src: url('../fonts/aero-matics/aero_matics_stencil_bold-webfont.eot');
    src: url('../fonts/aero-matics/aero_matics_stencil_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aero-matics/aero_matics_stencil_bold-webfont.woff') format('woff'),
         url('../fonts/aero-matics/aero_matics_stencil_bold-webfont.ttf') format('truetype'),
         url('../fonts/aero-matics/aero_matics_stencil_bold-webfont.svg#AeroMaticsStencilBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GemFontOneRegular';
    src: url('../fonts/gem-font-one/gemfont_one-webfont.eot');
    src: url('../fonts/gem-font-one/gemfont_one-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gem-font-one/gemfont_one-webfont.woff') format('woff'),
         url('../fonts/gem-font-one/gemfont_one-webfont.ttf') format('truetype'),
         url('../fonts/gem-font-one/gemfont_one-webfont.svg#GemFontOneRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*---end font face---*/
* {
	outline:0;
}
body {
	position:relative;
	font-family:IstokWebRegular, Arial, Helvetica, sans-serif;
	font-size:100%;
	line-height:140%;
	color:#fff;
	background: url(../images/header-bg.gif) repeat-x 0 0 scroll #D80A05;
}
h1, h2, h3 {
	border:1px solid transparent;
	text-transform:uppercase;
}
h1, h2 {
	font-family:AeroMaticsStencilBold,Arial, Helvetica, sans-serif;
	font-weight:bold;
}
h1 {
	font-size:3.3em; /*50px*/
	text-align:center;
}
h2 {
	font-size:2.15em;/*30px*/
	text-align:center;
}
h3 > a {
	text-decoration:none;
	color:#fff;
}
h3 > a:hover {
	text-decoration:underline;
}
p {
	margin:15px 0;
	border:1px solid transparent;
}
ul li {
	list-style-type:none;
}
a {
	color:#fff;
	}
a:hover{
	text-decoration:underline;
	color:#000;
	}
em {
	font-family:IstokWebItalic, Arial, Helvetica, sans-serif;
	font-style:normal;
	/*text-decoration:underline;*/
}
strong {
	color:#000;
}
img {
	border:10px solid #FFF;
}
#wrapper {
	width:960px;
	margin:0 auto 20px;
}
/**************************************
				HEADER
**************************************/
header {
	position:relative;
	height:170px;
	background: url(../images/fleche-droite.png) repeat-x 0 50px scroll;
	border:1px solid transparent;
}
header h1 {
	margin:10px 0 0 10px;
	font-size:3.21em;/*45px*/
	text-align:left;
	word-spacing:15px;
	border:1px solid transparent;
}
header h2  {
	position:absolute;
	left:10px;
	bottom:40px;
	font-size:3.21em;
	word-spacing:15px;
	}
header h2 > strong {
	color:#fff;
	}
nav {
	position:absolute;
	right:10px;
	bottom:30px;
	font-family:GemFontOneRegular, Arial, Helvetica, sans-serif;
	font-size:1.14em;
}
nav ul li {
	float:left;
	height:60px;
	line-height:100px;
}
nav ul li+li {
	margin:0 0 0 30px;
}
nav ul li:nth-child(n) a {
	background: url(../images/home-sprite.png) no-repeat 6px 0 scroll;
}
nav ul li:nth-child(2n) a{
	background: url(../images/portfolio-sprite.png) no-repeat 12px 0 scroll;
}
nav ul li:nth-child(3n) a{
	background: url(../images/contact-sprite.png) no-repeat 6px 5px scroll;
}
nav ul li:nth-child(n) a:hover, nav ul li:nth-child(n) a.active {
	background: url(../images/home-sprite.png) no-repeat -52px 0 scroll;	
}
nav ul li:nth-child(2n) a:hover, nav ul li:nth-child(2n) a.active {
	background: url(../images/portfolio-sprite.png) no-repeat -48px 0 scroll;
}
nav ul li:nth-child(3n) a:hover, nav ul li:nth-child(3n) a.active {
	background: url(../images/contact-sprite.png) no-repeat -51px 5px scroll;
}
nav ul li a {
	height:inherit;
	display:block;
	color:#fff;
	text-decoration:none;
}
nav ul li a:hover, nav ul li a.active {
	color:#000;
	text-decoration:none;
}
/**************************************
				CONTENT
**************************************/
section {
	overflow:hidden;
	/*width:620px;*/
	/*margin:20px auto;*/
	/*padding:20px 170px 0;*/
	background-image: url(../images/fleche-bas.png), url(../images/fleche-bas.png);
	background-repeat: repeat-y, repeat-y;
	background-position: 5% 0,95% 0;
	background-attachment:scroll;
}
section > p, section > h1, #slides, #site-liste, #contact-form{
	width:64%;
	margin-left:auto;
	margin-right:auto;
	}
section h1 {
	margin-top:30px;
	margin-bottom:30px;
	}
section p {
	font-size:90%;
	}
/*****Portfolio******/

#site-liste {
	margin-top:50px;
	}
#site-liste li {
	margin-bottom:30px;
	text-align:center;
}
#site-liste li > h2 {
	margin:15px auto;
	font-size:1.3em;
	text-align:left;
	}
#site-liste li > a{
	display:inline-block;
	width:auto;
	height:auto;
	}
#site-liste li > p {
	width:85%;
	margin:10px auto 20px auto;
	text-align:left;
	}
#portfolio img:hover {
	border:10px solid #000;
	}
/****Contact*****/
#contact  a.email{
	display:inline-block;
	width:275px;
	height:35px;
	margin:0 0 0 20px;
	background:#298962;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: #fff 4px -3px 1px;
	box-shadow: #fff 4px -3px 1px;
	behavior: url(/PIE.htc);
	font-family:IstokWebBold,Arial, Helvetica, sans-serif;
	font-size:110%;
	line-height:35px;
	text-indent:35px;
	color:#fff;
	}
.borderradius #contact a.email {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	behavior: url(/PIE.htc);
	}
#contact  a.email:hover {
	color:#000;
	}
#contact  a.email:active {
	background:#277A62;
	-webkit-box-shadow: #000 4px -3px 1px;
	-moz-box-shadow: #000 4px -3px 1px;
	box-shadow: #000 4px -3px 1px;
	behavior: url(/PIE.htc);
	color:#000;
	}
/*Formulaire de contact*/
#contact-form fieldset {
	float:left;
	width:50%;
	}
#contact-form fieldset:nth-child(2) > p {
	float:right;
	}
#contact-form fieldset > legend{
	display:none;
	}
#contact-form fieldset > p {
	width:210px;
	}
#contact-form label{
	display:block;
	margin:0 0 10px 0;
	font-family:AeroMaticsStencilBold, Arial, Helvetica, sans-serif;
	font-size:1.2em;
	text-transform:uppercase;
	}
#contact-form input,#contact-form textarea {	
	width:inherit;
	padding:0 5px;
	border:none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: #000 4px -3px 1px;
	-moz-box-shadow: #000 4px -3px 1px;
	box-shadow: #000 4px -3px 1px;
	behavior: url(/PIE.htc);
	color: #999;
}
.borderradius #contact-form input, .borderradius #contact-form textarea{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	behavior: url(/PIE.htc);
	}
#contact-form input {
	height:25px;
	}
#contact-form textarea {
	padding:5px;
	resize:none;
	}
#contact-form > p {
	clear:both;
	text-align:center;
	}
#contact-form input[type=submit] {
	width:150px;
	height:40px;
	background:#298962;
	-webkit-box-shadow: #fff 4px -3px 1px;
	-moz-box-shadow: #fff 4px -3px 1px;
	box-shadow: #fff 4px -3px 1px;
	behavior: url(/PIE.htc);
	font-family:AeroMaticsStencilBold, Arial, Helvetica, sans-serif;
	font-size:1.25em;
	text-transform:uppercase;
	line-height:40px;
	color:#fff;
	}
#contact-form input[type=submit]:hover {
	color:#000;
	}
#contact-form input[type=submit]:active {
	background:#277A62;
	-webkit-box-shadow: #000 4px -3px 1px;
	-moz-box-shadow: #000 4px -3px 1px;
	box-shadow: #000 4px -3px 1px;
	behavior: url(/PIE.htc);
	color:#000;
	}
#contact .alert {
	font-family:IstokWebBoldItalic, Arial, Helvetica, sans-serif;
	color:#000;
	}
#contact .empty-field {
	background: #FD5757;
	}
/*page 404*/
#erreur-404 header {
	background-position:0 85px;
	}
#erreur-404 header > h1{
	margin:30px auto 150px;
	font-size:6em;
	text-align:center;
	word-spacing:15px;
	}
#erreur-404 section {
	margin:0 auto;
	min-height:300px;	
	font-family:AeroMaticsStencilBold,Arial, Helvetica, sans-serif;
	font-size:2.6em;
	}
#erreur-404 section p {
	margin:50px auto 100px;
	}
#erreur-404 section  a {
	display:block;
	width:350px;
	height:50px;
	margin:0 auto;
	background:#298962;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: #fff 4px -3px 1px;
	box-shadow: #fff 4px -3px 1px;
	behavior: url(/PIE.htc);
	font-size:0.6em;
	text-decoration:none;
	text-align:center;
	line-height:50px;	
	}
#erreur-404 section a:hover {
	color:#000;
	text-decoration:underline;
	}
#erreur-404 section a:active {
	background:#277A62;
	-webkit-box-shadow: #000 4px -3px 1px;
	-moz-box-shadow: #000 4px -3px 1px;
	box-shadow: #000 4px -3px 1px;
	behavior: url(/PIE.htc);
	color:#000;
	}
/*construction*/
#construction header {
	background-position:0 85px;
	}
#construction header > h1 {
	margin:30px auto 150px;
	font-size:6em;
	text-align:center;
	word-spacing:15px;
	}
#construction section {
	height:310px;
	font-family:AeroMaticsStencilBold,Arial, Helvetica, sans-serif;
	font-size:2.6em;	
	}
#construction section p {
	margin:50px auto;
	}
/**************************************
				FOOTER
**************************************/
footer {
	position:relative;
	min-height:130px;
	height:300px;
	font-family:GemFontOneRegular, Arial, Helvetica, sans-serif;
	text-align:center;
	border-top:20px solid #fff;
	border-bottom:1px solid #298962;
	background:#298962;
}
footer p {
	margin:40px 0 0 0;
	border:1px solid transparent;
	font-size:0.86em;/*12px*/
}
footer ul {
	position:absolute;
	/*width:100px;*/
	top:40px;
	left:75%;
}
footer ul li {
	float:left;
	width:40px;
	height:37px;
}
footer ul li+li {
	margin-left:20px;
}
footer ul li:nth-child(3) {
	background:none;
	}
footer ul li:nth-child(1) {
	/*background: url(../images/linkedin.png) no-repeat center 0 scroll;*/
	background: url(../images/linkedin-sprite.png) no-repeat center top scroll;
}
footer ul li:nth-child(2) {
	/*background: url(../images/twitter.png) no-repeat center 0 scroll;*/
	background: url(../images/twitter-sprite.png) no-repeat center top scroll;
}
footer ul li:nth-child(1):hover {
	/*background: url(../images/linkedin-hover.png) no-repeat center 0 scroll;*/
	background: url(../images/linkedin-sprite.png) no-repeat center bottom scroll;
}
footer ul li:nth-child(2):hover {
	/*background: url(../images/twitter-hover.png) no-repeat center 0 scroll;*/
	background: url(../images/twitter-sprite.png) no-repeat center bottom scroll;
}
footer ul li a {
	display:block;
	width:inherit;
	height:inherit;
	text-indent:-99999px;
}
/**************************************
				SLIDER
**************************************/
.js #slides {
	display:block;
	}
#slides {
	display:none;
	position:relative;
	margin-top:10px;
	}
#slides img {
	border:none;
	}
.slides_container {
	width:500px;
	height:240px;
	margin:0 auto;
	border:10px solid #fff;
	}
.slides_container div {
	width:500px;
	height:240px;
	display:block;
}
a.prev, a.next {
	display:block;
	position:absolute;
	top:120px;
	width:30px;
	height:40px;
	text-indent:-9999px;
	}
a.prev {
	left:0;
	/*background:url(../images/previous.png) no-repeat 0 0 scroll;*/
	background:url('../images/next-prev-sprite.png') no-repeat 0 top scroll;
	}	
a.next {
	right:0;
	/*background:url(../images/next.png) no-repeat 0 0 scroll;*/
	background:url('../images/next-prev-sprite.png') no-repeat 0 bottom scroll;
	}
ul.pagination {
	width:170px;
	height:20px;
	margin:10px auto;
	}
.pagination li {
	float:left;
	width:20px;
	height:20px;
	background:#fff;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	behavior: url(/PIE.htc);
	}
.borderradius .pagination li {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	behavior: url(/PIE.htc);
	}
.pagination li+li {
	margin:0 0 0 10px;
	}
.pagination li > a {
	display:inline-block;
	width:inherit;
	height:inherit;
	text-indent:-9999px;
	}
.pagination li.current {
	width:12px;
	height:12px;
	background:#298962;
	border:4px solid #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.htc);
	}
.borderraius .pagination li.current {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.htc);
}
/*end slides*/
/*************************************
			MEDIA QUERIES
*************************************/
@media screen and (max-width: 960px) {
	#wrapper {
		width:auto;
		}
	}
@media screen and (max-width: 880px){
	/*nav, faire passer en dessous*/
	body {
	background: url(../images/header-bg-870.gif) repeat-x 0 0 scroll #D80A05;
	}
	header {
		height:240px;
		}
	header h2 {
		top:105px;
		}
	/*diminuer la taille des images du slider ou augmenter taille du slide*/
	/*diminuer taille image portfolio*/
	#site-liste img {
		width:90%;
		}
	#site-liste li > p {
		width:90%;
		}
	/*diminuer taille image slides*/
	.slides_container {
		width:77%;
		height:190px;
		}
	.slides_container img {
		width:81%;
		}
	a.prev, a.next {
		top:38%;
		}
	/*page 404*/
#erreur-404 {
	background: url(../images/header-bg.gif) repeat-x 0 0 scroll #D80A05;
	}
#erreur-404 header {
	height:170px;
	}
#erreur-404 header > h1{
	font-size:500%;
	}
#erreur-404 section {
	margin:0 auto;
	min-height:300px;	
	font-family:AeroMaticsStencilBold,Arial, Helvetica, sans-serif;
	font-size:2.6em;
	}
#erreur-404 section p {
	margin:50px auto 100px;
	line-height:100%;
	}
	}
@media screen and (max-width: 720px){
	.slides_container {
		width:77%;
		height:155px;
		}
	.slides_container img{
		width:68%;
		}
	/* contact form, fieldset float left*/
	#contact-form fieldset {
	width:60%;
	}
	#contact-form fieldset:nth-child(2) > p {
	float:left;
	}
	#contact-form fieldset > p {
		width:125%;
		}
	#erreur-404 header > h1{
	font-size:440%;
	}

	}
/*@media screen and (max-width:460px){
	header h1, header h2{
		font-size:200%;
		}
	section > h1 {
		font-size:230%;
		}
	.slides_container {
		width:70%;
		height:90px;
		}
	.slides_container img {
		width:39%;
		}	
	.slides_container, #portfolio img {
		border:5px solid #fff;
		}
		#site-liste li{
		width:auto;
		text-align:left;
		}

	#site-liste img {
		width:300px;
		}

	#portfolio img:hover {
		border:5px solid #000;
		}
	footer ul {
		top:50%;
		left:40%;
		}
	#erreur-404 header > h1 {
    font-size: 265%;
	}	
	}*/

@media screen and (max-width:480px){
	header h1, header h2{
		font-size:200%;
		}
	section > h1 {
		font-size:230%;
		}
	.slides_container, #portfolio img {
		border:5px solid #fff;
		}
		#site-liste li{
		width:auto;
		text-align:left;
		}
	#site-liste img {
		width:300px;
		}
	#portfolio img:hover {
		border:5px solid #000;
		}
	footer p {
	margin:3 0px 0 0 0;
	}
	footer ul {
		top:50%;
		left:30%;
		}
	#erreur-404 header > h1{
	font-size:260%;
	}
	#erreur-404 section p {
	margin:20px auto 40px;
	}
	#erreur-404 section a {
		width:60%;
		font-size:45%;
		}
	}
@media screen and (max-width: 320px){
	header {
		background-position:0 40px;
		}
	 header h1 {
		 font-size:165%;
		 }
	 header h2 {
		top:90px;
		font-size:150%;
		text-align:left;
		}
	section h1 {
		font-size:200%;
		}
	section > p, #site-liste, #contact-form {
		width:55%;
		}
	#portfolio img {
		border:5px solid #fff;
		}
	#site-liste li {
		width:auto;
		text-align:left;
		}
	#site-liste li > h2 {
		font-size:100%;
		} 
	#site-liste img {
		width:170px;
		}
	#slides {
		display:none;
		}
	 #contact a.email{
		width:100%;
		margin:10px auto;
		font-size:75%;
		text-indent:5px;
		}	
	footer > p {
		margin:20px 0 0 0;
		}
	footer ul {
		left:20%;
		}
	#erreur-404 header > h1{
	font-size:220%;
	}
	#erreur-404 section a {
		width:60%;
		font-size:35%;
		}
	}
.ir {
	display: block;
	border: 0;
	text-indent: -999em;
	overflow: hidden;
	background-color: transparent;
	background-repeat: no-repeat;
	text-align: left;
	direction: ltr;
*line-height: 0;
}
.ir br {
	display: none;
}
.hidden {
	display: none !important;
	visibility: hidden;
}
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}
.invisible {
	visibility: hidden;
}
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
*zoom: 1;
}

/*@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
*/
