#nav-index
    width: 100%
    max-width: 900px
    margin: 0 auto

    #nav-index-wrapper
        #nav-pages
            .nav-item
                display: block
                width: 98%
                background: $white
                border-radius: 3px
                color: $highlight
                height: 30px
                padding: 10px
                margin: 0 0 10px 0
                font-size: 1.5em
                cursor: move
                #item-arrows
                    fill: $primary
                    width: 40px
                    height: 30px

            label
                display: inline-block
                vertical-align: middle
                padding: 0
                margin: -15px 0 0 10px
                cursor: move

            #nav-btns
                float: right
                top: -5px
                position: relative
                button
                    color: $white
                    border-radius: 3px
                    width: 40px
                    margin: 0 10px 0 10px
                    svg
                        fill: $white
                        width: 25px
                        height: 20px

@media only screen and (max-width: 375px)
    #nav-index
        #nav-index-wrapper
            #nav-pages
                .nav-item
                    width: 94.5%
                    font-size: 1em

                    label
                        width: 40%
                        vertical-align: top
                        margin-top: 0px
                        line-height: 1em

@media only screen and (max-width: 320px)
    #nav-index
        #nav-index-wrapper
            #nav-pages
                .nav-item
                    width: 94.5%
                    font-size: 1em

                    label
                        width: 37%
                        vertical-align: top
                        margin-top: 0px
                        line-height: 1em
