body {
	text-align:center;	
}

@font-face{
     font-family: "boarding";
     src: url("boarding.otf");
	font-weight: bold;
}
@font-face{
     font-family: "louis";
     src: url("louis.ttf");
	font-weight: bold;
}

@font-face{
	
	font-family: "modernline";
     src: url("modernline.otf");
}
.modernline
{font-family: modernline;}

.boarding
{
	font-family: boarding;
	font-size: 4vw;
	font-style: bold;
	color: #bbbbbb;
}
.boarding2
{
	font-family: boarding;
	font-size: 3vw;
}


*{
	margin:0px;
	padding:0px;
	font-family: Avenir, sans-serif;
}

nav{
	z-index: 2000;
	width:100%;
	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{
	position:relative;
	height:100vh;
	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-text{
    position: absolute;
	top: 5vh;
	left:10vw;
	width: 75vw;
	height:10vh;
	text-align: center;
	color: white;
	font-size: 3vw;
	line-height: 7vh;
	letter-spacing: 5px;
	font-family: moderline;
	padding:3rem 2rem;
	border-radius: 0.25rem;
	background-color: RGBa(200,200,200,0.3);
	opacity: 0;
	animation: ani2 0.5s ease-out forwards;
}

.wrapper-text h1{ 
	opacity: 0;
	margin: 0;
}
.wrapper-text h2,.wrapper-text h3,.wrapper-text h4 {
	opacity: 0;
	margin: 0;
	color: white;
}
.wrapper-text h1{
	animation: ani2 0.75s ease-out 1s 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 : 2vh;
left: 80vw;
opacity: 0.5;
}

.wrapper-text2{
    position: absolute;
	top: 30vh;
	width: 78vw;
	height:50vh;
	text-align: left;
	color: #990099;
	font-size: 3vw;
	line-height: 4vh;
	letter-spacing: 5px;
	font-family: moderline;
	padding:0.1rem 7rem;
	border-radius: 0.25rem;
	background-color: white;
	opacity: 0;
	animation: ani2 0.5s ease-out forwards;
}

p{
	text-align:center;
	font-family: boarding;
	font-size:2vh;
	
}

.portfolio{
	
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.portfolio:hover {
/* L'image est doublée */
-webkit-transform:scale(3); /* Safari et Chrome */
-moz-transform:scale(3); /* Firefox */
-ms-transform:scale(3); /* Internet Explorer 9 */
-o-transform:scale(3); /* Opera */
transform:scale(3);
}

img.photoArgG
{
	 width:40%;
    float: left;
    padding-left: 5%;
 }

 img.photoArgD
{
    width:40%;
    padding-left: 5%;
}
h3
{
	font-size: 1vh;
}