.nav
	visibility: hidden
	position: absolute
	top: 75px
	right: 0
	display: flex
	width: 100px
	flex-direction: column
	justify-content: center
	margin: 0
	padding: 0
	list-style: none
	background-color: $letter-muted
	border: 1px solid $black
	border: 1px solid rgba(17,17,17,.15)
	opacity: 0
	z-index: 10
	transition: opacity .3s ease-in-out, visibility 0s .3s
	
	&.open
		visibility: visible
		opacity: 1
		transition: opacity .3s ease-in-out
	
	&:before
		content: ""
		position: absolute
		top: -12px
		left: 50%
		transform: translateX(-50%) rotate(45deg)
		width: 25px
		height: 25px
		border: 1px solid $black
		border: 1px solid rgba(17,17,17,.15)
		background-color: $letter-muted
	
	li
		position: relative
		width: 100%
		text-align: center
		border-bottom: 1px solid $black
		border-bottom: 1px solid rgba(17,17,17,.15)
		background-color: $letter-muted
		overflow: hidden
		z-index: 10
		
		&:last-child
			border-bottom: none
	
		a
			display: block
			width: 100%
			height: 100%
			padding: 5px 0
			color: $black
			font-size: 12px
			font-family: $raleway
			text-transform: uppercase
			text-decoration: none
			transition: background-color .2s ease-in-out
			
			&:hover
				background-color: darken($letter-muted, 3%)
				