/* Page Créons ensemble votre site */

#creation{
	background-image: url("/img/background_creonsensemble.jpg");
	background-repeat: no-repeat;
	background-position: center top;
}
#creation0{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	flex: 1;
}
#fil{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	height: 90%;
}
#fil .point{
	display: flex;
	width: 5vh;
	height: 5vh;
	border-radius: 100%;
	background-color: var(--second-logo-color);
}
#fil .point p{
	font-size: 2vh;
	text-align: center;
	margin: auto;
	color: var(--main-bg-color);
}
#fil .trait{
	width: 1vw;
	height: 3.3vh;
	margin-left: 2.5vh;
	border-left: 2px dashed var(--first-logo-color);
}
#deroulement{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-evenly;
	width: 60%;
	height: 90%;
	margin-left: 2vw;
}
#deroulement .etapes{
	padding: 1vw;
	border-radius: 20%;
	background-color: var(--second-bg-color);
	margin: auto;
	width: 100%;
	height: 9%;
	font-size: 2vmin;
}
#deroulement .etapes .etapesensavoirplus{
	padding: 0;
	margin: 0;
	text-align: right;
	color: var(--second-logo-color);
	cursor: pointer;
}
#deroulement .etapesensavoirplus{
	font-size: 1.5vmin;
}
#etapesplus{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-between;
	padding: 2vw;
	border-radius: 20%;
	background-color: var(--second-logo-color);
	color: var(--main-bg-color);
	margin-top: 20vh;
	position: absolute;
	width: 50vh;
}
.animetapes{
	animation: animetapes 2s linear 0s 1;
}
@keyframes animetapes{
0% { opacity: 0; }
}
	
@media screen and (max-width: 576px) 
{

}

@media screen and (min-width: 576px) 
{
 
}

@media screen and (min-width: 768px) 
{

}

@media screen and (min-width: 1024px) 
{

}