/* ============================================= Cell Phone Screen ============================================= */
@media only screen and (min-width: 20em) {

ul.menu {
	position: absolute;
	top:0;
	width:100%;
	margin: auto;
	text-align: center;
	padding: 0;
	list-style: none;
	z-index:100;
}
	
ul li.menu {
	position: relative;
	top:0;
/*	background: url(../image/menu.png) no-repeat right center; */
	width:100%;
	display: inline-block;
	padding: 20px 0; /* moves the icon*/
	}
	
ul li ul.menu {
	width:100%;
	position: absolute;
	padding: 0;
	display: none;
/*	opacity: 0;
	visibility: hidden;
*/
	}
	
ul li ul li.menu {
	width:100%;
	padding: 0;
	background: #555;
	color: #fff;
	line-height:2em;
	text-shadow: 0 -1.5px 0 #000;
	}

ul li ul li.menu a {
	padding: .4em 0;
	width:100%;
	display:inline-block;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.5em;
	letter-spacing: .3em;
	border-bottom: 1px solid #6B6A6B;
	}

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

ul li ul li.menu:first-child {text-align:left; padding:7px; padding-left:20px;}
ul li ul li.menu:first-child:hover {background:#555;}

.menu a {color:#fff;}
.menu a:visited{color:#fff;}
.menu a:hover{color:#fff;}

.icon {float:right; margin-right:15px;}

}

/* ============================================= Desktop Screen ============================================= */

@media only screen and (min-width: 48em) {

.icon {display:none;}

ul.menu {float:left; position: static; text-align:left;}
	
ul li.menu {display: inline;}
	
ul li.menu:hover {
	background: #fff;
	color: #990000;
	}
	
ul li ul.menu {
	position: relative;
	display: inline; 
	line-height:20px;
	padding: 0 1em;
/*	opacity: 1;
	visibility: visible;
*/	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	}

ul li ul li.menu:first-child {padding:0; padding-left:0;}
	
ul li ul li.menu {background: #fff; line-height:1.7em;}

ul li ul li.menu a {
	padding: 1em 1em;
	display:inline;
	line-height:1.7em;
	font-weight: bold;
	text-decoration: none;
	font-size: 1em;
	letter-spacing: .1em;
	border: 0;
	}

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

.menu a {color: #900000;}
.menu a:visited {color: #900000;}
.menu a.active {color: #380B61;}
.menu a:hover {color: #380B61;}

}

