.scroll-navigation {
    position: fixed;
    top: calc(50% + 20px);
    float: left;
    margin-left: -80px;
    z-index: 1;
    display: none;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .scroll-navigation > li {
        list-style: none;
        width: 36px;
        height: 36px;
        margin-bottom: 1px;
        cursor: pointer;
        font-family: 'Material Design Icons';
        font-size: 28px;
        font-style: normal;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        word-wrap: normal;
        -moz-font-feature-settings: 'liga';
        font-feature-settings: 'liga';
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        background-color: #f9fafc;
        outline: none;
    }

.scroll-navigation > li:before {
    height: 36px;
    width: 36px;
    margin: 9px auto;
    color: #b4b9c1;
    -o-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    top: 5px;
    left: 3px;
    position: relative;
}

.scroll-navigation > li.on:before { color: #005578; }

.scroll-navigation > li.on {
    border-right: 4px solid #41AAAA;
    background-color: #fff;
}

.scroll-navigation > li > svg {
    padding-top: 4px;
    padding-left: 6px;
    height: 24px;
    width: 24px;
    left: 0px;
    fill: #b4b9c1;
}

.scroll-navigation > li.on > svg { fill: #005578; }