body{
	background-color:white;
	margin:0;
	cursor: crosshair;
}
.fleche{
	position:center;
	text-align:center;
	background-color:white;
	margin-bottom:10%;
}
.arrow-1{
	height: 15px; 
	width: 15px;
	border: 1px solid blue;
	border-width: 2px 2px 0 0;
	transform: rotate(135deg);
	margin-left:50%;
}
.flex-contenu{
	display: flex;
	flex-wrap:no-wrap;
	align-items: stretch;
	margin-right:5%;
	margin-left:5%;
}
.conteneur{
	margin: 1%;
	flex: 0 1 100%;
	background-color:white;
	overflow: hidden;
}
.conteneurvide{
	background-color:blue;
	margin: 1%;
	flex: 0 1 100%;
	height:3px;
}
.forme{
	margin:1%;
}
.forme img{
	width:100%;
}
.image{
	overflow: hidden;
	filter: grayscale(100%);
}
.image img{
	width:100%;
	height:100%;
}
.image:hover{
	filter:none;
}
.bleu{
	background-color:blue;
	height:70%;
	padding-top:2%;
	margin-top:50px;
}
.stage{
	font-family: chinchilla;
	font-size: 30px;
	color:white;
	text-align:center;
	margin-bottom:2%;
	animation-duration: .8s;
	animation-name: clignoter;
	animation-iteration-count: infinite;
	transition: none;
}
.stage:hover{
	animation:none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  50%   {opacity:0; }
  100% { opacity:1; }
}
.profil{
	font-family: source-code-pro, monospace;
	font-weight: 400;
	color:white;
	font-size: 15px;
	display:block;
	width:60%;
	height:40%;
	margin-left:20%;
	text-align:center;
}
.fin{
	font-family: source-code-pro, monospace;
	font-weight: 400;
	text-align:center;
	color:white;
	font-size: 15px;
	height:30px;
	margin-bottom:2px;
}
.finfin{
	font-family: source-code-pro, monospace;
	font-weight: 400;
	text-align:center;
	color:white;
	height:30px; 
	font-size:15px;
	margin-top:20px;
}
.finfin a{
	text-decoration:none;
	color:white;
}
.finfin a:hover{
	color:blue;
}
.footer{
	text-align:center;
	display:inline-block;
	width:60px;
	height:60px;
	margin-left:88%;
	margin-bottom:10px;
}
.flower{
	position:right;
	margin-right:55px;
}
.flower img{
	width:60px;
	height:60px;
	margin-bottom:2px;
	text-align:right;
	position:right;
}
.typo{
	margin-bottom:10px;
	margin-top:20px;
}
.police{
	font-family: source-code-pro, monospace;
	font-weight: 400;
	text-align:center;
	color:white;
	font-size:8px;
}
.nom{
	font-family: chinchilla;
	font-size: 70px;
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}
.nom a{
	text-decoration:none;
	color:black;
}
.nom a:hover{
	color:blue;
}
.grand{
	height:300%;
	margin:5%;
	width:90%;
}
.grand img{
	width:90%;
	height:80%;
	position:center;
	margin-left:5%;
}
.flexsuite{
	display: flex;
	align-items: stretch;
	margin-right:5%;
	margin-left:5%;
}
.gauche{
	height:500px;
	flex: 0 1 35%;
	margin-right:3%;
}
h1{
	font-family: source-code-pro, monospace;
	font-weight: 600;
	font-size:30px;
	font-style: normal;
	color:black;
}
h1:hover{
	color:blue;
}
.legende{
	font-family: source-code-pro, monospace;
	font-weight: 400;
	font-size:11px;
	color:blue;
	margin-top:-20px;
	margin-left:15px;
}
.adria{
	font-family: source-code-pro, monospace;
	font-weight: 400;
	font-size:11px;
	color:blue;
	margin-top:10px;
	margin-left:15px;
}
.adria a{
	text-decoration:none;
	color:blue;
}
.adria a:hover{
	color:black;
}
.description{
	font-family: source-code-pro, monospace;
	font-weight: 400;
	font-size:15px;
	color:black;
	margin-left:15px;
	margin-top:10px;
}
.milieu{
	border-left: thick solid blue;
	flex: 0 1 1%;
	height:1730px;
}
.droite{
	flex: 0 1 65%;
	height:500%;
	margin-left:3%;
}
.projet{
	height:200%;
}
.projet img{
	width:100%;
	height:100%;
}
.footerprojet{
	margin-top:50px;
	height:41px;
	width:100%;
	background-color:blue;
}
.signe{
	height:30px;
	background-color:blue;
}
.signature img{
	width:60px;
	height:60px;
	margin-bottom:2px;
	position:right;
	margin-left:92%;
}

@media (min-width:1000px) and (max-width:1500px) {
.conteneur{
	height:220px;
}
}
@media (min-width:800px) and (max-width:1000px) {
.conteneur{
	height:150px;
}
.stage{
	font-size: 20px;
}
.fin{
	font-size:12px;
}
.finfin{ 
	font-size:12px;
}
.profil{
	font-size: 10px;
}
.imageprojet{
	height:30%;
}
.legende{
	margin-top:-3px;
}
.milieu{
	height:1200px;
}
}
@media (max-width:800px) {
.flex-contenu{
	flex-wrap:wrap;
}
.conteneur{
	text-align: center;
	margin: 1%;
	flex: 1 1 40%;
	height:100%;
	background-color:white;
	overflow: hidden;
}
.conteneurvide{
	display:none;
}
h1{
	font-size:22px;
}
.finfin{ 
	font-size:10px;
	margin-top:10px;
}
.fin{
	font-size:10px;
}
.stage{
	font-size: 22px;
}
.profil{
	font-size: 10px;
	width:90%;
	margin-left:5%;
}
.arrow-1{
	height: 10px; 
	width: 10px;
	border-width: 1px 1px 0 0;
}
.typo{
	margin-top:10px;
}
.milieu{
	height:700px;
}
.legende{
	margin-top:-3px;
	font-size: 10px;
}
.description{
	font-size: 12px;
}
.nom{
	font-size: 50px;
}
.police{
	font-size:8px;
}

}