@media only screen and (min-width : 768px) {
    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sf-menu li {
        position: relative;
        padding-right: 15px;
    }
    .sf-menu ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;
    }
    .sf-menu > li {
        float: left;
    }
    .sf-menu li:hover > ul,
    .sf-menu li.sfHover > ul {
        display: block;
    }

    .sf-menu a {
        display: block;
        position: relative;
        color:#5c5c5b
    }

    .sf-menu li.sfHover>a{
        color:#fff;
        background-color: rgba(0,0,0,0.6);
    }

    .sf-menu ul ul {
        top: 0;
        left: 100%;
    }


    /*** SKIN ***/
    #menu-1 {
        float: right;
    }

    #menu-2 {
        float: left;
    }

    .sf-menu ul {
        min-width: 250px; /* allow long menu items to determine submenu width */
        *width: 250px; /* no auto sub width for IE7, see white-space comment below */
    }
    .sf-menu li{
        z-index: 110;
    }

    .sf-vertical li{
        z-index: 100;
    }


    .sf-menu a {
        position: relative;
        z-index: 110;
        padding:5px;
        text-decoration: none;
        zoom: 1; /* IE7 */
    }

    .sf-vertical a{
        z-index: 100 !important;
    }

    .sf-menu li ul a {
        padding-left: 0px;
        border-bottom: 1px dotted #858584;
        color:#fff;
    }

    .sf-menu li ul a:hover {
        border-bottom: 1px dotted #fff;
    }

    .xsf-menu li ul li:last-child a{
        border-bottom: 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:hover,
    .sf-menu li.sfHover {
        /* only transition out, not in */
        -webkit-transition: none;
        transition: none;
    }


    /* adding sf-vertical class in addition to sf-menu creates a vertical menu */
    /* eg. <ul class="sf-menu sf-vertical"> ... */
    .sf-vertical {
      width: 185px;
      /* If you want the width of the closed menu to expand to its
      widest top-level menu item (like its "Supersubs" submenus do),
      replace the width rule above with the following two rules. */

      /*
      min-width: 12em;
      *width: 12em;
      */
    }

    .sf-vertical li {
        padding-right: 0px;
        width: 100%;
    }

    .sf-vertical>li{
        position:static;
    }
    .sf-vertical ul {
        top: 15px;
        left:200px;
        position: absolute;
        background-color: #909090;
        min-height: 90%;
    }
    .sf-vertical > li {
      float: left;
      backgorund-color:transparent !important;
    }


    .sf-vertical li a{
        color: #fff !important;
        border:none !important;
        padding:3px 5px;
    }

    .sf-vertical li.sfHover>a,.sf-vertical li>a:hover{
        color:#fff;
        background-color: #909090;
    }

    .sf-vertical li.sfHover>a:hover{
        color:#fff;
    }


    .sf-vertical li a:hover, .sf-vertical .sfHover a{
        background-color:#909090;
        color:#5c5c5b;
    }

    .sf-vertical li li a:hover, .sf-vertical .sfHover li a{
        background-color:#e8e8e8;
        color:#5c5c5b;
    }

    .sf-vertical li li  {
      display: inline !important;
      margin: 5px;
      float: left;
      color: #fff ;
      text-align: center;
    }

    .sf-vertical li li a  {
      background-color:#828282 !important;
      color: #fff !important;
    }

    .sf-vertical li li a:hover  {
      background-color:#e8e8e8 !important;
      color: #5c5c5b !important;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .sf-vertical ul {
        width: 510px;
    }
    
    .sf-vertical li li  {
        display: inline !important;
        width: 241px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .sf-vertical ul {
        width: 729px;
    }
    .sf-vertical li li  {
        display: inline !important;
        width: 232px;
    }
    
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .sf-vertical ul {
        width: 932px;
    }
    .sf-vertical li li  {
        display: inline !important;
        width: 221px;
    }    
    
}