.webgl-globe {
        position: relative;
        width: 100vw;
        overflow: hidden;
        border: 0;
        top: -200px;
    }
    
    .webgl-globe.end {
        top: -580px;
    }
    
    #webgl {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
        transition: 2s;
        font-size: 0;
    }
    
    canvas {
        outline: none;
    }
    
    #labels {
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        color: white;
        border: 0;
    }
    
    #labels .pin {
        position: absolute;
        width: 50px;
        height: 50px;
        background-image: url('/images/map_pin.png');
        background-size: 100% 100%;
        opacity: 0;
        transition: opacity 1s
    }
    
    #labels .location {
        position: absolute;
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 25px;
        color: transparent;
        opacity: 0;
        transition: opacity 1s
    }
    
    #labels .location.blue {
        background-color: #438db0;
    }
    
    #labels .location.orange {
        background-color: #eb912a;
    }
    
    #labels .location.tag {
        position: absolute;
        overflow: hidden;
        width: auto !important;
        height: 38px;
        margin-left: 40px;
        padding: 2px 14px 2px 10px;
        color: black;
        text-align: left;
        vertical-align: middle;
        line-height: 1;
        font-size: 14px;
        font-weight: bolder;
        background-color: white !important;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        border-radius: 25px;
        white-space: nowrap;
        opaicty: 0;
        transition: opacity .3s, height .3s, padding .1s;
    }
    
    #labels .tag.blue:hover {
        z-index: 2;
        height: auto;
        padding: 18px 14px 0;
    }
    
    #labels .tag::before {
        position: relative;
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 9px;
        height: 9px;
        margin-top: -4px;
        margin-right: 11px;
        border: 5px solid black;
        background-color: white;
        border-radius: 25px;
    }
    
    #labels .tag.blue::before {
        border-color: #438db0;
    }
    
    #labels .tag.orange::before {
        border-color: #eb912a;
    }
    
    #labels .location span {
        opacity: 0;
    }
    
    #labels .location.tag span {
        opacity: 1;
    }
    
    #labels .location p {
        overflow: hidden;
        width: 0;
        height: 0;
        margin-top: 20px;
        padding-left: 30px;
        white-space: normal;
        opacity: 0;
        transition: height .3s, opacity .3s;
    }
    
    #labels .location p.hidden {
        margin: 0;
    }
    
    #labels .location.blue a {
        display: inline-block;
        position: relative;
        overflow: hidden;
        left: 0;
        width: 0;
        height: 0;
        opacity: 0;
        box-sizing: border-box;
        transition: height .3s, opacity .3s;
    }
    
    #labels .location.blue a:before {
        content: '';
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 2px;
        background: #438db0;
        transition: width .3s;
    }
    
    #labels .location.blue a:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 46px;
        width: 5px;
        height: 5px;
        border-top: 2px solid #438db0;
        border-right: 2px solid #438db0;
        transform: translateY(-50%) rotate(45deg);
        transition: left .3s;
    }
    
    #labels .location.blue a:hover:before {
        width: 30px;
    }
    
    #labels .location.blue a:hover:after {
        left: 52px;
    }
    
    #labels .location.blue:hover p {
        width: 140px;
        height: auto;
        opacity: 1;
        padding-bottom: 35px;
    }
    
    #labels .location.blue:hover a {
        width: 100%;
        height: 20px;
        padding: 30px;
        opacity: 1;
    }
    
    #info {
        position: absolute;
        bottom: 25.188vh;
        margin-left: 65.875vw;
        opacity: 0;
        transition: opacity 1s;
    }
    
    @media screen and (max-width: 1366px) {
        #info {
            bottom: 16.188vh;
        }
    }
    
    @media screen and (max-width: 1023px) {
        .webgl-globe {
            top: -150px;
        }
        #info {
            bottom: 25vw;
            left: 64px;
            transform: none;
            margin-left: 0;
        }
        #labels .location.tag {
            height: 34px;
            line-height: 34px;
        }
        #labels .location span {
            font-size: 16px;
        }
        #labels .location.blue:hover p {
            margin-top: 10px;
        }
        #labels .location.blue:hover a {
            padding: 15px 0 20px;
        }
    }
    
    @media screen and (max-width: 767px) {
        #info {
            left: 28px;
        }
    }
    
    #info span {
        display: inline-block;
        position: relative;
        margin-right: 35px;
    }
    
    #info span:after {
        content: '';
        position: absolute;
        top: 50%;
        right: -10px;
        width: 7px;
        height: 7px;
        border-radius: 100%;
        transform: translateY(-50%);
    }
    
    #info span:first-child:after {
        background: #438db0;
    }
    
    #info span:nth-child(2):after {
        background: #eaa04a;
    }
    
    .noselect {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Old versions of Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
}