/*
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! */
    /* Hide caret icons by default on larger screens */
    .dropdown-caret {
        display: none;
    }

    /* Show caret icons only on smaller screens */
    @media (max-width: 768px) {
        .dropdown-caret {
            display: inline-block; /* Show caret icons */
        }

       
    }
.mainMenu {.mainMenu.display_mob a, .mainMenu.display_mob a:visited
	display:flex;
	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('../pagenotfound/index.html');
    background-image: url('../pagenotfound/index.html'), none; 
	background-repeat: no-repeat;
	background-position: 97% 10px;
	background-size: 24px 19px; /*Make same size as your menu.png*/
	}
	
@media screen and (min-width:250px) {
	label.menuTitle {
		display:none;
		}
	
	.mainMenu ul { 
		display:flex!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 {
	text-align: center;
	overflow-x:scroll;
	}
.menu-container::-webkit-scrollbar, .mainMenu::-webkit-scrollbar{
    height:7px;
}
.mainMenu::-webkit-scrollbar-thumb:hover {
  background: #07519d;
  height:5px;
}
.menu-container::-webkit-scrollbar-thumb:hover{
  background: #7b0a1c;
  height:5px;
}
.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;
	}
.mainMenu.display_mob a, .mainMenu.display_mob a:visited {
    color:#fff!important;
    font-weight:bold;
}
.mainMenu.display_mob{
    background: #185ca4!important;
    background-image: linear-gradient( to right, #185ca4, #0c5fa7 22%, #077cc9 37%, #077ecc 65%, #185ca4 75% );
    border-bottom: 1px solid #185ca4!important;
}
label.menuTitle {
	font-size:20px;
	width:94%;  /*Use 100% and box-sizing if not supporting ie7*/
	padding:6px 3%;
	font-weight:bold;
	}
.display_mob{display:none!important;}	
@media screen and (min-width:250px) {

	.mainMenu li {
		border:0;
		}
	
	.mainMenu a:hover  {
		color:#fff;
		}

	.mainMenu a, .mainMenu a:visited {
		padding:10px;
		padding-bottom:5px;
		}
}
@media screen and (max-width:768px) {
    .display_mob{display:block!important;}
}