.scroll-indicator-controller {
position: fixed;
top: 50vh;
transform: translate(0, -50%);
right: 10px;
z-index: 999;
}
.scroll-indicator-controller.indi-mobile > div span {
display: none;
}
@media (min-width: 1025px) {
.scroll-indicator-controller {
	right: 20px;
}
}
.scroll-indicator-controller > div {
width: 20px;
height: 20px;
position: relative;
border-radius: 50%;
border: 1px solid #762e0a;
background: rgba(0, 0, 0, 0.25);
margin: 0 0 10px 0;
cursor: pointer;
transition: background 0.4s ease;
will-change: transition;
}
.scroll-indicator-controller > div span {
color: white;
    position: absolute;
    right: calc(100% + 8px);
    white-space: nowrap;
    top: 50%;
    font-family: arial, sans-serif;
    font-size: 18px;
    line-height: 17px;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
    transition: all 0.4s ease;
    will-change: transition;
    background: #762e0a;
    border-radius: 20px;
    padding: 10px;
}
@media (hover: none) {
.scroll-indicator-controller > div span {
	display: none;
}
}
.scroll-indicator-controller > div span:after {
content: "-----";
padding-left: 5px;
letter-spacing: -2px;
font-family: arial, sans-serif;
vertical-align: text-top;
line-height: 14px;
}
@media (hover: hover), (-ms-high-contrast: none), (-ms-high-contrast: active) {
.scroll-indicator-controller > div:hover span {
	width: auto;
	opacity: 1;
	overflow: visible;
	transform: translateY(-50%) translateX(0);
}
}
.scroll-indicator-controller > div.active {
background: #762e0a;
border-color: rgba(0, 0, 0, 0.25);
}
@supports (-ms-ime-align: auto) {
.scroll-indicator-controller > div span {
	transition: opacity 0.4s ease;
}
}