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: 2vw;
	color: #bbbbbb;
}
.boarding2
{
	font-family: boarding;
	font-size: 1.3vw;
}

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

nav{
	z-index: 1000;
	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: 1000;
	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{
	height:20vh;
	z-index: 3000;
}



.wrapper-text{
	width: 75vw 30vh;
	text-align: center;
	color: white;
	font-size: 2vw;
	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, .wrapper-text h2,.wrapper-text h3,.wrapper-text h4 {
	opacity: 0;
	margin: 0;
}

.wrapper-text h1{
	animation: ani2 0.75s ease-out 1s forwards;
}
.wrapper-text h2{
	animation: ani2 0.75s ease-out 1s 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;
}


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

.portfolio{
	
	display: block;
    margin-left: auto;
    margin-right: auto;
	height:30vmin;
	z-index:3000;
	
/* 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 {
	z-index:3000;
/* L'image est doublée */
-webkit-transform:scale(2); /* Safari et Chrome */
-moz-transform:scale(2); /* Firefox */
-ms-transform:scale(2)); /* Internet Explorer 9 */
-o-transform:scale(2); /* Opera */
transform:scale(2);
}

main{z-index:3000;}



#container {

    width: 100%;
    margin: auto;
}
#first {
    width: 45%;
    float: left;
}
#second {
    width: 45%;
    float: left;
}
#clear {
    clear: both;
}

.panda
{
position: fixed;
bottom : 10px;
left: 0px;
opacity: 0.5;
width:8%;
	
}

img.photoArg
{
	 width:30%;
  
    padding-left: 5%;
 }


h3
{
	font-size: 2vh;
}