/* CSS Level 3 */
@media screen and (min-width: 769px) {
	.menu-link {
		display: none;
		}
	#menu {
		position:fixed;
		top:0;
		margin-left:10px;
		margin-top:10px;
		z-index:100;
	}
	#menu ul {
		margin:0;
		padding:0;
		list-style:none;
		white-space:nowrap;
		text-align:left;
		padding:0;
		background-color:Blue;
		border:1px solid #888;
		border-radius: 10px;
		box-shadow:0 0 5px rgba(0,0,0,0.4);
	}
	#menu li {
		display:inline;
	}
	#menu ul ul {
		position:absolute;
		left:100%;
		margin-top:-40px;
		margin-left:-8px;
		display:none;
	}
	#menu ul#toplevel {
		position:relative;
		float:left;
	}
	#menu a, #menu b {
		display:block;
		font:13px verdana,arial,sans-serif;
		color:#fff;
		text-decoration:none;
		padding:7px 5px 7px 10px;
		width:165px;
	}
	#menu li:hover > a {
		color:black;
		text-shadow:1px 1px 2px rgba(255, 255, 255, 0.6);
		background-color: White;
		border-radius:0;
	}
	#menu ul li:first-child > a {
		border-radius:9px 9px 0 0;
	}
	#menu ul li:last-child > a {
		border-radius:0px 0px 9px 9px;
	}
	#menu.blue li:hover > a {
		background-color:white;
	}
	#menu ul li:hover > ul {
		display:block;
		left:100%;
	}
	#menu img#transparant {
		position:fixed;
		width:0;
		height:0;
		left:0;
		top:0;
		z-index:-1;
	}
	#menu ul:hover + img {
		width:100%;
		height:100%;
	}
	.br {
		display: block;
	}
	.menu li.has-submenu > a:after {
		content: " \25b8";
		position: absolute;
		right: 0;
		font-size: 1.5em;
}
}
/* ================================================================ */
@media screen and (max-width: 768px) {
	#menu {
		position:absolute;
		top:0;
		margin-left:0px;
		margin-top:59px;
		z-index: 10;
	}
	* {
		box-sizing: border-box;
	}
	.menu-link {
		position:fixed;
		z-index: 11;
		display: none;
		float: left;
		padding: 8px 10px;
	}
	.menu { 
		float: left;
		max-width: 60em;
		transition: all 0.3s ease-out; 
	}
	.menu ul { 
		padding: 0px;
		margin: 0px;
		list-style: none;
		position: relative;
		display: inline-table;
	}
	.menu > li > ul.sub-menu {
		min-width: 10em;
		padding: 4px 0;
		background-color: #484848;
		border: 1px solid #CCC;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 5px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		background-clip: padding-box;
	}
	.menu ul:after {
		content: "";
		clear: both;
		display: block;
	}
	.menu ul li {
		padding: 0px;
	}
	.menu > ul > li { 
		display: inline-block;
	}
	.menu ul li a { 
		display: block;
		text-decoration: none;
		color: white;
		background-color: blue;
		font-weight:normal;
		font-size: .9em;
	}
	.menu ul li > a { 
		padding: 12px 12px;		
	}
	.menu ul ul { 
		display: none; 
		position: absolute; 
		top:100%;
		min-width: 160px;
		background-color: blue;
		border: 1px solid #CCC;
		border: 1px solid rgba(0, 0, 0, 0.2);
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	}
	.menu ul li:hover > ul {
		display: block;
	}
	.menu ul ul > li {
		position: relative;
	}
	.menu ul ul > li a {
		padding: 5px 15px 5px 10px;
		height: auto;
		background-color: blue;
		transition: background-color 0.2s ease-out; 
	}
	.menu ul > li a:hover {
		background-color: white;
		color: black;
		font-weight:normal;
	}
	.menu ul ul ul {
		position: absolute; 
		left: 100%; 
		top:0;
	}

	a.menu-link {
		display: block;
		background-color: transparent;
	}
	a.menu-link:hover {
		background-color: white;
	}
	.menu {
		clear: both;
		min-width: inherit;
		float: none;
	}
	.menu, .menu > ul ul {
		overflow: hidden;
		max-height: 0;
		background-color: #484848;
	}
	.menu > li > ul.sub-menu {
		padding: 0px;
		border: none;
		border-radius: 0px;
		box-shadow: none;
		background-clip: padding-box;
	}
	.menu.active, .menu > ul ul.active {
		max-height: 150em;
	}
	.menu ul {
		display: inline;
	}
	.menu > ul {
		border-top: 1px solid #808080;
	}
	.menu li, .menu > ul > li {
		display: block;
	}
	.menu li a {
		color: #fff;
		font-weight:normal;
		display: block;
		padding: 0.8em;
		border-bottom: 1px solid #808080;
		position: relative;
	}
	.menu li.has-submenu > a:after {
		content: " \25b8";
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		font-size: 1.5em;
		padding-top: 0.3em;
		padding-right: 0.7em;
	}
	.menu li.has-submenu > a.active:after {
		content: "\2013";
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		font-size: 1.5em;
		padding-top: 0.3em;
		padding-right: 0.8em;
	}
	.menu ul ul > li a {
		background-color: blue;
		padding: 12px 18px 15px 30px;
	}

	.menu ul ul ul > li a {
		background-color: blue;
		padding: 12px 18px 15px 50px;
	}

	.menu ul ul, .menu ul ul ul {
		display: inherit;
		position: relative;
		left: auto;
		top:auto;
		box-shadow: none; 
		border: none;
	}
  Body {
    min-height: 100%;
    }
}

.br {
		display: block;
}