/* 

CSS Document
FONTS
- ALBERT : 'albert'

COULEURS
- GROSSESSE : #EF2C8B / rgba(239,44,139)
- BEBES : #EF90B9 / rgba(239,144,185)
- ENFANTS : #9682B9 / rgba(150x130x185)
- ADOLESCENTS : #7D52B3 / rgba(125,82,179)
- FAMILLE : #401C80 / rgba(64x28x128)
- LIVRES : #13007C / rgba(19x0x124)

*/

.menuBorder { width:15%; display:flex; flex-wrap:wrap; }
	nav a:link, nav a:visited { color:#FFFFFF; }
	nav a:hover, nav a:active { color:#FFFF00; }
	
	nav a.menuSelected:link, nav a.menuSelected:visited { color:#FFFF00; }
	
	.menuBorder_left { width:99%; margin-right:1%; background-color:rgba(204,0,102); border-radius:0 0.25em 0.25em 0; padding:0.5em 0; }
	.menuBorder_right { width:99%; margin-left:1%; display:flex; flex-wrap:wrap; align-items:flex-end; background-color:rgba(19,0,124); border-radius:8px 0 0 8px; padding:0.5em 0; }
.menu { width:70%; display:flex; flex-wrap:wrap; align-items:flex-end; }
	.menuBox { width:14.2857%; }
		.menuBox_pict { width:100%; text-align:center; font-size:0; padding:0.5em; }
			.menuBox_pict img { max-width:80%; height:auto; } 
			img.noMax { max-width:none; }
		.menuBox_btn { width:98%; margin:0 1%; color:#FFFFFF; border-radius:0.25em; padding:0.5em 0; text-align:center; }
			.index { background-color:rgba(204,0,102); }
			.grossesse { background-color:rgba(239,44,139); }
			.bebes { background-color:rgba(239,144,185); }
			.enfants { background-color:rgba(150,130,185); }
			.ado { background-color:rgba(125,82,179); }
			.famille { background-color:rgba(64,28,128); }
			.all { background-color:rgba(19,0,124); }
		.menuContact { padding-left:1em; }
			a.menuContact:hover { color:#FF0; }

@media screen and (max-width:1600px) {

}

@media screen and (max-width:1280px) {
	/* 17-19 pouces */
}

@media screen and (max-width:1020px) {
	/* 15 pouces */

}

@media screen and (max-width:600px) {
	.sidenavLogo { width:100%; text-align:center; }
		.sidenavLogo img { max-width:30%; height:auto; }
	
	/* The side navigation menu */
	.sidenav {
		height:100%; /* 100% Full-height */
		width:0; /* 0 width - change this with JavaScript */
		position:fixed; /* Stay in place */
		z-index:1; /* Stay on top */
		top:0; /* Stay at the top */
		left:0;
		background-color:#FFFFFF; /* Black*/
		overflow-x:hidden; /* Disable horizontal scroll */
		padding-top:60px; /* Place content 60px from the top */
		transition:0.5s; /* 0.5 second transition effect to slide in the sidenav */
	}
	
	/* The navigation menu links */
	.sidenav a {
		padding:0.25em 0;
		text-decoration:none;
		font-size:1.25em;
		color:#818181;
		display:block;
		transition:0.3s;
		text-align:center;
		width:100%;
		display:flex;
		flex.wrap:wrap;
		align-items:center;
		justify-content:center;
	}
	
	.sidenav a img  { width:30px; }
	
	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover { color:#F1F1F1; }
	
	/* Position and style the close button (top right corner) */
	.sidenav .closebtn {
		position:absolute;
		top:0;
		right:25px;
		font-size:36px;
		margin-left:50px;
		justify-content:right;
		color:#000000;
	}
	
	/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
	#main { transition:margin-left .5s; padding:20px; }

}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
	/*  iphone SE --> 11 + XR | MacBook | iMac | iPad */
	
	@media screen and (max-width:450px) {
	
	}
	
	@media screen and (max-width:880px) {
	.sidenavLogo { width:40%; text-align:center; }
		.sidenavLogo img { max-width:50%; height:auto; margin:0 auto; }
	
	.sidenav { height:100%; width:0; position:fixed; z-index:1; top:0; left:0; background-color:#FFFFFF; overflow-x:hidden; padding-top:60px; transition:0.5s; }
	.sidenav a { padding:0.25em 0; 	text-decoration:none; font-size:0.8em; color:#818181; display:block; transition:0.3s; text-align:center; width:100%; display:flex; flex.wrap:wrap; align-items:center; justify-content:center; }
	.sidenav a img  { width:30px; }
	.sidenav a:hover { color:#F1F1F1; }
	.sidenav .closebtn { position:absolute; top:0; right:25px; font-size:36px; margin-left:50px; justify-content:right; color:#000000; }
	#main { transition:margin-left .5s; padding:20px; }
	}

}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
	/*  iphone12 --> 16  */
	@media screen and (max-width:450px) {
	
	}
	
	@media screen and (max-width:880px) {
	
	}
}

@media only screen and (-webkit-min-device-pixel-ratio:4) {
	/*  Google Pixel 6 Pro | OPPO Find X3 Pro | Samsung Galaxy + S21-22 Ultra */
	@media screen and (max-width:450px) {
	
	}
	
	@media screen and (max-width:880px) {
		
	}
}