.nav_hs_bg {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%,0) scale(0.5);
    width: 6rem; height: 6rem; border-radius: 4rem;
    border: 2px solid rgba(255,255,255,0);
    background-color: rgba(0,0,0,0.0);
    /* backdrop-filter: blur(10px); */
    cursor: pointer;
    transition: opacity var(--transition-duration), transform var(--transition-duration), background-color var(--transition-duration);
    opacity: 0;
    /* animation: nav_hs_pulsing calc(var(--transition-duration) * 2) linear alternate infinite; */
    pointer-events: none;
    transform: translate(-50%,0) scale(1.0);
}

.nav_hs_bg.visible {
    pointer-events: all;
    opacity: 1;
    /* transform: translate(-50%,0) rotateX(47deg) scale(1.0); */
}

.nav_hs_bg:hover {
    /* transform: translate(-50%,-50%) scale(1.1); */
}

/* .nav_hs_bg:active::after {
    transform: translate(-50%,-50%) scale(1.32);
} */

.nav_hs_bg .thumb {
    position: absolute;
    left: 50%; bottom: calc(100% + 5.5rem); width: 24rem; height: 14rem;
    border: 0.5rem solid #222;
    border-radius: 2rem;
    transform: translate(-50%,-1rem);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-duration), transform var(--transition-duration);
}

.nav_hs_bg .thumb .img {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    /* border-radius: 2rem; */
    background-position: center;
    background-size: 150%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: background-size var(--transition-duration), opacity var(--transition-duration);
}

.nav_hs_bg:hover .thumb {
    opacity: 1;
    transform: translate(-50%,0);
}

.nav_hs_bg:hover .thumb .img {
    opacity: 1;
    background-size: 100%;
}

.nav_hs_bg .arrow {
    position: absolute;
    box-sizing: border-box;
    left: 0; top: 0; width: 100%; height: 100%; border-radius: 4rem;
    z-index: 0;
    transform-origin: top;
}

.nav_hs_bg:hover .arrow {
}

.nav_hs_bg .arrow::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    left: 0; top: 0; width: 100%; height: 100%; border-radius: 4rem;
    /* border: 0.3rem solid rgba(255,255,255,0.3); */
    /* background-color: rgba(255,255,255,0.8); */
    background-clip: content-box;
    background-image: url(images/hs_arrow.svg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: transform var(--transition-duration), border-color var(--transition-duration);
    transform-origin: top;
    transform: scale(1.4);
}

.nav_hs_bg:hover .arrow::after {
    transform: scale(1.6);
}

/* .nav_hs_bg:hover .thumb::after {
    border-color:  rgba(255,255,255,0.0);
    transform: translate(-50%,-120%) scale(1);
} */

.nav_hs_bg .tooltip {
    position: absolute;
    left: 50%; bottom: 100%; width: auto; height: auto;
    border-radius: 2rem;
    transform: translate(-50%,-50%) scale(0.5);
    transform-origin: 50% calc(100% + 1rem);
    background-color: #222;
    padding: 0.8rem 2.8rem;
    white-space: nowrap; 
    /* font-family: system-ui; */
    font-family: sans-serif;
    font-size: 1.4rem;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-duration), opacity var(--transition-duration);
}

.nav_hs_bg .tooltip::after {
    content: '';
        position: absolute;
        left: 50%; top: 100%; transform: translate(-50%,-1px);
        width: 0px; height: 0px;
        border-style: solid;
        border-width: 1rem 1rem 0 1rem;
        border-color: #222 transparent transparent transparent;
}

.nav_hs_bg.active .tooltip,
.nav_hs_bg:hover .tooltip {
    opacity: 1;
    transform: translate(-50%,-1.8rem) scale(1);
}

@keyframes nav_hs_pulsing {
    0% { 
        background-color: rgba(255,255,255,0.1);
    }
    100% {
        background-color: rgba(255,255,255,0.3);
    }
    
}






.info_hs_bg {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.5);
    width: 3.6rem; height: 3.6rem; border-radius: 4rem;
    border: 2px solid rgba(255,255,255,1);
    background-color: rgba(0,0,0,0.0);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: opacity var(--transition-duration), transform var(--transition-duration), background-color var(--transition-duration);
    opacity: 0;
    /* animation: nav_hs_pulsing calc(var(--transition-duration) * 2) linear alternate infinite; */
    pointer-events: none;
}

.info_hs_bg.visible {
    pointer-events: all;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.0);
}

.info_hs_bg:hover {
    /* transform: translate(-50%,-50%) scale(1.1); */
}

/* .nav_hs_bg:active::after {
    transform: translate(-50%,-50%) scale(1.32);
} */


.info_hs_bg::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    left: 0; top: 0; width: 100%; height: 100%; border-radius: 4rem;
    border: 0.3rem solid rgba(255,255,255,0.3);
    background-color: rgba(255,255,255,1);
    background-clip: content-box;
    background-image: url(images/hs_info_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 0;
    transition: transform var(--transition-duration), border-color var(--transition-duration);
}


.info_hs_bg:hover::after {
    transform: scale(1.2);
}

.info_hs_bg::before {
    content: '';
    position: absolute;
    left: 50%; top: 100%; transform: translate(-50%,1px);
    width: 0px; height: 0px;
    border-style: solid;
    border-width: 0.6rem 0.6rem 0 0.6rem;
    border-color: white transparent transparent transparent;

}


/* .nav_hs_bg:hover .thumb::after {
    border-color:  rgba(255,255,255,0.0);
    transform: translate(-50%,-120%) scale(1);
} */

.info_hs_bg .tooltip {
    position: absolute;
    left: 50%; bottom: 100%; width: auto; height: auto; min-width: 6rem;
    border-radius: 1.6rem;
    transform: translate(-50%,-50%) scale(0.5);
    transform-origin: 50% calc(100% + 5rem);
    background-color: #222;
    padding: 1.5rem 2.8rem 4rem 2.8rem;
    white-space: nowrap; 
    /* font-family: system-ui; */
    font-family: sans-serif;
    font-size: 1.4rem;
    text-align: center;
    color: white;
    opacity: 0;
    pointer-events: all;
    transition: transform var(--transition-duration), opacity var(--transition-duration);
}

.info_hs_bg .tooltip::before {
    content: ''; 
    position: absolute;
    left: 50%; top: 100%; transform: translate(-50%,-1px);
    width: 0px; height: 0px;
    border-style: solid;
    border-width: 1rem 1rem 0 1rem;
    border-color: #222 transparent transparent transparent;
}

.info_hs_bg .tooltip::after {
    content: 'Подробнее';
    position: absolute;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.4rem;
    color: #F5503C;
    text-decoration: underline;
    left: 50%; top: 100%; transform: translate(-50%,calc(-100% - 1.4rem));

}

.info_hs_bg.active .tooltip,
.info_hs_bg:hover .tooltip {
    opacity: 1;
    transform: translate(-50%,-1.8rem) scale(1);
}