
.d_move, .p_move, .g_move, .i_move, .w_move, .d_over, .p_over, .g_over{
  position: absolute;
}
.d_rot, .p_rot, .g_rot, .i_rot, .w_rot{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #FFAE01;
}
.d_rot, .p_rot, .g_rot, .i_move{
  box-shadow: 0px 1px 10px rgba(18, 18, 18, .50);
}
.d_over{
  height: 7.5vw;
  width: 7.5vw;
  left: 0;
  top: calc(50% - 11.45vw);
  background-color: transparent;
  border-radius: 50%;
  z-index: 99999;
}
.d_move{
  height: 11.56vw;
  width: 2.72vw;
  left: 2.39vw;
  top: calc(50% - 15.6vw);
  transform: translateX(3.21vw);
}
.d_rot{
  transform-origin: center calc(50% + 2.17vw);
}
.d_over:hover ~ .d_move{
  animation: orbit_d 1s linear infinite;
}
.d_over:hover ~ .d_move .d_rot{
  animation: rot_d_p 1s linear infinite;
}
@keyframes orbit_d {
	from { 	transform: rotate(0deg) translateX(3.21vw) rotate(0deg); }
	to   {  transform: rotate(360deg) translateX(3.21vw) rotate(-360deg); }
}
.p_over{
  height: 7.5vw;
  width: 7.5vw;
  left: 0.85vw;
  top: calc(50% + 3.95vw);
  background-color: transparent;
  border-radius: 50%;
  z-index: 99999;
}
.p_move{
  height: 11.56vw;
  width: 2.72vw;
  left: 1.36vw;
  left: 2.72vw;
  top: calc(50% + 4.07vw);
  transform: translateX(-2.75vw);
}
.p_rot{
  transform-origin: center calc(50% - 2.17vw);
}
.p_over:hover ~ .p_move{
  animation: orbit_p 1s linear infinite;
}
.p_over:hover ~ .p_move .p_rot{
  animation: rot_d_p 1s linear infinite;
}

@keyframes orbit_p {
	from { 	transform: rotate(0deg) translateX(-2.75vw) rotate(0deg);}
	to   {  transform: rotate(360deg) translateX(-2.75vw) rotate(-360deg);}
}
@keyframes rot_d_p {
  0%{transform: rotate(0deg);}
  5%{transform: rotate(1.15deg);}
  10%{transform: rotate(4.45deg);}
  15%{transform: rotate(9.5deg);}
  20%{transform: rotate(16.2deg);}
  25%{transform: rotate(23.7deg);}
  30%{transform: rotate(31.8deg);}
  35%{transform: rotate(39.8deg);}
  40%{transform: rotate(47deg);}
  45%{transform: rotate(51.9deg);}
  50%{transform: rotate(54deg);}
  55%{transform: rotate(52deg);}
  60%{transform: rotate(47deg);}
  65%{transform: rotate(39.7deg);}
  70%{transform: rotate(31.8deg);}
  75%{transform: rotate(23.7deg);}
  80%{transform: rotate(16.2deg);}
  85%{transform: rotate(9.5deg);}
  90%{transform: rotate(4.45deg);}
  95%{transform: rotate(1.15deg);}
}
.i_move{
  height: 7.3vw;
  width: 2.72vw;
  left: 11.26vw;
  top: calc(50% - 3.92vw);
  background-color: #FFAE01;
  transition: box-shadow .5s, background-color .5s, height 1s;
}
.i_move:hover{
  background-color: #f2f2f2;
  height: 9vw;
  box-shadow: 0px 1px 10px rgba(18, 18, 18, 0);
}
.g_over{
  height: 7.5vw;
  width: 7.5vw;
  left: 24.4vw;
  top: calc(50% - 11.3vw);
  background-color: transparent;
  border-radius: 50%;
  z-index: 99999;
}
.g_move{
  height: 11.94vw;
  width: 2.72vw;
  top: calc(50% - 7.69vw - 2vw);
  left: calc(28.2vw - 1.36vw);
  transform-origin: center calc(50% - 3.94vw);
  transform: translateX(2.1vw) translateY(-2.43vw);
}
.g_over:hover ~ .g_move{
  animation: orbit_g 1s linear infinite;
}
.g_over:hover ~ .g_move .g_rot{
  animation: rot_g 1s linear infinite;
}
.g_rot{
  transform-origin: center calc(50% - 3.94vw);
  transform: rotate(25.58deg);
}
@keyframes orbit_g {
  from { 	transform: rotate(0deg) translateX(2.1vw) translateY(-2.43vw) rotate(0deg); }
  to   {  transform: rotate(360deg) translateX(2.1vw) translateY(-2.43vw) rotate(-360deg); }
}
@keyframes rot_g {
  0%, 100%{transform: rotate(25.6deg); }
  5%{transform: rotate(35.9deg); }
  10%{transform: rotate(42deg); }
  15%{transform: rotate(44.4deg);}
  20%{transform: rotate(43.5deg);}
  25%{transform: rotate(39deg); }
  30%{transform: rotate(31deg);}
  35%{transform: rotate(18.6deg);}
  40%{transform: rotate(3.5deg); }
  45%{transform: rotate(-11.2deg);}
  50%{transform: rotate(-23deg);}
  55%{transform: rotate(-30.7deg);}
  60%{transform: rotate(-35.5deg); }
  65%{transform: rotate(-37deg); }
  70%{transform: rotate(-36.3deg); }
  75%{transform: rotate(-32.9deg); }
  80%{transform: rotate(-26.9deg); }
  85%{transform: rotate(-17deg); }
  90%{transform: rotate(-3.4deg); }
  95%{transform: rotate(11.9deg); }
}
.w_still{
  position: absolute;
  width: 0;
  height: 0;
  border-left: 4.16vw solid transparent;
  border-right: 4.16vw solid transparent;
  border-top: 7.24vw solid #f2f2f2;
  top: calc(50% + 4.07vw);
  left: 15.45vw;
  background-color: transparent;
  filter: drop-shadow(0px 1px 10px rgba(18, 18, 18, .30));
  -webkit-filter: drop-shadow(0px 1px 10px rgba(18, 18, 18, .30));
}
.w_move{
  width: 0;
  height: 0;
  border-left: 4.16vw solid transparent;
  border-right: 4.16vw solid transparent;
  border-top: 7.24vw solid #FFAE01;
  top: calc(50% + 4.07vw);
  left: 20.76vw;
  background-color: transparent;
}
.w_move:hover{
  animation: w_trans .5s cubic-bezier(0.75, 0.06, 0.94, 0.47) alternate infinite;
}
@keyframes w_trans {
  from{transform: translate(0vw, 0vw);}
  to{transform: translate(-2.65vw, 4.58vw);}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .w_move{
    animation: w_trans .5s cubic-bezier(0.75, 0.06, 0.94, 0.47) alternate 8s 10;
  }
  .g_rot{
    animation: rot_g 1s linear 6s 10;
  }
  .g_move{
    animation: orbit_g 1s linear 6s 10;
  }
  .d_move{
    animation: orbit_d 1s linear 3s 10;
  }
  .d_rot{
    animation: rot_d_p 1s linear 3s 10;
  }
  .p_move{
    animation: orbit_p 1s linear 1s 10;
  }
  .p_rot{
    animation: rot_d_p 1s linear 1s 10;
  }
}
