@import "compass/css3";

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
html, body {margin:0;padding:0;min-height:100vh;}
body {font:400 100%/1.5 helvetica, arial, sans-serif;}
img {height:auto;max-width:100%;width:auto\9;}
article { margin: 0 auto; max-width: 1000px; padding: 3em 0; }


#nav-trigger {
	position: fixed;
	z-index: 3;
	top: 20px;
	right: 20px;
	height: 40px;
	width: 40px;
	background: #650e0e;
	border-radius: 50%;
	
	transition:	background .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.nav-active + #nav-trigger {
	background: #650e0e;
	
	transition:	background .3s cubic-bezier(0.55, 0.055, 0.675, 0.19) .1s;	
}

#nav-trigger:after {
	border-bottom: 2px solid white;
	box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff;
	content: "";
	display: inline-block;
	left: 25%;
	position: absolute;
	right: 25%;
	top: 47%;
	
	transform: rotate(0);
	transform-origin: 50% 0;
	transition: transform .2s ease;	
}

.nav-active + #nav-trigger:after {
	transform: rotate(90deg);
	
	box-shadow: 0 0;
}

nav {
	background: #650e0e;
	bottom: 0;
	height: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	
	transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-clip-path:circle(20px at calc(100% - 40px ) 40px );
	clip-path:circle(20px at calc(100% - 40px ) 40px );
	
}

nav.nav-active  {	
	transition: all .4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	-webkit-clip-path:circle(150% at calc(100% - 40px ) 40px );
	clip-path:circle(150% at calc(100% - 40px ) 40px );
}

nav ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 0;
	text-align: center;
}

nav ul li {
	font-size: 1.5rem;
	padding: 1rem 0;
}