/* BANNER */
.anim                                 	{ position: absolute; }
.blcBanner .image .anim1                { left: -140px; top: -121px; animation: animName 80s linear infinite }
.blcBanner .image .anim1 				{ left: 0;top: 0;animation: animName 80s linear infinite;width: 490px;height: 490px;border-radius: 50%; border: rgba(148,148,148,0.2) solid 1px; overflow: hidden;}
.blcBanner .image .anim1 img 			{ opacity: 0; display: none; }
.blcBanner .image .anim2                { left: -5px; top: 30px; width: 500px; height: 500px; opacity: 1 !important;visibility: visible !important;}
.blcBanner .image .anim2 img            { position: absolute; }
.blcBanner .image .anim2 img.img2       { top: 203px; right: 11px;}
.blcBanner .image .anim3                { left: 195px; top: 2px;}
.blcBanner .image .anim4                { top: 96px; left: 318px;}
.blcBanner .image .anim4 img            { position: absolute;}
.blcBanner .image .anim4  .img2         { left: 23px; top: -48px;}
.blcBanner .image .anim4  .img3         { left: 45px;top: 74px;}
.blcBanner .image  .anim5 				{ bottom: 117px;left: 32px;}
.blcBanner .image .anim5 img            { position: absolute;}
.blcBanner .image .anim5  .img2         { left: 53px; top: 59px; z-index: -2}
.blcBanner .image .anim5  .img3         { left: 63px;top: 130px;}
.blcBanner .image .anim6                { left: 252px; bottom: -10px;}
.blcBanner .image .anim7 				{ left: 428px;top: 210px;}

.banner .fade-in 						{ opacity: 1; visibility: visible; transition:all 400ms ease-in-out; }


/* APROPOS */

.anim                              { position: absolute}
.sec-apropos .anim1                { left: -48px; top: -1px; width: 100%; height: 100%}
.sec-apropos .anim1 img 		   { opacity: 0; display: none; }
.sec-apropos .anim2                { left: 15px; top: -11px;}
.sec-apropos .anim2 			   { left: 15px;top: 130px;opacity: 1 !important;visibility: visible !important;}

.sec-apropos .anim2 img            { position: absolute; }
.sec-apropos .anim2 img.img2       { top: 69px;}
.sec-apropos .anim3                { left: 42px; top: 26px;}
.sec-apropos .anim4                { bottom: 96px; left: 196px;}
.sec-apropos .anim4 img            { position: absolute; }
.sec-apropos .anim4  .img2         { left: 23px; top: 53px;}
.sec-apropos .anim5                { bottom: 100px; left: 349px;}

/* REFERENCE */
.sec-reference .anim1 				 { right: 305px;top: 45px;}
.sec-reference .anim1 img            { position: absolute; }
.sec-reference .anim1 .img2 		 { top: -13px;right: -81px;}
.sec-reference .anim2                { left: 275px; bottom: 68px}
.sec-reference .anim2 img            { position: absolute; }
.sec-reference .anim2 img.img2       { top: -38px; left: 23px;}
.sec-reference .anim2 img.img3 		 { top: -50px;left: 48px;}
.sec-reference .anim3 				 { right: -125px;bottom: -172px;}
.sec-reference .anim4                { bottom: 23px; right: 281px;}


/* SERVICES */
.anim                               { position: absolute; }
.sec-services .anim1                { right: 318px; top: 37px;}
.sec-services .anim2                { right: 109px; top: 47px;}
.sec-services .anim2 img            { position: absolute; }
.sec-services .anim2 img.img2       { top: 69px;}
.sec-services .anim3                { left: 143px; top: 46px; }
.sec-services .anim3  img 			{ animation: animName 80s linear infinite }
.sec-services .anim4                { bottom: 45px; left: 181px;}
.sec-services .anim4 img            { position: absolute; }
.sec-services .anim4  .img2         { left: -8px; top: 36px;}

/* REFERENCE */
.sec-reference .anim1 				 { right: 305px;top: 45px;}
.sec-reference .anim1 img            { position: absolute; }
.sec-reference .anim1 .img2 		 { top: -13px;right: -81px;}
.sec-reference .anim2                { left: 275px; bottom: 68px}
.sec-reference .anim2 img            { position: absolute; }
.sec-reference .anim2 img.img2       { top: -38px; left: 23px;}
.sec-reference .anim2 img.img3 		 { top: -50px;left: 48px;}
.sec-reference .anim3 				 { right:0;bottom: -200px; width: 300px; height: 300px}
.sec-reference .anim4                { bottom: 23px; right: 281px;}


/* PROJETS */
.sec-projet .anim1 				 	{ left: 360px;top: -3px;}
.sec-projet .anim1 img            	{ position: absolute;}
.sec-projet .anim1 .img2 		 	{ top: 34px; left: 0;}
.sec-projet .anim2                	{ right: 343px; top: 91px }
.sec-projet .anim2 img            	{ position: absolute; }
.sec-projet .anim2 img.img2       	{ top: 109px; left: 39px;}
.sec-projet .anim3 				 	{ left: 268px;top: 298px;}
.sec-projet .anim4                	{ top: 191px; left: -51px;}
.sec-projet .anim4  img 			{ animation: animName 80s linear infinite }


@keyframes animName {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}


#stats 										{ opacity: 0 !important; display: none !important}
.js-count-particles 						{ display: none;}
#particles-js, 
#particles-js2,
#particles-js3 								{ width: 100%;height: 100%;background-color: transparent;background-image: url('');background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
.bg-etoile 									{ position: absolute;top: 0;left: 0;width: 100%;	height: 100%;opacity: 0.8;z-index:-2;}
.bg-etoile::after {
	content: "";
	width: 100%;
	height: 100%;
	background: transparent;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
}
@media (max-width:1200px) { 
	.sec-apropos .anim1 					{ left: 0 }
	.sec-projet .anim4 					    { left: 0 }
	.sec-services .anim2 					{ right: 160px;top: 47px;}




}
@media (max-width:991px) { 
	.sec-apropos .anim5 					{ left: 300px }

}
@media (max-width:991px) {
	.sec-services .anim1 					{ right: 100px;top: 10px;}
	.sec-services .anim2 					{ right: 140px }

	.sec-reference .anim1 				    { right: 100px }
	.sec-reference .anim2 					{ left: 100px }
	.sec-reference .anim4 					{ right: 100px }

	.sec-projet .anim1 						{ left: 100px;}
	.sec-projet .anim2 						{ right: 140px; }

	.sec-projet .anim3 						{ left: 150px }

}

@media (max-width:767px) { 
	.sec-services .anim1 					{ right: 40px; }
	.sec-services .anim2 					{ display: none; }
	.sec-services .anim4 					{ bottom: 70px;left: 60px;}
	.sec-services .anim3 					{ left: 10px;}

	.sec-reference .anim2 					{ left: 40px; }
	.sec-projet .anim1 						{ left: 60px;}
	.sec-projet .anim3 						{ left: 40px }



}

@media (max-width:600px) {  
	.blcBanner .image .anim1 				{ width: 400px; height: 400px; }
	.blcBanner .image .anim2 				{ width: 400px; height: 400px }
	.blcBanner .image .anim2 img 			{ width: 100% }
	.sec-projet .anim2 						{ display: none; }
	.sec-services .anim3 					{ display: none }
	.sec-services .anim4 					{ left: 13px; }
	.sec-services .anim1 					{ right: 10px;top: 165px;}
	.sec-projet .anim1 						{ left: 10px;}
	.sec-projet .anim4 						{ display: none; }
	.sec-projet .anim3 						{ left: 10px;}
	.blcBanner .image .anim7 				{ left: 353px;top: 172px;}
	.sec-reference .anim1 					{ top: -24px}

	
}

@media (max-width:480px) {  

	.blcBanner .image .anim1 				{ width: 280px; height: 280px; }
	.blcBanner .image .anim2 				{ width: 300px; height: 300px }
	.blcBanner .image .anim5 .img.img1 		{ width: 80px;}
	.blcBanner .image .anim5 .img2 			{ left: 28px;top: 39px;width: 40px;}
	.blcBanner .image .anim6 				{ left: 162px;bottom: 18px;}
	.blcBanner .image .anim5 .img3 			{ left: 47px;top: 73px;}

	.sec-apropos .anim2 					{ left: 0 }
	.sec-apropos .anim4 					{ left: 145px; }
	.sec-apropos .anim3 					{ left: 0 }
	.sec-reference .anim2 					{ display: none; }
	.blcBanner .image .anim4 				{ display: none; }
	.blcBanner .image .anim7 				{ left: 261px; top: 125px; }
	.sec-reference .anim1 					{ top: -24px;}
	

}