@font-face {
    font-family: myMenuFont;
    src: url(MyriadProRegular.ttf);
}
@media screen and (max-width:537px) {
#mobile_bg {
	background-color:white;
}	
.button{
	color:black !important;
}
#nav_bt{
	display:none !important;
}

.mainMenu > ul li > a {
		background-color: #F5F5F5  !important;
	}
.mainMenu > ul li:hover > a {
		background-color:#CCC !important;
	}
	
.mainMenu > ul ul li > a {
		background-color: #EBEBEB !important;
	}
.mainMenu > ul ul li:hover > a {
		background-color:#CCC !important;
	}

}


body{ -webkit-animation: bugfix infinite 1s; }

/*This fixes a chrome/webkit bug for older Android Browsers */
// causing issues in safari @-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;
    margin-top:-10px;
	padding:0;
    font-size:x-large;
	z-index:99;
	top: 25px;
    font-family:myMenuFont;
	}
	
#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:;
    overflow-x: 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%; 
	}

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; 
	}
	
	
	
@media screen and (min-width:537px) {
	
	label.menuTitle {
		display:none;
		}
	
	.mainMenu ul { 
    display: block!important;
    border: 0;
    overflow: visible;
    max-height: 100%!important;
    /* margin-left: 230px; */
    /* margin-top: 25px; */
    /* width: 100%; */
		}	

	.mainMenu ul li {
		width:auto; 
		display:block; 
		border:0; 
		}
}


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

	@media screen and (min-width:537px) {
		.mainMenu > ul > li {
			position: relative;
		}

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

		.mainMenu > ul ul {
			display:none!important;
			position: absolute;
			left:0;
			margin-top:-10px;
			width:350px;
			}

		.mainMenu > ul ul li {
			display: block;
			width:100%;
			float:left;
			padding:0;
			margin:0;
			
		}

		.mainMenu .toggleChildren {
			display:none!important;
		}
	}
	/*End Child CSS Functionality*/



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

.mainMenu li {
	border-top:1px solid #ccc;
	}
	
.mainMenu a, .mainMenu a:visited {
	color: #E6E6E6;
	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:537px) {

	.mainMenu li {
		border:0;
		margin-right:20px;
		}
	
	.mainMenu a:hover  {
		background-color:red;
       
		}

	.mainMenu a, .mainMenu a:visited {
    padding: 10px 10px 10px 8px;
    /* border-left: thin #e9b51f solid; */
    height: 24px;
    /* padding-bottom: 70px; */
    /* background-color: red;*/
    margin-top: -24px;
    padding-top: 20px;
		
		}
}
.button2{
	color:black;
	font-weight:bold;
	background-color: #e31d1a;
}

/*Menu Child Styling*/
.mainMenu .toggleChildren {
	float:right;
	margin-right:3%;
	width:60px; /*Note width is required */
	height:60px; /*Customise to your menu height*/
	padding:0;
	display:block;
	background:url(../images/nav-arrow.png) no-repeat center center;
	background-size: 15px 10px;
	/*background-color:red;*/
	z-index:999;
}

.mainMenu .toggleChildren.contract {
	background:url(../images/nav-arrow.png) no-repeat center center;
	background-size: 11px 8px; 
	-moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

.mainMenu > ul ul a, .mainMenu > ul ul a:visited {
	background-color: rgba(255, 255, 255, 0.9);
	color:black;
	font-size: 17px;
    font-weight: normal;
    font-family: myMenuFont;
}


@media screen and (min-width:537px) {
	.mainMenu > ul > li:hover > a {
		color:black;
		font-weight:bold;
		background-color: #e31d1a;
	}

	.mainMenu > ul ul {
		top:38px; /*height of your main nav*/
		min-width:260px; /*Set your width*/
	}

	.mainMenu > ul ul a {
		border:0;
		border-bottom:1px solid #ccc;
	}
	.mainMenu > ul ul li:hover > a {
		background-color:#CCC !important;
	}
}
/*End Menu Child Styling*/