.info-graphics {
  width: 1350px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.info-graphics_wrapper .module-text {
	text-align: center;
	width: 510px;
	margin: 2rem auto 0 auto;
	font-size: 1.1rem;
}

.graphics-item {
  position: absolute;
}

.graphics-item .number {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  font-weight: 700;
  color: red;
  transform-origin: center;
  transform: translate(-50%,-45%);
  width: max-content;
}

.graphics-item img {
  max-width: unset;
}

#graphics-count-1 .inner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  transform-origin: center;
  transform: translate(-50%,-50%);
  height: 220px;
}

#graphics-count-1 .outer-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  transform-origin: center;
  transform: translate(-50%,-50%) rotate(0deg);
  height: 250px;
}

#graphics-count-2 {
	top: 248px;
	left: 459px;
  /*
   * left: -216px;
  */
  transform: scale(.8);
}

#graphics-count-2 .inner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  transform-origin: center;
  transform: translate(-50%,-50%);
  height: 220px;
}

#graphics-count-2 .outer-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  transform-origin: center;
  transform: translate(-50%,-50%) rotate(0deg);
  height: 250px;
}

#graphics-count-3 {
	bottom: 194px;
	left: 871px;
  /*
   * left: 196px;
  */
	transform: scale(.8);
}

#graphics-count-3 .inner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  transform-origin: center;
  transform: translate(-50%,-50%);
  height: 220px;
}

#graphics-count-3 .outer-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  transform-origin: center;
  transform: translate(-50%,-50%) rotate(0deg);
  height: 250px;
}

#graphics-count-4 {
	bottom: 430px;
	left: 836px;
  /*
   * left: 161px;
  */
	transform: scale(.67);
}

#graphics-count-4 .inner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  transform-origin: center;
  transform: translate(-50%,-50%);
  height: 220px;
}

#graphics-count-4 .outer-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  transform-origin: center;
  transform: translate(-50%,-50%) rotate(0deg);
  height: 250px;
}

#graphics-count-5 {
	bottom: 151px;
	left: 532px;
  /*
   * left: -143px;
  */
	transform: scale(.67);
}

#graphics-count-5 .inner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  transform-origin: center;
  transform: translate(-50%,-50%);
  height: 220px;
}

#graphics-count-5 .outer-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  transform-origin: center;
  transform: translate(-50%,-50%) rotate(0deg);
  height: 250px;
}

@keyframes rotating-right {
  from {
    -ms-transform: translate(-50%,-50%) rotate(0deg);
    -moz-transform: translate(-50%,-50%) rotate(0deg);
    -webkit-transform: translate(-50%,-50%) rotate(0deg);
    -o-transform: translate(-50%,-50%) rotate(0deg);
    transform: translate(-50%,-50%) rotate(0deg);
  }
  to {
    -ms-transform: translate(-50%,-50%) rotate(360deg);
    -moz-transform: translate(-50%,-50%) rotate(360deg);
    -webkit-transform: translate(-50%,-50%) rotate(360deg);
    -o-transform: translate(-50%,-50%) rotate(360deg);
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes rotating-left {
  from {
    -ms-transform: translate(-50%,-50%) rotate(0deg);
    -moz-transform: translate(-50%,-50%) rotate(0deg);
    -webkit-transform: translate(-50%,-50%) rotate(0deg);
    -o-transform: translate(-50%,-50%) rotate(0deg);
    transform: translate(-50%,-50%) rotate(0deg);
  }
  to {
    -ms-transform: translate(-50%,-50%) rotate(-360deg);
    -moz-transform: translate(-50%,-50%) rotate(-360deg);
    -webkit-transform: translate(-50%,-50%) rotate(-360deg);
    -o-transform: translate(-50%,-50%) rotate(-360deg);
    transform: translate(-50%,-50%) rotate(-360deg);
  }
}

#graphics-count-1 .outer-image {
  -webkit-animation: rotating-left 10s linear infinite;
  -moz-animation: rotating-left 10s linear infinite;
  -ms-animation: rotating-left 10s linear infinite;
  -o-animation: rotating-left 10s linear infinite;
  animation: rotating-left 10s linear infinite;
}

#graphics-count-2 .outer-image {
  -webkit-animation: rotating-right 8s linear infinite;
  -moz-animation: rotating-right 8s linear infinite;
  -ms-animation: rotating-right 8s linear infinite;
  -o-animation: rotating-right 8s linear infinite;
  animation: rotating-right 8s linear infinite;
}

#graphics-count-3 .outer-image {
  -webkit-animation: rotating-right 8s linear infinite;
  -moz-animation: rotating-right 8s linear infinite;
  -ms-animation: rotating-right 8s linear infinite;
  -o-animation: rotating-right 8s linear infinite;
  animation: rotating-right 8s linear infinite;
}

#graphics-count-4 .outer-image {
  -webkit-animation: rotating-right 6s linear infinite;
  -moz-animation: rotating-right 6s linear infinite;
  -ms-animation: rotating-right 6s linear infinite;
  -o-animation: rotating-right 6s linear infinite;
  animation: rotating-right 6s linear infinite;
}

#graphics-count-5 .outer-image {
  -webkit-animation: rotating-right 6s linear infinite;
  -moz-animation: rotating-right 6s linear infinite;
  -ms-animation: rotating-right 6s linear infinite;
  -o-animation: rotating-right 6s linear infinite;
  animation: rotating-right 6s linear infinite;
}

@media screen and (max-width: 1600px) {
  .info-graphics {
    width: 100%;
    max-width: 1000px;
  }
  
  #graphics-count-2 {
    left: 284px;
    /*
     * left: -216px;
    */
    transform: scale(.8);
  }

  #graphics-count-3 {
    left: 696px;
    /*
     * left: 196px;
    */
    transform: scale(.8);
  }

  #graphics-count-4 {
    left: 661px;
    /*
     * left: 161px;
    */
    transform: scale(.67);
  }

  #graphics-count-5 {
    left: 357px;
    /*
     * left: -143px;
    */
    transform: scale(.67);
  }
}

@media screen and (max-width: 1200px) {
  .info-graphics {
    width: 850px;
    max-width: unset;
  }
  
  #graphics-count-2 {
    left: 209px;
    /*
     * left: -216px;
    */
    transform: scale(.8);
  }

  #graphics-count-3 {
    left: 621px;
    /*
     * left: 196px;
    */
    transform: scale(.8);
  }

  #graphics-count-4 {
    left: 586px;
    /*
     * left: 161px;
    */
    transform: scale(.67);
  }

  #graphics-count-5 {
    left: 282px;
    /*
     * left: -143px;
    */
    transform: scale(.67);
  }
}

@media screen and (max-width: 850px) {
  .info-graphics {
    width: 650px;
  }
  
  #graphics-count-2 {
    left: 109px;
    /*
     * left: -216px;
    */
    transform: scale(.8);
  }

  #graphics-count-3 {
    left: 521px;
    /*
     * left: 196px;
    */
    transform: scale(.8);
  }

  #graphics-count-4 {
    left: 486px;
    /*
     * left: 161px;
    */
    transform: scale(.67);
  }

  #graphics-count-5 {
    left: 182px;
    /*
     * left: -143px;
    */
    transform: scale(.67);
  }
}

@media screen and (max-width: 650px) {
  .info-graphics_wrapper .module-text {
    text-align: center;
    width: 100%;
    padding: 0 5%;
    margin: 2rem 0 0 0;
    font-size: 1rem;
  }
  
  .info-graphics {
    width: 350px;
    height: 500px;
  }
  
  #graphics-count-1 {
    transform: scale(.6);
  }
  
  #graphics-count-2 {
	  left: 78px;
	  top: 156px;
    transform: scale(.5);
  }

  #graphics-count-3 {
    left: 273px;
    bottom: 157px;
    transform: scale(.5);
  }

  #graphics-count-4 {
    left: 253px;
    top: 154px;
    transform: scale(.4);
  }

  #graphics-count-5 {
    left: 102px;
    transform: scale(.4);
  }
}