// Globe
.globe {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 100vh;

    .wrap {
        @include breakpoint (xs) {
            padding: 0;
        }
    }

    .marker {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        opacity: 1;
        background: #ff6c89;

        // Location name
        span {
            position: absolute;
            bottom: 100%;
            left: 100%;
            font-family: $font-serif;
            font-size: rem(24px);
            color: transparent;
            transition: color 0.4s $ease-quart;
        }

        // Active
        &.is-active {
            opacity: 1;

            span {
                color: #FF6C89;
            }
        }
    }
}


// Part globe
.globe--part {
    overflow: hidden;
    height: 30vw;
    min-height: 300px;
    opacity: 0.5;
}