#paginacao {
    @include span(12);
    margin: 0 0 70px 0;
    padding: 0;
    border: 1px solid $mercury;
    border-top: none;
    background: $desert_storm;
    height: 60px;
    text-align: center;
    border-radius: 3px;
    li {
        border: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        a {
            font-family: $fontNeoSansStdRegular;
            border-right: solid 1px $alto;
            margin-right: 2px;
            strong {
                font-family: $fontNeoSansStdBold;
            }
        }
        &.anterior {
            @include span(first 3 no-gutter);
            a {
                border-left: none;
                &:link {
                    color: $manatee;
                    display: block;
                    text-decoration: none;
                }
                &:visited {
                    color: $manatee;
                    display: block;
                    text-decoration: none;
                }
                &:hover {
                    color: $cerulean;
                }
                &.disabled {
                    color: $alto;
                }
            }
        }
        &.proxima {
            @include span(last 3 no-gutter);
            border-left: 1px solid $alto;
            a {
                font-size: 16px;
                border-right: solid 1px $white;
                line-height: 60px;
                border-left: none;
                &:link {
                    color: $manatee;
                    display: block;
                    text-decoration: none;
                }
                &:visited {
                    color: $manatee;
                    display: block;
                    text-decoration: none;
                }
                &:hover {
                    color: $cerulean;
                }
                &.disabled {
                    color: $alto;
                }
            }
        }
    }
    .anterior {
        font-size: 16px;
        color: $manatee;
        display: block;
        border-right: solid 1px $alto;
        line-height: 60px;
        a {
            font-size: 16px;
            border-right: solid 1px $white;
            line-height: 60px;
        }
    }
    .proxima-off {
        font-size: 16px;
        color: $manatee;
        display: block;
        float: left;
        border-right: solid 1px $alto;
        line-height: 60px;
    }
    .paginas {
        @include span(6 no-gutter);
        padding: 23px 0 0 0;
        box-sizing: border-box;
        font-size: 14px;
        ul {
            display: flex;
            justify-content: center;
            margin: 0 auto;
            padding: 0;
            li {
                a {
                    &:link {
                        color: $manatee;
                        display: block;
                        float: left;
                        padding: 0 9px;
                        text-decoration: none;
                    }
                    &:visited {
                        color: $manatee;
                        display: block;
                        float: left;
                        padding: 0 9px;
                        text-decoration: none;
                    }
                    &:hover {
                        color: $cerulean;
                    }
                    &.active {
                        font-family: $fontNeoSansStdBold;
                        color: $cerulean;
                    }
                }
            }
        }
    }
}

@include breakpoint($breakpoint-small) {
    #paginacao {
        margin: 0 0 20px 0;
        li {
            &.anterior {
                @include span(first 6 no-gutter);
            }
            &.proxima {
                @include span(last 6 no-gutter);
            }
        }
        .paginas {
            display: none;
        }
    }
}
