@import 'https://fonts.googleapis.com/css?family=Crimson+Text';

nav{
	font-family:  'Roboto', sans-serif;
	text-align:right;
	transition: all 0.3s ease;
	margin:auto;
	position:static;	
}

/********************************************************** Main Menu */
nav > li{
	position: relative !important;
	display:inline-table;
	padding:15px 13px;
	outline:none;
	text-align:left;
	cursor:pointer;	
	}
nav > li:hover, 
nav > li:focus{
}
nav li a{
	display:block;
	text-decoration:none;
	text-transform: uppercase;
	color:#000;
	font-size:16px;
	
	}
nav > li:hover > a, 
nav > li:focus > a{
	color: #fb0003;
	opacity:1;
	}

nav > li:hover > .sub,
nav > li:focus > .sub{
	max-height:999px;
	opacity:1;
	padding: 10px 0px;
	overflow:visible;
}




/********************************************************** Sub Menu */
.sub{
	position: absolute;
	top:53px !important;
	left:0px;
	transition: all 0.5s ease;
	opacity:0;
	overflow:hidden;
	max-height:0px;
	z-index:9999;
	white-space:nowrap;
	background-color:rgba(255, 255, 255, 0.9);
	box-shadow:0px 0px 5px #fb0003;
}
.sub a{
	padding:5px 20px;
	white-space:nowrap;
	}

.sub a:hover{
	background-color: #660;
	opacity:1;
	color:#FFF;
	}
	

	
	
/********************************************************** Toggle */
#toggle, 
#toggle + label {
	display:none;
	cursor:pointer;
	padding:5px 10px;
	position:relative;
	background-color:#660;
	
}

#toggle + label:after {
	/*content:url(nav.png);*/
	float:right;

}

@media only screen and (max-width: 950px) {
#toggle + label{
	display:block;
	}
		
#toggle:checked ~ nav {
	display:block;
	max-height:999px;
}
nav {
	transition: all 1s ease;
	position: static;
	display:block;
	max-height:0px;
	overflow:hidden;
	background-color:#fff;
}
nav > li{
	display:block;
	padding:7px 25px;
	}	
nav > li:hover, 
nav > li:focus{
	background-image: url();
}
nav > li:hover a, 
nav > li:focus a{
	color: #000;
	}
.sub{
	position: static;
	background:transparent;
	padding:0px 0px;
	margin-top:0px;
	box-shadow:0px 0px 0px #fb0003;
}
}