/* Menu Styles */
#rf-menu {
	visibility: hidden;
	position: absolute;
	background: black;
	width: auto;
	max-width: 280px;
	padding: 20px;
	right: 0;
	top: 50px;
	text-align: left;
	opacity: 0;
	transform: translate(-20px, 0px);
	box-shadow: 0 2px 1px 0 rgba(0,0,0,.4);
	z-index: 999;
}

#rf-menu.active {
  visibility: visible;
	opacity: 1;
	transform: translate(0px, 0px);
	transition: .3s ease;
}

#rf-menu li {
	display: block;
	padding: 0px;
	margin: 0px;
	border-top: 2px solid;
}

#rf-menu li:last-of-type {
	border-bottom: 2px solid;
}

#rf-menu li a {
	display: block;
	float: none;
	padding: 10px;
	margin: 0px;
	border: none;
	min-width: 140px;
}

#rf-menu li a:hover {
	background: white;
	color: black;
}

/* Menu Icon */
#rf-icon {
	display: block;
	float: right;
	width: 40px;
	height: 30px;
	padding: 5px 0;
	box-sizing: border-box;
	cursor: pointer;
}

#rf-icon::before, #rf-icon::after {
	content: '';
	display: block;
	height: 4px;
	transition: .3s;
}

#rf-icon::before {
	background: white;
	margin-bottom: 8px;
}

#rf-icon::after {
	box-shadow: 0 4px 0 0 white, 0 -4px 0 0 white;
}

#rf-icon.active::before, #rf-icon.active::after {
	width: 80%;
	background: white;
	box-shadow: none;
}

#rf-icon.active::before {
	transform: rotate(45deg) translate(7px, 4px);
}

#rf-icon.active::after {
	transform: rotate(-225deg) translate(-4px, 1px);
}