/*
Responsive Mobile Toggle Menu v2.2
Description: Mobile first responsive toggle menu
Author: Danielle Vautier
*/

/*Menu mobile first CSS*/
body{ -webkit-animation: bugfix infinite 1s; }

/*This fixes a chrome/webkit bug for older Android Browsers */
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } 

/*Required functional CSS don't change this bit
CSS styles are at the end! */

.mainMenuSub {
	display:block;
	position:relative;
	width:80%;
	margin:0;
	padding:0;
	float:left;
	}
	
#toggleMenuSub { 
	display: none;
	}

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

.mainMenuSub li {
	margin:0;
	padding:5px 0px 5px 0px;
	white-space:nowrap;
	display:block;
	width:100%;
	float:left;
	}
	
.mainMenuSub a, .mainMenuSub a:visited {
	display:block;
	width:100%; /*required to make whole element clickable*/
	}

label.menuTitleSub {
	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*/
	}
	

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

	

/*Menu Styling CSS - change the below to suit your site!*/
.mainMenuSub {
	/* border-bottom:1px solid #ccc; */
	}

.mainMenuSub ul {
	padding-top:10px;
	}

.mainMenuSub li {
	border-top:1px solid #ccc;
	}
	
.mainMenuSub a, .mainMenuSub a:visited {
	color:#333;
	text-decoration:none;
	width:94%; /*Use 100% and box-sizing if not supporting ie7*/
	padding:5px 3%;
	background: none;
	}
	
label.menuTitleSub {
	font-size:20px;
	width:94%;  /*Use 100% and box-sizing if not supporting ie7*/
	padding:6px 3%;
	font-weight:bold;
	}
	

/*Menu Child Styling*/
.mainMenuSub .toggleChildren {
	float:right;
	margin-right:3%;
	width:30px; /*Note width is required */
	height:30px; /*Customise to your menu height*/
	padding:0;
	display:block;
	background:url(../images/nav-arrow.png) no-repeat center center;
	background-size: 11px 8px; 
}

.mainMenuSub .toggleChildren.contract {
	background: url(../images/nav-arrow-contract.png) no-repeat center center;
	background-size: 11px 8px; 
}

.mainMenuSub > ul ul a, .mainMenuSub > ul ul a:visited {
	background:#eee;
}



/*End Menu Child Styling*/