/*ANIMATION CHARGEMENT*/


.chargement{
	height: 100%;
	width: 100%;
	background-color: #1a1d1f;
	position: absolute;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	animation-duration: 4s;
	animation-timing-function: ease-out 1s;
 	animation-name: chargement-bg;
  	animation-fill-mode: forwards;
}
@keyframes chargement-bg{
	0%{
		
		opacity: 1;
	}
	80%{
		
		opacity: 1;
	}
	100%{
		visibility: hidden;
		opacity: 0;
	}
}

.logo-chargement .logo-visuel{
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-name: chargement-logo-visuel;
	animation-fill-mode: forwards;
	height: 10rem;
}
.logo-chargement .logo-texte{
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-name: chargement-logo-texte;
	animation-fill-mode: forwards;
	height: 7rem;
}
@keyframes chargement-logo-visuel{
	0%{
		transform: translateX(-70rem);
	}
	90%{
		transform: translateX(0rem);
	}
	100%{
		transform: translateX(-1rem);
	}
}
@keyframes chargement-logo-texte{
	0%{
		transform: translateX(70rem);
	}
	90%{
		transform: translateX(0rem);
	}
	100%{
		transform: translateX(1rem);
	}
}

#accueil{
	animation-duration: 3s;animation-delay: 3s;
  animation-name: header-anim;
}
#page{
	animation-duration: 3s;animation-delay: 3s;
  animation-name: header-anim;
}

.header{
	opacity: 0;
}

.facebook{
	animation-name: socialMediaAnim;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	transform: translateY(-20rem);
}
.instagram{
	animation-name: socialMediaAnim;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	transform: translateY(-20rem);
}
.instagram{
	animation-delay: 3.3s;
}
.facebook{
	animation-delay: 3s;
}
@keyframes socialMediaAnim{
	
	to{
		transform: translateY(0);
	}
}

#acceuil{
    animation-delay: 3s;
}
.cartes .illustrations{
	animation-delay: 3s;
}
.cartes .communication{
	animation-delay: 3s;
}
.cartes .artisanat{
	animation-delay: 3s;
}