nav {
	position:relative;
    width: auto;
	height:auto;
	display:none;
	min-width:auto;
	min-height:auto;
	font-family:gadugib,Arial,sans-serif;
}

#activate-nav:checked ~ nav {
    display: block;
	margin-top:0px;
}
label {
    cursor: pointer;
}

label .lines .line {
    width: 26px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    margin-bottom: 6px;
    transition: all .2s;
    opacity: 1;
}

#navi #menu-icon:hover .lines .line:last-child,
#navi #menu-icon:active .lines .line:last-child,
#navi #activate-nav:checked~label .lines .line:last-child{
    width: 26px;
}

#navi #menu-icon .lines .line:nth-child(2) {
    transition: all .0s;
}

#navi #menu-icon .lines .line:last-child {
    margin-bottom: 0;
    width: 26px;
}

#navi #menu-icon span,
#navi #menu-icon .lines {
    display: inline-block;
    vertical-align: middle;
	margin-left:5px;
}

#navi #menu-icon span {
    padding: 0 0 0 6px;
	margin-top:-2px;
	font-family: gadugib,Arial,sans-serif;
	color:#FFF;
}

#navi #activate-nav:checked ~ label .lines .line:nth-child(1){
    transform: rotate(45deg);
}

#navi #activate-nav:checked ~ label .lines .line:nth-child(2){
    opacity: 0;
	margin-top: -10px;
}

#navi #activate-nav:checked ~ label .lines .line:nth-child(3){
    transform: rotate(-45deg);
    margin-top: -6px;
}
nav ul {
    padding:0px;
    margin: 0px;
	display:block;
	

}
nav ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
    nav ul {background-color: #0ebc05;}
	
	nav ul li ul li{
    background-color: #00193f;
}
	nav ul li ul li:hover{
    background-color: #0ebc05;
}
    nav ul li {
	position:relative;
    list-style: none;
	display:block;
	margin:auto;
	float:none;
	overflow:hidden;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: white;
    padding: 10px 40px 40px 10px;
	-webkit-transition: background 0.3s ease-out 0s;
    -moz-transition: background 0.3s ease-out 0s;
    -o-transition: background 0.3s ease-out 0s;
    transition: background 0.3s ease-out 0s;
}
nav ul li ul li a {
padding-left:40px;
padding-right:53px;
border-top:1px solid #FFF;

}
@supports (-webkit-appearance:none) {
nav ul li a {
    text-decoration: none;
    display: block;
    color: #FFF;
    padding:10px 15px 15px 10px;
	
	-webkit-transition: background 0.3s ease-out 0s;
    -moz-transition: background 0.3s ease-out 0s;
    -o-transition: background 0.3s ease-out 0s;
    transition: background 0.3s ease-out 0s;
}

}

nav ul li.cat1:hover a {background-color:#00193f;}

nav ul li.cat1:hover > ul li a  {
    background-color: #0ebc05;
}
nav ul li.cat2:hover a {background-color:#00193f;}
nav ul li.cat2:hover > ul li a  {
    background-color: #00193f;
}
nav ul li.cat3:hover a {background-color:#00193f;}
nav ul li.cat3:hover > ul li a {
    background-color: #0ebc05;
}
nav ul li.cat4:hover a {background-color:#00193f;} 
nav ul li.cat4:hover > ul li a {
    background-color: #0ebc05;
}
nav ul li.cat5:hover a {background-color:#00193f;} 
nav ul li.cat5:hover > ul li a {
    background-color: #00193f;
}
nav ul li.cat6:hover a {background-color:#00193f;} 
nav ul li.cat6:hover > ul li a {
    background-color: #00193f;
}
nav ul li:hover > a {
    color: #FFF;
}
nav ul li ul li a {
    color: #FFF;
}
nav ul li ul li a:hover{
    color: #FFF;
    background-color: #0ebc05 !important;
}
nav ul li:hover > ul {
    visibility: visible;
}
nav ul li ul{
    display: block;
    visibility: hidden;
    position: absolute;
    padding:0px;
}
nav ul li ul li{
    float: none;
}
nav ul li ul li a:hover{
    color: #FFF;
}