/* ---------- Container for the orbiting circles animation ---------- */
#circle-orbit-container {
     position: relative;

    top: 10vw;

    height: 70vw;

    width: 100%;
}

/* ---------- Inner orbit - This is the circles closest to the central point ---------- */
#inner-orbit {
   position: absolute;

color: #0a1971;

top: calc(25vw - 12.5vw);

left: calc((100%/2) - 12.5vw);

width: 25vw;

height: 25vw;

border: 4px #26b9d2 solid;

border-radius: 100%;
}

/* ---------- Repeating styles for the inner orbiting circles ---------- */
.inner-orbit-cirlces {
  position: absolute;
  top: 62px;
  left: -6px;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background-color: #9F98E6;
}

/* ---------- Middle orbit - This is the circles second closest to the central point ---------- */
#middle-orbit {
  position: absolute;
  top: 35px;
  left: 35px;
  width: 225px;
  height: 225px;
  border: 2px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 15s linear infinite;
  animation: spin-right 15s linear infinite;
}

/* ---------- Repeating styles for the inner orbiting circles ---------- */
.middle-orbit-cirlces {
  position: absolute;
  top: 25px;
  left: 17px;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: #4A437F;
}

/* ---------- Outer orbit - This is the circles furthest away from the central point ---------- */
.outer-orbit {
 position: absolute;

top: 0;

left: calc((100%/2) - 25vw);

width: 50vw;

height: 50vw;

border: 2px #0a1971 solid;

border-radius: 100%;

-webkit-animation: spin-right 50s linear infinite;

animation: spin-right 50s linear infinite;
}
/*.rt-60
{
     -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}*/

.rt-60
{
    top: 5.5vw !important;

    left: 40vw !important;

     
}

.rt-120
{
   top: 33.5vw !important;

left: 41vw !important;
     
}


.rt-180
{
    top: 45vw !important;

left: 20vw !important;
     
}
.rt-240
{
    top: 33.5vw !important;

left: 0vw !important;
}
.rt-300
{
    top: 5.5vw !important;

left: 0vw !important;
}
.img-orbit
{
    width: 10vw;
    height:10vw;

    left: 20vw;

    position: absolute;

    top: -5vw;
    text-align:center;
    -webkit-animation: spin-left 50s linear infinite;

animation: spin-left 50s linear infinite;
}
.img-orbit > img
{
    width:100%;
}

/* ---------- Repeating styles for the outer orbiting circles ---------- */
.outer-orbit-cirlces {
  position: absolute;
  top: -17px;
  left: 125px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: #00FFCA;
}

/* ---------- Animation ---------- */
@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin-right-60 {
  100% {
    -webkit-transform: rotate(420deg);
    -moz-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    transform: rotate(420deg);
  }
}


@-webkit-keyframes spin-left-60 {
  100% {
    -webkit-transform: rotate(-420deg);
    -moz-transform: rotate(-420deg);
    -ms-transform: rotate(-420deg);
    -o-transform: rotate(-420deg);
    transform: rotate(-420deg);
  }
}

@-webkit-keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}