.loader{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	height:50px;
	width:50px;
}
a{
	text-decoration : none;
}
html{
	height : 100%;
}
body{
	height: 100%;
	max-height: 100%;
	margin: 0;
    background: #000 url(img/fondNoir.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: NexaLight, GloberThin, Verdana;
	font-weight:100;
	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
#bigContainer{
	width:100%;
	height:100%;
	overflow: hidden;
	position:relative;
}

@font-face {
    font-family: 'NexaLight';
	src : 	url('font/NexaLight.eot'),
			url('font/NexaLight.otf');	
}
h1{
	margin: 0;
	position: absolute;
	font-size : 2vw;
	font-weight: initial;
	left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
	height: initial;
}
header{
	width: 100%;
	height: 50px;
	min-height : 40px;
	background-color: #212121 ;
	color: white;
	position: relative;
	-moz-box-shadow: 0px 10px 30px 0px #000000;
	-webkit-box-shadow: 0px 10px 30px 0px #000000;
	-o-box-shadow: 0px 10px 30px 0px #000000;
	box-shadow: 0px 10px 30px 0px #000000;
	z-index: 7;
}
header > ul{
	height: 20px;
	width: 100%;
	margin-top: 0;
	padding: 0;
	
}
header >ul >li{
 	display: inline-block;
 	text-align: center;
}

#changeAnnee {
	top: 5px;
	right: 10px;
	display: block;
	position: relative;
	height:30px;
	text-align:right;
	z-index: 9;
}
#nomTheme {
	position: absolute;
	overflow:hidden;
	
}
#nomTheme li{
	/*vertical-align:top;;*/
	/*background-color : #212121 rgba(0,0,0,0.8)*/
	background-color : rgba(33, 33, 33, 0.85);
	position: relative;
	top: 0px;
	transition :top 0.5s;
}
#nomTheme li p{
	position: absolute;
	width: 100%;
	top: 25%;
	cursor : default;
}
#popup{
	height: 150%;
	background-color:#212121;
	width:200px;
	position : absolute;
	top: 10px;
	border : solid #00ccff 1px;
	left : 0;
	display: block;
	border-radius : 5px;
}
#fleche{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 5px 0 5px;
	border-color: #00ccff transparent transparent transparent;
	position: relative;
	top: 35px;
}
#nomTheme p{
	margin : 0;
}
#changeAnnee li a {
	color:#FFF;
	text-decoration: none;
	text-align: center;
	font-size: 11px;
}
#rideau{
	overflow: hidden;
	width: 100%;
	position:relative;
}
#rideau >ul{
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	left: 0;
	width:100%;
}
.annee{
	display: inline-block;
	float: left;
	/**background-color: yellow;**/
	height: 100%;
}
.anneeCourante{
	font-size: 14px;
	color: #00CCFF;
}
#rideau >ul >li >ul{
	width: 100%;
	height: 100%;
	margin: 0;
	padding : 0;
}
.theme{
	display: inline-block;
	height: 100%;
	overflow: hidden;
	float: left;
}
.albums{
	width: 100%;
	margin: 0;
	padding: 0;
}
.albums >li{
	display: block;
	width: 100%;
	margin-bottom: 5px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	top : 0;
	transition : all 1s;
}
.albums >li img{
	position: absolute;
	top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	height: initial;
	/***Largeur de 112% pour les images qui ne sont pas en 4/30***/
	width: 112%;
	left: -6%;
	-webkit-transition : all 0.5s;
	transition : all 0.5s;
	color: white;
	vertical-align:top;
}
#titre {
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0);
	position: absolute;
	z-index: 3;
	top: 0;
	overflow: hidden;
	-webkit-transition : all 1s;
	transition : all 0.5s;
	color: white;
}
.titreSpan{
	width:inherit;
	display:block;
	position:absolute;
	top:50%;
	 -webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#titre h2 {
	width : 90%;
	left:5%;
	margin-bottom:0;
	text-align: center;
	font-weight: initial;
	position:relative;
	/*top: 35%;
  -webkit-transform: translateY(-35%);
  -ms-transform: translateY(-35%);
  transform: translateY(-35%);*/
	height: initial;
	opacity: 0;
	-webkit-transition : all 0.5s;
	transition : all 0.5s;
}
#titre p {
	text-align: center;
	border: 1px solid #FFF;
	width: 50%;
	left: 25%;
	position:relative;
	/*top: 35%;
	left : 50%;
	margin-top:0;
  -webkit-transform: translate(-50%,-35%);
  -ms-transform: translate(-50%,-35%);
  transform: translate(-50%,-35%);;*/
	
	-webkit-transition : all 0.5s;
	opacity: 0;
	transition : all 0.5s;
}
.albums >li:hover img{
	width: 125%;
	left : -12.5%;
}
.albums >li:hover #titre{
	background-color: rgba(0,0,0,0.6);
	
}
.albums >li:hover #titre h2{
	opacity: 1;
	
	
}
.albums >li:hover #titre p{
	font-size: 12pt;
	opacity: 1;
}
.titreAlbum{
	color: #FFF;
	font-size: 18px;
}
#search{
	height:50px;
	width: 50px;
	position: absolute;
	right : 20px;
	bottom : 20px;
	z-index: 22;
	clip:rect(0px,50px,50px,-300px);
	opacity: 0.5;
	transition : opacity 1s;
	
}
#search:hover{
	opacity: 1;
}
.btnSearch{
	display:block;
	position:absolute;
	height:100%;
	width: 100%;
	z-index: 8;
	cursor : pointer;
}
#btnImg{
	z-index: 10;
}
#champRecherche{
	height:50px;
	width: 252px;
	background-color: rgba(33, 33, 33, 0.80);
	position:absolute;
	right:-300px;
	top: 0;
	transition: right 1s;
}
#champRecherche input{
	position : absolute;
	top : 12px;
	left: 12px;
	height : 25px;
	width : 175px;
	background-color: white;
	border: none;
}
#champRecherche img{
	position : absolute;
	top : 13px;
	left: 161px;
	height : 25px;
	width : 25px;
	display:block;
	cursor:pointer;
}
#recherche::-ms-clear {
  display:none;
}
#resultSearch{
	width:100%;
	height: 100%;
	position: absolute;
	z-index: 21;
	background-color:rgba(0, 0, 0, 0.93);
	top:0;
	left: -100%;
	color:white;
}
#resultSearch >div{
	position: relative;
	width:50%;
	height: 100%;
	overflow:hidden;
	margin:auto;
	top:0;
}
#resultSearch >div >ul{
	margin: 0;
	padding:0;
	width:100%;
	position:relative;
	top:0;
}
#resultSearch >div >ul >li{
	display:block;
	width:90%;
	border-bottom:1px solid;
	margin:auto;
	position:relative;
}
#resultSearch >div >ul >li div{
	height:100%;
}
#resultSearch a{
	color:white;
	text-decoration:none;
}
#resultSearch >div >ul >li:hover div{
	background-color : rgba(0, 204, 255, 0.13)
}
.imageResult{
	width: 25%;
	height:90%;
	display:block;
	position:relative;
	left:10px;
	top: 10px;
	overflow:hidden;
	
}
.info{
	position:absolute;
	height: 100%;
	right: 10px;
	top:0;
	display: block;
}
#resultSearch h2{
	position: absolute;
	/*top: 0;
	right: 5%;*/
	color: #00ccff;
	right: 0;
	text-align:right;
}
.infoTexte{
	position: absolute;
	right: 10px;
	display: block;	
	bottom:0;
}
.resultDate{
	/*position: absolute;
	right: 5%;*/
	float:right;
	margin-right: 10px;
}
.resultCopyright{
	/*position: absolute;
	right: 5%;
	font-size:8pt;*/
	float:right;
}
.imageRecherche{
	position: absolute;
	top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	height: initial;
	/***Largeur de 112% pour les images qui ne sont pas en 4/30***/
	width: 112%;
	left: -6%;
}
#btnClose{
	position:absolute;
	top: 0;
	right: 0;
}
footer{
	bottom : 0;
	left : 0;
	width: 100%;
	height: 11px;
	color: #00ccff;
	font-size:9px;
	font-family: Arial;
	text-align:center;
	background-color:  black;
	position: fixed;
	z-index:999;
	cursor: default;
}

/*****DIAPORAMA**/

#diaporama{
	height: 92%;
	width: 100%;
	overflow: hidden;
}
#headerDiapo{
	max-height: 50px;
	height:8%;
	min-height:40px;
	width:100%;
	background-color:transparent;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	z-index:11;
	text-align:center;
}
#headerLine
{
	left: 10px;
	right: 10px;
	top: 0;
	height: 100%;
	display : inline-block;
	position: absolute;
	border-bottom: solid;
	border-bottom-color: #00ccff;
	border-bottom-width: 1px;
	color:#FFF;
	text-align: center;
	z-index: 8;
}
header > a {
	display : inline-block;
	position: absolute;
	left : 10px;
	top : 10px;
	z-index:10;
}
header h2{
	/*margin : 0;
	position: absolute;*/
}
#playBtn{
	position: absolute;
	top: 60px;
	right:5px;
	z-index:10;
	cursor:pointer;
}
#accueilBtn{
	position: absolute;
	top: 10px;
	right:5px;	
	z-index : 10;
}
#headerDiapo >a >img{
	z-index: 10;
}
#previousDiapo{
	position: fixed;
	/*height: 200px;
	width: 200px;
	background-color: white;*/
	z-index: 6;
	top: 50%;
	left:40px;
}
#date{
	/*margin: 0;
	position: absolute;
	top: 0;*/
	color:#00ccff;
	font-size:11px;
}
#nextDiapo{
	position: fixed;
	/*height: 200px;
	width: 200px;
	background-color: white;*/
	z-index: 6;
	top: 50%;
	right: 40px;
}
#diaporama >ul{
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	left : 0%;
	/*transition : all 0.5s;*/
}
.imageCourante{
	height: 100%;
	width: 100%;
	float: left;
	
	display: inline-block;
	
}
.imageCourante img{
	display:block;
	position: relative;
	
	-moz-box-shadow: 5px 5px 10px 0px #000;
	-webkit-box-shadow: 5px 5px 10px 0px #000;
	-o-box-shadow: 5px 5px 10px 0px #000;
	box-shadow: 5px 5px 10px 0px #000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=10);
	left : 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	top : 50%;
}
#mozaicBtn{
	position:absolute;
	z-index: 8;
	top: -6px;
	left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
#border{
	width: 100%;
	height: 8px;
	position: absolute;
	top: 14px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}
#mosaique{
	position: fixed;
	height : 50%;
	width: 100%;
	
	padding-top: 20px;
	z-index : 8;
}
#mosaique p{
	margin : 0;
	top : 0px;
	height: 0;
	font-size:10pt;
}
#copyright{
	position: absolute;
	color:white;
	bottom: -16px;
	right : 10px;
	z-index: 8;
}
#numPhoto{
	position: absolute;
	color:white;
	bottom: -16px;
	left : 10px;
	z-index: 8;
}
nav{
	bottom: ;
	background-color: rgba(0,0,0,0.95);
	width: 100%;
	z-index:7;
	height: 100%;
	position: relative;
	overflow:hidden;
}
nav >ul{
	margin:0;
	padding: 0;
	width: 100%;
	position: relative;
}
nav >ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
nav >ul >li{
	display : inline-block;
	overflow: hidden;
	float:left;
	opacity: 1;
	margin : 1px;
	position : relative;
}
nav >ul >li >img{
	display : block;
	position : absolute;
	width : 112%;
	left : -6%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition :  opacity 1s;
	transition : opacity 1s;
}
nav >ul >li >img:hover{
	cursor:pointer;
}		
#rail{
	height: 100%;
	right:5px;
	width: 1px;
	background-color: rgba(0,0,0,0.25);
	position:absolute;
	top: 0;
	z-index: 10;
	transition : background-color 1s;
}
#ascenseur{
	width: 18px;
	left: -10px;
	height: 30px;
	background-color: #0077BD;
	position: relative;
	top:0;
	transition : opacity 1s;
	border-radius: 5px;
	cursor: pointer;
	text-align:center;
	vertical-align:middle;
	line-height:7px;
	color:#FFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
#ascenseur:active {
	color:#000;
	background-color: #FFF;
}
#backloader{
	position:absolute;
	height:100%;
	width:100%;
	z-index:20;
	background-color:black;
	top:0;
	color:white;
}
#pourcentage{
	position: absolute;
	top:47%;
	width:12%;
	min-width:12%;
	-webkit-transform: translateY(-47%);
	-ms-transform: translateY(-47%);
	transform: translateY(-47%);
	margin-left:10px;

}
#pourcentage >span{
	margin-left:10px;
}
#progressBarContainer{
	position: absolute;
	height: 2px;
	width:100%;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#progressBar{	
	position:relative;
	width: 0%;
	height:100%;
	background-color:#00ccff;
	border-radius: 5px;
	transition:width 0.1s;
}