
.off-canvas-container
{
	position: fixed;
	-webkit-transform: translate3d(120%, 0, 0);
	transform: translate3d(120%, 0, 0);
	width: 100%;
	height: 100%;
	-webkit-transition: all, 0.5s, ease;
	transition: all, 0.5s, ease;
	z-index: 10;
	background-color: fade(@dark, 80%);
	
	.demo-nav-close
	{
		position: absolute;
		right: 1rem;
		top: 1rem;
		font-size: 1.8rem;
		.icon
		{
			font-family: FontAwesome;
			font-weight: 400;
			font-style: normal;
			text-decoration: inherit;
			-webkit-font-smoothing: antialiased;
		}
		.icon-remove { &::before {content: "\f00d";} }
	}

	.demo-nav
	{
		position: relative;
		float: right;
		z-index: 11;
		background-color: @white;
		height: 100%;
		width: 90%;
		-webkit-transition: all, 1s, ease-in-out;
		transition: all, 1s, ease-in-out;
		-webkit-transform: translate3d(20%, 0, 0);
		transform: translate3d(20%, 0, 0);

		
		.nav-item
		{
			display: block;
			padding: 0;	
			border-bottom: 1px solid @red;
			a
			{
				padding: 2rem;
				font-size: 1.4rem;
				display: block;
				&.active
				{
					background-color: @red;
					color: @white;
					text-decoration: none;
				}
			}
		}
	}
}

.off-canvas-trigger
{
	position: absolute;
	right: 4rem;
	width: 3.5rem;
	height: 2rem;
	top: ~"calc(100% + 2.6rem)";
	&:after
	{
		position: absolute;
		left: ~"calc(100% + 0.3rem)";
		top: 0.6rem;
		content: "Menu";
		.KarlaBold(@text-small);
	}
}

#a-toolbox
{
	position: relative;
	path, g
	{
		fill: @red;
	}
}


// Show
.show-off-canvas
{
	.off-canvas-container
	{
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	.demo-nav
	{
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
}
