:root {
		--sceneWidth: 900px;
		--itemWidth: calc(var(--sceneWidth)*0.2842);
		--itemHeight: calc(var(--sceneWidth)*0.2842);
		--sceneHeight: calc(var(--sceneWidth)*0.947);
		--initialScale: 0.7;
		--upScale: 1;
		--downScale: 0.5;
		--moveDown: calc(var(--sceneWidth)*(0.07));
		--moveUp: calc(var(--sceneWidth)*(-0.06));
		--venusWidth: calc(var(--sceneWidth)*0.28);
	}
	
	
	@media screen and (max-width: 575.98px) { 
		:root {
		 --sceneWidth: 320px;  
	   }
   }
	
	   @media screen and (min-width: 576px) and (max-width: 767.98px) {
		:root {
		 --sceneWidth: 550px;
	   }
   }
	   
	   @media screen and (min-width: 768px) and (max-width: 991.98px) {
		:root {
		--sceneWidth: 710px;
	}
	   }
	   
	   @media screen and (min-width: 992px) and (max-width: 1199.98px) {
		:root {
		 --sceneWidth: 800px;
	   }
   }
	   
	   
	   @media screen and (min-width: 1200px) {
		:root {
		--sceneWidth: 1000px;
	   }
   }
	
			
	#animated-container {
	  width: var(--itemWidth);
	  height: var(--itemHeight);
	  position: relative; 
	  /* background-color: rgba(255, 110, 2, 0.497); */
	  
	}
	
	#itemSize{
		width: var(--itemWidth);
		height: var(--itemHeight);
	}
	
	.element-container {
		position: absolute;
		margin-top: calc(var(--sceneWidth)*-0.2167);
		/* margin-bottom: -150px; */
		width: var(--sceneWidth);
		height: var(--sceneHeight);
		/* background-color: rgba(2, 220, 255, 0.497); */
		left: 50%;
		transform: translate(-50%, 0);
		/* z-index: 9999999 !important; */
	}
	
	
	.centerOfUniverse{
	width: var(--venusWidth);
	/* background-color: rgba(212, 9, 50, 0.397); */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 600;
	}
	
	#venusMain {
		width: var(--venusWidth);
	}
	
	#starSize {
		width: calc(var(--sceneWidth)*0.947);
		height: calc(var(--sceneWidth)*0.947);
		
	}
	
	.star{
		position: absolute;
		left: calc( (var(--sceneWidth) - var(--sceneHeight)) /2 );
		top: 0%;
		transform: translate(-50%, -50%);
		width: var(--sceneHeight);
		z-index: 599;
		opacity: 0.2;
		animation:  starSpin 35s linear infinite;
		/* background-color: rgba(212, 9, 50, 0.397);*/
	} 
	
	.starToo{
		position: absolute;
		left: calc( (var(--sceneWidth) - var(--sceneHeight)) /2 );
		top: 0%;
		
		/* transform: translate(-50%, -50%);
		width: var(--sceneHeight);
		z-index: 599;
		opacity: 1;
		animation:  starSpin 35s linear infinite; */
		/* background-color: rgba(212, 9, 50, 0.397); */
	} 
	
	@keyframes starSpin {
	from {
		transform: rotate(0deg);
	  }
	  to {
		transform: rotate(-360deg);
	  }
	}
	
	.a01  {
	  width: 100%;
	  height: 100%;
	  animation: main01Animation 8s infinite; 
	  animation-delay: 0s;
		  }
	
	.a02  {
	  width: 100%;
	  height: 100%;
	  visibility: hidden;
	  animation: main02Animation 8s infinite; 
	  animation-delay: 0.5s;
		  }
		  
	.a03  {
	  width: 100%;
	  height: 100%;
	  visibility: hidden;
	  animation: main03Animation 8s infinite; 
	  animation-delay: 1s;
		  }
	
	.a04  {
	  width: 100%;
	  height: 100%;
	  visibility: hidden;
	  animation: main04Animation 8s infinite; 
	  animation-delay: 1.5s;
		  }	  
		  
	.a05  {
	  width: 100%;
	  height: 100%;
	  visibility: hidden;
	  animation: main05Animation 8s infinite; 
	  animation-delay: 2s;
  }
  
  .a06 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main06Animation 8s infinite; 
		animation-delay: 2.5s;
	}
	
	.a07 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main07Animation 8s infinite; 
		animation-delay: 3s;
	}
	
	.a08 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main08Animation 8s infinite; 
		animation-delay: 3.5s;
	}
	
	.a09 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main09Animation 8s infinite; 
		animation-delay: 4s;
	}
	
	.a10 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main10Animation 8s infinite; 
		animation-delay: 4.5s;
	}
	
	.a11 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main11Animation 8s infinite; 
		animation-delay: 5s;
	}
	
	.a12 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main12Animation 8s infinite; 
		animation-delay: 5.5s;
	}
	
	.a13 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main13Animation 8s infinite; 
		animation-delay: 6s;
	}
	
	.a14 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main14Animation 8s infinite; 
		animation-delay: 6.5s;
	}
	
	.a15 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main08Animation 8s infinite; 
		animation-delay: 7s;
	}
	
	.a16 {
		width: 100%;
		height: 100%;
		visibility: hidden;
		animation: main08Animation 8s infinite; 
		animation-delay: 7.5s;
	}
	
	@keyframes main01Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		z-index: 1000;
		  
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2) , var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2000;

		}
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 500;

		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 300;

		}
	  100% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: linear;
		z-index: 1000;

	  }
	}
	
	@keyframes main02Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 996;

	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2004;

		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 504;

		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 296;

		}
	  100% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: linear;
		z-index: 996;

	  }
	}
	
	@keyframes main03Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 992;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2008;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 508;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 292;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 992;
		  }
	}
	
	@keyframes main04Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 988;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2012;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 512;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 288;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 988;
		  }
	}
	
	@keyframes main05Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 984;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2016;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 516;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 284;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 984;
		  }
	}
	
	
	@keyframes main06Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 980;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2018;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 520;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 280;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 980;
		  }
	}
	
	@keyframes main07Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 976;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2024;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 524;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 276;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 976;
		  }
	}
	
	@keyframes main08Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 972;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2028;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 528;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 272;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 972;
		  }
	}
	
	@keyframes main09Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 968;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2032;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 532;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 268;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 968;
		  }
	}
	
	@keyframes main10Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 964;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2036;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 536;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 264;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 964;
		  }
	}
	
	@keyframes main11Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 960;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2040;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 540;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 260;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 960;
		  }
	}
	@keyframes main12Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 956;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2044;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 544;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 256;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 956;
		  }
	}
	
	@keyframes main13Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 952;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2048;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 548;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 252;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 952;
		  }
	}
	
	@keyframes main14Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 948;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2052;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 552;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 248;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 948;
		  }
	}
	
	@keyframes main15Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 944;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2056;
	
		}
		
		55%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 556;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 244;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 944;
		  }
	}
	
	@keyframes main16Animation {
	  0% {
		transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
		animation-timing-function: ease-in;
		visibility: visible;
		z-index: 940;
	
	  }
	  25% {
		  transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveDown)) scale(var(--upScale));
		  animation-timing-function: ease-out;
		  z-index: 2060;
	
		}
		
		50%{
			transform: translate( calc( var(--sceneWidth) - ( var(--itemWidth) - var(--itemWidth) * 0.187  ) ), 0px) scale(var(--initialScale));
			animation-timing-function: ease-in;
			z-index: 560;
	
		}
		75%{
			transform: translate(calc(var(--sceneWidth)/2 - var(--itemWidth)/2), var(--moveUp)) scale(var(--downScale));
			animation-timing-function: ease-out;
			z-index: 240;
	
		}
		  100% {
			transform: translate(calc((var(--itemWidth)) * -0.187), 0px) scale(var(--initialScale));
			animation-timing-function: linear;
			z-index: 940;
		  }
	}