.Satellite {
    position: relative;
    max-width: 100%;

}

.Satellite__globe {
    position: absolute;
    right: -350px;
    top: 0px;
    width: 100%;
    height: 100vh;
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
    display: flex;
    justify-content: flex-end;
    will-change: transform;z-index: -2;
}
@media (max-width: 870px) {
    .Satellite__globe {
        right: -50px;
    }
}
.Satellite__globe > canvas{
    top:-70px;position: relative;
}
.is-globe-dragging .Satellite__globe {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.Satellite__arcBubble {
    display: none
}

@media (min-width: 670px) {
    .Satellite__arcBubble {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        width: 500px;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease-in .1s;
        font-size: 14px;
        font-weight: 500;
        color: #32325d;
        pointer-events: none;
        z-index: 3
    }

    .Satellite__arcBubble.is-visible {
        transition: opacity .1s ease-out;
        opacity: 1;
        visibility: visible
    }

    .Satellite__arcBubble.is-visible .Satellite__arcLabel {
        transform: translateX(0);
        will-change: transform;
        max-width: 500px
    }

    .Satellite__arcBubble.is-simple .Satellite__arcPercent, .Satellite__arcBubble.is-simple .Satellite__arcText {
        display: none
    }

    .Satellite__arcBubble.is-simple .Satellite__arcCountryName {
        margin-left: -2px
    }
}

.Satellite__arcCountry {
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.Satellite__arcCountryName {
    margin-left: 4px;
    flex-shrink: 0
}

.Satellite__arcPercent {
    margin-right: 4px
}

.Satellite__arcLabel {
    position: relative;
    height: 34px;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    padding: 3px 20px 3px 12px;
    box-shadow: 0 6px 12px -2px rgba(50, 50, 93, .25), 0 3px 7px -3px rgba(0, 0, 0, .3);
    border-radius: 50px;
    pointer-events: none;
    transition: transform .25s ease-out, max-width .25s ease-out;
    transform-origin: 10% 100%;
    transform: translateX(-10px);
    will-change: transform;
    max-width: 104px;
    overflow: hidden
}

.Satellite__arcLabel.common-FlagIcon:before {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 11px
}
