.chapter-menu-container {
    margin: auto;
}

.book-menu-container {
    width: 100%;
    padding-top: 20px;
}

.book-menu-options {
    width: 50%;
    height: 45px;
    margin: auto;
    padding: 10px 0px;
}

p.menu-buttons {
    margin-bottom: 0;
    margin-top: 2px;
    color: #000000;
    font-size: 12px;
}

.navButtonContainer {
    width: 20%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navButtonContainer-wide {
    width: 40%;
    float: left;
}

.homeNavButton {
    background: none;
    border: none;
    width: 100%;
    height: auto;
}

#homenavicon {
    width: auto;
    height: auto;
    float: none;
    margin-right: 2px;
    margin-bottom: 2px;
}

.categoryNavButton {
    background: none;
    border: none;
    width: 100%;
    height: auto;
}

#categoriesicon {
    width: auto;
    height: auto;
    float: none;
    margin-right: 2px;
    margin-top: 2px;
}

.functionsButton {
    background: none;
    border: none;
    width: 100%;
    height: auto;
}

#functionsnavicon {
    width: auto;
    height: auto;
    float: none;
    margin-right: 2px;
    margin-bottom: 2px;
}

.bookmarksButton {
    background: none;
    border: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#bookmarkssnavicon {
    float: none;
    margin-bottom: 3px;
}

.socialShareButton {
    background: none;
    border: none;
    width: 100%;
    height: auto;
}

#socialsharenavicon {
    width: auto;
    height: auto;
    float: none;
    margin-right: 2px;
    margin-bottom: 2px;
}


.accountButton {
    background: none;
    border: none;
    width: 100%;
    height: auto;
}

#accountnavicon {
    width: auto;
    height: auto;
    float: none;
    margin-right: 2px;
}

.logInNavButton {
    background: none;
    border: none;
    width: 100%;
    height: auto;
}

#loginnavicon {
    width: auto;
    height: auto;
    float: none;
    margin-right: 2px;
    margin-top: 2px;
}

.previous-chapter-nav-button {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.back-to-book-nav-button {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.next-chapter-nav-button {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bookNavButtonLabel {
    margin-top:5px;
    text-align: center;
    font-size:13px;
    font-style: initial;
}

.bookFunctionsButton {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.bookFunctionsMenu img {
    width:20px;
}

.readingModeButton {
    background: none;
    border: none;
    width: 25%;
    height: 50px;
}

.functionsIcon {
    width: 35px;
}

/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
  display:none;
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

@media screen and (max-width: 750px) { 
.book-menu-options {
    width: 100%;
}

}