#wrapper{
	}
	
.sidenav-toggle .icon-close,
body.sidenav-open .sidenav-toggle .icon-toggle{
	display:none;
	}		
.sidenav-toggle .icon-toggle,
body.sidenav-open .sidenav-toggle .icon-close{
	display:inline;
	}			
	
body.sidenav-open nav.side{
	right:0;
	}

#wrapper > *,
nav.side{
	box-sizing:border-box;
	transition:all 0.25s linear;
	}
	
body.sidenav-open #wrapper > *{
	transform:translateX(-400px);
	}

nav.side{
	position:fixed;
	top:0;
	bottom:0;
	right:-400px;
	width:400px;
	background:#333332;
	color:#ffffff;
	z-index:99;
	overflow:hidden;
	overflow-y:scroll;
	}
	nav.side a.sidenav-close{
		position:absolute;
		right:1em;
		top:1em;
		display:block;
		cursor:pointer;
		z-index:1;
		}
		nav.side a.sidenav-close:hover{
			color:#ffffff;
			}
	nav.side a.logo{
		display:block;
		width:234px;
		margin:1.5em auto 1em auto;
		z-index:1;
		}
		nav.side a.logo:hover{
			opacity:0.8; 
			}		
	nav.side > ul{
		margin-bottom:3em;
		}
		nav.side ul li{
			position:relative;
			border-bottom:1px solid rgba(255,255,255,0.2);
			}
			nav.side ul li:last-child{
				border-bottom:none;
				}
			nav.side ul li ul{
				box-shadow:inset 0 2px 2px rgba(0,0,0,0.25);
				border-top:1px solid rgba(255,255,255,0.2);
				}
			nav.side ul li ul li{
				background:rgba(0,0,0,0.1);
				}
		nav.side ul li.haschildren{
			}
			nav.side ul li.haschildren > a:after{
				display:block;
				position:absolute;
				right:1em;
				top:0.5em;
				font-family:'FontAwesome';
				content:'\f0ab';
				}
			nav.side ul li a{
				display:block;
				padding:0.5em 1em;
				color:#bcbec0;
				text-decoration:none;
				font-size:1em;
				font-weight:bold;
				}
			nav.side ul li ul li a{
				color:#bcbec0;
				margin-left:0.5em;
				}
			nav.side ul li a:hover{
				color:#ffffff;
				}
	nav.side ul li ul{
		display:none;
		}
	nav.side ul li.expanded ul{
		display:block;
		}
	nav.side p.contact{
		text-align:center;
		margin-bottom:1em;
		line-height:1.5em;
		}
		nav.side p.contact a{
			text-decoration:none;
			color:inherit;
			}
			
			
/* Responsive layout for <= Tablet */
@media screen and (max-width: 767px) {	
	
	body.sidenav-open #wrapper > *{
		transform:translateX(-100vw);
		}
		
	nav.main ul li:not(.logo){
		display:none;
		}
	
	nav.side{
		right:-100%;
		width:100%;
		}
	
	body.sidenav-open #wrapper{
		display:none;
		}
	
	}