/*--------------------------------------
  wrapper : styles communs
--------------------------------------*/

body:not(.elementor-editor-active) .animated-elements {
	position: relative;
	width: 100%;
	max-width: 755px;
	margin: 0 auto;
	overflow: hidden;
}

/*--------------------------------------
  états initiaux selon la direction
--------------------------------------*/

body:not(.elementor-editor-active) .animated-elements--from-right {
	opacity: 0;
	transform: translateX(200px);
}

body:not(.elementor-editor-active) .animated-elements--from-bottom {
	opacity: 0;
	transform: translateY(200px);
}

/*--------------------------------------
  cartes : styles de base
--------------------------------------*/

body:not(.elementor-editor-active) .animated-card {
	width: calc(200px + (300 - 200) * ((100vw - 320px) / (1920 - 320)));
	border-radius: 8px;
	opacity: 0;
}

body:not(.elementor-editor-active) .animated-elements--from-bottom .animated-card {
	width: 210px;
}

/*--------------------------------------
  override du transform initial selon la direction
--------------------------------------*/

body:not(.elementor-editor-active) .animated-elements--from-right .animated-card {
	transform: translateX(200px);
}

body:not(.elementor-editor-active) .animated-elements--from-bottom .animated-card {
	transform: translateY(200px);
}

/*--------------------------------------
  positions empilées
--------------------------------------*/

body:not(.elementor-editor-active) .animated-card--1 {
	z-index: 3;
	top: 25%;
	left: 0;
}

body:not(.elementor-editor-active) .animated-card--2 {
	z-index: 2;
	top: 15%;
	left: 30%;
}

body:not(.elementor-editor-active) .animated-card--3 {
	z-index: 1;
	top: 5%;
	left: 60%;
}

body:not(.elementor-editor-active) .animated-elements--from-bottom {

	.animated-card--2 {
		left: 20%;
	}

	.animated-card--3 {
		left: 40%;
	}

	.animated-card--4 {
		top: -30px;
		left: 60%;
	}

}

/*--------------------------------------
  images
--------------------------------------*/

body:not(.elementor-editor-active) .animated-card img {
	object-fit: contain;
	width: calc(200px + (250 - 200) * ((100vw - 320px) / (1023 - 320)));
	height: calc(325px + (425 - 325) * ((100vw - 320px) / (1023 - 320)));
}

body:not(.elementor-editor-active) .animated-elements--from-bottom .animated-card img {
	width: 210px;
	/*height: 370px;*/
}