﻿#menu-trigger {
    display: none;
}

#menu-wrap {
    background: #2c2a2f url("../img/topmenu_bg.png") repeat-x scroll 0 0;
    display: table;
    width: 100%;
    min-height: 55px;
    position: relative;
    z-index: 2;
}

    #menu-wrap ul {
        list-style: outside none none;
    }

        #menu-wrap ul li {
            position: relative;
        }

#menu-custom::before, #menu-custom::after {
    content: "";
    display: table;
}

#menu-custom::after {
    clear: both;
}

#menu-custom {
}

.to-middle {
    text-decoration: none;
}

.desktop #menu-custom {
    display: table-row;
}

    .desktop #menu-custom > li {
        background: rgba(0, 0, 0, 0) url("../img/topmenu_sep.png") no-repeat scroll right 0;
        height: 55px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

        .desktop #menu-custom > li + li {
        }

        .desktop #menu-custom > li > a {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #fff;
            display: block;
            font: 600 15px/55px "Open Sans", sans-serif;
            height: 55px;
            text-decoration: none;
            text-transform: uppercase;
        }

        .desktop #menu-custom li .two-line {
             line-height: 15px;
             padding-top: 12px;
        }
        
        .desktop #menu-custom > li:last-child {
            background: none;
        }
        
        .desktop #menu-custom > li:hover > a, .desktop #menu-custom > li.sfHoverForce > a {
            background: #2b292e none repeat scroll 0 0;
            border-bottom: 5px solid #ef0f0f;
        }

    .desktop #menu-custom ul {
        background: #413f43 none repeat scroll 0 0;
        left: 0;
        position: absolute;
        top: 55px;
        width: 193px;
        z-index: 1;
        display: none;
        opacity: 0;
    }

        .desktop #menu-custom ul li {
        }

            .desktop #menu-custom ul li + li {
                border-top: 1px solid #545356;
            }

            .desktop #menu-custom ul li a {
                color: #fff;
                display: block;
                font: 13px/1em "Open Sans", sans-serif;
                padding: 8px 20px 10px;
                white-space: nowrap;
            }

                .desktop #menu-custom ul li a:hover {
                    background: #2d2b2f none repeat scroll 0 0;
                    color: #ff2b2b;
                }

            .desktop #menu-custom ul li a.menu-long {
                white-space: normal;
                text-decoration: none;
                cursor: pointer;
            }

            .desktop #menu-custom ul li ul {
                left: 193px;
                top: 0;
            }

                .desktop #menu-custom li > ul li {
                    text-align: left;
                }


    .desktop #menu-custom li:hover > ul {
        display: block;
        opacity: 1;
    }

@media only screen and (max-width: 992px) {
    #menu-wrap.desktop {
        display: none;
    }

    #menu-wrap {
        position: relative;
    }

        #menu-wrap * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

    #menu-trigger {
        color: #fff;
        cursor: pointer;
        font: 600 18px/55px "Open Sans", sans-serif;
        height: 55px;
        padding: 0 0 0 15px;
        display: block;
        text-transform: uppercase;
    }

        #menu-trigger .menu-icon {
            color: #fff;
            display: block;
            font-size: 24px;
            position: absolute;
            right: 15px;
            top: 14px;
            vertical-align: top;
        }

    .mobile #menu-custom {
        background-color: #413f43;
        display: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 55px;
        width: 100%;
        z-index: 111;
    }

        .mobile #menu-custom li {
            border-top: 1px solid #545356;
            display: block;
            position: relative;
        }

            .mobile #menu-custom li a {
                color: #fff;
                display: block;
                font-size: 18px;
                padding: 10px 15px;
            }

                .mobile #menu-custom li a:hover {
                    background: #2d2b2f none repeat scroll 0 0;
                    color: #ef0f0f;
                }

            .mobile #menu-custom li a.two-line br {
                display: none;
            }

        .mobile #menu-custom ul li a {
            padding-left: 30px;
        }

        .mobile #menu-custom ul li ul li a {
            padding-left: 45px;
        }

    #menu-custom ul.menu-mobile-2 {
        display: none;
    }

    .open-mobile-2 {
        color: #fff;
        cursor: pointer;
        display: block;
        font-size: 24px;
        position: absolute;
        right: 15px;
        top: 8px;
        z-index: 111111111;
    }

        .open-mobile-2:hover + a {
            background: #2d2b2f none repeat scroll 0 0;
        }
}

@media only screen and (max-width: 768px) {
    #menu-wrap {
        height: 48px;
        min-height: 1px;
    }

    #menu-trigger {
        height: 48px;
        line-height: 48px;
    }

        #menu-trigger .menu-icon {
            top: 12px;
        }

    .mobile #menu-custom {
        top: 48px;
    }

    .auth-container #menu-wrap {
        height: 39px;
    }

    .auth-container #menu-trigger {
        height: 39px;
        line-height: 39px;
    }

        .auth-container #menu-trigger .menu-icon {
            top: 8px;
        }

    .auth-container .mobile #menu-custom {
        top: 39px;
    }
}
