@media only screen and (max-width: 768px) {
    .theme-custom .nivo-controlNav {bottom:4px;}
    .nivo-directionNav{display:none;}
    #top{height:auto;}

    #menu {
        position:fixed;top:0;left:0;width:100%;z-index:100;margin:0;background:#fff;overflow:auto;max-height: 100%;border-bottom:1px solid #eee;/*box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1)*/;
        max-width: 100vw;
    }

    #menu .sf-menu ul{
        box-shadow: none;
    }
    #menu .sf-menu a {
        border-top:none;
        margin:0;
        padding: 10px 15px;
        border-bottom:1px solid rgba(0, 0, 0, 0.15);
        background:none !important;
        font-family: 'Open Sans', sans-serif;
        color:#000;
        font-size:13px;
        font-weight:600;
        line-height:24px;
    }
    #menu .sf-menu a:hover {
        background:none !important;
    }
    #menu li li{
        background: rgba(0, 0, 0, 0.15);
    }

    #menu .sf-menu li a{padding-left:20px;}
    #menu .sf-menu li li a{padding-left:40px;}
    #menu .sf-menu li li li a{padding-left:60px;}

    h1.titol_nav{font-size:22px;line-height:48px;margin:0;padding:0;color:#fff;margin:5px 10px;}
    #mobnav-btn {
        float: right;
        font-size:20px;
        cursor:pointer;
        margin:5px;
    }
    #mobnav-btn i.fa-square{color:#000;}
    .mobnav-subarrow {
        position:absolute;
        top:0;
        right:0;
        z-index:10000000;
        font-size:20px;
        padding:0 15px;
        line-height:44px;

        background: rgba(0, 0, 0, 0.15);
    }
    .mobnav-subarrow i{
        color:#fff;
    }
    .sf-menu {
        width: 100%!important;
        display: none;
        margin:0;
    }
    .sf-menu.xactive {
        display: block!important;
    }
    .sf-menu li {
        float: none!important;
        display: block!important;
        width: 100%!important;
    }
    .sf-menu li a {
        float: none!important;
    }
    .sf-menu ul {
        position:static!important;
        display: none!important;
    }
    .xpopdrop > ul {
        display: block!important;
    }
    #mobnav-btn i.fa-square{color:#fff;}
    #mobnav-btn i.fa-bars{color:#000;}
}

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

    body.padding-top{padding-top:86px;}
    #top.fixat{position:fixed;top:0;width:100%;z-index:10000;background:rgba(255,255,255,0.8);}
    #top .container{position:relative;height:84px;}
    #top *{transition:0.5s;}
    #top.small .container{height:56px;}

    #menu{position:absolute;right:133px;bottom:0;}
    #topbar-menu {
        position:relative;
    }
    #mobnav-btn,.titol_nav,.mobnav-subarrow {
        display: none;
    }

    .sf-menu li {
        white-space: nowrap; /* no need for Supersubs plugin */
        *white-space: normal; /* ...unless you support IE7 (let it wrap) */
        -webkit-transition: background .2s;
        transition: background .2s;
    }
    .sf-menu li li a{
        margin:0;
        border-top:none;
    }
    #menu ul li.last a{border:none;}
    #menu a{
        color:#000;
        font-size:13px;
        font-family: 'NBInternationalRegularWebfont';
        text-transform:none;
        padding:16px 8px;
        margin:0;
        margin:0 6px;
    }
    /* tatxem els apartats del menú */
    @keyframes strike{
        0%   { width : 0; }
        100% { width: 100%; }
    }
    #menu li a:hover {
        position: relative;
    }
    #menu li a:hover:after {
        content: ' ';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: black;
        animation-name: strike;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
    #menu li a.selected:after {
        content: ' ';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: black;
        animation-name: strike;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }



    #menu li:last-child a{border-right:none;}

    #menu li li a{
        padding:0 20px;
        font-size:15px;
        font-weight:500;
        border:none;
        background:#FE860C;
        color:#fff;
        text-transform:none;
    }
    #menu li li a:hover{color:#00377C;border:none;}
    #menu li.has-dropdown a{
        padding-right:10px;
    }
    .sf-menu ul ul li {
        background: #fff;
    }
    .sf-menu li:hover,
    .sf-menu li.sfHover {
        /* only transition out, not in */
        -webkit-transition: none;
        transition: none;
    }
    .sf-menu > li.sfHover > a{
    }
    #menu li li.sfHover a{color:#00377C;}
    #menu li li li a{color:#fff !important;}
    #menu li li li a:hover{color:#00377C !important;}

    #menu li.sfHover i{color:#FE860C !important;}

}