@media screen and (max-width: 640px) {
    .chapter-nav-buttons {
        display: none;
    }
}
.chapter-nav-buttons {
    width: 100%;
	margin: 0;
    font-size: 1.5em;
    line-height: 1.3em;
}
.chapter-nav-buttons a {
    position: fixed;
    top: 50%;
	height: 180px;
	display: inline-flex;
	align-items: center;
    justify-content: center;
	outline-style: none !important;
	opacity: 0.6;
	background-color: rgba(240,240,240,0.1);
	transition: background-color 0.1s linear 0.1s, opacity 0.2s linear, transform 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000), margin 0.25s;
}
.chapter-nav-buttons .arrow {
	z-index: 3;
    width: 90px;
	transform: translateY(-50%);
}
.chapter-nav-buttons .next.arrow {
	right: 0;
}
.chapter-nav-buttons .prev.arrow {
	left: 0;
}
.chapter-nav-buttons a.title {
	color: white;
	z-index: 2;
	transform: translateY(-50%);
	background-color: rgba(240,240,240,0);
	transition: background-color 0.2s linear, opacity 0.3s linear, transform 0.1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.1s;
}
.chapter-nav-buttons a.next.title {
	padding: 16px 8px 16px 24px;
	left: calc(100% - 89px);
}
.chapter-nav-buttons a.prev.title {
	padding: 16px 24px 16px 8px;
	right: calc(100% - 89px);
	left: auto;
}
.chapter-nav-buttons a > svg {
	height: 20px;
	width: 20px;
	border: 2px solid gray;
	border-radius: 50%;
	padding: 8px 7px 8px 9px;
	box-sizing: content-box;
}
.chapter-nav-buttons a.prev > svg {
	padding: 8px 9px 8px 7px;
}
.chapter-nav-buttons a.title span {
	white-space: nowrap;
	z-index: 1;
	transition: opacity 0.1s linear;
	opacity: 0;
}

.chapter-nav-buttons:hover > a,
.chapter-nav-buttons > a.expanded {
	background-color: black !important;
	opacity: 1;
}
.chapter-nav-buttons:hover > .arrow,
.chapter-nav-buttons > .arrow.expanded {
	transition: background-color 0.1s linear, opacity 0.2s linear;
}
.chapter-nav-buttons:hover > .title,
.chapter-nav-buttons > .title.expanded {
	transition: background-color 0.1s linear 0.1s, opacity 0.1s linear 0.1s, transform 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.1s;
}
.chapter-nav-buttons:hover > .next.title,
.chapter-nav-buttons > .next.title.expanded {
	transform: translateY(-50%) translateX(-100%);
}
.chapter-nav-buttons:hover > .prev.title,
.chapter-nav-buttons > .prev.title.expanded {
	transform: translateY(-50%) translateX(100%);
}
.chapter-nav-buttons:hover .title > span,
.chapter-nav-buttons a.title.expanded span {
	transition: opacity 0.2s linear 0.1s;
	opacity: 1;
}

.chapter-nav-buttons path.stroke {
	stroke: gray;
	stroke-width: 12;
}
a.prev path.prev,
a.next path.next {
	visibility: visible;
}
a.prev path.next,
a.next path.prev {
	visibility: hidden;
}