.planets-static {
    --planet-diametr: 160px;


    background: #000926 url("../img/planets/bg-3.jpg") no-repeat 50% 50%;
    background-size: contain;
    color: #fff;

    display: flex;
    padding: 100px 0 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
.planets-static:before {
    content: '';
    position: absolute;
    top: calc(50% + 40px);
    width: 1360px;
    left: calc(50% - 680px);
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
}

.satellite-bg, .satellite-bg1 {
}
.label {
    will-change: left, top;
}
.planet-bg {
    height: var(--planet-diametr);
    width: var(--planet-diametr);
    border-radius:19%;
    left: 0;
    top: 0;
    position: absolute;
    box-shadow: -5px 0 10px rgba(70, 117, 179, 0.3);
    background: url("../img/planet-bg.png") no-repeat;
    background-size: 100%;
}
.planet .title {
    width: var(--planet-diametr);
    height: var(--planet-diametr);
    left: 0;
    top: 0;
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    flex-direction: column;
    position: relative;
    text-transform: uppercase;
}
.planet.active .title {
    font-size: 24px;
}
.planet .title img {
    width: 80px;
    margin-bottom: 10px;
}
.planet.active .title img {
    width: 140px;
    margin-bottom: 14px;
}


.planet {
    /*border-radius:50%;*/
    position: relative;
    padding: 0px 15px 0;
    transition: transform .3s;
    z-index: 1;
}
.planet:not(.active):hover {
    transform: scale(1.2)
}
.planet.active:hover {
    transform: scale(1.1)
}
.planet.active {
    --planet-diametr: 240px;
    padding: 0 15px;
}

a.planet-holder {
    width: var(--planet-diametr);
    height: var(--planet-diametr);
    display: block;
    color: #fff;
    position: relative;
    margin-bottom: 20px;
}
a.planet-holder:hover {
    text-decoration: none;
}
.planet-holder[data-href] {
    cursor: pointer;
}

.planet-1 {
    --item: 1;
}
.planet-2 {
    --item: 2;
}
.planet-3 {
    --item: 3;
}
.planet-4 {
    --item: 4;
}
.planet-5 {
    --item: 5;
}
.planet-6 {
    --item: 6;
}
.planet-7 {
    --item: 7;
}
.planet-8 {
    --item: 8;
}


.satellites {
    --satellites-orbte-angle-x: 50deg;
    --satellites-orbte-angle-y: -20deg;
    --satellite-diametr: 40px;
    --satellite-orbite: 120px;

    width: var(--planet-diametr);
}
.satellites .satellite {

    position: relative;
    margin-bottom: 10px;
}


.satellite-bg {
    height: var(--satellite-diametr);
    width: var(--satellite-diametr);
    position: relative;
    background: #000926;
    background-size: 102%;
    box-shadow: -5px 0 10px rgba(70, 117, 179, 0.2);
    border-radius:50%;
}
.satellite-bg1 {
    left: 0;
    top: 0;
    height: var(--satellite-diametr);
    width: var(--satellite-diametr);
    position: absolute;
    background-size: 102%;
    border-radius:50%;
}
.satellite-content {
    background-size: 102%;
    font-size: 10px;
    display: flex;
    align-items: center;
}
.satellite-content .img {
    height: var(--satellite-diametr);
    width: var(--satellite-diametr);
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    background: url("../img/planets/satellit-bg.png") no-repeat;
    background-size: var(--satellite-diametr);
}
.satellite-content .img img {
    width: 50%;
}
.satellite-content .label {
    font-size: 14px;
    width: calc(100% - var(--satellite-diametr));
    text-align: left;
    padding-left: 10px;
}
a.satellite-holder {
    display: block;
    color: #fff;
}
.satellite-holder:hover {
    color: #fff;
}

.planet:hover .satellite-bg, .planet:hover .orbit, .planet:hover .satellite-content {
    opacity: 1 !important;
}

.satellites-2 {
    --planet-angle: 180deg;
}
.satellites-3 {
    --planet-angle: 120deg;
}
.satellites-4 {
    --planet-angle: 90deg;
}
.satellites-5 {
    --planet-angle: 72deg;
}
.satellites-6 {
    --planet-angle: 60deg;
}
.satellites-7 {
    --planet-angle: 51.4deg;
}
.satellites-8 {
    --planet-angle: 45deg;
}



@media (max-width: 1200px) {
    .planets-static {
        flex-wrap: wrap;
    }
    .planets-static:before {
        display: none;
    }
}