/*
Responsive Mobile Toggle Menu v1.1
Description: Mobile first responsive toggle menu
Author: Danielle Vautier
*/

/*Page CSS*/
/*body, html {font-size:16px; font-family:arial, sans-serif; margin:0;}
.content { float:left; margin:1% 3%; }
small { font-size:80%;}*/

/*Menu mobile first CSS*/
body{ -webkit-animation: bugfix infinite 1s; }

.mainMenu {
	display:block;
	position:relative;
	width:75%;
	margin:0;
	padding:15px 0 10px 0;
	text-align: center;
	line-height:1.4;
	float:left;
	}
	
#toggleMenu, .toggleMenu { 
	display: none;
	}

.toggleMenu { 
	display: block; 
	position: relative; 
	cursor: pointer; 
	-webkit-touch-callout: none; 
	-webkit-user-select: none; 
	user-select: none; 
	}
	
#toggleMenu:checked ~ .menu {  
	max-height:800px; 
	opacity:1;
	}
	
.menu {
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	float:right;
    overflow-y: hidden;
	text-align:right;
	max-height:0;
	}
	
.menu li {
	margin:0;
	padding:0;
	border-top:1px solid #ccc;
	white-space:nowrap;
	display:block;
	width:100%;
	}
	
.menu li:hover {
	background-color:#eee;
	cursor:pointer;
	}
	
.menu a, .menu a:visited {
	color:#333;
	text-decoration:none;
	display:block;
	width:94%;
	padding:5px 3%;
	}

.menu li a:hover {
	color: #38c4ff;	
}
.menu li a.current{
	color: #fff;
	background-color:#38c4ff;
}
	
.menu li:first-child {
	border-left:0;
	}	

.menu a:hover {
	color:#666;
	}
	
label.menuTitle {
	text-align:left;
	font-size:15px;
	padding:6px 3%;
	margin:0;
	width:100%;
	color:#272727;
	display:block;
	font-weight:500;
	cursor:pointer;
	background: url(menu.svg) no-repeat 97% 10px;
	background: url(menu.png) no-repeat 97% 10px;
	background-size: 24px 19px; 
	}
	
@media screen and (min-width:768px) {
	label.menuTitle {
		display:none;
		}
	
	.menu { 
		display:block!important;
		border:0;
		overflow:visible;
		max-height:100px!important;
		padding:10px 0 18px 0;
		}	

	.menu li {
		width:auto; 
		display:inline; 
		border:0; 
		}
		
	.menu li:hover  {
		background:none;
		}
		
	.menu li:first-child {
		border-left:0;
		}
		
	.menu a, .menu a:visited {
		display:inline; 
		width:auto;
		padding: 25px 20px 28px 20px;
		}
	}
	
	
	
@media only screen and (min-width: 1000px) and (max-width: 1169px){
	
	.menu li {
	margin:0;
	padding:0 10px 0 0;
	}

	
	}
	
	
@media only screen and (min-width: 768px) and (max-width: 999px){
	
	
.mainMenu {
    width: 100%;
	}

	
	}
	
	
@media only screen and (min-width: 480px) and (max-width: 767px){
	
	.mainMenu {
    width: 100%;
	}
	}
	
	
@media only screen and (max-width: 479px){
	.mainMenu {
    width: 100%;
	}
	
	}