//
// kremalicious3
// --------------
// Navigation
//

.menu-btn,
.search-btn
    @extend .textcenter
    line-height: 1em
    vertical-align: middle
    display: inline-block
    margin: 0
    position: absolute
    right: 0
    top: 0

    &:focus
        outline: 0

    .icon
        &.icon-entypo-menu
            width: 24px
            height: 24px

    &:hover .icon,
    &:focus .icon
        fill: $link-color

    &:active .icon
        fill: #fff

// Main Navigation
/////////////////////////////////////

.nav-main
    @extend .clearfix
    .menu-btn
        margin-right: -.5em
        padding: .5em .7em

    li
        display: inline-block

.nav-popover
    @extend .clearfix, .divider-top
    clear: both
    padding: $line-height-computed 0
    margin-top: 60px
    width: 100%
    background: $body-bg

.nav-link
    @extend .h6, .textcenter
    text-shadow: 0 1px 0 rgba(#fff, .5)
    padding: $padding-base-vertical $padding-base-horizontal
    margin-bottom: 0
    margin-top: 0
    display: block
    color: $brand-grey-light
    text-transform: uppercase
    border-radius: $border-radius-base

    @media $breakpoint1
        width: 50%
        float: left

    @media $breakpoint2
        width: 33.3%

    &:hover,
    &:focus
        color: $link-color
        border-bottom-color: $link-color
        background: rgba(255,255,255,.5)

    &:active
        background: $link-color
        top: 0
        color: #fff


// Paginator
/////////////////////////////////////

.paginator
    @extend .clearfix

    .icon
        margin-bottom: -3px

.paginator-next,
.paginator-previous,
.paginator-pages
    width: 32.7%
    display: inline-block
    clear: none

.paginator-next
    text-align: right

.paginator-pages
    @extend .textcenter, .dimmed
    font-size: $font-size-small

.paginator-number
    font-size: $font-size-base
    color: $text-color-light
    padding: 0 2px

.paginator-title
    @extend .h3, .heading-band
    color: $brand-grey-light
    margin-bottom: 0