/****************************
 * Floating Nav
****************************/
.ifs-sticky-nav {
    --color:var(--ifs-color-medium-green);
    --dot-color:rgba(11, 55, 60, .2);
    --dot-color-hover:var(--color);

    opacity:0; transition:opacity 0.45s ease;
}
.ifs-sticky-nav.show {opacity:1}
.ifs-sticky-nav__inner {
    height:calc(var(--ifs-100vh) - var(--admin-bar-height));
    padding:var(--ifs-gap-container); gap:10px; top:var(--admin-bar-height)
}

/* decoration */
.ifs-sticky-nav__decoration {width:24px; border-style:solid; border-color:var(--ifs-color-gray-1);}
.ifs-sticky-nav__decoration[class*="top"] {top:var(--ifs-gap-container); border-top-width:1px;}
.ifs-sticky-nav__decoration[class*="left"] {left:var(--ifs-gap-container); border-left-width:1px;}
.ifs-sticky-nav__decoration[class*="bottom"] {bottom:var(--ifs-gap-container); border-bottom-width:1px;}
.ifs-sticky-nav__decoration[class*="right"] {right:var(--ifs-gap-container); border-right-width:1px;}

/* items */
.ifs-sticky-nav__item {width:30px; border:2px solid rgba(0, 0, 0, 0); background:rgba(0, 0, 0, 0);}
.ifs-sticky-nav__item:before {
    content:"";
    width:6px; aspect-ratio:1; background:var(--dot-color); border-radius:50%;
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    transition:var(--ifs-transition);
}
.ifs-sticky-nav__item.active {border-color:var(--color)}
.ifs-sticky-nav__item:hover:before, .ifs-sticky-nav__item.active:before {background:var(--dot-color-hover);}

/* white section */
.white.ifs-sticky-nav {
    --color:var(--ifs-color-light-green);
    --dot-color:rgba(227, 255, 204, .2);
}

.vc_section.ifs-vc-row-has-sticky-nav {overflow:visible; position:relative;}


/****************************
 * Floating Nav Responsive
****************************/
@media only screen and (max-width:1180px) {
    /* hide the sticky navigation */
    .ifs-sticky-nav {display:none;}
}