/* ---------------------------------------------- Adjust the following definitions to your needs ---------------------------------------------------------------------- */
#wrapperMz3 {
  margin-top: 1em;
  margin-bottom: 1em;
  position:relative;
}

#mz3CustomLogo {
  position:absolute;
  z-index:100;
}

#thumbWrapperContainer {
  position:absolute;
  padding-top:1em;
  padding-bottom: 0.5em;
  bottom:0;
}

#burgerMenu {
  top: 0px;
  right: 0.3em;
  position:absolute;
  z-index:200;
}
img.imgBurgerMenu {
  width: 2em;
  height: 2em;
}

#wrapperBurgerMenuList {
  position: absolute;
  top:0px;
  z-index:  200;
  right: 3em;
  background-color: #111111;
  padding:0.2em 0.6em;
}

#burgerMenuList li {
  cursor: pointer;
  padding-top:  0.4em;
  text-decoration:none;
}

ul#burgerMenuList.burger-menu-list {
  padding-inline-start:0;
  list-style-type: none;
}

ul#burgerMenuLanguageList li {
  cursor: pointer;
  padding-top:  0.4em;
  text-decoration:none;
}

#burgerMenuList a {
  color:#cccccc;
  font-size: 0.8em;
  font-weight: 400;
  text-decoration: none;
}

#wrapperBurgerMenuLanguageList {
  width: 2em;
  position: absolute;
  top: 2em;
  z-index: 200;
  right: 0.3em;
  background-color: #111111;
  font-size: 1em;
}

span.is-inactive-language {
  cursor: pointer;
  color:#ffffff;
  opacity: 0.6;
  margin-block-start: 0.4em;
  margin-block-end: 0;
}

span.is-active-language {
  cursor: pointer;
  color: #ffffff;
  opacity: 1;
}

ul#burgerMenuLanguageList {
  padding-inline-start:0;
  padding-left:0;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* the height of topContainer must be known before all dependent sizes including the book size cn be determined
  It is important, that the navbar height does not change when the content is added, so topContainer mus be sufficiently high!
 */
#topContainer {
  height:60px;
  overflow: visible;
}

#wrapperNbAll {
  display:inline-block;
  height:inherit;
  width:100%;
  font-size:0.8em;
}

#wrapperNbAll a {
  text-decoration:none;
  cursor:pointer;
  z-index: 100;
}

/* The left area of the nav bar */
/* the navbar lang code */
#wrapperNbLeft span.lang {
  color: whitesmoke;
  padding-left: 0;
  padding-right: 1em;
}

/* the navbar text symbols */
#wrapperNbLeft span.social {
  color: whitesmoke;
  padding-left: 0;
  padding-right: 0.6em;
}

/* the navbar icon symbols */
#wrapperNbLeft img.social {
  color: whitesmoke;
  padding-left: 0;
  padding-right: 0.1em;
}

/* The center area of the nav bar */
/* the navbar lang code */
#wrapperNbCenter span.lang {
  color: whitesmoke;
  padding-left: 0;
  padding-right: 1em;
}

/* the navbar text symbols */
#wrapperNbCenter span.social {
  color: whitesmoke;
  padding-left: 0.6em;
  padding-right: 0.6em;
}

/* the navbar icon symbols */
#wrapperNbCenter img.social {
  color: whitesmoke;
  padding-left: 0.1em;
  padding-right: 0.1em;
}

/* The right area of the nav bar */
/* the navbar lang code */
#wrapperNbRight span.lang {
  color: whitesmoke;
  padding-left: 0.8em;
  padding-right: 0;
}

/* the navbar text symbols */
#wrapperNbRight span.social {
  color: whitesmoke;
  padding-left: 0.8em;
  padding-right: 0;
}

/* the navbar icon symbols */
#wrapperNbRight img.social {
  color: whitesmoke;
  padding-left: 0.1em;
  padding-right: 0;
}

#nbWrapperAll .flex-wrapper .nblink .first-lang {

}
#nbWrapperAll .flex-wrapper .nblink .last-lang {

}
#nbWrapperAll .flex-wrapper .nblink .first-symbol {

}
#nbWrapperAll .flex-wrapper .nblink .last-symbol {

}

/**** End Navbar ****/

.wrapperInlineBlock {
  display:inline-block;
  height:inherit;
  vertical-align: top;
}

.flex-wrapper {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  vertical-align: middle;
}
span.lang {
  margin:0;
}

.nbSpacer {
  width: 0;
  height: 0.1em;
  display: inline-block;
}


/* to shift the navigation bar out of sight (i.e. hide it), height must be set 0to show the navigation bar at start-up, height should be set to auto */

#wrapperNbLeft {
  float:left;
  z-index: 10;
  text-align: left;
  height: inherit;
  padding-right: 2em;
  padding-left: 0;
  display: inline-block;
  vertical-align: top;
}


#wrapperNbCenter {
  z-index: 10;
  height: inherit;
  padding: 0 1em;
  display: inline-block;
  vertical-align: top;
}

#wrapperNbRight {
  float:right;
  z-index: 10;
  text-align: right;
  height: inherit;
  padding-left: 2em;
  padding-right: 0;
  display: inline-block;
  vertical-align: top;
}


/* -------------------------------------------------------------------------------------------------------------------- */
#slider-container {
    pointer-events: none;
}


#zoom-container {
  overflow: visible !important;
}


/* --------------------------------------------------------------------------------------------------------------------- */
#megazine {
  margin-top:0.5em;
  margin-bottom: 0.5em;
  z-index: 4;
  clear: both;
}


.rightTopContainer {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  width: auto;
}

.leftTopContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: auto;
}

/* to hide the toggle bar move it up by e.g. 100 px in setting margin-Top: -100px */
.toggleNavbar {
  position: relative;
  margin-top: -10em;
  width: auto;
  height: auto;
  margin-bottom: 0.5em;
}

.pageFlipLeft {
  position: absolute;
  z-index: 100;
  height: auto;
  width: 2em;
  left: 0;
  top:0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  line-height: 0;
  background-color: rgba(0, 0, 0, 0);
}

.pageFlipRight {
  position: absolute;
  z-index: 100;
  height: auto;
  width: 2em;
  top:0;
  right:0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  line-height: 0;
  background-color: rgba(0, 0, 0, 0);
}

.pageFlipLeft img:hover {
  cursor: pointer;
}

.pageFlipRight img:hover {
  cursor: pointer;
}

#pageNbrLeft, #pageNbrTotal {
  position: absolute;
  display: block;
  z-index: 10;
  bottom: 2em;
  height: 1.5em;
  width: 3em;
  left:0.1em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  line-height: 0;
  color: #e0e0e0;
  background-color: rgba(0, 0, 0, 0);
}

#pgNbrInput {
  width:  inherit;
  border: none;
  background-color: inherit;
  font-size: 1em;
  color: #f0f0f0;
  padding-left:4px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance:textfield; /* Firefox */
}

.pageNbrTotal p {
  font-size: 0.7em;
  text-align: left;
  color: #a0a0a0;
  padding-left: 4px;
}

.pageNbrRight {
  position: absolute;
  display: block;
  z-index: 10;
  bottom: 2em;
  height: 1.5em;
  width: 3em;  right:0.1em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  line-height: 0;
  font-size: 1em;
  color: #f0f0f0;
  background-color: rgba(0, 0, 0, 0);
}

/* in case of a custom logo, move the page number up so it does not overlap */
.pageNbrRight {
  bottom: 80px;
}