﻿/* Navigation */

input#responsive-nav,
label.responsive-nav-label {display:none;}

* {
margin:0;
padding:0;
font-family:'Roboto', sans-serif;
box-sizing:border-box;}

#nav {
float:left;
width:100%;
background:#105436;
margin-bottom:20px;
font-size:0.875em;
z-index:10;}

#nav ul {
z-index:10;
position:relative;
margin:0;
padding:0;}

#nav a {
z-index:10;
display:block;
color:#fff;
text-decoration:none;}

#nav ul li {
z-index:10;
font-size:1em;
border-right:1px solid #ffffff;
position:relative;
float:left;
list-style:none;
color:#fff;
transition:0.5s;}

#nav ul li a {padding:20px;}

#nav ul > li.submenu > a:after {
z-index:10;
position:relative;
float:right;
content:'';
margin-left:10px;
margin-top:5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #fff;
border-bottom:5px solid transparent;}

#nav ul ul li.submenu > a:after {
margin-left:auto;
margin-right:-10px;
border-left:5px solid #fff;
border-right:5px solid transparent;
border-top:5px solid transparent;
border-bottom:5px solid transparent;}

#nav ul li:hover {background:#5e5142;}

#nav ul ul {
position:absolute;
top:-9999px;
left:-9999px;
background:#333;
box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);}

#nav ul ul li {
float:none;
width:250px;
border-bottom:1px solid #555;
border-right:none;}

#nav ul ul li a {padding:10px 20px;}

#nav ul ul li:last-child {border-bottom:none;}

#nav ul li:hover > ul {
top:100%;
left:0;}

#nav ul ul li:hover > ul {
top:0;
left:250px;}

/* Mobile */

@media screen and (max-width:800px) {

label.responsive-nav-label {
position:relative;
display:block;
padding:20px;
background:#105436;
cursor:pointer;
color:#fff;}

label.responsive-nav-label span {margin-right:10px;}

#nav {
position:absolute;
background:#3a3a3a;
top:-9999px;
margin-bottom:0;
padding:10px;}

input#responsive-nav[type=checkbox]:checked ~ nav {
position:relative;
top:0;}

#nav a:after {display:none;}

#nav ul li {border-right:none;}

#nav li {
float:none !important;
width:100% !important;
border-bottom:none !important;}

#nav li a {
margin-bottom:10px !important;
padding:10px 20px !important; 
background:#4a4a4a;}

#nav ul li:hover {background:none;}

#nav ul li a:hover {background:#5e5142;}

#nav ul ul {
position:relative !important;
width:100%;
left:0 !important;
top:0 !important;
background:none !important;
box-shadow:none;}

#nav ul ul li {padding-left:20px;}

/*#nav ul ul ul:last-child {display:none}*/

}

/* 2nd Navi */

.nav2nd {display:none;}

@media screen and (max-width:640px){
.nav2nd {display:block;margin-bottom:1.5em;}
.nav2nd ul {padding-left:0;list-style-type:none;}
.nav2nd li:before {content: "\00bb";margin-right:0.325em}
.nav2nd li {margin-bottom:1.25em;}
.nav2nd a:first-of-type {line-height:1.25;}
}