body {
	background-color:#2c4e96;
	margin : 2% 2% 2% 2%;
}

.header{
	background-color :  ;
	width: 100%;
	height:90vh;
}

.forme1{
		background-color :  ;
	width: 16%;
	height:30vh;
float : right;
z-index: 2;
position : relative;

}

.motivations{
	width : 80%; 
	margin-left : 10vw;
	
}

.forme1:hover{
		background-color : ;
	width: 20%;
	height:30vh;
float : right;
z-index: 2;
opacity : 80%;
position : relative;
}

.forme2{
	background-color: ;
	width: 13%;
	height:30vh;
	z-index: 2;
	position : relative;
}

.forme2:hover{
	background-color: ;
	width: 16%;
	height:30vh;
	z-index: 2;
	opacity : 80%;
	position : relative;
}

.forme3{
	background-color : ;
	width: 30%;
	height:16vh;
float : right;
z-index: 2;
position : relative;
}

.forme3:hover{

}

.forme-vide{
	width: 55%;
	height:33vh;
	background-color :;
	position : relative;
	z-index: 3;
	margin-left: 22vw;
	
}

.forme-center{
	width: 55%;
	height:33vh;
	background-color : ;
	position : absolute;
	z-index: 1;
}

.marquee{
	background-color :;
	width : 100%;
		height:30px;
}

.projects{
	background-color : ;
	display:flex;
	width : 100%;
	
}

.shooter{
	background-color : #e61444;


}


.conteneur-quatre{
	background-color: #f2f0f0;
	padding : 1vw;
	display :flex;
	flex-wrap : wrap;
	margin-bottom : 10px;
}

.conteneur-deux{
	background-color: ;

}

.conteneur-trois{
	background-color: #f2f0f0;

}

.conteneur-six{
	background-color : #e61444;
	width: 100%;
	margin-bottom : 10px;
	display: flex;

}

.contenu-un{
		background-color:;
		flex : 1 1 50px;
		margin : 1vw;
		padding : 1vw;
		width : 30vw;
}

.contenu-deux{
		background-color:;
		flex : 1 1 50px;
		margin : 1vw;
		padding : 1vw;
		width : 30vw;

}

.contenu-trois{
		background-color:;
		flex : 1 1 50px;
		margin : 1vw;
		padding : 1vw;
		width : 30vw;
}

.contenu-un-contact{
	background-color: ;
		margin : 1vw;
		padding : 1vw;
		width: 40%;

}

.crédits{
		background-color: ;
		margin : 1vw;
		padding : 1vw;
		width: 40%;
		float : right;
}

.instagram{
	width: 7%;
		padding : 2vw;
	background-color: ;
		text-align: center;
	
}

.behance{
	width: 7%;
		padding : 2vw;
	background-color: ;
		text-align: center;
	
}

.images-insta-behance{
	width: 50%;
}


.images{
  width: 100%;
}

.images-projets{
	  width: 100%;
}

.images-projets:hover{
	opacity: 80%;
	  width: 100%;
}


.textemarquee{
		font-family: Gill sans;
		margin: 1% 1% 2% 2% ;
		color:#2c4e96;
	
		font-size: 120%;
}

.textemarquee:hover{
		font-family: Gill sans;
		margin: 1% 1% 2% 2% ;
}

.texte{
		font-family: Gill sans;
		margin : 1 1 1 1;
}

.texte-contact{
	font-family: Gill sans;
	font-size: 80%;
	color: #ff8f4b;
}

.texte-contact-right{
	font-family: Gill sans;
	font-size: 80%;
	text-align: right;
	color: #ff8f4b;
}

a {
	text-decoration: none;
	color: black;
	font-family: Gill sans;
}

a:hover{
		font-family: Gill sans;
		margin : 1 1 1 1;
		color : #ff8f4b;
}

.orange{
	text-decoration: none;
	color: #ff8f4b;
	font-family: Gill sans;
}

.orange:hover{
	text-decoration: none;
	color: white;
	font-family: Gill sans;
}

.texte-projets{
	font-family: Gill sans;
	margin : 5% 5% 5% 5%;
}

.menu{
	background-color : ;
	font-family: Gill sans;
	text-align:center;
	font-size: 15pt;
	margin-top: 3px;
	color: #ff8f4b;
}

.menu:hover{
	font-family: Gill sans;
	text-align:center;
	font-size: 15pt;
	margin-top: 3px;
	color: white;
}

.menu-projets{
	background-color : ;
	font-family: Gill sans;
	text-align:left;
	font-size: 15pt;
	margin-top: 3px;
	margin-left: 1px;
	
}

.texteshooterdroit{
	font-family: Gill sans;
	text-align:right;
}

.top{
	background-color:;
	margin-bottom : 30px;
	
}

.noms{
	  width: 17%;
}

.forme_center{
	position: center;
	width: 20%;
}

.ligne{
	height: 1px;
  background: linear-gradient(to right, #feaf37, #dd2a60);
  margin-bottom : 10px;
  margin-top: 15px;
  }
  
.ligne-verticale{
	border-left: 4px solid black;
	height : 200 px;
	display: inline-block;
}  
.tout{
	background-color:#f2f0f0 ;
	display:flex;
}
.conteneur-info{
	flex:1 1 30%;
	margin-right: 2%;
	top:2%;
	position:sticky;
	height:20%;
}
.conteneur-visuels{
	background-color : #ff8f4b;
	flex:1 1 70%;
	flex-wrap : wrap;
}
.contenu-un-projet{
	background-color: white;
	flex : 1 1 50px;
}

.contenu-texte{
	background-color: ;
	width: 100%;
}

.contenu-fleche{
	background-color : ;
	width: 100%;
	height: 5vh;
	display :flex;
	flex-wrap : wrap;
	margin-bottom: 7vw;
}

.fleche-gauche{
	background-color : ;
	width: 30%;
	height: 5vh;

}

.fleche-droite{
	background-color : ;
	width: 30%;
	height: 5vh;

	
}

.conteneur-cinq{
	display: flex;
	background-color: #f2f0f0;
}

#caroussel{
	width: 438px;
	overflow: auto;
	margin : 2% 2% 2% 2%;
	background-color: ;
	flex: 1 1 70%;	
}

.contenu-images-caroussel{
 display: flex;
 animation-duration : 20s;
 animation-name : mesImages;
 animation-iteration-count: infinite;


}

@keyframes mesImages {
	0%{
	transform: translateX(0)
	}
	25%{
	transform: translateX(-438px)
	}
	50%{
	transform: translateX(-876px)
	}
	75%{
	transform: translateX(-1314px)
	}
	100%{
	transform: translateX(-1752px)
	}
}



.contenu-parcours{
		font-family: Gill sans;
		margin-left: 2%;
		background-color:;
		width : 50%;
}

.text-parcours{
	font-family: Gill sans;
		margin-left: 2%;
		font-size : 140%;
}

.conteneur-parcours{
	background-color: #f2f0f0;
	width: 100%; 
	height : 74%;
	margin-bottom: 10px;
	display : flex;
}

.portrait{
		background-color :  ;
	width: 21%;
	height:30vh;
	z-index: 4;
	margin-left : 12%;
}

.mimi-cv{
	font-size : 86%;
}



@media (min-width: 400px) and (max-width: 900px){
	body {
padding: 2% 2% 2% 2%;
}
.tout{
background-color:#f2f0f0;
}
.conteneur-info{
flex:none;
width:50vw;
}
.conteneur-visuels{
flex:none;
width:40vw;
}
}