.top-nav {
    background: $color__bg-top-nav;
    color: $color__font-top-nav;

    a {
        color: $color__font-top-nav;
        text-decoration: none;

        &:hove {
            color: $color__font-top-nav-hover;
        }
    }

    nav {
        padding-left: 8px;
    }
}

/*= Superfish =*/
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 999;
}
.sf-menu {
    line-height: 1.0;
    float: left;
    padding: $default-gutter/2 0;
    position: relative;
    display: none;
}
.sf-menu ul {
    position: absolute;
    top: -999em;
    width: 185px;
}
.sf-menu ul li { 
    width: 100%;
    margin: 0;
    padding: 10px 0;
    background: $color__bg-top-nav;
}
.sf-menu ul li:hover, .sf-menu li li.current { 
    background: lighten($color__bg-top-nav, 10%);
}
.sf-menu li:hover { visibility: inherit }
.sf-menu li {
    float: left;
    position: relative;
    padding: 0 28px;
}
.sf-menu li:before {
    content: '/';
    color: $color_white;
    font-size: 8px;
    position: absolute;
    left: 0;
    top: 2px
}
.sf-menu li:first-child:before, .sf-menu li li:before, .sf-menu li.back:before {
    content: '' !important
}
.sf-menu li li {
    border-top: 1px solid darken($color__bg-top-nav, 5%);
    border-bottom: 1px solid lighten($color__bg-top-nav, 5%);
    margin:0;
    padding: 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease
}
.sf-menu li li:first-child {
    
}
.sf-menu li li li:first-child {
    border-top: 1px solid lighten($color__bg-top-nav, 5%) !important
}
.sf-menu li li a {
    padding: 8px 15px;
    line-height: 20px;
    color: $color_white;
    text-transform: none;
    letter-spacing: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.sf-menu li li a:hover {
    padding-left: 22px
}
.sf-menu ul ul:before {
    position: absolute;
    width: 0 !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    height: 0 !important;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid $color_white;;
    left: 0;
    top: 0
}
.sf-menu i {
    margin-right: 8px
}
.sf-menu a {
    display: block;
    position: relative;
    color: $color_white;;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}
.sf-menu li li a {
    font-size: 12px;
    font-weight: normal
}
.sf-menu li:hover > a, .sf-menu li > a:hover, .sf-menu li.current > a {
    color: $color_white;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left: 0px;
    z-index:     999;
    top: 11px;
    padding: 16px 0 0 0;
    -webkit-animation: lr 0.3s;
    animation: lr 0.3s
}
.sf-menu li:hover ul li ul,
.sf-menu li.sfHover ul li ul, 
.sf-menu li:hover ul li ul li ul,
.sf-menu li.sfHover ul li ul li ul  {
    left: 172px;
    z-index: 999;
    top: -1px !important
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left: 172px;
    top: -1px !important;
    padding: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left: 172px;
    top: 0;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    outline: 0;
}

/*** arrows **/
.sf-menu a.sf-with-ul { min-width: 1px }
.sf-sub-indicator {
    position: absolute;
    display: block;
    text-indent: -999em;
    overflow: hidden;
}
a > .sf-sub-indicator { 
    position: absolute;
    width: 0; 
    height: 0; 
    left: 28%;
    top: 19px;
}
li li a .sf-sub-indicator {  border-bottom: 0 !important }
.first-head li:hover > a { color: red }

.sf-menu li.back {
    position: absolute;
    padding: 0 !important; 
    margin: 0 !important; 
    top: 36px;
    overflow: inherit !important
}
.sf-menu li.back .left {
    position: absolute;
    width: 0 !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    height: 0 !important;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    left: 42%;
}




/*= Snap =*/


  /*
.snap-drawers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .snap-drawer {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: auto;
    width: 0;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: width 0.3s ease;
       -moz-transition: width 0.3s ease;
        -ms-transition: width 0.3s ease;
         -o-transition: width 0.3s ease;
            transition: width 0.3s ease;
  }
  .snap-drawer-left {
    left: 0;
    width: auto;
    z-index: 1;
  }
  .snap-drawer-right {
    right: 0;
    z-index: 1;
  }
  .snap-drawer {
      background: #2B2B2B;
      color: #eee;
  }
  .snap-drawer ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
      display: block !important;
      visibility: visible !important;
  }
  .snap-drawer ul ul {
      margin-left: 20px;
  }
  .snap-drawer i {
      margin-right: 8px;
      margin-left: 0;
  }
  .snap-drawer li a {
      display: block;
      border-bottom: 1px solid rgba(0,0,0, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 10px 0 10px 20px;
      font-weight: bold;
      text-shadow: 0 1px 0 #000;
      text-decoration: none;
      color: #ccc;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
  }
  .snap-drawer ul ul {
      padding-left: 4px;
  }
  .snap-drawer li > a:hover, .snap-drawer li.current > a {
      padding-left: 30px;
      color: #fff;
      text-shadow: 0 1px 0 #ccc;
      border-right: 2px solid #fff;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
  }
  #open-left {
      font-size: 17px;
      font-weight: bold;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      padding: 4px 8px;
      cursor: pointer;
      float: left;
      background-color: #F7F7F7;
      color: #3C3C3C;
      margin: 8px 0;
  }
  .header_v2  #open-left {
      float: right;
      background-color: #3C3C3C;
      color: #F7F7F7;
      margin: 46px 0;
  }
  .snapjs-left .snap-drawer-right,
  .snapjs-right .snap-drawer-left {
    display: none;
  }
  .snapjs-expand-left .snap-drawer-left,
  .snapjs-expand-right .snap-drawer-right {
    width: 100%;
  }
*/



/**
 * <= 991px
 */
@media (max-width: $bpmsdMax) {
    .container {
        max-width: 100%;
    }
}

/**
 * >= 576px
 */
@media (min-width: $bpsd) {
    
}

/**
 * >= 768px
 */
@media (min-width: $bpmd) {
    
}

/**
 * >= 992px
 */
@media (min-width: $bpmsd) {
    .snap-drawers {
        display: none;
    }
    #open-left {
        display: none;
    }
    .sf-menu {
        display: block;
    }
}

/**
 * >= 1024px
 */
@media (min-width: $bpld) {

}