/* Switching box model for all elements */
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}


/* Responsive Navigation styles begin here */
[id="toggle-nav"] {display: none}

@media (max-width: 1000px) {

	/* Theming nav */	
	[id=navigation] ul {
		position: absolute;
		width: 70%;
		top: 1rem; 
		z-index: 1;
		
		/* translate closed nav with hardware acceleration */
		-webkit-transform: translateX(-110%) translateZ(0);
		-ms-transform: translateX(-110%) translateZ(0);
		        transform: translateX(-110%) translateZ(0);
		-webkit-transition: -webkit-transform .3s cubic-bezier(.72,.89,.28,1.39);
		        transition: transform .3s cubic-bezier(.72,.89,.28,1.39);

		/* global styles */
		margin: 0;
		padding: 0;
		list-style: none;
	}
	[id=navigation] a {
		display: block;
		padding: 1.2rem;
		color: #fff;
		background: #114b69;
		text-decoration: none;
		margin-bottom: 2px;
	}
	[id=navigation] a:hover, 
	[id=navigation] a:focus,
	[id=navigation] a:activei
	{
		background: #222;
	}
	
	/* Theming opened nav */
	/* handling clic with CSS3 checked */
	[id="toggle-nav"]:checked ~ ul {
		-webkit-transform: translateX(0) translateZ(0);
		-ms-transform: translateX(0) translateZ(0);
		        transform: translateX(0) translateZ(0);
	}

	/* Global styling nav button */	
	[for="toggle-nav"] {
		position: absolute;
			top: .8rem; right: 1rem;
		z-index: 1;
		height: 4rem; width: 4rem;
		background-color: transparent;
		
		padding: 0;
		outline: 0;
		border: 1px solid #333;
		border-radius: 50%;
		cursor: pointer;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: -webkit-transform .2s;
		        transition: transform .2s;
	}
	
	[for="toggle-nav"]::after, [for="toggle-nav"]::before {
		content: "";
		position: absolute;
		top: 15%; right: 40%; bottom: 15%; left: 40%;
		background-color: #333;
		border-radius: 10px;
		-webkit-transition: -webkit-transform .2s;
		        transition: transform .2s;
	}
	[for="toggle-nav"]::before {
		top: 40%; right: 15%; bottom: 40%; left: 15%;
	}
	
	
	/* Theming opened nav button */	
	[id="toggle-nav"]:checked + label,
	[id="toggle-nav"]:checked + label::before {
		-webkit-transform: rotate(90deg) translateZ(0);
		-ms-transform: rotate(90deg) translateZ(0);
		        transform: rotate(90deg) 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;
	}
	
}