@media (min-aspect-ratio: 1/1) and ( max-height: 1120px) /* Affichage mode paysage, écran 16/10 et navigateur */
{
	body{
		background-image:url("../../img/bg_1060.jpg");
	}	
	.titre{
		content: url("../../img/titre_1080p.png");  
	}​
}

@media (min-aspect-ratio: 1/1) and  (min-height: 1120px) and (max-height: 1200px) /* Affichage mode paysage, < 4k */
{
	body{
		background-image:url("../../img/bg_1080p.jpg"); 
	}
	.titre{
		content: url("../../img/titre_1080p.png");  
	}​
}

@media (max-aspect-ratio: 1/1)  /* Smartphone en mode portrait */
{
	body{
		background-image:url("../../img/bg_smart_portrait.jpg"); 
	}
	.titre{
		content:url("../../img/titre_smart_portrait.png"); 
	}​
}

@media (min-aspect-ratio: 1/1) and (min-height: 1201px) /*  4K */
{
	body{
		background-image:url("../../img/bg_4k.jpg"); 

	}
	.titre{
		content:url("../../img/titre_4k.png");
	}​
}

body{
		background-size: cover; 
		background-repeat: no-repeat;
		background-attachment: local;
		margin: 0 0 0 0;
		font-family: Verdana;
		
}

.titre{
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		padding-bottom: 10px;	
}​

#container{
    height:100%;
}

#corps{

}

.menu{
	height:100%;
	width:15%;
	float:left;
	position: relative;
}

.center_menu{
	height:100%;
	text-align: center;

}

.menu a img {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	max-width: 100%;
}

#famille{
	max-height: 27.27%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	max-width: 100%;
}

#vacances{
	max-height: 32.45%;
}

#voyages{
	max-height: 20.27%;
}

#divers{
	max-height: 16.01%;
}

 
.menu a:hover img {
	-webkit-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

.bibliotheque{
	width:83%;
	height:100%;
	float:right;
	position: relative;
}

.etageres{	
	width:100%;
}

.etagere{
	text-align:center;
	padding:0px; 
	width:100%; 
	height:auto; 
	z-index: 99; 
	position: relative;
}

.livres{
	max-width:78%;
	margin:auto; 
	height:auto; 
	z-index: 99; 
	position:relative;
	text-align:center;
}

.img_etagere{
	z-index:0; 
	height: auto; 
	max-width: 100%; 
	vertical-align: top; 
	margin-top:-12px;
}

.livre{
	width:15%; 
	max-width:100px;
}

.footer{

}