/* Also relates to the pseudo class & sibling bug */

.outer {
	overflow: hidden;
}

.slide {
	position: relative;
	z-index: 101;		
}

.slide-toggle {
	float: right;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: none;
	margin: 20px 20px 0 0;
}


.slide-toggle:after {
	content: "MENU";
	font-family: 'Fira Sans OT';
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: none;
	display: block;
	text-align: right;
	margin-top: 8px;
	margin-right: 10px;
}

.slide-checkbox {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.slide-checkbox:checked ~ .slide-toggle:after {
	content: 'MENU';
}

@media (max-width: 700px) {

	.slide-toggle {
		display: block;
	}


	.slide {
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	}

	/*
	 * Enable hardware acceleration and stop flickering
	 * More details: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
	 * Add more browser prefixes as required for your environment
	 */
	.slide,
	nav ul {
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
	}


	.slide-checkbox:checked ~ .slide {
		-webkit-transform: translateX(70%) scale(1);
		-moz-transform: translateX(70%) scale(1);
		-ms-transform: translateX(70%) scale(1);
		-o-transform: translateX(70%) scale(1);
		transform: translateX(70%) scale(1);

	}

	nav ul {
		background: #c8d4d0;
		border-right: 3px solid white;

		width: 70%; /* adjustable */

		position: absolute;
		left: 0;
		top: 0;
		padding-bottom: 10000px;
		
		/* Keeps the menu hidden off-canvas to the left */
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	
	nav ul li ul {
		display: none;
	}

	nav ul li {
		float: none;
		border-bottom: 1px solid #b5c5bf;
	}
	
	nav ul li:hover {
		background: #b5c5bf;
		transition: all .3s;
	}

	nav ul li a {
		font-size: 18px;
		text-transform: capitalize;
		color: #333 !important;
	}

}