/*!
  File: book.pager.css
  Created @ 2020/11/18 16:36
  Last modified @ 2025/11/13 10:43
*/

:root {
    --animation-time: .4s;
}

@keyframes moveLeftOut {
    0% { transform: rotateY(0deg) skewY(0deg); }
    100% { transform: rotateY(90deg) skewY(-7deg); }
}

@keyframes moveLeftIn {
    0% { transform: rotateY(-90deg) skewY(7deg); z-index: 4; }
    100% { transform: rotateY(0deg) skewY(0deg); z-index: 4; }
}

@keyframes moveLeftInFirst {
    0% { right: 75%; transform: rotateY(-90deg) skewY(7deg); z-index: 4; }
    100% { right: 50%; transform: rotateY(0deg) skewY(0deg); z-index: 4; }
}

@keyframes moveLeftStayRightFirst { 
    0% { right: 25%; }
    100% { right: 0%; }
}

@keyframes moveRightOut {
    0% { transform: rotateY(0deg) skewY(0deg); }
    100% { transform: rotateY(-90deg) skewY(7deg); }
}

@keyframes moveRightOutFirst {
    0% { right: 50%; transform: rotateY(0deg) skewY(0deg); }
    100% { right: 75%; transform: rotateY(-90deg) skewY(7deg); }
}

@keyframes moveRightIn {
    0% {  transform: rotateY(90deg) skewY(-7deg); z-index: 4; }
    100% { transform: rotateY(0deg) skewY(0deg); z-index: 4; }
}

@keyframes moveRightStayRightFirst { 
    0% { right: 0%; }
    100% { right: 25%; }
}

body, div, ul, li, p { margin: 0; padding: 0; }
.bookContent { float: left; width: 100%; padding: 2em 0; background: #eee; text-align: center; }
    .bookInnerContent { float: left; width: 100%; box-sizing: border-box;  margin: 0; position: relative; background: #eee; border: 0px solid #FFF; }
        .bookInnerContent .centerSeparatorLeft { width: 5%; height: 100%; position: absolute; right: 50%; top: 0; z-index: 2; background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); }
        .bookInnerContent .centerSeparatorRight { width: 5%; height: 100%; position: absolute; left: 50%; top: 0; z-index: 2; background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); }
        .bookInnerContent.firstActive .centerSeparatorLeft,
        .bookInnerContent.firstActive .centerSeparatorRight,
        .bookInnerContent.firstActivePrevMove .centerSeparatorLeft,
        .bookInnerContent.firstActivePrevMove .centerSeparatorRight,        
        .bookInnerContent.oddEnd .centerSeparatorLeft,
        .bookInnerContent.oddEnd .centerSeparatorRight { display: none; }
        .bookInnerContent.backEnd .centerSeparatorLeft { display: block; }
        .bookInnerContent > img { display: none; float: left; width: 50%; position: relative; z-index: 1; }
        .bookInnerContent > img.active { display: block; }
        .bookInnerContent.firstActive > img:first-child,
        .bookInnerContent.firstActivePrevMove > img:first-child { float: none; margin: 0 auto; }

        .bookInnerContent.oddEnd .beforeLast { display: none; }
        
        .bookInnerContent .stayLeft { width: 50%; position: absolute; left: 0; top: 0; z-index: 3; }
            .bookInnerContent .stayLeft:after { content: ''; width: 10%; height: 100%; position: absolute; right: 0; top: 0%; z-index: 2; background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); } 
            
        .bookInnerContent .moveLeftOut { width: 50%; height: 100%; position: absolute; left: 50%; top: 0; z-index: 4; transform-origin: 0% 0%; backface-visibility: hidden; transform: rotateY(90deg) skewY(-7deg) ; animation: moveLeftOut linear var(--animation-time); }
            .bookInnerContent .moveLeftOut:after { content: ''; width: 10%; height: 100%; position: absolute; left: 0; top: 0%; z-index: 2; background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); }
            .bookInnerContent.firstActive .moveLeftOut:after { display: none; }
            
        .bookInnerContent .moveLeftIn { width: 50%; height: 100%; position: absolute; left: 0; top: 0; z-index: 4; transform-origin: 100% 0%; transform: rotateY(90deg) skewY(0deg); animation: moveLeftIn linear var(--animation-time) var(--animation-time); }
            .bookInnerContent .moveLeftIn:after { content: ''; width: 10%; height: 100%; position: absolute; right: 0; top: 0%; z-index: 2; background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); } 
            .bookInnerContent.oddEnd .moveLeftIn:after { display: none; }
        
        .bookInnerContent .stayRight { width: 50%; position: absolute; left: 50%; top: 0; z-index: 3; }
            .bookInnerContent .stayRight:after { content: ''; width: 10%; height: 100%; position: absolute; left: 0; top: 0%; z-index: 2; background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); }
            
        .bookInnerContent .moveRightOut { width: 50%; position: absolute; left: 0; top: 0; z-index: 4; transform-origin: 100% 0%; backface-visibility: hidden; transform: rotateY(-90deg) skewY(7deg) ; animation: moveRightOut linear var(--animation-time); }
            .bookInnerContent .moveRightOut:after { content: ''; width: 10%; height: 100%; position: absolute; right: 0; top: 0%; z-index: 2; background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); }
            .bookInnerContent.oddEnd .moveRightOut:after { display: none; }
        
        .bookInnerContent .moveRightIn { width: 50%; position: absolute; left: 50%; top: 0; z-index: 4; transform-origin: 0% 0%; transform: rotateY(-90deg); animation: moveRightIn linear var(--animation-time) var(--animation-time); }
     
            .bookInnerContent .moveRightIn:after { content: ''; width: 10%; height: 100%; position: absolute; left: 0; top: 0%; z-index: 2; background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); }
            .bookInnerContent.firstActivePrevMove .moveRightIn:after { display: none; }
            
        .bookInnerContent .active img { display: block; width: 100%; }
        .bookInnerContent img.incoming { display: block; width: 100%; position: absolute; top: 0; }
    
    .bookInnerContent .leftArrow { float: left; width: 2em; height: 2em; position: absolute; left:0; top: 40%; z-index: 10; }
        .bookInnerContent .leftArrow span { display: block; width: 80%; height: 100%; position: relative; left: 10%; overflow: hidden; }
            .bookInnerContent .leftArrow span:before { content: ''; display: block; width: 200%; height: 2px; position: absolute; right: 0; top: 50%; background: #ee3485; transform: rotate(315deg); }
            .bookInnerContent .leftArrow span:after { content: ''; display: block; width: 200%; height: 2px; position: absolute; right: 0; top: 50%; background: #ee3485; transform: rotate(-315deg); }     
    .bookInnerContent .rightArrow { float: left; width: 2em; height: 2em; position: absolute; right: 0; top: 40%;  z-index: 10;}
        .bookInnerContent .rightArrow span { display: block; width: 80%; height: 100%; position: relative; left: 0; overflow: hidden; }
            .bookInnerContent .rightArrow span:before { content: ''; display: block; width: 200%; height: 2px; position: absolute; top: 50%; background: #ee3485; transform: rotate(45deg); }
            .bookInnerContent .rightArrow span:after { content: ''; display: block; width: 200%; height: 2px; position: absolute;  top: 50%; background: #ee3485; transform: rotate(-45deg); }         
    .bookInnerContent .inactive span:before,
    .bookInnerContent .inactive span:after { background: #cacaca; }
    .bookInnerContent .leftArrow:hover,
    .bookInnerContent .rightArrow:hover { color: #000; }
    .bookInnerContent :is(.leftArrow:hover span:before, .leftArrow:hover span:after, .rightArrow:hover span:before, .rightArrow:hover span:after) { background: #000 !important; }
    .bookInnerContent .inactive:hover { transform: none; }
    
    .bookInnerContent .statusLine { float: left; width: 100%; height: 5px; position: absolute; left: 0; bottom: -5px; z-index: 5; background: #FFF; overflow: hidden; }
        .bookInnerContent .statusLine .status { width: 100%; height: 5px; position: absolute; left: -100%; top: 0; background: #6fccdd; }

    .debug { float: left; padding: 0.1em; position: absolute; left: 0; bottom: 0; z-index: 100; color: #FFF; background: red; font-size: 90%; }
    
    .bookContent .fullscreenButton { float: left; padding: .2em; position: absolute; left: 1%; bottom: 2%; z-index: 10; color: #FFF; background: #bd0153; border-radius: 50%; font-size: 125%; line-height: 1; text-decoration: none; } 
    .bookContent .fullscreenButton.active { background: red; }
        .bookContent .fullscreenButton:before { content: '\F047'; font-family: fontAwesome; }        
    
@media only screen and (min-width: 1381px) {
    
    .bookInnerContent.firstActive .moveLeftOut { left: 25%; }
    .bookInnerContent.firstActiveNextMove .moveLeftIn { left: auto; right: 50%; animation: moveLeftInFirst linear var(--animation-time) var(--animation-time); }
    .bookInnerContent.firstActiveNextMove .stayRight { left: auto; right: 25%; animation: moveLeftStayRightFirst linear var(--animation-time) var(--animation-time); }
    .bookInnerContent.firstActivePrevMove .stayRight { left: auto; right: 25%; animation: moveRightStayRightFirst linear var(--animation-time); }    
    .bookInnerContent.firstActivePrevMove .moveRightOut { left: auto; right: 50%; animation: moveRightOutFirst linear var(--animation-time); }        
    .bookInnerContent.firstActivePrevMove .moveRightIn { left: 25%; }  
    .bookInnerContent.firstActive > img:nth-child(2).active,
    .bookInnerContent.firstActive > img:nth-child(3).active { visibility: hidden; }    
}    
        
@media only screen and (max-width: 1380px) {
    
    @keyframes moveLeftOut {
        0% { left: 0; }
        100% { left: -100%; }
    }   
    
    @keyframes moveLeftIn {
        0% { left: 100%; transform: none; }
        100% { left: 0; transform: none; }
    }    
        
    @keyframes moveRightOut {
        0% { left: 0; }
        100% { left: 100%; }
    }    
    
    @keyframes moveRightIn {
        0% { left: -100%; }
        100% { left: 0; }
    }      
 
    .bookContent { padding: 0; background: none; overflow: hidden; }
    .bookInnerContent { width: 100%; margin: 0; padding: 0 0 5px; border: none; border-radius: 0; overflow: hidden; }
    .bookInnerContent .centerSeparatorLeft,
    .bookInnerContent .centerSeparatorRight { display: none; }
        .bookInnerContent .statusLine { bottom: 0; }
    /*.bookInnerContent .leftArrow { left: 5%; top: auto; bottom: -3em; z-index: 5; }
    .bookInnerContent .rightArrow { right: 5%; top: auto; bottom: -3em; z-index: 5; }*/
    .bookInnerContent img { width: 100%;  width: auto !important; height: 100%; }
    .bookInnerContent img.active + img.active { display: none; }
    .bookInnerContent .stayLeft { width: 100%; }
        .bookInnerContent .stayLeft:after { display: none; }
    .bookInnerContent .moveLeftOut { width: 100%; left: -100%; transform: none; }
        .bookInnerContent .moveLeftOut:after { display: none; }
    .bookInnerContent .moveLeftIn { width: 100%; left: 0; transform: none; animation: moveLeftIn linear var(--animation-time); }        
        .bookInnerContent .moveLeftIn:after { display: none; }
    .bookInnerContent .stayRight { width: 100%; left: 0; }
        .bookInnerContent .stayRight:after { display: none; }
    .bookInnerContent .moveRightOut { width: 100%; left: 100%; transform: none; }    
        .bookInnerContent .moveRightOut:after { display: none; }
    .bookInnerContent .moveRightIn { width: 100%; left: -100%; left: 0; transform: none; animation: moveRightIn linear var(--animation-time); } 
        .bookInnerContent .moveRightIn:after { display: none; }


}

@media only screen and (orientation: landscape) and (max-width: 1024px) {
    
    .popupContent { padding: 0 !important; }
    .popupContent :is(h2, .bookDesc) { display: none; }
    .bookInnerContent { float: none; margin: 0 auto; padding: 0; position: relative; }
    .bookContent { height: 100%; }
    .bookInnerContent { width: auto; height: 100%; }
    .bookInnerContent img { width: auto; height: 100%; }
    .bookContent .fullscreenButton { float: left; padding: .2em; position: absolute; left: 1%; bottom: 2%; z-index: 10; color: #FFF; background: #bd0153; border-radius: 50%; font-size: 125%; line-height: 1; text-decoration: none; }
    .bookContent .fullscreenButton.active { background: red; }
        .bookContent .fullscreenButton:before { content: '\F047'; font-family: fontAwesome; }    
}