/*
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;
	}

#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;
	background-color:rgba(0,0,0,0.6);
	white-space:nowrap;
	display:block;
	width:100%;
	float:left;
	}

.mainMenu a, .mainMenu a:visited {
	display:block;
	color: #fff;
	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*/
	}

	html, body {
	    margin: 0px;
	    padding: 0px;

	    font-size: 12px;
	}