.l-home

    .header-mobile
        border-bottom 1px solid #E5D9D1

.header-mobile
    padding 14px 0px 10px
    display none
    background-color $brand-white
    border-bottom 1px solid #E0E0E0
    clearfix()

    @media screen and (max-width 768px)
        display block

    &.open
        background-color $brand-black
        border-bottom none

        .mobile__logotype

            .logotype__link

                &:before
                    opacity-ie(0)

                &:after
                    opacity-ie(1)

        .mobile__trigger-link

            &:before
                opacity-ie(1)

        .mobile__trigger-helper
            display none

    .mobile__trigger
    .mobile__search
        make-xs-column(3)

    .mobile__logotype
        make-xs-column(6)
        text-align center

        .logotype__link
            position relative
            display inline-block
            width 115px
            height 20px

            &:before
            &:after
                display block
                content ""
                width 115px
                height 20px
                position absolute
                left 0
                top 0
                background-repeat no-repeat

            &:before
                img-retina($logotype-folder + "mobile-logotype.png", $logotype-folder + $2x-folder + "mobile-logotype@2x.png", 115px, 20px)
                opacity-ie(1)

            &:after
                img-retina($logotype-folder + "mobile-logotype-white.png", $logotype-folder + $2x-folder + "mobile-logotype-white@2x.png", 115px, 20px)
                opacity-ie(0)

    .mobile__search
        text-align right

        .search__link
            display inline-block
            vertical-align top
            width 19px
            height 19px
            img-retina($icons-folder + "mobile-search-icon.png", $icons-folder + $2x-folder + "mobile-search-icon@2x.png", 19px, 19px)
            background-repeat no-repeat

    .mobile__trigger

        &-link
            width 20px
            height 20px
            position relative
            display inline-block
            padding 5px 0

            &:before
                position absolute
                left 0
                top 0
                display block
                content ""
                width 20px
                height 20px
                img-retina($icons-folder + "mobile-close-icon.png", $icons-folder + $2x-folder + "mobile-close-icon@2x.png", 20px, 20px)
                background-repeat no-repeat
                opacity-ie(0)

        &-helper
            display block
            width 19px
            height 2px
            background-color #a67a53
            margin-bottom 3px

            &:last-child
                margin-bottom 0

    .mobile__user
        padding 25px 0
        border-top 1px solid #333333
        border-bottom 1px solid #333333

        .navigation
            padding 0

        .navlist__link
            font-family $font-sans
            text-transform none
            font-size 15px
            letter-spacing 0