body {
	text-align:center;
	
	
	
}

@font-face{
     font-family: "boarding";
     src: url("boarding.otf");
	font-weight: bold;
}



@font-face{

	font-family: "modernline";
     src: url("modernline.otf");
}
.modernline
{font-family: modernline;}

.boarding
{
	font-family: boarding;
	font-size: 2vw;
	font-style: bold;
	color: #bbbbbb;
}
.boarding2
{
	font-family: boarding;
	font-size: 1.3vw;
}


*{
	margin:0px;
	padding:0px;
	font-family: Avenir, sans-serif;
}

nav{
	z-index: 2000;
	width:60%;
	margin:0 auto;
	background-color: none;
	position: sticky;
	top: 0px;
}

nav ul{list-style-type: none;}

navu ul li {
	float: left;
	width: 25%;
	text-align: center;
}

nav ul::after{
	content: "";
	display: table;
	clear: both;
}

nav a{
	display: block;
	text-decoration: none;
	color: black;
	border-bottom: 2px solid transparent;
	padding: 10px 0px;
}

nav a:hover{
	color: #990099;
	background-color: RGBa(200,200,200,0.1);
	border-bottom: 2px solid RGBa(200,200,200,0.1);
}


.sous{
	display: none;
	border-bottom: solid 1px #990099;
	z-index: 2000;
	box-shadow: 0px 1px 2px #CCC;
	background-color: white;
		font-size: 1vw;
}
nav > ul li:hover .sous{ display:block; z-index: 2000;}

.sous li{float: none;
width: 100%;
text-align: left;
}

.sous a{
	padding: 10px;
	border-bottom: none;
}
.sous a:hover{

	border-bottom: none;
	background-color: RGBa(200,200,200,0.1);
	color: #990099;
}

.deroulant > a::after{content:"  ▼";
font-size:12px;
}

.sous{
	display: none;
	box-shadow: 0px 1px 2px #CCC;
	background-color: white;
	position: absolute;
	width:100%;
}

nav ul li{
	float: left;
	width: 25%;
	text-align: center;
	position: relative;
}




.wrapper-text h1, .wrapper-text h2,.wrapper-text h3,.wrapper-text h4 {
	opacity: 0;
	margin: 0;
}

.wrapper-text h1{
	animation: ani2 0.25s ease-out 0.5s forwards;
}
.wrapper-text h2{
	animation: ani2 0.75s ease-out 2s forwards;
}
.wrapper-text h3{
	animation: ani2 0.75s ease-out 2s forwards;
}
.wrapper-text h4{
	animation: ani2 0.75s ease-out 3s forwards;
}

@keyframes ani2{
	100%{opacity: 1;
	}
}
@keyframes ani1{
	100%{
		transform: scale(1.55);
	}
}

#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}

.wrapper-text2{
    position: absolute;
top: 90vh;
	width: 100vw;
	height:100vh;
	text-align: left;
	color: white;
	font-size: 3vw;
	line-height: 7vh;
	letter-spacing: 5px;
	font-family: moderline;
	padding-top:4vh;
	padding-left: 10vw;
	border-radius: 0.25rem;
	background-color: RGBa(250,250,250,1);
	opacity: 0.8;
	animation: ani2 0.5s ease-out forwards;
}

.wrapper{
	position:relative;
	height:150vh;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	overflow: hidden;
}

.wrapper-image{
	position: absolute;
	top: 0;
	left:0;
	width: 100vw;
	height: auto;
	objectif-fit: cover;
	z-index: -1000;
	animation: ani1 60s ease-out forwards;
}

.wrapper-titre{
    position: relative;
	top: 15vh;
	left:10vw;
	width: 75vw;
	height:30vh;
	text-align: center;
	color: white;
	font-size: 4vw;
	letter-spacing: 5px;
	font-family: moderline;
	padding:2rem 2rem;
	border-radius: 0.25rem;
	background-color: RGBa(200,200,200,0.3);
	animation: ani2 0.5s ease-out forwards;
}
table
{width:100%;}
th
{width:30%;}

img.photoArgG
 {
     width:10%;
    float: left;
    padding-left: 10%;
 }
       
img.photoArgD
{
    width:30%;
    padding-left: 10%;
}