/*
Responsive Mobile Toggle Menu v2.0
Description: Mobile first responsive toggle menu - CSS for demo3.html
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;} } 
.mainMenu {
	display: block;
	float: left;
	margin:11px 0 0 0;
	padding: 0;
	position: absolute;
	top: 117px;
	width: 100%;
	z-index: 1000;
}
	
#toggleMenu, .toggleMenu { 
    display: none;
}

.toggleMenu { 
	display: block; 
	position: relative; 
	cursor: pointer; 
	-webkit-touch-callout: none; 
	-webkit-user-select: none; 
	user-select: none; 
}
	
#toggleMenu:checked ~ .menu {  
	max-height:2000px; /*Make page height */ 
	opacity:1;
}
	
.menu {
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
    overflow-y: hidden;
	max-height:0;
}

.menu li {
  background: none repeat scroll 0 0 #e3eaf2;
  color: #fff;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}
.menu li:hover {
	cursor:pointer;
}
	
.menu a, .menu a:visited {
	text-decoration:none;
	display:block;
	float:left;
	padding:5px 3%;
}

.menu li:first-child {
	border-left:0;
}

label.menuTitle {
	text-align:left;
	padding:6px 3%;
	margin:0;
	width:94%;
	display:block;
	font-weight:bold;
	cursor:pointer;
	background:url("../images/menu.png") no-repeat 97% 10px;
	background-size: 24px 19px; 
}
	
/*Child CSS*/
.menu ul {
	float:left;
	width:100%;
	margin:0;
	padding:0;
}
	
.menu .toggleChildren {
	float:right;
	width:13%;
	height:30px; /*Customise to your menu height*/
	padding:0;
	border-left:1px solid #ccc;
	display:block;
	background:url(../images/nav-arrow.png) no-repeat center center;
	background-size: 11px 8px; 
}

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



@media screen and (min-width:768px) {
	label.menuTitle {
		display:none;
    }
	
	.menu { 
		display:block!important;
		border:0;
		overflow:visible;
		max-height:100px!important;
    }

	.menu li {
		width:auto; 
		display:inline; 
		border:0; 
		position: relative; /*required for absolute positioning use*/
    }
		
	.menu li:hover  {
		background:none;
    }
	
	.menu a, .menu a:visited {
		display:inline; 
		width:auto;
    }

	.menu ul {
		display:none!important;
		position: absolute;
		left:0;
		top:39px; /*height of your main nav*/
		min-width: 200px; /*change to suit your width*/
    }

	.menu ul li {
		display: block;
		width:100%;
	}

	.menu ul a, .menu ul a:visited {
		width:88%;
		padding:10px 6%;
	}

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

	.menu .toggleChildren {
		display:none;
    }
}


/*Menu Styling CSS*/

.mainMenu {

}

.menu li {
	border-top:1px solid #ccc;
}
	
.menu a, .menu a:visited {
    color: #0081bf!important;
}
	
label.menuTitle {
	font-size:20px;
}

/*Child styling*/
.menu ul {
	background:#eee;
	z-index: 9999;
}

.menu ul a, .menu ul a:visited {
	color:#333;
}

@media screen and (min-width:768px) {
	.menu {
		margin-left:3%;
		width:97%;
	}

	.menu li {
		border:0;
    }

	.menu li:hover > a {
		
    }

	.menu a, .menu a:visited {

    }

	.menu > li:first-child a {
		
	}

	/* Child styling */

	.menu ul a {
		border:0;
		border-bottom:1px solid #ccc;
	}
}