/*  ==========================================================================
    NAVIGATIONS (NAVIGATIONS, BREADCRUMBS, PAGINATION)
    ========================================================================== */
    

/*
    Header
*/

/* Main navigation */
.NavMain {

    a {
        @include rem('font-size', 12px);
        @include rem('line-height', 12px);
        @include transition(all 0.25s ease-out);
        color: $color-white;
        display: block;
        font-weight: $font-weight-500; 
        padding: $spacing-size-m + px $spacing-size-m + px $spacing-size-m + px 50px;
        position: relative;
        text-transform: uppercase;

        .fa {
            @include rem('font-size', 20px);
            @include position(absolute, 12px 0 0 10px);
            color: $color-brand-delta;
            //color: #ffbfc5;
            line-height: 1;
            text-align: center;
            width: 30px;
        }

        @include hover {
            background-color: $color-brand-gamma;
            //background-color: darken(#e20a1d,12%);

            .fa {
                color: $color-white;
            }

        }

    }

}

.NavMain-subnav {
    border-left: 1px solid $color-brand-delta;
    margin: 10px 0 10px 50px;
    padding: 0 15px;

    a {
        display: inline;
        padding: 0;

        @include hover {
            background-color: inherit;
        }

    }

}

/* User navigation */
.NavUser, .NavLanguage
{ 
    //position: absolute;
    //top: 60px; 
    //width: 100%; 
    min-width: 120px;
    // padding-top: $spacing-size-s + px; 
    padding-bottom: $spacing-size-s + px;
    background-color: $color-white; 
    
    box-shadow: -1px 0px 0px 0px $color-meta, 1px 0px 0px 0px $color-meta, 0px 1px 0px 0px $color-meta;

    @include rem('font-size', 13px); 
    // text-transform: uppercase; 
    font-weight: $font-weight-500;

    a {
        position: relative; display: block; padding: 7px 20px; color: $color-brand-gamma;
        @include transition(all 0.25s ease-out);
        color: $color-brand-alpha;
        @include hover {
            color: $color-black;
            background-color: $color-light;
        }
    }

    // @media screen and (max-width:mq-em($bp-gamma - 1)) {
    //     top: 50px;
    // }
}

.NavUser.open { position: absolute; top: 60px; left: auto; right: 0; }
.NavLanguage.open { position: absolute; top: 60px; left: 0; right: auto; }



/*
    Content
*/

/* In page navigation */

.NavInpage {
    @include position(fixed, 0px 0 0px 0px);
    background: $color-white;
    margin: 0;
    padding-top: 70px;
    width: 50px;
    z-index: 200;

    a {
        @include transition(all 0.25s ease-out);
        @include rem('font-size', 21px);
        color: $color-info; 
        display: block;
        line-height: 50px;
        position: relative;
        text-align: center;
        height: 50px;
        width: 50px;

        @include hover {
            color: $color-black;
        }

    }

    .is-selected {

        a {
            background-color: $color-note;
            color: $color-black;
        }

    }

}

/*
    Misc
*/
.Skipper {

    a {
        @include position(absolute, 0 0 0 -9999px);
    }
}





