body {
  overflow: hidden;
}

.arrow:hover svg path {
  fill: #777;
}

.arrow {
  text-indent: 0;
}

#main {
  position: absolute;
  width: 100%;
  height: 100%;
}

.splitted-ladini #main {
background: #FFD500;
box-shadow: none;
width: 100%;
height: 100%;
position: absolute;

display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.splitted-ladini #sidebar,  .splitted-ladini #titlebar {
  display: none;
}


.splitted-ladini #viewer {
  /*  top: 50%;
   transform: translateY(-50%); */
   position: static;

 }
 
html.splitted-ladini {
  width: 100%;
  height: 100%;
}

 #viewer {
   width:100% !important;  
   padding-top: 60% !important;
   height: 0 !important;
   position: relative !important;
   margin: 0 !important;
   /* background: red; */
   max-width: none !important;
 }
 





/*
// BOX
// 1 (1/1)
// 1,5 (9/6)
*/

 @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 9/6) {
  #viewer {
    width:100% !important;  
    padding-top: 67% !important;
  }
}

/* BOX PLUS
// 1,5 (9/6)
// 1,5833333333 (19/12)
*/ 

@media (min-aspect-ratio: 9/6) and (max-aspect-ratio: 19/12) {
  #viewer {
    width:100% !important;  
    padding-top: 61% !important;
  }
}
   

/*
// BOX WIDE
// 1,5833333333 (19/12)
// 1,7  (17/10)
*/

@media (min-aspect-ratio: 19/12) and (max-aspect-ratio: 17/10) {
  #viewer {
    width:100% !important;  
    padding-top: 55% !important;
  }
}


/*
// BOX WIDE PLUS PLUS 1
// 1,7  (17/10)
// 2  (4/2)
*/
@media (min-aspect-ratio: 17/10) and (max-aspect-ratio: 4/2) {
  #viewer {
    width:100% !important;  
    padding-top: 50% !important;
  }
}


/*
// BOX WIDE PLUS 2
// 2  (4/2)
// 2,5  (5/2)
*/
@media (min-aspect-ratio: 4/2) and (max-aspect-ratio: 5/2) {
  #viewer {
    width:100% !important;  
    padding-top: 45% !important;
  }
}
   


/*
// BOX WIDE PLUS 3
// 2,5  (5/2)
// 3,3333333333  (20/6)
*/
@media (min-aspect-ratio: 5/2) and (max-aspect-ratio: 20/6) {
  #viewer {
    width:100% !important;  
    padding-top: 30% !important;
  }
}
   

/*
// ULTRAWIDE
// 3.33333 and beyond
*/

 @media (min-aspect-ratio: 20/6) {
  #viewer {
    width: 100% !important;
    padding-top: 25% !important;
  }
   
}

 

 .epub-container, .epub-view, iframe {
   position: absolute !important;
   width: 100% !important;
   height: 100% !important;
   top: 0 !important;
   left: 0 !important;
 }

.splitted-ladini #prev, #next {
  transform: translateY(50%);
  position: relative;
  width: 1em;
  height: 1em;
  left: 0;
}


.arrow {
  top: 0 !important;
  margin-top: 0 !important;
  font-size: 40px !important;
}

.splitted-ladini #prev  svg, #next svg {
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}

#area {
  width: 80%;
  height: 80%;
  margin: 5% auto;
  max-width: 1250px;
}

#area iframe {
  border: none;
}

#prev {
  left: 40px;
}

#next {  
  right: 40px;
}

.arrow {
  position: absolute;
  top: 50%;
  margin-top: -32px;
  font-size: 64px;
  color: #E2E2E2;
  color: #f78f1f;
  font-family: arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.arrow:hover {
  color: #777;
}
 
.arrow:active {
  color: #000;
}

#loader {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  margin: -33px 0 0 -33px;
}

#toc {
  position: absolute;
  top: 0;
  left: 0;
}

.page, section, body, .bckgr  {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}