/* CSS Document */
#genre-nav-wrap{
	position: absolute;
	width: 260px;
	border-top: solid 12px #ff9900;
	background-color: #fff;
}
#nav-button span{
	display: block;
	width: 90%;
	margin: auto;
	height: 4px;
	background-color: #ff9900;
	border-radius: 3px;
	position: absolute;
	left: 0;
	right: 0;
	top: calc((90%-4px)/2);
	transition: .3s;
}
#nav-button:focus{
	outline: none;
	box-shadow: none;
}
.nav-line-top{
	transform: translateY(-10px);
}
.nav-line-bottom{
	transform: translateY(10px);
}
.nav-isOpen .nav-line-top{
	transform: rotate(45deg);
}
.nav-isOpen .nav-line-middle{
	opacity: 0;
}
.nav-isOpen .nav-line-bottom{
	transform: rotate(-45deg);
}

.books-logo-wrap{
	height: 115px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.books-logo{
	width: 100%;
	max-width: 149px;
}
.nav-text{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	border: solid 1px #e6e6e6;
	border-right: none;
	border-left: none;
}
.nav-text>p{
	margin: 0;
}
.nav-scroll-area{
	position: absolute;
	top: 0;
	display: block;
	width: 260px;
	overflow-x: hidden;
	overflow-y: auto;
	flex-direction: column;
	background-color: #fff;
	margin-top: 165px;
	padding-top: 1em;
}

#genre-nav{
	width: 94%;
	flex-wrap: unset;
}
#genre-nav .nav-link{
	border-radius: 0 .25rem .25rem 0!important;
	padding: .5rem 1.5rem;
}

#genre-nav .nav-item a:hover{
	color: #fff !important;
	background-color: #ff9900 !important;
}
#genre-bottom-nav{
	width: 84%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1 0;
	padding-top: 45px;
	padding-bottom: 15px;
}
#genre-bottom-nav hr{
	opacity: 1;
	background-color: #e6e6e6;
	margin: 0.8rem 0;
}
#genre-bottom-nav .bottom-item{
	font-size: 0.9em;
	text-decoration: none;
}
#genre-bottom-nav .bottom-text{
	font-size: 0.8em;
	margin-bottom: 0.5rem;
}

@media screen and (min-width: 961px){
	.nav-scroll-area{
		display: block!important;
	}
}

@media screen and (max-width: 960px){
	#genre-nav-wrap{
		width: 100%;
		border-top: solid 8px #ff9900;
		z-index: 100;
		position: fixed;
	}
	#nav-button{
		z-index: 10;
		height: 32px;
		width: 32px;
		top: 0;
		bottom: 0;
		margin: auto;
		left: 20px;
		padding: .25em .2em;
	}
	.nav-line-top{
		transform: translateY(-8px);
	}
	.nav-line-bottom{
		transform: translateY(8px);
	}
	.books-logo-wrap{
		height: 60px;
		border-bottom: solid 1px #e6e6e6;
	}
	.books-logo{
		max-width: 88px;
	}
	.nav-scroll-area{
		display: block;
		width: 100%;
		margin-top: 55px;
		top: 9px;
		position: fixed;
		bottom: 0;
	}
	#genre-nav{
		width: 90%;
		margin: 0 auto;
	}
	#genre-nav .nav-link{
		border-radius: .25rem !important;
		padding: .5rem;
	}
	#genre-bottom-nav{
		width: 90%;
	}
	#genre-bottom-nav .bottom-item{
		margin: 6px 0;
	}
}