﻿/*	--------------------------------------------------
	:: Global Reset & Standards
	-------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { 
	border:0;
}
a{
	color: #000;
	text-decoration: none;
}
/*	--------------------------------------------------
	:: HEADER
	-------------------------------------------------- */
body { 
background:URL('img/wall4.png');
}	
.first{
max-width:100%;
min-width: 727px;
margin: 0 auto;	
clear:both;
}
#header{
background:URl('img/large.jpg') top center no-repeat ;
margin-bottom: 30px;
height:500px;
margin-left:auto;
margin-right:auto;
position:relative;
display:table;
max-width:1600px;
width:100%;
}
#hist #header{
background:URl('img/largehist.jpg') top center no-repeat ;
}
#fab #header{
background:URl('img/largefab.jpg') top center no-repeat ;
}
#met #header{
background:URl('img/largemet.jpg') top center no-repeat ;
}
#header .white{
background:URL('img/header.png');
padding-top:5px;
max-width:1602px;
margin-left:auto;
margin-right:auto;
-moz-box-shadow: 0px 2px 6px #000000;
-webkit-box-shadow: 0px 2px 6px #000000;
box-shadow: 0px 2px 6px #000000;
}
#logo{
display: block;
margin: 0 auto 15px auto;
border:0;
}
/*  Navigation */
.nav{
margin: 0 auto;
max-width: 960px;
padding-left:70px;
background:rgba(255, 255, 255, 0.01);
padding-bottom:5px;
}
.nav ul{
margin: 0;
padding: 0;
}
.nav li{
display: inline;
}
.nav li a{
font-family: "Orator Std";
font-size:2.8rem;
font-size:28px;
color:#000;
display: block;
padding: 12px 0 0 0;
text-align: center;
width: 100%;
height: 13px;
line-height:0.2;
}
.nav li a:hover,
.nav li a:focus{
color: #474747;
}
.nav ul ul{
display: none;
}
/*  Encart header */
.mot{
background-color:rgba(0, 0, 0, 0.80);
position:absolute;
left:10px;
bottom:25px;
margin: 0 0 30px 0;
width: auto;
min-width: 150px;
-moz-box-shadow: 3px 3px 11px #000000;
-webkit-box-shadow: 3px 3px 11px #000000;
box-shadow: 3px 3px 11px #000000;
}
.mot h2{
font-family:"Orator Std";
color:#fff;
font-size:2.2rem;
font-size:22px;
margin:5px 0 5px 10px;
}
.mot p{
font-family:"Orator Std";
color:#fff;
font-size:1.4rem;
font-size:14px;
margin:10px 10px 10px 20px;
}
/*	--------------------------------------------------
	:: CONTENT
	-------------------------------------------------- */
#wrapper{
margin: 0 auto;
max-width: 960px;
}
.inner{
background-color: #f3f3f3;
float: left;
margin: 10px 0 15px 0;
padding: 10px;
}
/*  Block */
.block{
background-color: #474747;
float: left;
margin: 0 0 30px 0;
width:100%;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background:URL('img/txture.png');
}
.block:hover{
-moz-box-shadow: 0px 2px 7px #000000;
-webkit-box-shadow: 0px 2px 7px #000000;
box-shadow: 0px 2px 7px #000000;
}
h2{
	font-family:"Orator Std";
	color: #fff;
	z-index:10; 
	font-size: 4rem; 
	font-size:40px;
	margin-left:18px;
	margin-bottom: 15px;
	margin-top: 15px;
	display:block;
}
h2 span{
	font-size: 2rem;
	font-size:20px;
	color:#fff;
	font-family:"Orator Std";
}
#carousel h2 {
	margin-top:4px;
	margin-left:-20px;
}
h2 a{
	color:#fff;
}
h2 a:hover{
	color:#fff;
}

img.img-large {
	display: block; 
	max-width: 99.59%;
	width: 100%; 
	z-index:5;
	max-height:200px;
	border:solid 1px #000;
}
}
.metiers{
	width:383px;
}
.fabrication img{
	max-height:150px;
}
.metiers img{
	max-height:150px;
}
.more{
	float:right;
	margin-right:10px;
	color:#fff;
	font-size:1.4rem;
	font-size:14px;
	margin-bottom: 3px;
	margin-top:3px;
	font-weight:bold;
}

/*	--------------------------------------------------
	:: FOOTER
	-------------------------------------------------- */
#footer{
font-size: 1.3rem;
font-size:13px;
background:URl('img/large.jpg') bottom center no-repeat ;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
display:table;
max-width:1600px;
width:100%;

}
#footer .black{
background:rgba(0, 0, 0, 0.85);
max-width:1600px;
margin-left:auto;
margin-right:auto;
padding-top:10px;
}
#footer h4 {
font-family: 'Open Sans',sans-serif;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .15em;
font-size: 14px;
font-size: 1.4rem;
font-weight: 300;
color: white;
margin: 0;
line-height: 2em;
text-align:center;
margin-top:20px;
}
#footer li a{
font-size:1.5rem;
font-size:15pxs;
}
#footer p{
text-align: center;
color: #888;
font-size:1.3rem;
font-size:13px;
font-weight: 300;
}
#footer li{
margin-top: 40px;
text-align: center;
color: #888;
font-size:1.3rem;
font-weight: 300;
font-size:13px;
display: inline;
}
#footer li a{
display: block;
line-height:1.2;
}
#footer a{
color:#59879F;
font-family: "Orator Std";
font-size:1.3rem;
font-size:13px;
}
#footer a:hover {
color: #789FB3;
}
#footer .copyright {
font-size: 1rem;
font-size:10px;
color: #888;
margin-top: 40px;
margin-bottom: 20px;
}
#footer .soc {
margin-top: 40px;
}
/*	--------------------------------------------------
	:: METIER
	-------------------------------------------------- */
.va-container{
	position:relative;
	padding:40px 0 ;
	max-width:100%;
	background: URL('img/txture.png');
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.va-wrapper{
	max-width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
	background:#000;
	border:solid 1px #000;
}
.va-slice{
	cursor:pointer;
	position:absolute;
	width:100%;
	left:0px;
	overflow:hidden;
}
.va-slice-1{
	background:#000  url(img/1.jpg) no-repeat center center;
}
.va-slice-2{
	background:#000 url(img/2.jpg) no-repeat center center;
}
.va-slice-3{
	background:#000 url(img/3.jpg) no-repeat center center;
}
.va-slice-4{
	background:#000 url(img/4.jpg) no-repeat center center;
}
.va-slice-5{
	background:#000 url(img/5.jpg) no-repeat center center;
}
.va-slice-6{
	background:#000 url(img/6.jpg) no-repeat center center;
}
.va-slice-7{
	background:#000 url(img/7.jpg) no-repeat center center;
}
.va-slice-8{
	background:#000 url(img/8.jpg) no-repeat center center;
}
.va-slice-9{
	background:#000 url(img/9.jpg) no-repeat center center;
}
.va-slice-10{
	background:#000 url(img/10.jpg) no-repeat center center;
}
.va-slice-color-1{
	background-color:#97c5eb;
}
.va-slice-color-2{
	background-color:#68ace5;
}
.va-slice-color-3{
	background-color:#0072cf;
}
.va-slice-color-4{
	background-color:#0039a6;
}
.va-slice-color-5{
	background-color:#00338e;
}
.va-slice-color-6{
	background-color:#002c76;
}
.va-slice-color-7{
	background-color:#002144;
}
.va-title{
	font-family: "Orator Std";
	text-transform:uppercase;
	font-size:50px;
	font-size:5.0rem;
	margin-left:20px;
	color:#fff;
	text-shadow: 0px 0px 1px white;
}
.va-content{
	display:none;
	margin-left:25px;
}
.va-slice p{
	font-size: 22px;
	font-size: 2.2rem;
	font-style: italic;
	font-family:Georgia, serif;
}
.va-slice ul{
	margin-top:20px;
}
.va-slice ul li{
	float:left;
	margin:0px 2px;
}
.va-slice ul li a{
	color:#000;
	background:#eede2f;
	padding:3px 6px;
	font-size:14px;
	font-size:1.4rem;
	font-family:'PT Sans', sans-serif;
	text-transform:uppercase;
}
.va-slice ul li a:hover{
	background:#000;
	color:#fff;
	text-shadow:none;
}
.va-nav span{
	width:40px;
	height:25px;
	background:transparent url(img/prev.png) no-repeat center center;
	position:absolute;
	top:8px;
	left:50%;
	margin-left:-20px;
	text-indent:-9000px;
	opacity:0.7;
	cursor:pointer;
	display:none;
	z-index:100;
}
.va-nav span.va-nav-next{
	background-image:url(img/next.png);
	top:auto;
	bottom:8px;
}
.va-nav span:hover{
	opacity:1.0;
}

/*	--------------------------------------------------
	:: HISTOIRE
	-------------------------------------------------- */
a {
	color: #ffffcc;
	text-decoration: none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
	a:hover,
	a.selected {
		color: #ffcc00;
	}
.sociales {
	text-align: center;
	margin-bottom: 20px;
}
#timeline {
		height: 395px;
		overflow: hidden;
		position: relative;
		-moz-box-shadow: 0px 2px 7px #000000;
		-webkit-box-shadow: 0px 2px 7px #000000;
		box-shadow: 0px 2px 7px #000000;
		padding-top:10px;
		padding-left:20px;
		
	}
		#dates {
			width: 1100px;
			height: 60px;
			overflow: hidden;
			background: url('img/dot.gif') left 45px repeat-x;
		}
			#dates li {
				list-style: none;
				float: left;
				width: 100px;
				height: 50px;
				font-size: 24px;
				font-size: 2.4rem;
				text-align: center;
				background: url('img/biggerdot.png') center bottom no-repeat;
			}
				#dates a {
					display: block;
					line-height: 38px;
					padding-bottom: 10px;
					height: 50px;
				}
				#dates .selected {
			        font-size: 38px;
					font-size: 3.8rem;
				}
		
		#issues {
			width: 960px;
			height: 395px;
			overflow: hidden;
			margin-top: 10px;
		}	
			#issues li {
				height: 100%;
				list-style: none;
				float: left;
				width: 950px;
			}
				#issues li.selected img {
					-webkit-transform: scale(1.1,1.1);
					-moz-transform: scale(1.1,1.1);
				    -o-transform: scale(1.1,1.1);
				    -ms-transform: scale(1.1,1.1);
				    transform: scale(1.1,1.1);
				}
				#issues li img {
					float: left;
					margin: 10px 30px 15px 30px;
					border:solid 2px black;
					background: transparent;
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
					zoom: 1;
					
				}
				#issues li h1 {
					font-weight: 700;
					font-family: 'Alegreya SC', Georgia, serif;
					color: #FFC;
					font-style: italic;
					font-size: 28px;
					margin: 0 0 20px 0;
					text-shadow: #000 1px 1px 2px;
					line-height:1;
				}
				#issues li p {
					font-size: 14px;
					margin-right: 50px;
					font-weight: normal;
					line-height: 22px;
					text-shadow: #000 1px 1px 2px;
					width:570px;
					float:right;
				}
				
				.larg  p {
					width:630px;
				}
		
		#grad_left,
		#grad_right {
			width: 100px;
			height: 60px;
			position: absolute;
			top: 10px;
		}
			#grad_left {
		        left: 0;
		        background: url('img/grad_left.png') repeat-y;
			}
			#grad_right {
		        right: 0;
		        background: url('img/grad_right.png') repeat-y;
			}
		
		#next,
		#prev {
			position: absolute;
			top: 0;
			font-size: 70px;
			top: 200px;
			width: 14px;
			height: 26px;
			background-position: 0 0;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
			#next {
				right: 10px;
				background-image:url(img/nav-n.png);
			}
			#prev {
				left: 10px;
				background-image:url(img/nav-p.png);
			}
				#next.disabled,
				#prev.disabled {
					opacity: 0.2;
				}
				
.img-leg{
clear:both;
float:left;
width:240px;
}
.year .img-leg{
width:315px;
}
.years .img-leg{
width:210px;
}
.img-medium{
max-width: 150px;
max-height:200px;
margin-left:auto;
margin-right:auto;
display:block;
}
.legende{
color:#fff;
margin-left:auto;
margin-right:auto;
display:block;
width:200px;
text-align:center;
}		

/*	--------------------------------------------------
	:: GALERIE
	-------------------------------------------------- */
.fancybox-tmp iframe, .fancybox-tmp object {
	vertical-align: top;
	padding: 0;
	margin: 0;
}
.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}
.fancybox-skin {
	position: relative;
	padding: 0;
	margin: 0;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}
.fancybox-opened {
	z-index: 8030;
}
.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
	padding: 0;
	margin: 0;
	position: relative;
	outline: none;
}
.fancybox-inner {
	overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}
.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 10px;
}
.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
}
.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('img/fancybox_sprite.png');
}
#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8020;
}
#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('img/fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}
.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	background: transparent url('img/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}
.fancybox-prev {
	left: 0;
}
.fancybox-next {
	right: 0;
}
.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}
.fancybox-prev span {
	left: 20px;
	background-position: 0 -36px;
}
.fancybox-next span {
	right: 20px;
	background-position: 0 -72px;
}
.fancybox-nav:hover span {
	visibility: visible;
}
.fancybox-tmp {
	position: absolute;
	top: -9999px;
	left: -9999px;
	padding: 0;
	overflow: visible;
	visibility: hidden;
}
/* Overlay helper */
#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: #000;
}
#fancybox-overlay.overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}
/* Title helper */
.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}
.fancybox-opened .fancybox-title {
	visibility: visible;
}
.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8030;
	text-align: center;
}
.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}
.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}
.fancybox-title-inside-wrap {
	margin-top: 10px;
}
.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}	

.thumbs{
max-height:160px;
}
.gal{
background:URL('img/txture.png');
padding:10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.gal h3{
color:#789FB3;
font-weight: 700;
font-family: 'Alegreya SC', Georgia, serif;
color: #FFC;
font-style: italic;
font-size:28px;
margin:20px 0 20px 20px;
}
.gal img{
box-shadow: 1px 1px 2px #CCC;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #CCC;
height: auto;
padding: 5px;
background-color: #fff;
}
.cat{
width:90%;
margin-left:auto;
margin-right:auto;
}
/*	--------------------------------------------------
	:: GALERIE INDEX
	-------------------------------------------------- */
.es-carousel-wrapper{
	background: URL('img/txture.png');
	padding:10px 37px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	position:relative;
}
.es-carousel{
	overflow:hidden;
	background:#000;
}
.es-carousel ul{
	display:none;
}
.es-carousel ul li{
	height:100%;
	float:left;
	display:block;
}
.es-carousel ul li a{
	display:block;
	border-style:solid;
	border-color:#222;
}
.es-carousel ul li a img{
	display:block;
	border:none;
	width: 126px;
	height: 90px;
}
.es-nav span{
	position:absolute;
	top:59%;
	left:12px;
	background:transparent url(img/nav.png) no-repeat top left;
	width:14px;
	height:26px;
	margin-top:-13px;
	text-indent:-9000px;
	cursor:pointer;
	opacity:0.8;
}
.es-nav span.es-nav-next{
	right:12px;
	left:auto;
	background-position:top right;
}
.es-nav span:hover{
	opacity:1.0;
}
/*	--------------------------------------------------
	:: FABRICATION
	-------------------------------------------------- */
dl{
	padding: 10px;
	background:URL('img/txture.png');
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
	dl dt{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		width:335px;
		margin: 0;
	}
		dl dt a{
			text-decoration: none;
			padding: 10px;
			display: block;
			font-weight: 700;
			font-size: 16px;
			color: #FFC;
			padding-top: 10px;
			font-family: 'Alegreya SC', Georgia, serif;
		}
	dl dd{
		color: #cccccc;
		margin: 0;
		height: 0;
		overflow: hidden;
		-webkit-transition: height 1s ease;
	}
		dl dd p{
			padding: 10px;
			margin-left:10px;
			display:block;
			font-size: 14px;
			font-weight: normal;
			line-height: 22px;
			text-shadow: 1px 1px 2px #000000;
		}
		dl dd h4{
			display:block;
			padding: 10px;
			font-weight: 700;
			font-family: 'Alegreya SC', Georgia, serif;
			color: #FFC;
			font-style: italic;
			font-size: 28px;
			font-size: 2.8rem;
		}
		dl dd img{	
			padding:10px;
			float:left;
			
		}
	dl dd:target{
		height: auto;
	}
	dl a.ie:hover dd,dl a.ie:focus dd{
		height: auto;
		color: #cccccc !important;
	}
	
@media (-webkit-transition) {
	dl dd:target{
		height: auto;
	}
}
/*	--------------------------------------------------
	:: MOBILE
	-------------------------------------------------- */
@media only screen and (max-width: 767px) {
	img.img-large {
	display: block; 
	max-width: 100%;
	width: 99.59%; 
	z-index:5;
	max-height:140px;
	}
	.hide-phones{
	display:none
	}
	.block{
	margin: 0 0 10px 0;
	}
	
	#header{
	height:auto;
	margin-bottom:155px;
	}
	.white{
	height:80px;
	}
	.first{
	width: 100%;
	min-width: 0; 
	margin-left: 0; 
	margin-right: 0; 
	clear:both;
	}
	#logo{
	width:100%;
	height:100%;
	}
	.nav{
	padding-left:0;
	margin-bottom:60px;
	margin-top:-10px;
	}
	.mot{
	background-color:rgba(0, 0, 0, 0.80);
	position:Static;
	top:0;
	width:100%;
	margin-top:-15px;
	}
	
	#wrapper{
	margin-top:10px;
	}
	#timeline{
	height:1000px !important;
	width:90%;
	margin-left:10px;
	}
	#issue{
	height:830px !important;
	padding-top:20px;
	}
	#issue li{
	height:830px !important;
	width:360px !important;
	}
	#issues li h1 {
	width:34%;
	}
	#issues li img{
	margin-top:20px
	}
	#issues li .img-leg {
	float:none;
	}
	#timeline #issue .year p{
	float:left;
	width:320px!important;
	}
	.larg  p {
	width:320px!important;
	float:left;
	}
	#gallerie{
	max-width:100%;
	}
	#dates {
	display:inline;
	}
	#grad_left,
	#grad_right {
			display:none;
		}
	.galleria-thumbnails-container {
	max-width:100%;
	}
}