@media only screen and (max-width :959px) {
    #nav-trigger {
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        margin-left: 20px;
        line-height: 1;
        background: url('../img/robico-icon-menu.png') no-repeat;
        background-size: 100%;
        position: absolute;
        right: 20px;
        top: 20px
    }

    #nav-home {
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        margin-left: 20px;
        line-height: 1;
        background: url('../img/robico-icon-home.png') no-repeat;
        background-size: 100%;
        position: absolute;
        right: 90px;
        top: 20px
    }

    #menu .mobile-container {
        position: fixed;
        left: -265px;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: 1600;
        color: #fff;
        transition: all 0.45s;
        -webkit-transition: all 0.45s;
        visibility: hidden;
        background: #7a3183;
        background: -webkit-linear-gradient(left, #7a3183 15%, #0e6fc9 99%);
        background: -o-linear-gradient(left, #7a3183 15%, #0e6fc9 99%);
        background: linear-gradient(to right, #7a3183 15%, #0e6fc9 99%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a3183', endColorstr='#0e6fc9', GradientType=1)
    }

    #menu .mobile-container.opened {
        left: 0;
        visibility: visible
    }

    #menu .menu-top-menu-container {
        height: calc(100vh - 48px);
        overflow: scroll
    }

    #menu .menu a {
        color: #FFF;
        display: block;
        font-size: 18px;
        font-weight: 200;
        line-height: 50px;
        position: relative
    }

    #menu #menu-header {
        font-size: 26px;
        line-height: 48px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 13px 25px;
        position: relative
    }

    #mobile-menu-close {
        position: absolute;
        display: block;
        width: 50px;
        height: 50px;
        top: 10px;
        right: 2px;
        background-image: url('../img/close.png');
        background-position: 0 0;
        background-repeat: no-repeat;
        background-color: transparent
    }

    #mobile-menu-close:hover,
    #mobile-menu-close:focus {
        background-position: -50px 0
    }

    body.logged-in #mobile-menu {
        margin-top: 32px
    }

    #menu .menu {
        list-style: none;
        padding: 0 0 100px 0;
        margin: 0
    }

    #menu .menu li a {
        display: block
    }

    #menu .menu>li>a {
        padding-left: 23px;
        line-height: 54px;
        background-color: transparent;
        border-top: 1px solid rgba(255, 255, 255, .07)
    }

    #menu .menu>li.menu-item-has-children>a:before {
        content: "\203A";
        margin-right: 10px
    }

    #menu .menu>li.menu-item-has-children>ul.sub-menu>li.menu-item-has-children>a:before {
        content: "\203A";
        margin-right: 10px
    }

    #menu .menu ul {
        padding: 0
    }

    #menu .menu>li.menu-item-has-children:hover>ul,
    #menu .menu>li.menu-item-has-children:focus>ul {
        display: block
    }

    #menu .menu ul ul {
        margin: 8px 0;
        padding: 8px 0
    }

    #menu .menu>li.menu-item-has-children>ul>li.menu-item-has-children:hover>ul,
    #menu .menu>li.menu-item-has-children>ul>li.menu-item-has-children:focus>ul {
        display: block
    }

    #menu .menu ul ul ul {
        background-color: #555
    }

    #menu .menu li li a {
        padding-left: 41px;
        line-height: 34px
    }

    #menu .menu li li li a {
        padding-left: 55px
    }

    #menu .menu li li a {
        color: #FFF
    }

    #menu .menu li li a:hover,
    #menu .menu li li a:focus,
    #menu a:hover,
    #menu a:focus {
        color: #FFF
    }

    #menu .menu li a:hover {
        background-color: rgba(0, 0, 0, .8)
    }
}

@media only screen and (min-width :960px) {

    #nav-trigger,
    #nav-home {
        display: none
    }

    #menu #menu-header {
        display: none
    }

    #menu ul.menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    #menu ul.menu li {
        position: relative
    }

    #menu ul.menu li a {
        color: #040404;
        display: block;
        font-size: 14px;
        font-weight: 600;
        line-height: 30px;
        position: relative
    }

    #menu ul.menu li a:hover {
        color: #000
    }

    #menu ul.menu>li>a {
        text-transform: uppercase;
        padding: 45px 0
    }

    #menu ul.menu>li.menu-item-has-children>a:after {
        content: "\203A";
        margin-left: 10px;
        display: inline-block;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    #menu ul.menu>li.current-menu-item>a {
        text-decoration: underline
    }

    #menu ul.menu li ul.sub-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #ebebeb;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        box-shadow: 0 2px 7px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .1);
        min-width: 230px;
        transform: translateY(21px);
        -webkit-transform: translateY(21px);
        -ms-transform: translateY(21px);
        background: #7a3183;
        background: -webkit-linear-gradient(left, #7a3183 15%, #0e6fc9 99%);
        background: -o-linear-gradient(left, #7a3183 15%, #0e6fc9 99%);
        background: linear-gradient(to right, #7a3183 15%, #0e6fc9 99%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a3183', endColorstr='#0e6fc9', GradientType=1)
    }

    #menu ul.menu li:hover ul.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0)
    }

    #menu ul.menu li ul.sub-menu li {
        border-bottom: 1px solid #ebebeb
    }

    #menu ul.menu li ul.sub-menu li:last-child {
        border-bottom: none
    }

    #menu ul.menu li ul.sub-menu li a {
        line-height: 38px;
        padding: 0 15px;
        color: #fff;
        display: block
    }

    #menu ul.menu li ul.sub-menu>li.menu-item-has-children>a:after {
        content: "\203A";
        margin-left: 10px;
        display: inline-block
    }

    #menu ul.menu li ul.sub-menu li a:hover {
        background: #000
    }

    #menu ul.menu li ul.sub-menu>li .sub-menu {
        left: 100%;
        top: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(21px);
        -webkit-transform: translateY(21px);
        -ms-transform: translateY(21px)
    }

    #menu ul.menu li ul.sub-menu>li:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0)
    }
}