/*========================= 04 ==========================*/	
/*=======================================================*/
/*====================== NAVIGATION =====================*/
/*=======================================================*/
/*=======================================================*/	

/* resets */
.flexnav ul,
.flexnav li,
.flexnav a { margin:0; padding:0; text-decoration:none; }
.flexnav li:hover, .flexnav a:hover { opacity:1; }

/* flexnav */
.flexnav { overflow:hidden; margin:0 auto; width:100%; text-align:center; }
.flexnav.flexnav-show { max-height:none; background:#111; opacity:1; }
.flexnav ul { background:#222; }
.flexnav li { position:relative; overflow:hidden; padding:0; margin:0; display:inline-block; }
.flexnav li a { position:relative; z-index:101; overflow:hidden; text-decoration:none; display:block; color:#fff; padding:10px 15px; border-right:1px solid rgba(255,255,255,0.1); }
.flexnav li.last a { border-right:none !important; }	
.flexnav li ul { width:200px; text-align:left; margin:0; }
.flexnav li ul li { position:relative; overflow:hidden; float:left; display:block; }
.flexnav li ul.flexnav-show li { overflow:visible; }
.flexnav li ul li a { display:block; border:none; font-weight:400; border-bottom:1px solid rgba(0,0,0,0.3); color:#fff; padding:10px 15px; background:#222; }
.flexnav li ul li a:hover { color:#fff; background:#111; }
.flexnav li a:hover,
.flexnav li:hover > a {  } /* background color */
.flexnav .touch-button { position:absolute; z-index:9999; top:1px; right:0; display:inline-block; background:rgba(0,0,0,0.075); text-align:center; width:40px; height:40px; display:none; }
.flexnav .touch-button:hover { cursor:pointer; }
.flexnav .touch-button .navicon { position:relative; top:1.4em; font-size:12px; color:#666; }
.flexnav li > ul { /* fixes nav flashing on page load */
//  display: block;
display: none;
}

/* screen */
@media all and (min-width:960px) {
/* scroll to fixed */
.scroll-to-fixed { position:fixed; top:0; left:0; right:0; z-index:999; box-shadow:0 3px 5px rgba(0,0,0,0.2); }
/* flexnav */
.flexnav { overflow:visible; font-size:0; }
.flexnav.opacity { opacity:1; }
.flexnav li { position:relative; list-style:none; display:inline-block; overflow:visible; width:auto; font-size:initial; }
.flexnav li > ul { position:absolute; top:auto; left:0; }
.flexnav li > ul li { width:100%; font-size:90%; }
.flexnav li ul li > ul { margin-left:100%; top:0; }
.flexnav li ul li a { }
.flexnav li ul.open { display:block; opacity:1; visibility:visible; z-index:1; }
.flexnav li ul.open li { overflow:visible; max-height:100px; }
.flexnav li ul.open ul.open { margin-left:100%; top:0; }
.menu-button { display:none; } 
}

/* mobile */
@media screen and (max-width:960px) {
.bodyStyle { padding-top:50px; }
.headerNav { position:fixed !important; top:0 !important; left:0; right:0; height:50px; background:#333; z-index:999 !important; }
.headerNav .mobile { font-size:110%; line-height:50px; max-width:75%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; position:absolute; top:0; left:0; right:0; z-index:1; font-family: 'Roboto Slab', serif; }
nav { width:100%; height:auto; padding:0; margin:0; position:absolute; top:0; left:0; right:0; }
.menu-button { position:relative; display:block; line-height:50px; padding:0; background:#111; height:50px; color:#000; cursor:pointer; text-align:center; font-size:125%; overflow:hidden; width:40px; float:right; }
.menu-button .touch-button { background:#000; position:absolute; z-index:9999; top:0; right:0; width:40px; height:50px; display:inline-block; text-align:center; }
.menu-button .touch-button .navicon { font-size:12px; position:relative; color:#fff; width:40px; height:40px; color:#000; display:block; }
.menu-button .touch-button .navicon:before { content:"\2261"; position:absolute; top:0; right:0; color:#fff; width:40px; height:40px; font-weight:bold; font-size:16px; }
nav .flexnav { text-align:left; max-height:0; }
nav .flexnav-show { max-height:none; }
nav .flexnav .touch-button { display:inline-block; background:#222; }
nav .flexnav .touch-button .navicon { top:12px; color:#fff; }
nav .flexnav li { display:block; width:100%; z-index:101; }
nav .flexnav li.item-with-ul {  }
nav .flexnav li ul { width:100%; }
nav .flexnav li ul li { float:none; }
nav .flexnav li a { color:#fff; padding:0 1em; border:none; border-top:1px solid #222; border-bottom:1px solid #000; background:#111; font-size:90%; line-height:40px; }
nav .flexnav li ul li a { background:#333; border-bottom:1px solid #222; border-top:1px solid #444; font-size:90%; color:#fff; padding:0 1em; }
nav .flexnav.flexnav-show { background:#000; }
}