@charset "utf-8";
/* CSS Document */

.menuWrapper {width:100%; margin:0 auto;}

#navbar-menu { 
	width:100%;
	background-color:rgb(30,95,149);
	z-index:10;
}

#navbar-menu li a { /* Single Menu Button for 320px screen */
	display:block;
	position:relative;
	width: 100%;
	height:100%;
	color:#fff;
	font-family:Arial Rounded MT Bold, Arial, sans-serif;
	font-weight:bold;
	font-size:20px;
	text-align:center;
	text-shadow:.1em .1em .2em #000000;
	z-index:10;	
}

#menu-title {
	clear:both; 
	background:#333;
	width:auto; 
	line-height:45px; 
	text-align:center;
	z-index:11; 
}

#main-nav, #main-nav ul {
	height:0;
	overflow:hidden; /* Hide submenus on startup */
}
#main-nav {width:100%; height:50px;}

#main-nav li a {                  /* 1st level dropdown menu */
	clear:both;
	display:block;
	line-height:45px;              /* height for submenu items */
	padding:0 10%;
	text-align:left;
	z-index:10;
	color:#fff;
	font-size:18px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#main-nav li a:hover {  
	background-color:rgb(232,30,62); /* Pinellas County Orange */
}

/* Setting Active State for Menu Items */

.home #home a,
.about #about a,
.ministries #ministries a,
.services #services a,
.portfolio #portfolio a,
.clients #clients a,
.contact #contact a {
	
}

#main-nav li:hover ul {overflow:visible;} /* Make 2nd submenu appear */
#main-nav li ul li a{/* 2nd submenu style */
	background-color:#333; /* Dark Gray */
	width:75%;
	padding:0 10% 0 20%;
	z-index:11;
	
}
#main-nav li:hover ul li a:hover{background-color:#FC0;} /* Hover style for 2nd submenu */

@media screen and (min-width: 480px) {
	#main-nav li {width:50%; float:left;}/* Creates 2-column submenu */
	#main-nav li:hover ul {margin:0 0 0 45%; width:50%;} /* Positions 2nd submenu */
	#main-nav li ul li { float:none; width:100%;}
	#main-nav li ul li a {font-size:12px;line-height:30px; width:80%; padding:0 10%; text-align:left;}

}
@media screen and (min-width: 600px) {
	#open-menu, #close-menu, #menu-title {display:none;} /* Hides Mobile button */
	#main-nav {width:100%; height:auto; height:45px; overflow:visible;}
	#main-nav li {width:12.5%;} /* 100% / 8-buttons = 12.5%*/
	#main-nav li a {text-align:center; width:auto; }
	#main-nav li:hover ul {margin:0; padding:0; width:100%; } /* Make 2nd submenu */
	#main-nav li ul li {width:100%;}
}

/*------------------------------------
	End Responsive NavMenu
------------------------------------*/