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

@font-face {
	font-family: "Resistance";
	src: url('font/SportingGrotesque-Bold.otf');
}
@font-face {
	font-family: "Pixel";
	src: url('font/SportingGrotesque-Regular.otf');
}
* {
    margin: 0;
    padding: 0;
}

html, body
{
	
	overflow:hidden;
	background-color: #FCFAFC;
	
}
.anim:hover{
  animation: jiggle 2s linear 1 forwards;
  z-index: 500;
}

@keyframes jiggle {
  1% {
    transform: scale(1.0, 1.0)
  }
  6% {
    transform: scale(0.9, 1.1) translate(0, -5px)
  }
  9% {
    transform: scale(1.05, 1.05) translate(0, -3px)
  }
   100% {
    transform: scale(1.05, 1.05) translate(0, -3px)
  }
   
}

.courant
{
    padding-left: 22px;
    font-family: Pixel, sans-serif;
    font-size: 6pt;
    margin-bottom: 6px;
}
 #intro
 {
	width: 427px;
	 height: 413px;
	 margin-top: 23px;
	 font-family: Resistance, sans-serif;
	 font-size: 43pt;
	 margin-left: 13px;
	 margin-right: 0;
	 float: right;
	 transform: rotate(90deg);
	 color: #000000;
	 line-height: 62px;
 }
  #intro2
 {background-color:black;
color: #ffffff;
	 margin-top:-5px;
    font-family: Pixel, sans-serif;
    font-size: 7pt;
	z-index: 100;
	}
a {

color: #000000;
text-decoration:none; 
}
a:hover {
background-color:black;
color: #ffffff;
}
		  
		  div
		  {
	margin-left: auto;
	margin-right: auto;
	width: 1008px;
			  }
			 
			  
			  img{
				  position:relative;
				  margin:0;
				  padding:0;
				  max-width: 100%;
				  height: auto;
				  border: none;
					
				   }
			    ul.menu
		  {
	font-family: Pixel, sans-serif;
	font-size: 7pt;
	margin-left: 0px;
	margin-right: auto;
	float: left; 
	padding-left:inherit;
			  }
			    li.menuLien
		  {
	margin-left: auto;
	margin-right: auto;
	width: auto;
	list-style-type: none;
	color: #000;
	margin-top: 0px;
			  }
			      ul.travaux{
			 padding:0px;
 			margin:0px;
 			list-style-type:none;
			 display:inline-block;  
			white-space:nowrap;
 			height:100%;
			font-family: 'Roboto Condensed', sans-serif;
			

			  }
			    li.image{
					border: 5px solid;
					border-top: none;
					border-color: black;
					 display:inline-block;
					padding-bottom:-65px;
 					margin:-3px;
	 			height:100%;
				color:rgba(0,0,0,0);
				background-size: 40% 40%;

			  }
			   li.first{
					 display:inline-block;
					padding:0px;
 					margin:0px;
	 			height:100%;
				color:rgba(51,51,51,0);
				background-size: 40% 40%;
			  }
			  


.travaux{
	max-width:40%;
	height:auto;
 box-shadow:5px 3px 15px rgba(0, 0, 0, 0.2);
}
			  
#rectangle2 {
	background-color: rgba(255,255,255,);
	width:270px;
	position: absolute;
	left: 13px;
	bottom: 0px;
	top: 15px;
	z-index: 100;
	margin-left: auto;
	margin-right: auto;
	float:left;
}

#footer {
	background-color: black;
    color: #ffffff;
    width: 272px;
    position: absolute;
    right: 0;
    bottom: 0;
    /* top: 482px; */
    z-index: 1000;
    margin-left: 0px;
    padding-left: inherit;
    margin-right: 0px;
    /* float: left; */
    max-height: 259px;
}
#info {
	float: left;
    margin-top: 21px;
    margin-left: 22px;
    width: 224px;
    position: relative;
    /* margin-left: auto; */
    margin-right: auto;
}
#twitter{
    bottom: 0px;
    float: left;
    top: 182px;
    margin: 3px;
    left: -62px;
}
#instagram{
    bottom: 0px;
    float: left;
    top: 206px;
    margin: 3px;
    left: -35px;
}
.bold{
	 
	   text-transform: uppercase; 
}
#picto0 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 20px;
	bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	float: left;
}
#picto1 {
	cursor:move;
    cursor:grab;
			
	position: absolute;
	left: 10%;
	bottom: 0px;
	top: 43px;
	
	margin-left: auto;
	margin-right: auto;
	float: left;

}
#picto2 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 812px;
    top: 436px;
	top: 417px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
#picto3 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 512px;
	bottom: 0px;
	top: 277px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
#picto4 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 299px;
	bottom: 0px;
	top: 193px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
#picto5 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 880px;
	bottom: 0px;
	top: 397px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
 #picto6 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 889px;
	bottom: 0px;
	top: 230px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
 #picto7 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 602px;
	bottom: 0px;
	top: 423px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
 #picto8 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 805px;
	bottom: 0px;
	top: 41px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto9 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 734px;
	bottom: 0px;
	top: 200px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto10 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 369px;
	bottom: 0px;
	top: 272px;
	opacity: 1;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto11 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 698px;
	bottom: 0px;
	top: 103px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto12 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 684px;
	bottom: 0px;
	top: 291px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto13 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 907px;
	bottom: 0px;
	top: 63px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto14 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 507px;
	bottom: 0px;
	top: 307px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto15 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 636px;
	bottom: 0px;
	top: 143px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto16 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 820px;
	bottom: 0px;
	top: 101px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto17 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 492px;
	bottom: 0px;
	top: 32px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto18 {
cursor:move;
    cursor:grab;
	position: absolute;
	left: 376px;
	bottom: 0px;
	top: 399px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto19 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 344px;
	bottom: 0px;
	top: 362px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto20 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 298px;
	bottom: 0px;
	top: 503px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto21 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 324px;
	bottom: 0px;
	top: 66px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
  #picto22 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 287px;
	bottom: 0px;
	top: 99px;
	margin-left: auto;
	margin-right: auto;
	float: left;

}

/* Photo de la bnf */

 #Photo3_1 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 327px;
    top: -487px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}

 #Photo3_2 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 1239px;
    top: 15px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
 #Photo3_3 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 1239px;
    top: 312px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
#Photo3_4 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 846px;
    top: 188px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
 
 #Photo3_5 {
	cursor:move;
    cursor:grab;
	position: absolute;
	left: 361px;
    top: 431px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
 #Photo3_6 {
	cursor:move;
    cursor:grab;
	position: absolute;
    left: 361px;
    top: 36px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

}
 #Photo3_7 {
	cursor:move;
    cursor:grab;
	position: absolute;
	    left: 361px;
    top: 417px;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
	float: left;

} 
 
 
 .reseau {

    float: left;
    height: 69px;
    width: 62px;
    position: relative;
    margin-left: 12px;
    margin-bottom: 11px;
    top: 9px;
	


}








.strut, #contener {
    /* on permet à ces éléments de s'aligner verticalement */
    display:inline-block;
    vertical-align:middle;
}
.strut {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    height:100%;
}