/*
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! */

.mainMenu {
	display:block;
	position:relative;
	width:100%;
	margin:0;
	padding:0;
	float:left;
    z-index: 100;
    top: 45px;
    display: none;
	}

#toggleMenu:checked ~ ul {  
	max-height:100%; /*Make page height*/ 
	opacity:1;
	}

.mainMenu li {
	margin:0;
	padding:0;
	white-space:nowrap;
	display:block;
	width:100%;
	float:left;
	}
.mainMenu li:last-child {
    border-bottom: solid 1px #000;
}
.mainMenu a, .mainMenu a:visited {
	display:block;
	width:100%; /*required to make whole element clickable*/
	}

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

.mainMenu li {
	border-top:1px solid #ccc;
    background-color: #e2e2e2;
	}
	
.mainMenu a, .mainMenu a:visited {
	color:#333;
	text-decoration:none;
	width:94%; /*Use 100% and box-sizing if not supporting ie7*/
	padding:5px 3%;
	background: none;
	}