/*
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; }
.content { float: left; margin: 1% 3%; width: 94%; }
small { font-size: 80%; }

/*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; white-space: nowrap; display: block; width: 100%; float: left; }
.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.png'), none;*/ background-repeat: no-repeat; background-position: 97% 10px; background-size: 24px 19px; /*Make same size as your menu.png*/ }
.mainMenu { display: none; }

@media screen and (min-width:790px) {
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; }
}
/*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; }
.mainMenu a, .mainMenu a:visited { color: #fff; text-decoration: none; width: 94%; /*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:790px) {
.mainMenu li { border: 0; }
.mainMenu a:hover { color: #767676; }
.mainMenu a, .mainMenu a:visited { padding: 10px 3px 10px 8px; }
}
@media screen and (max-width:790px) {
.mainMenu { display: block; background: #134e24 none repeat scroll 0 0; color: #fff; }
#navbalk { display: none; }
}