*{
	margin: 0;
	padding: 0;

}
.bg-hed{
	background-color: #134f5c !important;
	color: #fff !important;
}
.body
{
	/* background-image: url('Photo/Foemation1.JPG'); */
	/* background-attachment: fixed;
    background-size: cover;
    background-position: center; */
	height: 200vh;
	background-color: #f4f4f4;
}

/* HEADER */
/*  */
.header
{

	background-color: #134f5c;
	position: fixed;
	
}

.imgHeader {
	height: 40px;
	width: 30px;
	
}

.deconnexion {
	background-color: #ff6347;
	border-radius: 15px;
}

/* FIN header */

/* INDEX */
.titleParentIndex {
	margin: 50px;
}

.titleIndex 
{
	text-align: center;
	color: #134f5c;
    line-height: 1em;
	font-size: 6vw;
    z-index: 1000;
    font-weight: 900;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.titleIndexCheeld {
	color: #134f5c;
    line-height: 1em;
	font-size: 1.5vw;
    z-index: 400;
    font-weight: 400;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.titleI {
	color: #f4f4f4;
}


.sectionIndex {
	height: 90vh;
	width: 100%;
	background-color: #134f5c6e;
	/* background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    background-attachment: fixed;
	/* background-image: url('Photo/Formation8.JPG'); */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	
}

.imgIndex {
	width: 100PX;
	height: 400px;
	border-radius: 100px;
}

/* detaillSectionIndex */

.detaillSectionIndex {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 20px;
}

.detailIndex {
	flex-basis: 32%;
	margin: 20px;
	border-radius: 15px;
}

.imgDetail {
	width: 600px;
	height: 500px;
	border-radius: 20px;

}

.detailTitle {
	margin-top: 20px;
	color: #134f5c;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1em;
	font-size: 2.5vw;
    z-index: 400;
    font-weight: 800;
    text-align: center;
}

.detailPrg {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1em;
	font-size: 1.5vw;
    z-index: 400;
    font-weight: 400;
    text-align: center;
}

/* Footer */

footer {

	margin-top: 40px;
	background-color: #134f5cde;
	color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30px;

}

.Prom
{
	display: flex;
	
}

.iconeFooter {
	margin: 10px;
}

/* ....REALISATION.... */

.titleRealisation {
	line-height: 1em;
    z-index: 400;
	text-align: center;
	font-size: 3vw;
	font-weight: 800;
	color: #134f5c;
	margin: 20px
}

.pathRealisations {
	text-decoration: none;
	text-align: center;
	font-size: 1vw;
	font-weight: 500;
	margin: 20px;
	color: black;
}

.pathRealisations:hover {
	color: #134f5c;
}


ul {
	list-style: none;
}

.fatherReaction {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	margin-top: 40px;
}

.cheeldRealisation {
	flex-basis: 32%;
	margin: 20px;
}

.titleaReactionF {
	color: #134f5c;
    line-height: 1em;
	font-size: 2.5vw;
    z-index: 400;
    font-weight: 500;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.listFatherRealisation {
	margin-top: 20px;
}

/* APROPOS */

.containerApr {
	margin: 30px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.imgApropos {
	width: 50%;
	height: 500px;
	margin: 10px;
	border-radius: 20px;
}

.titleApropos {
	color: #134f5c;
}

/* RESPONSIVE */

@media screen and (min-width: 166.67px) {

	.titleRealisation {
		font-size: 9.5vw;
	}

	.titleaReactionF {
		font-size: 8vw;
	}

	.pathRealisations {
		font-size: 6vw;
		margin: 0px;
	}

	.cheeldRealisation {
		margin: -3px;
	}

	/* FOOTER */

	.Prom {
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	/* INDEX */

	.sectionIndex {
		height: 53vh;
		flex-direction: column;
	}

	.titleIndex {
		font-size: 10vw;
	}

	.titleIndexCheeld {
		font-size: 7vw;
		font-weight: 700;
	}

	.imgIndex {
		width: 150PX;
		height: 122px;
	}

	.titleParentIndex {
		margin: 27px;
	}

	/* DETAIL */

	.imgDetail {
		width: 125px;
		height: 84px;
	}

	.detailTitle {
		font-size: 7vw;
		font-weight: 700;
	}

	.detailPrg {
		font-size: 9vw;
		font-weight: 300;
	}

	.detailIndex {
		margin: 6px;
	}
	
}

@media screen and (min-width: 240px) {

	.sectionIndex {
		height: 78vh;
		flex-direction: column;
	}

	.imgIndex {
		height: 191px;
		width: 200PX;
	}

	.titleParentIndex {
		margin: 25px;
	}

	.titleIndex {
		font-size: 10vw;
		font-weight: 1000;
		margin-top: 30px
	}

	.titleIndexCheeld {
		font-size: 6.5vw;
		font-weight: 600;
		margin-top: 30px;
	}

	/* DETAIL */

	.imgDetail {
		width: 199px;
		height: 164px;
	}

	.detailTitle {
		font-size: 7vw;
		font-weight: 700;
	}

	.detailPrg {
		font-size: 7vw;
	}

	/* Realisation */

	.titleRealisation {
		font-size: 9vw;
		font-weight: 900;
	}

	.titleaReactionF {
		font-size: 6vw;
		font-weight: 600;
	}

	.pathRealisations {
		font-size: 5.5vw;
		font-weight: 600;
	}

	.fatherReaction {
		margin-top: 13px;
	}
}

@media screen and (min-width: 246px) {

	.sectionIndex {
		height: 83vh;
	}

	
}

@media screen and (min-width: 294px) {

	.sectionIndex {
		height: 83vh;
		width: 100%;
		flex-direction: column;
	}

	.imgIndex {
		width: 100%;
		height: 208px;
		border-radius: 100px;
	}

	.titleParentIndex {
		margin: 36px;
	}

	.titleIndex {
		text-align: center;
		margin-top: 10px;
		color: #134f5c;
		line-height: 1em;
		font-size: 9vw;
		z-index: 1000;
		font-weight: 900;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.titleIndexCheeld {
		text-align: center;
		margin-top: 40px;
		color: #134f5c;
		line-height: 1em;
		font-size: 5.5vw;
		z-index: 400;
		font-weight: 500;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* DETAIL */

	.imgDetail {
		width: 240px;
		height: 185px;
	}

	.detailPrg {
		font-size: 6vw;
	}

	/* REALISATION */

	.pathRealisations {
		font-size: 5vw;
		font-weight: 500;
	}
}

/* DETAIL */

@media screen and (min-width: 276px) {

	.sectionIndex {
		height: 87vh;
	}

	.imgDetail {
		width: 231px;
		height: 164px;
	}
}
@media screen and (min-width: 299px) {

	.imgDetail {
		width: 249px;
		height: 178px;
	}
}
@media screen and (min-width: 319px) {

	.imgDetail {
		width: 271px;
		height: 200px;
	}
	
}
@media screen and (min-width: 356px) {

	.imgDetail {
		width: 299px;
		height: 213px;
	}
}


/* DETAIL */

@media screen and (min-width: 391px) {

	.sectionIndex {
		height: 87vh;
	}

	.titleParentIndex {
		margin: 27px;
	}

	.titleIndex {
		margin-top: 30px;
		font-size: 10vw;
	}

	.titleIndexCheeld {
		font-size: 4.2vw;
	}

	.imgIndex {
		height: 231px;
	}

	/* DETAIL */

	.imgDetail {
		width: 336px;
		height: 237px;
	}

	.detailPrg {
		font-size: 5vw;
		font-weight: 500;
	}
}

/* DETAIL */

@media screen and (min-width: 430px) {

	.detailPrg {
		font-size: 4.5vw;
		font-weight: 500;
	}

	.imgDetail {
		width: 376px;
		height: 260px;
	}

	/* REALISATION */

	.titleRealisation {
		margin-top: 40px;
	}

	.titleaReactionF {
		font-size: 5vw;
		font-weight: 500;
	}

	.pathRealisations {
		font-size: 4vw;
		font-weight: 500;
	}
}

@media screen and (min-width: 460px) {

	.imgDetail {
		width: 411px;
		height: 291px;
	}
}

/* DETAIL */

@media screen and (min-width: 494px) {

	.titleIndexCheeld {
		font-size: 4vw;
	}
	
}

@media screen and (min-width: 531px) {

	.sectionIndex {
		height: 86vh;
	}

	/* DETAIL */

	.imgDetail {
		width: 471px;
		height: 316px;
	}

	.detailTitle {
		font-size: 6vw;
	}

	.detailPrg {
		font-size: 4VW;
		font-weight: 400;
	}
}

/* DETAIL */

@media screen and (min-width: 590px) {

	.imgDetail {
		width: 535px;
		height: 360px;
	}
	
}
@media screen and (min-width: 630px) {

	.imgDetail {
		width: 577px;
		height: 391px;
	}

	.detailTitle {
		font-size: 5vw;
		font-weight: 600;
	}

	.detailPrg {
		font-size: 3VW;
		font-weight: 500;
	}

	/* REACTION */

	.pathRealisations {
		font-size: 5vw;
	}
	
}

/* DETAIL FIN */
/* @media screen and (min-width: 590px) {

	
} */

@media screen and (min-width: 673px) {

	.titleIndexCheeld {
		font-size: 3.5vw;
	}
}

/* DETAIL */
@media screen and (min-width: 690px) {

	.imgDetail {
		width: 626px;
		height: 420px;
	}

	.detailTitle {
		font-size: 5vw;
		font-weight: 750;
	}

	footer {

		margin-top: 50px;
	}
	
}
/* DETAIL FIN */

@media screen and (min-width: 728px) {

	.titleIndex {
			margin-top: 16px;
			font-size: 8vw;
	}

	.titleIndexCheeld {
		font-size: 3vw;
	}

	.imgIndex {
		height: 283px;
	}

	footer {

		margin-top: 50px;
	}
	
}
/* DETAIL */
/* @media screen and (min-width: 755px) {

	.imgDetail {
		width: 687px;
		height: 455px;
	}
	
} */
/* DETAIL FIN */
@media screen and (min-width: 776px) {

	.imgIndex {
		height: 263px;
	}

	footer {

		margin-top: 50px;
	}
}

/* DETAIL */
@media screen and (min-width: 755px) {

	.imgDetail {
		width: 756px;
		height: 485px;
	}

	.detailTitle {
		font-size: 4vw;
		font-weight: 700;
	}

	/* REALISATION */
	
	.titleRealisation {
		margin-top: 34px;
		font-size: 5.5vw;
		font-weight: 1000;
	}

	.titleaReactionF {
		font-size: 3vw;
		font-weight: 700;
	}

	.pathRealisations {
		font-size: 2.5vw;
	}

	footer {

		margin-top: 50px;
	}

}
/* DETAIL FIN */

@media screen and (min-width: 866px) {

	.sectionIndex {
		flex-direction: row;
		height: 89vh;
	}

	.titleIndex {
		line-height: 1.5em;
		font-size: 7vw;
		font-weight: 800;
	}

	.titleIndexCheeld {
		font-size: 3vw;
	}

	.titleParentIndex {
		margin: 50px;
	}

	.imgIndex {
		width: 350px;
		height: 251px;
	}

	/* DETAIL */

	.detaillSectionIndex {
		margin: 0px;
	}
	.detailIndex {
		margin: 10px;
	}

	.imgDetail {
		width: 384px;
		height: 312px;
	}

	.detailTitle {
		font-size: 3vw;
		font-weight: 500;
	}

	.detailPrg {
		font-size: 2VW;
		font-weight: 500;
	}
	footer {

		margin-top: 50px;
	}
}

/* DETAIL */
@media screen and (min-width: 950px) {

	.imgDetail {
		width: 423px;
		height: 344px;
	}

	.detaillSectionIndex {
		margin: 20px;
	}

	footer {

		margin-top: 50px;
	}
}


@media screen and (min-width: 992px) {

	.titleIndexCheeld {
		font-size: 2vw;
	}

	.imgIndex {
		width: 406px;
		height: 336px;
	}

	/* REALISATION */

	.pathRealisations {
		font-size: 1.6vw;
	}

	.titleaReactionF {
		font-size: 2vw;
		font-weight: 800;
	}

	.titleRealisation {
		margin-top: 39px;
		font-size: 4vw;
		font-weight: 900;
	}

	footer {

		margin-top: 50px;
	}
}

/* DETAIL */
@media screen and (min-width: 1000px) {

	.imgDetail {
		width: 447px;
		height: 372px;
	}

	.detailTitle {
		font-size: 4vw;
		font-weight: 700;
	}
	
}
@media screen and (min-width: 1070px) {

	.detailTitle {
		font-size: 4vw;
		font-weight: 700;
	}

	.detailTitle {
		font-size: 3.5vw;
		font-weight: 600;
	}

	footer {

		margin-top: 50px;
	}
	
}

@media screen and (min-width: 1090px) {
	.imgDetail {
		width: 477px;
		height: 385px;
	}

	.detailTitle {
		font-size: 3vw;
		font-weight: 700;
	}

	footer {

		margin-top: 50px;
	}
}

/* Realisation */

@media screen and (min-width: 1230px) {
	.titleRealisation {
		margin-top: 37px;
		font-size: 3vw;
		font-weight: 600;
	}

	.titleaReactionF {
		font-size: 1.5vw;
		font-weight: 600;
	}

	.pathRealisations {
		font-size: 1.5vw;
	}

	/* DETAIL */

	.imgDetail {
		width: 650px;
		height: 380px;
	}

	.detailTitle {
		font-size: 1.7vw;
		font-weight: 700;
	}

	.detailPrg {
		font-size: 1.5VW;
		font-weight: 400;
	}

	/* REALISATION */

	.fatherReaction {
		margin-top: 40px;
	}

	/* FOOTER */

	footer {

		margin-top: 50px;
	}

}











/*herbivore carnivore volaille*/
/* nav ul ul
{
	position: absolute;
	top: 50px;
	opacity: 10;
	visibility: hidden;
	width: 188px;
	background-color: #dbd8f6;
	margin: 0;
	padding: 0;
}
nav ul #span li:hover ul
{
	top: 63px;
	opacity: 0.70;
	visibility: visible;

}

nav ul .user{
	display: none;
}
/*nav ul .user li:focus ul*/
/* nav ul .user ul
{
	top: 63px;
	opacity: 0.70;
	visibility: visible;

}

nav ul ul li{
	width: 100%;
}
nav ul ul li a{
	color: red;
	text-indent: 35px;
}


nav ul ul li a:hover{
	font-weight: bold;
	font-style: italic;
	background-color: #837e7e;
}
/*fin.....................................*/


/*retour..................................*/
/* #yelele
{
	margin-left: 95%;
}

#yelele a{
	text-decoration: none; */
/* fin......................................*/



/* .Esperance3 div a:hover {
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
	color: black;
}
.Esperance3 div a{
	text-decoration: none;
	color: black;
}
.Jules
{
	border-width: 9px;
	border-style: double;
	border-color: olive;
	width: 98.5%;
	top: 20px;

}
.Jules li
{
	text-align: center;
	position: static;

}

body
 
{
	background: #e8e9f1;
}
#Mariamu
{
	 background-image: url(Photo/Formation1.JPG);
	 min-height: 500px;
	 text-align: center;
	 background-repeat: no-repeat;
	 background-size: 100% 100%;
	 height: 300px;
	 color: #15618c;
	 text-decoration: none;

}
#miriamu
{
	margin-top: 20px;
}
#miriamu .box
{
	float: left;
	text-align: center;
	width: 30%;
	padding: 10px;

}
.formation li
{
	
	list-style-type: none;
}
.formation a{
	text-decoration:none;
}
.formation a:hover
{
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
	color: red;
} */

/* .box img{
	border-radius: 10%;
}
.sauvage img{
	border-radius: 40%;
}
#Sauvage2{
	padding-top: 2%;
	text-align: center;

}
#yelele img
{
	width: 10px;
	height: 10px;
}
.fin{
	margin-left: 4%;
	padding-top: 4%;
}
.fin a img
{
	margin: 0 20px;
}

#video
{
	padding: 50px;
	padding-bottom: 1px;
	margin-right: 200px;
}   */