ul.menu {
	display: block;
	margin: 0;
	padding: 0;
	float: right;
	list-style: none;	
}

ul.menu li, 
ul.menu a {
	display: block;
	text-decoration: none;
	color: #fff;
	margin: 0;	
	padding: 0;
	font-size: 1.5rem;
	line-height: 1.7rem;
}

ul.menu li a span {
	font-size: 1.1rem;
	font-style: italic;
	color: #dedede;
}

	@media (max-width: 750px) {
		ul.menu li a span { color: #666; }
	}



ul.menu li {
	float: left;
	background: none;
	height: 60px;
	border-right: 2px solid rgba(255,255,255,.3);
	transform: skewX(-20deg);
}

ul.menu li a {
	transform: skewX(20deg);
}

ul.menu li:nth-child(1){ background: #427cc9; border-left: 1px solid rgba(255,255,255,.3); }

ul.menu li:nth-child(2){ background: #BC2E2B; }

ul.menu li:nth-child(3){ background: #dbb31d; }

ul.menu li:nth-child(4){ background: #BC2E2B; }

ul.menu li:hover {
	background: #000;
}

ul.menu li:hover span,
ul.menu li.active span { color: #fff; }
	@media (max-width: 750px) {
		ul.menu li:hover span,
		ul.menu li.active span { color: #444; }
	}

ul.menu li a {	
	display: block;
	padding: 10px 15px 20px 15px;
}

/*
ul.menu li.active,
ul.menu li.active:hover {	background: #FFF; }
ul.menu li.active a, ul.menu li.active a span { color: #333; }
*/


/* Mobile Menu */
ul.mobile-menu  {
		display: block; 
		margin: 0;
		padding: 0;
		float: right;
		list-style: none;	
	}

ul.mobile-menu a.menu-button { display: none }

@media (max-width: 800px) {

	.mobile-only { display: inherit; }

	ul.mobile-menu  {	margin-top: 5px; padding: 5px 0 0 0;	}

	ul.mobile-menu li { background: none; }

	ul.menu li { transform: skewX(0deg); }

	ul.menu li a { transform: skewX(0deg); }



	ul.mobile-menu li:hover li { background: #fff; }

	ul.menu li.active,
ul.menu li.active:hover {	background: #ddd; background: rgba(0,174,197,.8);; }

	ul.mobile-menu a.menu-button {
		text-decoration: none;
		text-align: center;
		display: block;
		padding: 7px 10px;
		color: #333;
		background: none;
		border: 1px solid #ddd;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	
	a.menu-button span:before { content: "MENU "; }



	ul.mobile-menu ul.menu {
		display: none;
		float: none;
		border: 1px solid #999;
	}

	ul.mobile-menu ul.menu li {
		float: none;
		border-bottom: 1px solid #999;
		height: auto;
	}

	ul.menu li a {
		padding: 10px;
		color: #333;
	}

	ul.menu li a:hover { background-color: #dedede; }


	ul.mobile-menu li:hover a.menu-button {
		background: #fff;
		color: #333;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		-webkit-border-top-left-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-moz-border-radius-topright: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	ul.mobile-menu li:hover ul.menu { display: block; }

}