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

.menu-btn,
.search-btn
    @extend .textcenter
    text-shadow: 0 1px 0 rgba(#fff, .5)
    line-height: 1em
    vertical-align: middle
    display: inline-block
    margin: 0
    position: absolute
    right: 0
    top: 0

    &:hover:before
        color: $link-color

    &:active:before
        transition: none
        color: #fff


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

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

        // icon
        &:before
            font-size: 26px

    li
        display: inline-block

.nav-popover
    @extend .clearfix
    padding: ($line-height-computed*1.5) 0
    width: 100%
    background: $body-bg

.nav-link
    @extend .h6, .alignleft, .textcenter
    text-shadow: 0 1px 0 rgba(#fff, .5)
    padding: .5em 1em
    margin-bottom: 0
    width: 50%
    color: $text-color-dimmed
    text-transform: uppercase

    @media $breakpoint2
        width: 33.3%

    // the icons
    &:before
        @extend .textcenter, .transition
        display: block
        margin-bottom: 5px
        width: 100%
        font-size: 32px
        height: 32px
        color: rgba($text-color-dimmed, .7)

    &:hover,
    &:hover:before
        color: $link-color
        border-bottom-color: $link-color

    &:hover
        background: rgba(255,255,255,.5)

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

    &:active:before
        color: #fff
        transition: none


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

.paginator
    @extend .clearfix

    p
        position: relative
    a
        display: block

    i
        position: absolute
        left: 0
        top: 0

    .next
        @extend .alignright
        text-align: right

        a
            margin-right: 1.5em

        i
            margin-left: .5em
            left: auto
            right: 0

    .previous
        @extend .alignleft

        a
            margin-left: 1.5em
        i
            margin-right: .5em


// Infinite Loader
/////////////////////////////////////

.infiniteLoader
    .next
        width: 100%
        float: none
        margin-left: 0

        a
            @extend .btn, .btn-block, .aligncenter
            color: $link-color
            padding-top: ($line-height-computed/1.5)
            padding-bottom: ($line-height-computed/1.5)

    .previous,
    .pagenumber,
    i
        @extend .hide