nav.main_menu
    margin-left: -12.55px
    +mq(maxTab)
        display: none
    ul
        margin: 0
        padding: 0
        list-style: none

        li
            display: inline-block
            position: relative

            &:not(:nth-child(1))
                margin-left: -4px

            a
                @extend .trns

                font-weight: 600
                font-family: $font2
                padding: 0 12.5px
                line-height: 40px

                @extend .c4

                +mq(md)
                    font-size: 14px

            &.current-menu-item > a,
            &:hover > a
                @extend .c1

            &:hover > ul
                opacity: 1
                visibility: visible

            &.has-dropdown
                > a
                    @extend .trns

                    padding-right: 30px

                    &:after
                        content: '\f105'
                        margin-left: 8px
                        position: absolute
                        right: 15px
                        font-family: $fa

                        @extend .trns

                &:hover > a
                    &:after,
                    &:after
                        transform: rotate(90deg)

                li.has-dropdown a
                    &:after
                        color: #8c8c8c

                    &:hover:after,
                    &:active:after
                        color: #333

            ul
                position: absolute
                z-index: 4
                top: 100%
                left: 0
                min-width: 200px
                background-color: #fff
                padding: 10px 0
                box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08)
                opacity: 0

                @extend .trns

                visibility: hidden
                border-radius: 5px

                li
                    display: block
                    margin-left: 0 !important

                    a
                        display: block
                        width: 100%
                        padding: 6px 28px
                        font-size: 12px
                        background-color: #fff
                        color: #8c8c8c
                        line-height: 24px

                    &.current-menu-item > a,
                    &:hover > a
                        background-color: #fff
                        color: #333
                        text-indent: 5px

                    ul
                        left: 100%
                        margin-left: -10px
                        top: 10px

                        li
                            ul
                                left: auto
                                right: 100%
                                margin-right: 0
                                margin-right: -10px

//mobile_menu


.slicknav_menu
    font-size: 16px
    box-sizing: border-box
    display: none
    +mq(maxTab)
        display: block

