/* Responsive Navigation styles begin here */
@media (max-width: 568px) {
	
	[id=navigation]  {
		position: relative;
	}

	/* Theming opened nav */	
	[id=navigation] ul {		
		
	/* maximum height */
	max-height: 25em;

	/* translate with hardware acceleration */
	-webkit-transform: translateZ(0); 
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition: max-height .6s;
	transition: max-height .6s;
	}
	[id=navigation] a {
		display: block;
		padding: 1.2rem;
		color: #333;
		text-decoration: none;
	}
	[id=navigation] a:hover, 
	[id=navigation] a:focus,
	[id=navigation] a:active
	{
		background: #FFF;
	}
	
	/* Theming closed nav */
	[id=navigation].is-closed ul {
		max-height: 0;
		overflow: hidden;
	}

	/* Global styling nav button */	
		
	[id="toggle-nav"] {
		position: relative;
		left: 50%;
		top:0px;
		margin-left:-40px;
		z-index: 1;
		height: 40px; width: 80px;
		cursor: pointer;
		background:url(/theme/entreroches/img/ico-nav.png) center center no-repeat;
		-webkit-transition: -webkit-transform .3s;
		transition: transform .3s;
	}
	
	[id="zone-toogle"] {
		height: 35px;
	}
	
	/*  Removing Firefox's dotted outline on button */	
	[id="toggle-nav"]::-moz-focus-inner {
		border: 0;
	}
	
	/* Theming opened nav button */	
	[id=navigation]:not(.is-closed) [id="toggle-nav"],
	[id=navigation]:not(.is-closed) [id="toggle-nav"]::before {
		-webkit-transform: rotate(180deg) translateZ(0);
		-ms-transform: rotate(180deg) translateZ(0);
		transform: rotate(180deg) translateZ(0);
	}

	/* Hide alternate text except from screen readers */
	.visually-hidden {
		position: absolute !important;
		clip: rect(1px, 1px, 1px, 1px);
		overflow: hidden;
		height: 1px;
		width: 1px;
	}
	
}