* {
    --sphere-white: rgb(255, 255, 255);
    --sphere-black: rgb(0, 0, 0);
    --sphere-grey: rgb(169, 169, 169);
    --sphere-black6: rgba(0, 0, 0, 0.6);
    --sphere-black2: rgba(0, 0, 0, 0.2);
    --sphere-bg: #cfd2db;
}

.modal {
    display:none;
}

.vanilla-modal .modal {
    display:block;
    position:absolute;
    content:'';
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: var(--sphere-white);
    z-index:-1;
    opacity:0;
    transition:opacity 0.2s, z-index 0s 0.2s;
    text-align:center;
    overflow:hidden;
    overflow-y:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
}

.vanilla-modal .modal > * {
    display:inline-block;
    white-space:normal;
    vertical-align:middle;
    text-align:left;
}
 
.vanilla-modal .modal::before {
    display:inline-block;
    overflow:hidden;
    width:0;
    height:100%;
    vertical-align:middle;
    content:'';
}

.vanilla-modal.modal-visible .modal {
    z-index:99;
    opacity:1;
    transition:opacity 0.2s;
}

.modal-inner{
    position:relative;
    overflow:hidden;
    max-width:90%;
    max-height:90%;
    overflow-x:hidden;
    overflow-y:auto;
    background:var(--white);
    z-index:-1;
    opacity:0;
    transform:scale(0);transition:opacity 0.2s, transform 0.2s, z-index 0s 0.2s;
    border-radius:1em;
    width:15em;
}

.modal-visible .modal-inner {
    z-index:100;
    opacity:1;
    transform:scale(1);
    transition:opacity 0.2s, transform 0.2s;
}

#scene {
    font-family:'Futura New Book', sans-serif;
    background:var(--sphere-white);
    color:var(--sphere-black);
    -webkit-font-smoothing:antialias;
    -moz-osx-font-smoothing:grayscale;
    position:relative;
    outline:none;
    box-sizing:border-box;
    overflow:hidden;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}

#scene canvas {
    position:absolute;
    top:0;
    left:0;
}

.dg.main {
    position:absolute;
    top:0;
    right:0;
    z-index:998;
}

#loading {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    z-index:998;
    background:var(--bg);
}

#flag, #tooltip-flag {
    border-radius:50%;
    width:2.25em;
    height:2.25em;
    object-fit:cover;
}

#tooltip, #random-tooltip {
    position:absolute;
    left:0;
    top:0;
    min-width:10em;
    min-height:2em;
    padding:0.5em 1em;
    color:var(--sphere-black6);
    background:var(--sphere-white);
    display:none;
    transform:scale(0);
    transition:opacity 0.25s linear;
    border-radius:.275em;
    box-shadow:-1px 1px 2px var(--black2);
    pointer-events:none;
}

#tooltip .right, #random-tooltip .right {
    margin-left:1em;
}

#tooltip {
    z-index:97;
}

#random-tooltip {
    background:var(--sphere-grey);
    color:var(--sphere-white);
    z-index:96;
    min-height:1em;
    min-width:5em;
}

.mid{
    display:flex;
    justify-content:space-between;
}

.bot{
    padding:1em;
}

#modal-main {
    display:none;
}

#image {
    width:100%;
    object-fit:contain;
}

#name, #tooltip-name {
    font-weight:bold;
    text-transform:uppercase;
    transform:scale(1, 0.9);
}

#info{
    margin-top:1em;
}

#location{
    font-size:0.9em;
    color:var(--grey);
}

#sphere-smiles{
    position:absolute;
    bottom: 20%;
    right:2em;
    z-index:98;
}

#sphere-innovation{
    position:absolute;
    bottom:50%;
    left:0;
    z-index:98;
}

#sphere-per-day{
    position:absolute;
    top:25%;
    right:1em;
    z-index:98;
}

.sphere-info-item__wrapper{
    position:relative;
    display:inline-flex;
    justify-content:center;
    align-items: flex-start;
}

.sphere-info-item__count{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    color: #2C2C2C;
    font-weight: 500;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: -0.035em;
    font-family: 'PF Din Text Comp Pro Medium', Sans-Serif;
    background: rgba(255, 255, 255, 0.81);
    padding: 0 5px;
    margin-right: 10px;
}
.spere-info-item__text {
    max-width: 192px;
    font-style: normal;
    font-weight: 450;
    font-size: 20px !important;
    line-height: 25px !important;
    text-transform: uppercase;
    font-family: 'Futura New Medium' !important;
}
#sphere-smiles .spere-info-item__text {
    max-width: 152px;
}
.modal-content a:hover  {
    transform: rotate(180deg);
}