.circle-lg-none{
    display: none;
}

/* ---------- Container for the orbiting circles animation ---------- */
#circle-orbit-container {
    position: relative;
    top: -75px;
    left: 25px;
    height: 500px;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
    z-index: -1;
}

/* ---------- Inner orbit - This is the circles closest to the central point ---------- */
#inner-orbit {
    position: absolute;
    top: 75%;
    left: 27%;
    right: auto;
    margin: auto;
    width: 100%;
    max-width: 420px;
    height: 420px;
    background: rgba(255, 221, 34, 7%);
    border-left: 1px #FFA606 solid;
    border-right: 1px #FFA606 solid;
    border-radius: 100%;
}

/* ---------- Repeating styles for the inner orbiting circles ---------- */
.inner-orbit-cirlces{
    position: absolute;
}
/*.animate-orbit {
    animation: spin-right 40s linear infinite;
    -webkit-animation:spin-right 40s linear infinite;
}*/

#inner-orbit {
    animation: spin-right 40s linear infinite;
    animation-delay: 0s;
}

#middle-orbit {
    animation: spin-right 40s linear infinite;
    animation-delay: -10s;
}

#outer-orbit {
    animation: spin-right 40s linear infinite;
    animation-delay: -20s;
}

#most-outer-orbit {
    animation: spin-right 40s linear infinite;
    animation-delay: -30s;
}


.inner-orbit-cirlces-1{
    left: 0%;
    right: 0%;
    top: -5%;
    margin: 0 auto;
    transform: rotate(0deg);
}
.inner-orbit-cirlces-2{
    right: -2%;
    top: 24%;
    transform: rotate(150deg);
}
.inner-orbit-cirlces-3{
    right: 0%;
    bottom: 18%;
    transform: rotate(115deg);
}
.inner-orbit-cirlces-4 {
    bottom: -6%;
    left: 0%;
    right: 0%;
    margin: 0 auto;
    transform: rotate(180deg);
}
.inner-orbit-cirlces-5 {
    top: 25%;
    left: -3%;
    transform: rotate(22deg);
}
.inner-orbit-cirlces-6 {
    left: 0%;
    bottom: 18%;
    transform: rotate(-115deg);
}
.inner-orbit-cirlces-7 {
    left: 0%;
    bottom: 18%;
    transform: rotate(-115deg);
}



/* ---------- Middle orbit - This is the circles second closest to the central point ---------- */
#middle-orbit {
    position: absolute;
    top: 58%;
    left: 19%;
    width: 100%;
    max-width: 580px;
    height: 580px;
    background: rgba(255, 221, 34, 6%);
    border-right: 1px #FFA606 solid;
    border-left: 1px #FFA606 solid;
    border-radius: 100%;
}

/* ---------- Repeating styles for the inner orbiting circles ---------- */
.middle-orbit-cirlces{
    position: absolute;
}
.middle-orbit-cirlces-1{
    /*top: 6%;
    left: 12%;
    transform: rotate(-35deg);*/
    transform: rotate(-130deg);
    top: 74%;
    left: 3%;
}
.middle-orbit-cirlces-2{
    /*top: 50%;
    left: -5%;
    transform: rotate(-95deg);*/
    transform: rotate(-70deg);
    top: 18%;
    left: 3%;
}
.middle-orbit-cirlces-3{
    /*right: 16%;
    top: 5%;
    transform: rotate(-45deg);*/
    right: 42%;
    top: -4%;
    transform: rotate(20deg);
}
.middle-orbit-cirlces-4{
    /*right: 18%;
    bottom: 2%;
    transform: rotate(158deg);*/
    right: 2%;
    bottom: 18%;
    transform: rotate(125deg);
}
.middle-orbit-cirlces-5 {
    /*top: 48%;
    right: -5%;
    transform: rotate(95deg);*/
    top: 20%;
    right: 2%;
    transform: rotate(65deg);
}
.middle-orbit-cirlces-6 {
    /*left: 20%;
    bottom: 2%;
    transform: rotate(-160deg);*/
    left: 50%;
    bottom: -5%;
    transform: rotate(-180deg);
}

/* ---------- Outer orbit - This is the circles furthest away from the central point ---------- */
#outer-orbit {
    position: absolute;
    top: 42.5%;
    left: 11.5%;
    width: 100%;
    max-width: 730px;
    height: 730px;
    background: rgba(255, 221, 34, 5%);
    border-bottom: 1px #FFA606 solid;
    border-top: 1px #FFA606 solid;
    border-radius: 100%;
}

/* ---------- Repeating styles for the outer orbiting circles ---------- */
.outer-orbit-cirlces{
    position: absolute;
}
.outer-orbit-cirlces-1{
    /*top: 26%;
    left: 1%;
    transform: rotate(-65deg);*/
    top: 22%;
    left: 2%;
    transform: rotate(-65deg);
}

.outer-orbit-cirlces-2{
    margin: 0 auto;
    transform: rotate(-68deg);
    bottom: 28%;
    left: 0%;
}
.outer-orbit-cirlces-3{
    /*bottom: 14%;
    left: 8%;
    transform: rotate(-40deg);*/
    transform: rotate(-24deg);
    top: -4%;
    right: 0%;
    left: 0%;
    margin: 0 auto;
}
.outer-orbit-cirlces-4{
    right: 2%;
    bottom: 22%;
    transform: rotate(120deg);
}

.outer-orbit-cirlces-5 {
    bottom: -4%;
    left: 0%;
    right: 0%;
    margin: 0 auto;
    transform: rotate(-130deg);
}
.outer-orbit-cirlces-6{
    /*top: 38%;
    right: -4%;
    transform: rotate(-110deg);*/
    top: 20%;
    right: 4%;
    transform: rotate(-125deg);
}

/* ---------- Most Outer orbit - This is the circles furthest away from the central point ---------- */
#most-outer-orbit {
    position: absolute;
    top: 27%;
    left: 4%;
    width: 100%;
    max-width: 880px;
    height: 880px;
    background: rgba(255, 221, 34, 3%);
    border-top: 1px #FFA606 solid;
    border-bottom: 1px #FFA606 solid;
    border-radius: 100%;
}

/* ---------- Repeating styles for the most outer orbiting circles ---------- */
.most-outer-orbit-cirlces{
    position: absolute;
}
.most-outer-orbit-cirlces-1{
    right: 42%;
    margin: auto;
    top: -3%;
    transform: rotate(8deg);
}
.most-outer-orbit-cirlces-2{
    /*bottom: 6%;
    left: 58%;
    right: 0%;
    margin: auto;
    transform: rotate(145deg);*/
    transform: rotate(55deg);
    right: 4%;
    top: 20%;
}
.most-outer-orbit-cirlces-3{
    /*right: 0%;
    top: 30%;
    transform: rotate(70deg);*/
    transform: rotate(125deg);
    bottom: 18%;
    left: 82%;
    right: 0%;
    margin: auto;
}
.most-outer-orbit-cirlces-4{
    top: 38%;
    left: -2%;
    transform: rotate(-90deg);
}
.most-outer-orbit-cirlces-5{
    /*left: -1%;
    transform: rotate(-104deg);
    top: 62%;*/
    left: 2%;
    transform: rotate(-104deg);
    top: 70%;
}
.most-outer-orbit-cirlces-6{
    /*top: 3%;
    left: 22%;
    transform: rotate(-35deg);*/
    top: 20%;
    left: 5%;
    transform: rotate(-50deg);
}

@media (max-width: 767.98px) {
    #circle-orbit-container {
        top: -225px;
        left: 0;
        right: 0;
        margin: auto;
        height: 400px;
    }
    .circle-lg-none{
        display: none;
    }
    .inner-orbit-cirlces-2, 
    .inner-orbit-cirlces-4, 
    .inner-orbit-cirlces-6, 
    .middle-orbit-cirlces-2, 
    .middle-orbit-cirlces-4, 
    .middle-orbit-cirlces-6, 
    .outer-orbit-cirlces-4, 
    .outer-orbit-cirlces-5, 
    .outer-orbit-cirlces-6, 
    .most-outer-orbit-cirlces-2, 
    .most-outer-orbit-cirlces-3, 
    .most-outer-orbit-cirlces-4,
    .most-outer-orbit-cirlces-6 {
        display: none;
    }

    .inner-orbit-cirlces-1, 
    .inner-orbit-cirlces-3, 
    .inner-orbit-cirlces-5, 
    .middle-orbit-cirlces-1, 
    .middle-orbit-cirlces-3, 
    .middle-orbit-cirlces-5,
    .outer-orbit-cirlces-1, 
    .outer-orbit-cirlces-2, 
    .outer-orbit-cirlces-3,
    .most-outer-orbit-cirlces-1,
    .most-outer-orbit-cirlces-5,
    .most-outer-orbit-cirlces-7{
        display: block !important;
    }

    #inner-orbit,
    #middle-orbit,
    #outer-orbit,
    #most-outer-orbit{
        left: 0;
        right: 0;
        margin: auto;
    }
    #inner-orbit{
        top: 90%;
        max-width: 120px;
        height: 120px;
    }
    #middle-orbit{
        top: 81.5%;
        max-width: 200px;
        height: 200px;
    }
    #outer-orbit{
        top: 74%;
        max-width: 270px;
        height: 270px;   
    }
    #most-outer-orbit{
        top: 66%;
        max-width: 340px;
        height: 340px;
    }
    .inner-orbit-cirlces,
    .middle-orbit-cirlces,
    .outer-orbit-cirlces,
    .most-outer-orbit-cirlces{
        width: 25px;
    }

    .inner-orbit-cirlces-1{
        top: -10% !important;
    }
    .inner-orbit-cirlces-5 {
        top: 60% !important;
        left: -8% !important;
        transform: rotate(-13deg) !important;
    }
    .inner-orbit-cirlces-3 {
        right: -4% !important;
        bottom: 15% !important;
        transform: rotate(115deg) !important;
    }

    .middle-orbit-cirlces-1 {
        transform: rotate(-145deg) !important;
        top: 85% !important;
        left: 15% !important;
    }

    .middle-orbit-cirlces-3 {
        right: 68% !important;
        top: 0% !important;
        transform: rotate(-30deg) !important;
    }

    .middle-orbit-cirlces-5 {
        top: 40% !important;
        right: -6% !important;
        transform: rotate(80deg) !important;
    }

    .outer-orbit-cirlces-1 {
        top: 16% !important;
        left: 6% !important;
        transform: rotate(-65deg) !important;
    }

    .outer-orbit-cirlces-2 {
        transform: rotate(112deg) !important;
        bottom: 64% !important;
        right: -92% !important;
        left: 0% !important;
        margin: 0 auto !important;
    }
    .outer-orbit-cirlces-3 {
        margin: 0 auto !important;
        transform: rotate(-88deg) !important;
        top: 96% !important;
        left: 48% !important;
        right: unset !important;
    }

    .most-outer-orbit-cirlces-1 {
        right: 16% !important;
        margin: auto !important;
        top: 6% !important;
        transform: rotate(35deg) !important;
    }
    .most-outer-orbit-cirlces-7{
        top: 35% !important;
        left: -2% !important;
        transform: rotate(-75deg) !important;
    }

    .most-outer-orbit-cirlces-5 {
        left: 68% !important;
        transform: rotate(-200deg) !important;
        top: 92% !important;
    }
}