html{
	scroll-behavior: smooth;
}


body{
	background-color:white;
	color:white;
	margin:0;
	overflow-x: hidden;
}


h1, h2, h3, h4, a, button, footer p{
	margin:0;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.flexbox_parent_over_screen{
	top: 0;
	position: fixed;
	width: 100vw;
	min-height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
	margin: 0;
	padding: 0;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 5;
}

.child_over_screen{
	margin-right: 20px;
	height: calc(100vh - 40px);
	width: calc(100% - 60px);
	background-position: center;
	background-size: contain;
	background-image: url("../image/home/vertical/05.jpg");
	background-repeat: no-repeat;
}

.cross{
	position:fixed;
	width: 50px;
	height: 50px;
	top: 25px;
	left: calc(50vw - 25px);
	cursor: pointer;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image:url(../image/cross.png);
	background-color: transparent;
	border: none;
}

.arrow{
	position:fixed;
	width: 50px;
	height: 50px;
	top: calc(50vh - 25px);
	cursor: pointer;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none;
}

.left_arrow{
	left: 25px;
	background-image:url(../image/gauche.webp);
}

.right_arrow{
	right: 25px;
	background-image:url(../image/droite.webp);
}

.flexbox_parent_over_screen p{
	position: fixed;
	font-size: 25px;
	color:white;
	top:calc(100vh - 100px);
	width: 100px;
	left:calc(50% - 50px);
	text-align: center;
}



.flexbox_parent_over_screen{
	top: 0;
	position: fixed;
	width: 100vw;
	min-height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
	margin: 0;
	padding: 0;
	display: none;
	justify-content: center;
	align-items: center;

}

.child_over_screen{
	margin-right: 20px;
	height: calc(100vh - 40px);
	width: calc(100% - 60px);
	background-position: center;
	background-size: contain;
	background-image: url("../image/home/vertical/05.jpg");
	background-repeat: no-repeat;
}


header{
	height:100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center, top;
	/*background-image: 
	linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
	url("../image/home/horizontal/19.jpg"), url("../image/home/horizontal/02.jpg"),
	url("../image/home/horizontal/04.jpg"), url("../image/home/horizontal/07.jpg"),
	url("../image/home/horizontal/13.jpg"), url("../image/home/horizontal/17.jpg"),
	url("../image/home/horizontal/01.jpg"), url("../image/home/horizontal/06.jpg"),
	url("../image/home/horizontal/05.jpg"), url("../image/home/horizontal/08.jpg");
	animation: animBackground 80s normal infinite;
	-webkit-animation: animBackground 80s normal infinite;*/
	background-image: 
	linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
	url("../image/home/anime2.gif"), url("../image/home/horizontal/19.jpg");
}

h1{
	text-align: center;
}

h1 a.tittle{
	font-size: clamp(50px, 7.5vw, 200px);
	text-decoration: none;
	color:white;
}

header button.menu{
	display:none;
}

header button.menu2{
		z-index: 3;
		position: fixed;
		display:block;
		top: -180px;
		right:20px;
		background-color:white;
		border-radius: 100px;
		width: 50px;
		height: 50px;
		background-image:url("../image/fleche.webp");
		background-size: cover;
		border:1px black solid;
		transition-duration: 1s;
		cursor: pointer;
	}

header #primary_nav{
	min-height: 105px;
}

header #primary_nav ul{
	display: flex;
	padding:0;
	margin:0;
	justify-content: center;
	list-style-type: none;
	position: sticky;
}

header ul li{
	padding: 0 15px 0 15px;
	color:white;
	max-height: 25px;
	margin-bottom: 0;
}

header ul li a, header ul li p{
	text-decoration: none;
	color: white;
	font-size: clamp(5px, 4vw, 25px);
	font-weight: bold;
	margin: 0 0 10px 0;
}

header ul li a:hover{
	text-decoration: underline;
}

header ul .li-hover{
	min-width: 128px;
	padding-left: 0;
	max-height: none;
 display: flex;
 flex-direction: column;
}

header ul .li-hover a{
 font-size: 18px;
 display: none;
}

header ul .li-hover:hover a{
	display: block;
}

.nav_symbols{
padding-top:3px;
font-weight: bold;
font-size: larger;
}

#secondary_nav{
		display: none;
		right:100vw;
	}

.hero{
	height: 50vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero h2{
	display: none;
	text-align: center;
	font-size: 70px;
}

.hero a.discover{
	margin-top: 25vh;
	display: block;
	text-decoration: none;
	text-align: center;
	color:rgb(55, 40, 9);
	background-color: white;
	font-size: 30px;
	width:150px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	padding:20px;
	border: white 1px solid;
	font-weight: bold;
	transition-duration: 1s;
}

.hero h2 a{
	text-decoration: underline white;
	-webkit-text-decoration: underline white;
}

.hero a.discover:hover{
	border-radius: 15px;
	color: white;
	background-color: transparent;
}

/*////////////////Galerie//////////////*/ 

.flexbox_parent_container2{
	min-height: 100vh;
	background-color:white;
	width:100%;
	color:#372809;
	padding-bottom:50px;
}

.flexbox_parent_container2 h2{
	text-align: center;
	font-size: clamp(50px, 20vw, 200px);
	line-height: 1.5;
	font-family: Title;
}

.flexbox_parent_galerie{
	min-height:70vh;
	width:100%;
	text-align: center;
}

.flexbox_parent_galerie .img_exposition{
	display: inline-block;
	width: 300px;
	height:450px;
	margin:15px;
	background-size: 100%;
	background-position: center;
	transition-duration: 1s;
	overflow: hidden;
}

.img_exposition:hover{
	background-size: 120%;
}


#photo1{background-image: url("../image/home/vertical/05.jpg");}
#photo2{background-image: url("../image/home/vertical/06.jpg");}
#photo3{background-image: url("../image/home/vertical/04.jpg");}
#photo4{background-image: url("../image/home/vertical/12.jpg");}
#photo5{background-image: url("../image/home/vertical/09.jpg");}
#photo6{background-image: url("../image/home/vertical/25.jpg");}
#photo7{background-image: url("../image/home/vertical/07.jpg");}
#photo8{background-image: url("../image/home/vertical/03.jpg");}



/*////////// A propos /////////////*/

.flexbox_parent_container{
	display: flex;
	justify-content: space-between;
	background-color:grey;
	width:80%;
	padding-right: 10%;
	padding-left: 10%;
	padding-bottom: 80px;
	margin-left:auto;
	margin-right: auto;
	background-image:url("../image/home/landscape/01.jpg");
	background-size: cover;
	background-position: center top;

}

.flexbox_parent_container article{
	border: 1px white dashed;
	background-color: rgba(0, 0, 0, 0.30);
	margin-top:30px;
	width:calc(78% - 40px);
	padding:20px;
}

.flexbox_child1{
	display: flex;
	justify-content: space-between;
}

article h2{
	text-align: center;
	font-size: 120px;
}

article .flexbox_child1 .img{
	background-image: url("../image/home/presentation.jpg");
	background-position: center;
	background-size: 120%;
	display: block;
	width:300px;
	height:450px;
	/* 500 si 16:9 */
	transform: scale(0.9);
	margin-top:-20px;
}

article .flexbox_child1 p{
	width:calc(100% - 300px - 100px);
	margin: 0 50px;
	font-size: 20px;
}

article .flexbox_child1 a{
	text-align: center;
	display: block;
	width:120px;
	margin-top:50px;
	margin-left:auto;
	margin-right: auto;
	padding:10px;
	color:rgb(55, 40, 9);
	background-color: white;
	text-decoration: none;
	font-weight: normal;
	border:white 1px solid;
	transition-duration: 1s;
}

article .flexbox_child1 a:hover{
	border-radius: 15px;
	color:white;
	background-color: rgba(255, 255, 255, 0);
}


aside{
	border: 1px white dashed;
	background-color: rgba(0, 0, 0, 0.30);
	margin-top: 30px;
	width:calc(20% - 40px);
	padding: 20px;
	overflow: hidden;
}

aside h2{
	text-align: center;
	padding-bottom: 20px;
	font-size: 25px;
}

aside hr, aside p{
	margin: 0 10px 20px 10px;
	color:white;
}

aside a{
	text-decoration: none;
	color:white;
	font-size: 18px;
}

aside a:hover{
	text-decoration: underline white;
	font-weight: bold;
}

footer{
	border-top: white 2px dashed;
	/*background-image:url("../image/home/landscape/01.jpg");*/
	background-color: rgba(55, 40, 9);
	background-size: 100%;
	background-position: bottom;
	padding: 30px 0 30px 0;
}

footer p{
	text-align: center;
	font-weight: bold;
	padding: 5px;
	margin:0;
	font-size: 20px;
	margin-top: 10px;
}

.flexbox_footer_parent{
	display: flex;
	justify-content: center;
}

.flexbox_footer_parent a{
	width:46px;
	height:46px;
	margin: 0 20px 0 20px;
	border-radius: 100%;
	margin-bottom: 5px;
	overflow: hidden;
	border: 2px rgba(0, 0, 0, 0) solid;
}

.flexbox_footer_parent a:hover{
	border: 2px rgba(255, 255, 255, 1.0) solid;
}

.flexbox_footer_parent a:hover img{
	margin-left: -25px;
	margin-top: -25px;
	width:96px;
	height:96px;
}

.flexbox_footer_parent img{
	margin-left: -15px;
	margin-top: -15px;
	width:76px;
	height:76px;
}

.redirect a{
	width:40px;
	height:40px;
	border-radius: 100%;
	margin-bottom: 5px;
	overflow: hidden;
	border: 2px rgba(0, 0, 0, 0) solid;
	transform: scale(1.5);
}

.redirect{
	padding: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25px;
	margin-top: 45px;
}

@keyframes animBackground{
	0%{background-position:
		center, center, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}
	9.5%{background-position:
		center, center, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}


	10%{background-position:
		center, center left 100vw, center, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}
	19.5%{background-position:
		center, center left 100vw, center, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}


	20%{background-position:
		center, center left 100vw, center left 100vw, center, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}

	29.5%{background-position:
		center, center left 100vw, center left 100vw, center, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}


	30%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}
	39.5%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}


	40%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}
	49.5%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}


	50%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}
	59.5%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw
	;}


	60%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center, center left 100vw, center left 100vw, center left 100vw
	;}
	69.5%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center, center left 100vw, center left 100vw, center left 100vw
	;}


	70%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center, center left 100vw, center left 100vw
	;}
	79.5%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center, center left 100vw, center left 100vw
	;}


	80%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center, center left 100vw
	;}
	89.5%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center, center left 100vw
	;}


	90%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center
	;}
	99.5%{background-position:
		center, center left 100vw, center left 100vw, center left 100vw, center left 100vw, center left 100vw,
		center left 100vw, center left 100vw, center left 100vw, center left 100vw, center
	;}
}


/*///////////// MEDIA QUERIES //////////////*/
@media (max-width: 1300px){

	.flexbox_parent_container{
		width: 90%;
		padding: 0 5% 80px 5%;
	}

	article .flexbox_child1 p{
		width: calc(100% - 300px - 20px);
		margin:0 10px;
		font-size: 18px;
	}

	article .flexbox_child1 a{
		margin-top: 40px;
	}
}

@media (max-width: 1010px){

	#primary_nav{display: none;}

	header button.menu{
		z-index: 3;
		position: fixed;
		display:block;
		top:20px;
		right:20px;
		background-color:white;
		border-radius: 100px;
		width: 50px;
		height: 50px;
		background-image:url("../image/menu.png");
		background-size: cover;
		border:1px black solid;
	}

	header{
		background-position: top;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../image/home/anime.gif"), url("../image/home/vertical/04.jpg");
		animation: none;
		-webkit-animation:none;
	}

	#secondary_nav{
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position:fixed;
		top:0;
		height: 100vh;
		width: 100%;
		transition-duration: 1s;
		/*background-image: url("../image/home/landscape/01.jpg");*/
		background:url("../image/home/landscape/01.jpg"), black 50% / cover no-repeat;
		opacity: 0%;
	}

	.hero{
		height: 80vh;
	}

	.hero a.discover{
	margin-top: 35vh;
}

	#secondary_nav ul{
		display: flex;
		text-align: center;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		list-style-type: none;
		width:60%;
		max-height: 90%;
		margin-left: auto;
		margin-right: auto;
		background-color: rgba(0, 0, 0, 0.3);
		border:1px white dashed;
		padding: 20px 0px 20px 0;
	}

	#secondary_nav li{
		margin: 0 30px 0 30px;
		padding: 20px 0 20px 0;
		width:60%;
		border-bottom: 1px white solid;
	}

	#secondary_nav li a{
		font-size: 36px;
	}

	#secondary_nav .redirect img{
	margin:0;
	width:100%;
	height:100%;
	}

	#secondary_nav .redirect{
		display: flex;
		justify-content: space-around;
	}

	.flexbox_parent_galerie .img_exposition{
		width: calc(300px/2);
		height:calc(450px/2);
		margin:5px;
	}

	aside{
		display: none;
	}

	.flexbox_parent_container article{
		width:100%;
		padding:20px 10px;
	}
}

@media (max-width: 700px){

	h1{
		padding:20px 0 0 5vw;
		width: 200px;
		text-align: left;
	}

	h1 a.tittle{
		letter-spacing: -4px;
	}

	article .flexbox_child1{
		align-items: self-start;
	}

	article .flexbox_child1 .img{
		display: none;
	}

	article .flexbox_child1 p{
		width: calc(100% - 50px);
		margin:0 25px;
		font-size: 18px;
	}

	article .flexbox_child1 a{
		margin-top: 60px;
		margin-bottom: 20px;
	}

	#secondary_nav ul{
		width:90%;
		max-height: 90%;
		padding: 20px 0px 20px 0;
	}

	.flexbox_parent_galerie .img_exposition{
		width: calc(300px/3);
		height:calc(450px/3);
		margin:5px;
	}

	header{
		background-attachment: scroll;
	}
}

.li-hover{
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	display: none;
	top: -50px;
}