@charset "utf-8";

/* Mise en forme du header*/

header{
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	height: 100px;	
}

.entete{
	position: fixed;
	width: 100%;
	text-align: center;
	font-style: normal;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 20px;
	background-color: #FFFFFF;
	z-index: 10000;
}

h1{
	display: none;
}

.baniere{
	padding-top: 5px;
}

body {
	font-family: Verdana, Calibri, "sans-serif";
    background-color:#FFFFFF;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

.principal{
	width: 100%;
	background-color: #636262;
	position: fixed;
	z-index: 9999;
}

.menu-principal{
	margin: 0px;
	padding: 0px;
}

.menu-p, .menu-pmini, .sbm{
	list-style-type: none; /* pour supprimer les puces de la liste */
	float: left; /* pour placer la liste de manière horizontale */
}

nav a{
	display: inline-block; /* pour pouvoir travailler plus facilement par la suite sur ces liens */
	text-decoration: none; /* pour supprimer le soulignement des liens */
	padding: 20px 30px;
	color: #FFF;
	font-size: 15px;
}

.table{
	display: table; /* pour rendre la hauteur au menu */
	margin: 0 auto; /*pour centrer le menu */
}

.menu-p:hover{
	border-bottom: 5px solid #636262;
	background-color: #ACAAAA
}

.menu-pmini:hover{
	border-bottom: 5px solid #636262;
	background-color: #ACAAAA
}

.menu-p:hover a{
	padding: 20px 30px 15px 30px;
} /* pour éviter que le texte bouge de 5 pixels à cause des 5px dans le border-top de chaque "bouton" */

.menu-pmini:hover a{
	padding: 20px 30px 15px 30px;
} /* pour éviter que le texte bouge de 5 pixels à cause des 5px dans le border-top de chaque "bouton" */

.table-gal{
	height: 408px;
	width: 250px;
	background-color: #636262;
	margin-top: 10px;
} /* mise en forme du menu galerie*/

.galerie{
	position: fixed;
	z-index: 1000;
}

.gal{
	margin: 0px;
	padding: 0px;
	margin-top: 100px;
}

.menu-gal{
	text-align: left;
	text-decoration: none;
	list-style-type: none;
}

.menu-gal:hover{
	background-color: #ACAAAA
}

.anim{
	margin-left: -400px;
	transition-duration: 0.2s;
}

.anim_open{
	margin-left: 0px;
	transition-duration: 0.2s;
} /*transition javascript*/

footer{
	height: 170px;
	width: 100%;
	background-color: #969696;
	position: relative;
	top: 100px;
	z-index: 1;
}

.foot{
	display: block;
	width: 100%;
	font-size: 12px;
	position:absolute;
	bottom: 0px;
	text-align: center
}

.fcon{
	margin: 0px;
	padding: 0px;
}

.fcontact{
	display: table;
	margin: 0 auto;
}

.contact{
	list-style-type: none;
	float: left;
}

footer a{
	display: inline-block;
	text-decoration: none;
	padding: 10px 70px;
	color: black;
	font-size: 15px;
}

footer a:hover{
	color: white;
}

.maj{
	font-size: 12px;
	position: absolute;
	width: 98%;
	text-align: right;
	top: 20px;
}

/* Mise en forme du contenu de page */

.espacehaut{
	height: 58px;
}

.menusecondaire{
	position: fixed;
	width: 100%;
	z-index: 9000;
	background-color: #D3D3D3;
}

.menu2{
	margin: -5px 0px 0px 0px;
	padding: 0px;
}

.menusec{
	display: table; /* pour rendre la hauteur au menu */
	margin: 0 auto; /*pour centrer le menu */
}

.sbm a{
	display: inline-block;
	text-decoration: none;
	color: black;
	font-size: 15px;
	font-weight: bold;
}

#baringo:hover{
	background-color: #787878;
	color: #FFFFFF;;
}

#samburu:hover{
	background-color: #787878;
	color: #FFFFFF;
}

#mara{
	color: #FFFFFF;
}

#kenya{
	font-style: italic;
}

/* NE PAS DEPASSER 1550px pour les cadres */

h3{
	font-size: 20px;
	font-style: italic;
}

.imgredim{
	height: 330px
}

#titre0{
	margin: 80px auto 0px;
	text-align: center
}

.cadre1{
	width: 910px;
	margin: 30px auto 0px;
	border: 2px solid black;
}

.cadre2{
	width: 910px;
	margin: 10px auto 0px;
	border: 2px solid black;
}

.cadre3{
	width: 1352px;
	margin: 10px auto 0px;
	border: 2px solid black;	
}

.cadre4{
	width: 235px;
	margin: 10px auto 0px;
	border: 2px solid black;
}

.cadre5{
	width: 1122px;
	margin: 10px auto 0px;
	border: 2px solid black;	
}

#titre1, #titre2, #titre3, #titre4, #titre5, #titre6{
	width: 400px;
	margin: 20px 250px 0px;
}

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12{
margin: 0px 0px 0px 26px;
}


/* NE PAS DEPASSER 1550px pour les cadres */

@media screen and (min-width: 1151px) and (max-width: 1400px){
	header{
		height: 60px;
	}
	
	.entete{
		font-size: 12px;
	}
	
	.imgentete{
	width: 748px
	}
	
	.principal{
		height: 40px;
	}
	
	nav a{
		padding: 10px 20px;
	}
		
	.menu-p:hover{
		border-bottom: none;
		}
	
	.menu-pmini:hover{
		border-bottom: none;
		}
	
	.menu-p:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.menu-pmini:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.table-gal{
		height: 268px;
		width: 250px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 70px;
	}
	
	.espacehaut{
		height: 40px;
	}
	
	footer a{
		padding: 10px 40px;
	}

	/* Mise en forme du contenu de page */
	
	#titre0{
	margin: 50px auto 0px;
	}
	
	.cadre1{
		margin: 20px auto 0px;
	}
	
}

@media (min-width: 769px) and (max-width: 1150px){
	header{
		height: 60px;
	}
	
	.entete{
		font-size: 12px;
	}
	
	.imgentete{
	width: 748px
	}
	
	.principal{
		height: 40px;
	}
	
	nav a{
		padding: 10px 20px;
	}
		
	.menu-p:hover{
		border-bottom: none;
		}
	
	.menu-pmini:hover{
		border-bottom: none;
		}
	
	.menu-p:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.menu-pmini:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.table-gal{
		height: 268px;
		width: 250px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 70px;
	}
	
	.espacehaut{
		height: 40px;
	}
	
	footer a{
		padding: 10px 40px;
	}
	
	section{
		height: 270px;
	}
	
	/* Mise en forme du contenu de page */
	
	
	.imgredim{
		height: 270px
	}
	
	#titre0{
	margin: 50px auto 0px;
	}
	
	.cadre1{
		width: 750px;
		margin: 20px auto 0px;
	}

	#titre1, #titre2, #titre3, #titre4, #titre5, #titre6{
		width: 400px;
		margin: 20px 150px 30px;
	}

	#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12{
		margin: 0px 0px 0px 23px;
	}
	
	.cadre2{
		width: 750px;
		margin: 10px auto 0px;
		border: 2px solid black;
	}

	.cadre3{
		width: 1115px;
		margin: 10px auto 0px;
		border: 2px solid black;
	}
	
	.cadre4{
		width: 195px;
		margin: 10px auto 0px;
		border: 2px solid black;		
	}

	.cadre5{
		width: 928px;
		margin: 10px auto 0px;
		border: 2px solid black;
	}
}


@media screen and (max-width: 768px){
	header{
		height: 60px;
	}
	
	.entete{
		font-size: 12px;
	}
	
	.baniere{
		display: none;
	}
	
	h1{
		display: block;
	}
	
	.principal{
		height: 40px;
	}
	
	nav a{
		padding: 10px 20px;
	}
	
	.menu-p{
		display: none;
	}
		
	.menu-pmini:hover{
		border-bottom: none;
		}
	
	.menu-pmini:hover a{
		padding: 10px 20px 10px 20px;
	}
	
	.table-gal{
		height: 268px;
		width: 250px;
	} /* mise en forme du menu galerie*/
	
	.gal{
		margin-top: 70px;
	}
	
	.espacehaut{
		height: 40px;
	}
	
	.sbm{
		margin: 0px -5px 0px -10px;
	}
	
	#kenya{
		display: none;
	}
	
	footer a{
		padding: 10px 20px;
	}
	
	.cr{
		display: none;
	}
	
	.maj{
		top: 50px;
		text-align: center;
	}
	
	/* Mise en forme du contenu de page */
	h3{
		font-size: 18px;
		font-style: italic;
		text-align: center;
	}
	
	.imgredim{
		display: block;
		height: 270px;
	}
	
	#titre0{
	margin: 50px auto 0px;
	}
	

	
	.cadre1, .cadre2, .cadre3, .cadre4, .cadre5{
		width: 99%;
		margin: 20px 0px 0px 0px;
		border: 1px solid black;
	}
	
	#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12{
		margin: 0px auto;
	}
	

	#titre1, #titre2, #titre3, #titre4, #titre5, #titre6{
		width: 300px;
		margin: 10px auto;
	}
}