.mainMenu {
	display:block;
	position:relative;
	width:100%;
	margin:0;
	padding:0;
	float:left;
	}
	
#toggleMenu { 
	display: none;
	}

#toggleMenu:checked ~ ul {  
	max-height:100%; /*Make page height*/ 
	opacity:1;
	}
	
.mainMenu > ul {
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
    overflow-y: hidden;
	max-height:0;
	}

.mainMenu li {
	margin:0;
	padding:0;
	white-space:nowrap;
	display:block;
	width:100%;
	float:left;
	}
.mainMenu .active{
	background:#14A859; color:#fff;
}
	.mainMenu li ul li a{
	padding:7px 5px;
}
	.mainMenu li ul li a:hover{
	background:#E8258C;
}
	
.mainMenu a, .mainMenu a:visited {
	display:block;
	width:100%; /*required to make whole element clickable*/
	}

label.menuTitle {
	margin:0;
	display:block;
	cursor:pointer;
	background: url('../images/menu.png');
    background-image: url('../images/menu.svg'), none; 
	background-repeat: no-repeat;
	background-position: 97% 10px;
	background-size: 24px 19px; /*Make same size as your menu.png*/
	}
	
@media screen and (min-width:992px) {
	label.menuTitle {
		display:none;
		}
	
	.mainMenu ul { 
		display:block!important;
		border:0;
		overflow:visible;
		max-height:100%!important; 
		}	

	.mainMenu ul li {
		width:auto; 
		display:inline; 
		border:0; 
		}
}


	/* Child CSS Functionality - do not change*/
	.mainMenu > ul ul {
		float:left;
		width:100%;
		margin:0;
		padding:0;
		}

	@media screen and (min-width:992px) {
		.mainMenu > ul > li {
			position: relative;
		}

		.mainMenu > ul > li:hover ul {
			display: block!important;
		}

		.mainMenu > ul ul {
			display:none!important;
			position: absolute;
			left:0;
			}

		.mainMenu > ul ul li {
			display: block;
			width:100%;
			float:left;
			padding:0;
			margin:0;
		}

		.mainMenu .toggleChildren {
			display:none!important;
		}
	}
	/*End Child CSS Functionality*/



/*Menu Styling CSS - change the below to suit your site!*/

.mainMenu li {
	border-top:1px solid #ccc;
	}
	
.mainMenu a, .mainMenu a:visited {
	color:#fff;
	text-decoration:none;
	width:100%; /*Use 100% and box-sizing if not supporting ie7*/
	padding:5px 3%;
	background: none;
	}
	
label.menuTitle {
	font-size:20px;
	width:94%;  /*Use 100% and box-sizing if not supporting ie7*/
	padding:6px 3%;
	font-weight:bold;
	}
	
@media screen and (min-width:992px) {

	.mainMenu li {
		border:0;
		}
	
	.mainMenu a:hover  {
		background: #14a859 none repeat scroll 0 0;
color: #ffffff;
		}

	.mainMenu a, .mainMenu a:visited {
	line-height: 15px;
padding: 12px 16px 14px;
		}
}

/*Menu Child Styling*/
.mainMenu .toggleChildren {
background: rgba(0, 0, 0, 0) url("../images/nav-arrow.png") no-repeat scroll right center / 11px 8px;
display: block;
float: right;
height: 30px;
margin-right: 1%;
padding: 0;
width: 100%;}

.mainMenu .toggleChildren.contract {
	background:rgba(0, 0, 0, 0) url("../images/nav-arrow.png") no-repeat scroll right center / 11px 8px;
	background-size: 11px 8px; 
	-moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

.mainMenu > ul ul a, .mainMenu > ul ul a:visited {
	background:#14A859;
}


@media screen and (min-width:992px) {
	.mainMenu > ul > li:hover > a {
	background: #14a859 none repeat scroll 0 0;
color: #ffffff;
	}

	.mainMenu > ul ul {
	min-width: 260px;
top: 40px;
z-index: 9;	}

	.mainMenu > ul ul a {
		border:0;
		border-bottom:1px solid #ccc;
	}
}
/*End Menu Child Styling*/