#main-location {position: fixed; top: 90px; left: 0; z-index: 9; width: 210px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: .5s; border-right: 1px solid transparent;}
#main-location.main {border-right-color: rgba(255, 255, 255, .2);}
#main-location ul {position: relative; margin-left: 80px;}
#main-location ul li {position: relative; border: 1px solid transparent; border-radius: 50%; position: relative; z-index: 2; transition: .3s; background: transparent;}
#main-location ul li + li {margin-top: 23px;}
#main-location ul li a {display: flex; align-items: center;}
#main-location ul li .circle {position: relative; width: 8px; height: 8px; background: transparent; border: 1px solid #fff; border-radius: 50%; transition: .3s;}
#main-location ul li.active .circle {background: #fff;}
#main-location ul li.active .circle::before {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .2); width: 20px; height: 20px; border-radius: 50%;}
#main-location ul li span {font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 100; color: #fff; opacity: 0; transition: .3s; text-align: right; margin-left: 25px;}
#main-location ul li.active span {opacity: 1;}

.location-scroll {margin-top: 30px;text-align: center; animation: scroll-move 1.2s infinite ease-in-out;}
.location-scroll span {font-size: 12px; font-weight: 300; color: #bbb; display:block; margin-top: 10px;}

@keyframes scroll-move {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

@media screen and (max-width:1700px) {
    #main-location {display: none;}
}