.globe {
    background-color: #1A1B1C;
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1
}

.globe .globe__image {
    display: none
}

.globe>.globe {
    z-index: -1;
    pointer-events: none
}

.globe__image {
    width: 80%;
    height: 70%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    top: 15%;
    left: 20%
}

.globe__title,.globe__link {
    position: absolute;
    bottom: 60px
}

.globe__title {
    font-family: HelveticaLTW10-UltComp,sans-serif;
    color: #ffffff;
    left: 0.75em
}

@media screen and (max-width: 767px) {
    .globe__title {
        left:20px
    }
}

.globe__link {
    right: 4.5em
}

@media screen and (max-width: 767px) {
    .globe__link {
        left:20px;
        right: auto;
        bottom: 150px
    }
}

.wrapper .globe .globe__title {
    margin-bottom: 0
}

.no-webgl .globe .globe__image {
    display: block
}

.globe {
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    overflow: hidden
}

@media screen and (max-width: 540px) {
    .globe {
        width:102vw;
        height: 102vh
    }
}

.globe .globe-list {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    list-style: none
}

.globe .globe-list {
    opacity: 0;
    -webkit-transition: opacity 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: opacity 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: opacity 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: opacity 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: opacity 3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

.globe .globe-list.active {
    opacity: 1
}

.globe .globe-list>li {
    opacity: 0.4;
    position: absolute;
    margin-left: -8px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0478C1;
    -webkit-transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

.globe .globe-list>li.active {
    opacity: 1;
    margin-left: -12px;
    margin-top: -12px;
    width: 24px;
    height: 24px
}

.globe .globe-list>li:before {
    content: "";
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0478C1;
    -webkit-animation: 2s pulse infinite linear;
    -moz-animation: 2s pulse infinite linear;
    -ms-animation: 2s pulse infinite linear;
    -o-animation: 2s pulse infinite linear;
    animation: 2s pulse infinite linear
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1)
    }

    50% {
        opacity: 0.5
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(2)
    }
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(1)
    }

    50% {
        opacity: 0.5
    }

    100% {
        opacity: 0;
        -moz-transform: scale(2)
    }
}

@-ms-keyframes pulse {
    0% {
        -ms-transform: scale(1)
    }

    50% {
        opacity: 0.5
    }

    100% {
        opacity: 0;
        -ms-transform: scale(2)
    }
}

@-o-keyframes pulse {
    0% {
        -o-transform: scale(1)
    }

    50% {
        opacity: 0.5
    }

    100% {
        opacity: 0;
        -o-transform: scale(2)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        opacity: 0.5
    }

    100% {
        opacity: 0;
        transform: scale(2)
    }
}

.globe .globe-list>li.active:before {
    margin-left: -37.5px;
    margin-top: -37.5px;
    width: 75px;
    height: 75px
}

.globe .globe-list>li.active,.globe .globe-list>li.active:before {
    background: #0478C1
}

.globe .globe-list .text {
    position: absolute;
    opacity: 0.8;
    right: 21px;
    top: 50%;
    display: block;
    font-size: 0.8em;
    line-height: 1em;
    letter-spacing: 2px;
    font-family: HelveticaLTW10-UltComp,sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    text-align: right;
    color: #FFFFFF;
    white-space: nowrap;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.globe .globe-list>li.active .text {
    opacity: 1;
    right: 29px;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 700
}

.globe .globe-canvas {
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0
}

.banner .globe {
    pointer-events: none
}

#globekit-canvas-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

canvas#globekit-canvas {
    width: 100%;
    height: 100%
}

#locations,#locations div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10
}

.location-globe a {
    position: relative;
    display: block;
    transform: translate3d(2em, -50%, 0) rotate3d(1, 1, 1, 0.02deg);
    font: 3em/1em 'HelveticaLTW10-UltComp', sans-serif;
    opacity: 0.0;
    transition: transform 0.5s, opacity 0.5s;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: white;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: subpixel-antialiased;
    pointer-events: none
}

.location-globe.show a {
    opacity: 1;
    transform: translate3d(0.85em, -50%, 0) rotate3d(1, 1, 1, 0.02deg);
    pointer-events: auto
}

#zoom-links {
    position: absolute;
    right: 4em;
    bottom: 4em
}

#zoom-links a {
    display: block;
    font: bold 1em/1em HelveticaLTW11-UltComp;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -0.05em;
    margin-bottom: 0.2em;
    opacity: 0.5;
    color: white
}

#zoom-links a:hover {
    opacity: 1.0
}