.header-nav {
display: block;
position:absolute;
*position: sticky;
top:18px;
left:0;
right:0;
margin: 0 auto;
padding: 0;
width:auto;
height:auto;
min-width:280px;

background: transparent; 
z-index:10000;
border:0px solid #000;
}

.fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
}

.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border:0px solid green;
  margin:0 auto;
}

/*.nav-collapse,
.nav-collapse ul {
display:table;
list-style: none !important;
min-width:280px;
width:auto;
height:auto;
margin: 0 auto;
padding:0;
border:1px solid blue;
}*/

.nav-collapse li {
position:relative;
height:auto;
width:auto;
padding:1px 10px 4px;
margin: 0;
float: left;
text-align: center;
font-size: 1.2em;
line-height:1;
text-indent: 0;
border-left:0px solid #ccc;
border-right:3px solid #444;
border-bottom:0px solid #ccc;
*border:1px solid red;
}

/*.nav-collapse li::before { 
display: inline-block;
*content: "\2193";
font-weight:bold;
*transform: rotate(90deg);
margin: 0;
}*/


nav ul.sub li.noborder {
border-right:0px solid #ccc;
}


.nav-collapse a { 
display:inline-table; 
vertical-align:middle;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
width:auto;
margin:0 auto;
padding:0px 10px;
height:auto;
text-decoration: none !important;
text-align: center !important;
color: #000;
border:0px solid red;
}

.nav-collapse a:link {
color: #000;
}

.nav-collapse a:visited {
color: #000;
}

.nav-collapse a:focus {
color: #000;
}

.nav-collapse a:hover {
margin:0;
color:#666 !important;
transition:all .3s linear;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
-o-transition:all .3s linear;
text-decoration:none;
}


/*********************************************NAV SUB SUB *******************************************/
.nav-collapse,
.nav-collapse ul.sub {
display:table;
list-style: none !important;
width:auto;

height:auto;
margin: 0 auto;
padding:0;
background:transparent;
border:0px solid blue;
z-index:10000;
}

.nav-collapse li.sub { 
position:relative;
height:auto;
width:auto;
padding:1px 10px 4px;
margin: 0;
float: left;
text-align: center;
font-size: 1.2em;
line-height:1;
text-indent: 0;
border-left:0px solid #ccc;
border-right:3px solid #444;
border-bottom:0px solid #ccc;
}

.nav-collapse li.sub a, .nav-collapse li.sub a:link { 
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
width:auto;
margin:0;
height:auto;
text-decoration: none !important;
text-align: center !important;
color: #000;
border:0px solid red;
}

.nav-collapse ul.sub ul.sub-2 {
    list-style:none;
    margin:0;
    padding:0;
}

.nav-collapse ul.sub li.sub ul.sub-2 {
    position:absolute;
    width:100% !important;
    left:-9999em;
    padding:0;
    margin:0;
    top:21px;
    height:auto;
    min-width:240px;
    width:auto;
    color: #000;
    border:1px solid #eee;
    box-shadow: 0px 2px 3px #888;
}

.nav-collapse ul.sub > li.sub:hover ul.sub-2 {
    left:0;
}
.nav-collapse ul.sub-2::before, .nav-collapse ul.sub-2::after {
content:"";
display:table;
}
.nav-collapse ul.sub-2::after {
clear:both;
}
.nav-collapse ul.sub-2 > li.sub-2 {
width:auto;
padding:0;
float:left;
position:relative;
border:0px solid red;
}

.nav-collapse li.sub ul.sub-2 {
background:#fff;
}

.nav-collapse ul.sub-2 a, .nav-collapse ul.sub-2 a:link { 
    margin:0;
    padding:0;  
    line-height: 1.0em;
    font-size:0.9em;
    text-align:left;
    color:#000;
    width:100%;
}
.nav-collapse ul.sub-2 a:hover {
text-decoration:none;
background:#fff;
}

.nav-collapse li.sub ul.sub-2 li.sub-2 {
min-width:100%;
border:0px solid #fff;
margin:0;
padding:0; 
}
.nav-collapse li.sub ul.sub-2 a, .nav-collapse ul.sub-2 a:link {
width:auto;
border:0px solid red;
}
.nav-collapse li.sub ul.sub-2 a:hover {
background:#d9dadc;
margin:0;
padding:0; 
}

.nav-collapse li.sub ul.sub-2 li.sub-2 {
margin:0;
padding:0; 
display:table-cell;
overflow:hidden;
height:0;
transition:height 400ms ease-in;
}
.nav-collapse ul.sub > li:hover ul.sub-2 li.sub-2 {
height:auto;
padding:0;
margin:0;
text-align:left;
}

.nav-collapse ul.sub > li:hover ul.sub-2 li.sub-2 a,
.nav-collapse ul.sub > li:hover ul.sub-2 li.sub-2 a {
padding:9px 10px 6px;
height:auto;
width:100%;
text-align:left !important;
border:0px solid red;
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */


.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 44px;
  float: right;
  margin:6px 30px 0 0;
  border:0px solid red;
}

.nav-toggle::before {
  color: #000; /* Edit this to change the icon color */
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 28px;
  text-transform: none;
  text-decoration:none !important;
  position: absolute;
  content: "≡";
  text-indent: 0;
  text-align: center;
  line-height: 44px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle.active::before {
  font-size: 28px;
  content:"x";
  background:#fff;
  border:0px solid #999;
}


/***************************************** - 860px *************************************/

@media screen and (max-width: 860px) {


.header-nav {
display: block;
position:absolute;
*position: sticky;
top:2px;
left:0;
right:0;
margin: 0 auto;
padding: 0;
width:auto;
height:auto;
min-width:280px;

background: #fff; 
/*-webkit-box-shadow: 0 1px 2px #999;
-moz-box-shadow: 0 1px 2px #999;
-o-box-shadow: 0 1px 2px #999;
box-shadow: 0 1px 2px #999;
*/
z-index:10000;
border:0px solid #000;
}

.nav-collapse,
.nav-collapse ul.sub {
display:table;
list-style: none !important;
min-width:200px;
width:100%;
height:280px;
margin: 0 auto;
padding:0;
background: #fff;
border:0px solid blue;
}

.nav-collapse li {
display:table-cell; 
height:auto;
width:100% !important;
padding:14px 0;
margin: 0 auto;
position:relative;
float: left;
text-align: center !important;
border-left:0px solid #ccc;
border-right:0px solid #fff;
border-bottom:0px solid #fff;
border:0px solid #aaa;
border-bottom:1px solid #ccc;
}

nav ul li.borderleft {
border-left:0px solid #fff;
}

.nav-collapse a {
background: transparent; 
vertical-align:middle;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
width:auto !important;
margin:0;
padding: 4px 10px;
font-size: 0.9em;
line-height:1.8em;
text-decoration: none !important;
text-transform: uppercase;
text-align: center !important;
color: #222;
border:0px solid red;
}

.nav-collapse li.sub { 
position:relative;
height:auto;
width:100%;
padding:4px 0 2px;
margin:0;
text-align: center;
font-size: 1.2em;
line-height:1;
text-indent: 0;
border-left:0px solid #ccc;
border-right:0px solid #444;
border-bottom:1px solid #ccc;
}

.nav-collapse li.sub a, .nav-collapse li.sub a:link { 
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
width:auto;
margin:0;
padding: 0 10px;
height:auto;
text-decoration: none !important;
text-align: center !important;
color: #000;
border:0px solid red;
}

.nav-collapse ul.sub li.sub ul.sub-2 {
    position:absolute;
    width:100% !important;
    left:-9999em;
    padding:4px 10px 2px;
    margin:0;
    top:28px;
    height:auto;
    min-width:240px;
    width:auto;
    color: #000;
    border:1px solid #eee;
    box-shadow: 0px 1px 1px #aaa;
    z-index:10000;
}

.nav-collapse ul.sub-2 a, .nav-collapse ul.sub-2 a:link {
    margin:0;
    padding:0;  
    line-height: 1.0em;
    font-size:0.8em;
    text-align:left;
    color:#000;
    width:100%;
}

}