Image de body background full responsive :

@charset "utf-8";

html {
	overflow: scroll;
}
html, body {
	height: 100 %;
}
/*img.backgroundfront {
    position:fixed;
    top:0;
    left:0;
    z-index: 100;
}*/


body {
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	/*height: 828px;*/
	height: 100%;
	min-height: 100%;
	background-image: url(/images/fonds/fond-flou-lumineux.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #FFF;
	background-size: cover;
	position: relative;
	overflow: scroll;
}

table#table-titre,
table#table-fixe,
table#table-fin {
    width: 100%; 
	height: auto;
    margin-left: auto; 
    margin-right: auto;
	border-spacing: 0px;
	padding-bottom: 0px;
	display: none;
}


/*th { 
 border-width:1px;
 border-style:solid; 
 border-color:red;
}
td { 
 border-width:1px;
 border-style:solid; 
 border-color:red;
}
*/

a:link,
a:visited,
a:hover
a:active {
	text-decoration: none;
}
@font-face {
    font-family: 'GeosansLight';
	src: url('GeosansLight.ttf') format('truetype');
}


/*----------Portrait ouverture--------*/
#portrait-container {
	position: fixed;
	height: auto;
	margin: 25px 0px 0px 20px;
	z-index: 110;
}
img.portrait {
	height: auto;
	width: 50px;
	border-radius: 50%;
}





/*----------Titre de la page----------*/

.titre {
	color: #666;
	letter-spacing: 7px;
	text-shadow: 4px 10px 12px rgba(0,0,0,0.7);
	padding: 50px 0px 50px 0px;
	font-family: 'GeosansLight', Verdana, Geneva, sans-serif;
	font-size:  60px;
	font-weight: lighter;
	line-height: 20px;
	width: 600px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.titre a:link,
.titre a:visited,
.titre a:active {
	color:  #666;
}
.titre a:hover {
	color: #fff;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
/*p::first-letter {
	font-size: 1.5em;
	margin-right: -5px;
	margin-left: 10px;
}*/
span {
	display: inline-block;
}
span:first-letter {
	font-size: 1.5em;
	margin-right: 0px;
	margin-left: 0px;
}
.inter-titre-1 {
	height: 10px;
	background-color: rgba(0,0,0,0.4);
}
.inter-titre-2 {
	height: 1px;
	background-color: rgba(0,0,0,0.4);
}
.inter-titre-3 {
	height: 10px;
	background-color: rgba(255,255,255,0.6);
}
.inter-titre-4 {
	height: 3px;
	background-color: rgba(0,0,0,0.4);
}
.sous-titre {
	padding: 10px;
	font-family: 'Dosis', sans-serif;
	font-weight: bold;
	font-size: 26px;
	text-align: center;
	vertical-align: middle;
	background-color: rgba(255,255,255,0.2);
}
.sous-titre a:link,
.sous-titre a:visited,
.sous-titre a:hover {
	color: #000;
	text-decoration: none;
}
.sous-titre a:hover {
	color: #fff;
	text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}




/*contenu parallax*/

.container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
Display: table;
Table-layout: fixed;
text-align: center;
overflow: hidden;
display: none;
}
.texte1 {
	font-family: 'Dosis', sans-serif;
	font-size: 18px;
}
#base {
   width: 200px;
   height: 200px;
   left: 0px;
   margin-top: 1000px;
   z-index: 20;
   position: fixed;
}
#img1 {	
   width: 100%;
   top: 0px;
   text-align: center;
   z-index: 2;
   position: relative;
}
#img2 {	
   background-color: rgba(255,255,255,0.7);
   width: 35%;
   padding: 20px;
   left: 5%;
   margin-top: 30px;
   z-index: 3;
   position: relative;
   /*border: 2px solid #a1a1a1;
   border-radius: 25px;*/  
}
#img3 {
   background: url('/images/bio/castel.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 700px;
   height: 500px;
   left: 50%;
   margin-top: -10px;
   z-index: 4;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img4 {
   background-color: rgba(255,255,255,0.7);
   width: 10%;
   padding: 20px;
   left: 35%;
   margin-top: 0px;
   z-index: 7;
   position: relative;
}
#img5 {
   background: url('/images/bio/lapin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 350px;
   height: 430px;
   left: 10%;
   margin-top: 20px;
   z-index: 5;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img6 {
   background: url('/images/bio/dessin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 350px;
   height: 430px;
   left: 50%;
   margin-top: 0px;
   z-index: 6;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img7 {
   background: url('/images/bio/redaction.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 445px;
   height: 205px;
   left: 25%;
   margin-top: -500px;
   z-index: 9;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img8 {
   background-color: rgba(255,255,255,0.7);
   width: 20%;
   padding: 20px;
   left: 25%;
   margin-top: -250px;
   z-index: 6;
   position: relative;
}
#img9 {
   background: url('/images/bio/livres.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 930px;
   height: 500px;
   left: 30%;
   margin-top: 350px;
   z-index: 10;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img10 {
   background-color: rgba(255,255,255,0.7);
   width: 40%;
   padding: 20px;
   left: 40%;
   margin-top: 450px;
   z-index: 11;
   position: relative;
}
#img11 {
   background: url('/images/bio/teo-couv.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 400px;
   height: 303px;
   left: 20%;
   margin-top: 500px;
   z-index: 12;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img12 {
   background-color: rgba(255,255,255,0.7);
   width: 25%;
   padding: 20px;
   left: 40%;
   margin-top: -800px;
   z-index: 13;
   position: relative;
}
#img13 {
   background-color: rgba(255,255,255,0.7);
   width: 10%;
   padding: 20px;
   left: 15%;
   margin-top: 500px;
   z-index: 14;
   position: relative;
}
#img14 {
   background: url('/images/bio/shiki.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 640px;
   height: 480px;
   left: 40%;
   margin-top: 350px;
   z-index: 16;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img15 {
   background-color: rgba(255,255,255,0.7);
   width: 25%;
   padding: 20px;
   left: 40%;
   margin-top: -1550px;
   z-index: 15;
   position: relative;
}
#img16 {
   background: url('/images/bio/jean.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 1000px;
   height: 750px;
   left: 5%;
   margin-top: -900px;
   z-index: 10;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img17 {
   background: url('/images/bio/niger.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 600px;
   height: 900px;
   left: 50%;
   margin-top: 600px;
   z-index: 16;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img18 {
   background-color: rgba(255,255,255,0.7);
   width: 25%;
   padding: 20px;
   left: 10%;
   margin-top: -2000px;
   z-index: 9;
   position: relative;
}
#img19 {
   background: url('/images/bio/autre-vie.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 825px;
   height: 1060px;
   left: 30%;
   margin-top: -300px;
   z-index: 8;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
}
#img20 {
   background-color: rgba(255,255,255,0.7);
   width: 38%;
   padding: 20px;
   left: 30%;
   margin-top: -600px;
   z-index: 10;
   position: relative;
   border: 2px solid #a1a1a1;
}





/*contenu sans parallax*/

table#table-fixe {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border-spacing: 0px;
	padding-bottom: 0px;
	display: none;
}
.bio {
	vertical-align: middle;
	padding: 20px;
}
.texte2 {
	font-family: 'Dosis', sans-serif;
	font-size: 18px;
	text-align: center;
}




/*----------Bas de page----------*/

.fin {
	height: 40px;
	margin: 0px auto;
	color: #666;
	text-align: center;
	letter-spacing: 5px;
	text-shadow: 2px 5px 6px rgba(0,0,0,0.7);
	padding: 0px 0px 30px 0px;
	font-family: 'GeosansLight', Verdana, Geneva, sans-serif;
	font-size:  14px;
	font-weight: lighter;
	vertical-align: bottom;
	line-height: 0px
}




@media only screen
	and (max-width : 480px)
	and (orientation : portrait) {
	/*Smartphone Galaxy S4 mini (portrait)*/
body {
	height: 828px;
}

/*----------Portrait ouverture--------*/
#portrait-container {
	position: absolute;
	height: auto;
	margin: 30px 0px 0px 15px;
	z-index: 110;
}
img.portrait {
	height: auto;
	width: 40px;
	border-radius: 50%;
}

table#table-titre {
    width: 100%; 
    display: none;
	height: 0px;
}
.container {
	display: none;
	height: 0px;
}
table#table-fixe {
    width: 100%;
	display: none;
}
.titre {
	font-size: 50px;
	letter-spacing: 0px;
}


#img2b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: 0px auto 0px auto;
   padding: 20px;
   position: relative;
   /*border: 2px solid #a1a1a1;
   border-radius: 25px;*/
   z-index: 2;   
}
#img3b {
   background: url('/images/bio/castel.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 300px;
   height: 214px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 3;
}
#img4b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 6;
}
#img5b {
   background: url('/images/bio/lapin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 145px;
   height: 178px;
   margin: 20px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 4;
}
#img6b {
   background: url('/images/bio/dessin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 145px;
   height: 178px;
   float: right;
   margin: -178px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 5;
}
#img7b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 8;
}
#img8b {
   background: url('/images/bio/redaction.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 300px;
   height: 138px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 7;
}
#img9b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 10;
}
#img10b {
   background: url('/images/bio/livres.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 300px;
   height: 161px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 9;
}
#img11b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 12;
}
#img12b {
   background: url('/images/bio/teo-couv.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 300px;
   height: 227px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 11;
}
#img13b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 14;
}
#img14b {
   background: url('/images/bio/shiki.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 300px;
   height: 225px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 13;
}
#img15b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 16;
}
#img16b {
   background: url('/images/bio/jean.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 300px;
   height: 225px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 15;
}
#img17b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 18;
}
#img18b {
   background: url('/images/bio/niger.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 300px;
   height: 450px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 17;
}
#img19b {
   background-color: rgba(255,255,255,0.7);
   width: 85%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 18;
}
#img20b {
   background: url('/images/bio/autre-vie.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 300px;
   height: 385px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 16;
}

.fin {
	letter-spacing: 0px;
}
}

@media only screen
	and (max-width : 790px)
	and (orientation : landscape) {
	/*Smartphone Galaxy S4 mini (paysage)*/
body {
	/*height: 828px;*/
	height: 360px;
}

		/*----------Portrait ouverture--------*/
#portrait-container {
	position: fixed;
	height: auto;
	margin: 25px 0px 0px 30px;
	z-index: 110;
}
img.portrait {
	height: auto;
	width: 50px;
	border-radius: 50%;
}

table#table-titre {
    width: 100%; 
    display: none;
	height: 0px;
}
.container {
	display: none;
	height: 0px;
}
table#table-fixe {
    width: 100%;
	display: none;
}
.titre {
	letter-spacing: 3px;
}


#img2b {
   background-color: rgba(255,255,255,0.7);
   width: 93%;
   margin: 0px auto 0px auto;
   padding: 20px;
   position: relative;
   /*border: 2px solid #a1a1a1;
   border-radius: 25px;*/
   z-index: 2;   
}
#img3b {
   background: url('/images/bio/castel.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 600px;
   height: 428px;
   margin: 20px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 3;
}
#img4b {
   background-color: rgba(255,255,255,0.7);
   width: 91%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 6;
}
#img5b {
   background: url('/images/bio/lapin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 290px;
   height: 356px;
   margin: 20px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 4;
}
#img6b {
   background: url('/images/bio/dessin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 290px;
   height: 356px;
   float: right;
   margin: -356px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 5;
}
#img7b {
   background-color: rgba(255,255,255,0.7);
   width: 93%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 8;
}
#img8b {
   background: url('/images/bio/redaction.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 445px;
   height: 205px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 7;
}
#img9b {
   background-color: rgba(255,255,255,0.7);
   width: 93%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 10;
}
#img10b {
   background: url('/images/bio/livres.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 600px;
   height: 322px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 9;
}
#img11b {
   background-color: rgba(255,255,255,0.7);
   width: 93%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 12;
}
#img12b {
   background: url('/images/bio/teo-couv.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 400px;
   height: 303px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 11;
}
#img13b {
   background-color: rgba(255,255,255,0.7);
   width: 93%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 14;
}
#img14b {
   background: url('/images/bio/shiki.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 500px;
   height: 375px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 13;
}
#img15b {
   background-color: rgba(255,255,255,0.7);
   width: 93%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 16;
}
#img16b {
   background: url('/images/bio/jean.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 600px;
   height: 450px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 15;
}
#img17b {
   background-color: rgba(255,255,255,0.7);
   width: 93%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 18;
}
#img18b {
   background: url('/images/bio/niger.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 600px;
   height: 900px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 17;
}
#img19b {
   background-color: rgba(255,255,255,0.7);
   width: 93%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 18;
}
#img20b {
   background: url('/images/bio/autre-vie.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 600px;
   height: 770px;
   margin: 20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 16;
}
}

@media only screen
	and (min-width : 480px)
	and (max-width : 800px)
	and (orientation : portrait) {
	/*Tablette Surface RT (Portrait)*/

/*----------Portrait ouverture--------*/
#portrait-container {
	position: fixed;
	height: auto;
	margin: 20px 0px 0px 30px;
	z-index: 110;
}
img.portrait {
	height: auto;
	width: 50px;
	border-radius: 50%;
}

table#table-titre {
    width: 100%; 
    display: none;
	height: 0px;
}
.container {
	display: none;
	height: 0px;
}
table#table-fixe {
    width: 100%;
	display: none;
}
.titre {
	letter-spacing: 3px;
}


#img2b {
   background-color: rgba(255,255,255,0.7);
   width: 50%;
   margin: 0px 0px 0px 0px;
   padding: 20px;
   position: relative;
   /*border: 2px solid #a1a1a1;
   border-radius: 25px;*/
   z-index: 2;   
}
#img3b {
   background: url('/images/bio/castel.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 500px;
   height: 357px;
   float: right;
   margin: -30px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 3;
}
#img4b {
   background-color: rgba(255,255,255,0.7);
   width: 60%;
   margin: -80px 0px 0px 0px;
   padding: 20px;
   float: right;
   position: relative;
   z-index: 6;
}
#img5b {
   background: url('/images/bio/lapin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 350px;
   height: 430px;
   margin: -20px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 4;
}
#img6b {
   background: url('/images/bio/dessin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 350px;
   height: 430px;
   float: right;
   margin: -330px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 5;
}
#img7b {
   background-color: rgba(255,255,255,0.7);
   width: 20%;
   margin: -90px 0px 0px 0px;
   padding: 20px;
   float: right;
   position: relative;
   z-index: 8;
}
#img8b {
   background: url('/images/bio/redaction.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 445px;
   height: 205px;
   margin: -100px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 7;
}
#img9b {
   background-color: rgba(255,255,255,0.7);
   width: 90%;
   margin: -20px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 10;
}
#img10b {
   background: url('/images/bio/livres.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 560px;
   height: 301px;
   margin: -20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 9;
}
#img11b {
   background-color: rgba(255,255,255,0.7);
   width: 25%;
   margin: -20px 0px 0px 0px;
   padding: 20px;
   position: relative;
   z-index: 12;
}
#img12b {
   background: url('/images/bio/teo-couv.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 400px;
   height: 303px;
   margin: -155px 0px 0px 0px;
   float: right;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 11;
}
#img13b {
   background-color: rgba(255,255,255,0.7);
   width: 15%;
   margin: -150px 0px 0px 30px;
   padding: 20px;
   position: relative;
   z-index: 14;
}
#img14b {
   background: url('/images/bio/shiki.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 560px;
   height: 420px;
   margin: -260px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 13;
}
#img15b {
   background-color: rgba(255,255,255,0.7);
   width: 25%;
   margin: -20px 0px 0px 0px;
   padding: 20px;
   position: relative;
   z-index: 16;
}
#img16b {
   background: url('/images/bio/jean.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 560px;
   height: 420px;
   margin: -320px 0px 0px 0px;
   float: right;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 15;
}
#img17b {
   background-color: rgba(255,255,255,0.7);
   width: 50%;
   margin: 20px 0px 0px 0px;
   padding: 20px;
   float: right;
   position: relative;
   z-index: 18;
}
#img18b {
   background: url('/images/bio/niger.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 500px;
   height: 750px;
   margin: -20px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 17;
}
#img19b {
   background-color: rgba(255,255,255,0.7);
   width: 60%;
   margin: 0px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 18;
}
#img20b {
   background: url('/images/bio/autre-vie.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 560px;
   height: 720px;
   margin: -240px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 16;
}
}

@media only screen
	and (min-width : 800px)
	and (max-width : 1200px) {
	/*Tablette Surface RT (paysage)*/
	/*écrans jusqu'à 1200px de large*/

/*----------Portrait ouverture--------*/
#portrait-container {
	position: fixed;
	height: auto;
	margin: 20px 0px 0px 30px;
	z-index: 110;
}
img.portrait {
	height: auto;
	width: 60px;
	border-radius: 50%;
}

table#table-titre {
    width: 100%; 
	display: none;
	height: 0px;
}
.container {
	display: none;
	height: 0px;
}
table#table-fixe {
    width: 100%;
	display: none;
}
.titre {
	letter-spacing: 5px;
}


#img2b {
   background-color: rgba(255,255,255,0.7);
   width: 45%;
   margin: 0px 0px 0px 0px;
   padding: 20px;
   position: relative;
   /*border: 2px solid #a1a1a1;
   border-radius: 25px;*/
   z-index: 2;   
}
#img3b {
   background: url('/images/bio/castel.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 600px;
   height: 428px;
   float: right;
   margin: -30px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 3;
}
#img4b {
   background-color: rgba(255,255,255,0.7);
   width: 15.5%;
   margin: 0px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 6;
}
#img5b {
   background: url('/images/bio/lapin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 350px;
   height: 430px;
   margin: -430px 0px 0px 30px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 4;
}
#img6b {
   background: url('/images/bio/dessin.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 350px;
   height: 430px;
   float: right;
   margin: -260px 30px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 5;
}
#img7b {
   background-color: rgba(255,255,255,0.7);
   width: 20%;
   margin: -80px 0px 0px 70px;
   padding: 20px;
   position: relative;
   z-index: 8;
}
#img8b {
   background: url('/images/bio/redaction.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 445px;
   height: 205px;
   margin: -180px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 7;
}
#img9b {
   background-color: rgba(255,255,255,0.7);
   width: 40%;
   margin: 250px 0px 0px 0px;
   padding: 20px;
   float: right;
   position: relative;
   z-index: 10;
}
#img10b {
   background: url('/images/bio/livres.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 800px;
   height: 430px;
   margin: -20px 0px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 9;
}
#img11b {
   background-color: rgba(255,255,255,0.7);
   width: 25%;
   margin: 140px 150px 0px 0px;
   padding: 20px;
   float: right;
   position: relative;
   z-index: 12;
}
#img12b {
   background: url('/images/bio/teo-couv.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 400px;
   height: 303px;
   margin: -20px 0px 0px 210px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 11;
}
#img13b {
   background-color: rgba(255,255,255,0.7);
   width: 15%;
   margin: -60px 0px 0px 150px;
   padding: 20px;
   position: relative;
   z-index: 14;
}
#img14b {
   background: url('/images/bio/shiki.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 640px;
   height: 480px;
   float: right;
   margin: -230px 30px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 13;
}
#img15b {
   background-color: rgba(255,255,255,0.7);
   width: 25%;
   margin: -20px 150px 0px 0px;
   padding: 20px;
   float: right;
   position: relative;
   z-index: 16;
}
#img16b {
   background: url('/images/bio/jean.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 667px;
   height: 500px;
   margin: 20px 0px 0px 30px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 15;
}
#img17b {
   background-color: rgba(255,255,255,0.7);
   width: 25%;
   margin: 350px 0px 0px 120px;
   padding: 20px;
   position: relative;
   z-index: 18;
}
#img18b {
   background: url('/images/bio/niger.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 500px;
   height: 750px;
   float: right;
   margin: -620px 20px 0px 0px;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 17;
}
#img19b {
   background-color: rgba(255,255,255,0.7);
   width: 60%;
   margin: 0px auto 0px auto;
   padding: 20px;
   position: relative;
   z-index: 18;
}
#img20b {
   background: url('/images/bio/autre-vie.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   width: 700px;
   height: 900px;
   margin: -250px auto 0px auto;
   position: relative;
   box-shadow: 3px 3px 7px rgba(0,0,0,1);
   z-index: 16;
}
}

@media only screen
	and (min-width : 1200px)
	and (max-width : 1600px) {
	/*écrans jusquà 1600 px de large*/

		/*----------Portrait ouverture--------*/
#portrait-container {
	position: fixed;
	height: auto;
	margin: 20px 0px 0px 50px;
	z-index: 110;
}
img.portrait {
	height: auto;
	width: 60px;
	border-radius: 50%;
}

table#table-titre {
    width: 100%;
	display: none;
}
.container {
	height: 100%;
	display: none;
}
table#table-fixe {
	height: 0px;
	display: none;
}
.titre {
	letter-spacing: 10px;
}


#img2 {
   width: 38%;
   left: 5%;
   margin-top: 30px;
}
#img3 {
   width: 600px;
   height: 428px;
   left: 50%;
   margin-top: -10px;
}
#img4 {
   width: 15%;
   left: 40%;
   margin-top: 0px;
}
#img5 {
   width: 350px;
   height: 430px;
   left: 10%;
   margin-top: 20px;
}
#img6 {
   width: 350px;
   height: 430px;
   left: 60%;
   margin-top: 0px;
}
#img7 {
   width: 445px;
   height: 205px;
   left: 25%;
   margin-top: -500px;
}
#img8 {
   width: 20%;
   left: 25%;
   margin-top: -250px;
}
#img9 {
   width: 800px;
   height: 430px;
   left: 30%;
   margin-top: 350px;
}
#img10 {
   width: 40%;
   left: 40%;
   margin-top: 400px;
}
#img11 {
   width: 400px;
   height: 303px;
   left: 20%;
   margin-top: 500px;
}
#img12 {
   width: 25%;
   left: 55%;
   margin-top: -800px;
}
#img13 {
   width: 15%;
   left: 15%;
   margin-top: 500px;
}
#img14 {
   width: 640px;
   height: 480px;
   left: 40%;
   margin-top: 350px;
}
#img15 {
   width: 25%;
   left: 55%;
   margin-top: -1550px;
}
#img16 {
   width: 900px;
   height: 675px;
   left: 5%;
   margin-top: -900px;
}
#img17 {
   width: 600px;
   height: 900px;
   left: 50%;
   margin-top: 600px;
}
#img18 {
   width: 25%;
   left: 10%;
   margin-top: -2000px;
}
#img19 {
   width: 825px;
   height: 1060px;
   left: 25%;
   margin-top: -300px;
}
#img20 {
   width: 44%;
   left: 10%;
   margin-top: -620px;
   margin-bottom: -170px;
}
}

@media only screen
	and (min-width : 1600px) {
	/*écrans d'une largeur supérieure à 1600 px*/

		/*----------Portrait ouverture--------*/
#portrait-container {
	position: fixed;
	height: auto;
	margin: 20px 0px 0px 50px;
	z-index: 110;
}
img.portrait {
	height: auto;
	width: 60px;
	border-radius: 50%;
}

table#table-titre {
    width: 100%;
	display: none;
}
.container {
	height: 100%;
	display: none;
}
table#table-fixe {
	height: 0px;
	display: none;
}
.titre {
	letter-spacing: 10px;
}


#img2 {
   width: 35%;
   left: 5%;
   margin-top: 30px;
}
#img3 {
   width: 700px;
   height: 500px;
   left: 50%;
   margin-top: -10px;
}
#img4 {
   width: 10%;
   left: 35%;
   margin-top: 0px;
}
#img5 {
   width: 350px;
   height: 430px;
   left: 10%;
   margin-top: 20px;
}
#img6 {
   width: 350px;
   height: 430px;
   left: 50%;
   margin-top: 0px;
}
#img7 {
   width: 445px;
   height: 205px;
   left: 25%;
   margin-top: -500px;
}
#img8 {
   width: 20%;
   left: 25%;
   margin-top: -250px;
}
#img9 {
   width: 930px;
   height: 500px;
   left: 30%;
   margin-top: 350px;
}
#img10 {
   width: 40%;
   left: 40%;
   margin-top: 400px;
}
#img11 {
   width: 400px;
   height: 303px;
   left: 20%;
   margin-top: 500px;
}
#img12 {
   width: 25%;
   left: 40%;
   margin-top: -800px;
}
#img13 {
   width: 10%;
   left: 15%;
   margin-top: 500px;
}
#img14 {
   width: 640px;
   height: 480px;
   left: 40%;
   margin-top: 350px;
}
#img15 {
   width: 25%;
   left: 40%;
   margin-top: -1550px;
}
#img16 {
   width: 1000px;
   height: 750px;
   left: 5%;
   margin-top: -900px;
}
#img17 {
   width: 600px;
   height: 900px;
   left: 50%;
   margin-top: 600px;
}
#img18 {
   width: 25%;
   left: 10%;
   margin-top: -2000px;
}
#img19 {
   width: 825px;
   height: 1060px;
   left: 30%;
   margin-top: -300px;
}
#img20 {
   width: 38%;
   left: 30%;
   margin-top: -600px;
   margin-bottom: -210px;
}
}

/* Return on top */
#returnOnTop {
    background: url('/images/logos/fleche.png') no-repeat;
    bottom: 2%;
    cursor: pointer;
    display: none;
    filter: alpha(opacity = 50); /* IE < 8 */
    height: 60px;
    opacity: 0.5;
    position: fixed;
    right: 2%;
    width: 80px;
	z-index: 50;
}

#returnOnTop:hover {
    filter: alpha(opacity = 100); /* IE < 8 */
    opacity: 1;
}