/*

CSS for a virtual Book 
©2022 Thomas Bircher @ Claudiabasel

*/
   .vbook{
        position: relative;
        //height:calc(100vh - 228px);
        height:100%;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        //transition:all 1s;
	    transition:transform 1s;
	    pointer-events: all;
	    font-size:100px;
    }
    .vbook .page{
        position: absolute;
        width:100%;
        height:100%;
        transform-style: preserve-3d;
        //transition:transform 1s;
		// transition:all 1s;
    }
	.vbook.open2 .page{
        transition:all 1s;
	}
    
    .vbook .page > div{
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .vbook .page > div.front{       
        background-color:#ffffff;
        z-index: 100;
        padding:1.5% 1.5% 1.5% 0px;
        
    }
    .vbook .page > div.back{
        background-color:#ffffff;
        transform: rotateY(180deg);
        z-index: 200;
        padding:1.5% 0px 1.5% 1.5%;
    }
    .vbook .page.back > div.front{       
        padding:1.5% 0px 1.5% 1.5%;
    }
    .vbook .page.back > div.back{
        padding:1.5% 1.5% 1.5% 0px;
    }
    .vbook .page > div > div{
		position: relative;
        width:100%;
        height:100%;
		z-index:200;
    }
    .vbook .page > div.back > div{
        //background:rgba(230,230,230); 
    }
    .vbook .cover.front{
        transform-origin: top left;
        transform: translate3d(-2px,0,0.5em);    /* -2px = spine blitzer fix */
        //transition:all 1s;
    }
    .vbook .cover.front .front, .vbook .cover.back .back{
        border-radius: 0 0.8% 0.8% 0;
        overflow: hidden;
		background-size:cover;
    }
    .vbook .cover.front .back, .vbook .cover.back .front{
        border-radius: 0.8% 0 0 0.8%;
        overflow: hidden;
		background-size:cover;
    }
	.vbook .cover.spine .front, .vbook .cover.spine .back{
        overflow: hidden;
		background-size:cover;
    }
    .vbook .cover.back{
        transform: translate3d(-1px,0,-0.5em) rotateY(-180deg); /* -1px = spine blitzer fix */
		//transform: translate3d(-1px,0,-0.5em); /* -1px = spine blitzer fix */
        //transition:all 1s;
    }
    .vbook .cover.spine{
        width: 1em;
        left: -0.5em;
        transform:translate3d(-1px,0,0px) rotateY(-90.1deg); /* -1px = spine blitzer fix */
        opacity:1;
    }
    .vbook .cover.spine > div{
        //padding:12px 0px 12px 0px;
    }
    
    /* paper pages */
    
	.vbook .page.paper{
         transform-origin: top left; 
         background-size:cover;
         //transition:transform 1s;
    }
    .vbook .page.paper > div{
        background:none;
    }
	.vbook .page.paper > div > div{
       
		background-position: center center;
		background-repeat: no-repeat;
		background-size:auto 100%;
    }
    .vbook .page.paper > div.front > div{
		background-position: left center;
        background-color:#ffffff;
		
    }
    .vbook .page.paper > div.back > div{
		background-position: right center;
        background-color:#ffffff;
    }
    
	.vbook .page .pp{
		background-position: center;
		background-repeat: no-repeat;
		background-size:auto 100%;
		background-color:#ffffff;
	}
	/* vbook effects */

    .vbook .cover.front .front:after, .vbook .cover.front .back:after, .vbook .cover.back .front:after , .vbook .cover.back .back:after{
        content: '';
        position: absolute;
        top: 0;
        left: 2%;
        bottom: 0;
        width: 0.5%;
        height:100%;
        background: rgba(0,0,0,0.1);
        box-shadow: 1px 0 0.5% rgba(255, 255, 255, 0.1);
        z-index: 0;
		z-index:100;
    }
	.vbook .cover.front .back:after{
        left: auto;
		right: 5%;
    }
	
	.vbook .cover.back .front:after{
        left: auto;
		right: 2%;
    }
	.vbook .cover.back .back:after{
        left: 5%;
		right: auto;
    }
	
    .vbook .cover.spine .front:after {
		content: '';
        position: absolute;
		top: 0;
        left: 0px;
        bottom: 0;
        width: 100%;
        height:100%;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 100%);
		background: rgba(0,0,0,0.1);
		//opacity:0.1;
	}
	
	.vbook .paper .back > div:after {
		content: '';
        position: absolute;
		top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
		background: linear-gradient(-90deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.02) 2%, rgba(0,0,0,0) 30%) ;
	}
	.vbook .paper .front > div:after {
		content: '';
        position: absolute;
		top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.02) 5%, rgba(0,0,0,0) 30%) ;
		border-left:1px solid rgba(0,0,0,0.1);
	}
	
    /* vbook states */
	/*
	.vbook{
       transform: rotateY(130deg);
    }
	*/
	.vbook.hover, .vbook:hover{
       transform: rotateY(45deg);
	   cursor:url(../img/icon_plus.svg) 25 15, pointer;
    }
	.vbook.hover.backside{
       transform: rotateY(145deg);
    }
	
	.vbook.back{
       transform: rotateY(90deg);
    }
    
    .vbook.open{
        transform: translate3d(50%,0,0);
    }

    .vbook.open .cover.spine{ 
        width: 0px;
        left: 0px;
    }
	
    .vbook.open .cover.front{
        transform: translate3d(0,0,-1px) rotate3d(0,1,0,-180deg) !important;
    }
	
    .vbook.open .cover.back{
        transform: translate3d(0,0,-1px) rotate3d(0,1,0,-180deg) !important;
    }
    
    .vbook .page.flip{
        transform: translate3d(0,0,1px) rotate3d(0,1,0,-180deg); 
    }
    
    .vbook .page.ontop{
        transform: translate3d(0,0,2px) rotate3d(0,1,0,-180deg);
    }
    
    /* pages */
    
	/* binding types */

	.vbook.sc .page > div.front{
		padding:0 0.3% 0 0;
	}
	.vbook.sc .page > div.back{
		padding:0 0 0 0.3%;
	}
	.vbook.sc .page.cover.back > div.back{
		padding:0 0.3% 0 0;
	}
	/* remove corner radius */
	.vbook.sc .cover.front .back, .vbook.sc .cover.back .front, .vbook.sc .cover.front .front, .vbook.sc .cover.back .back{
		border-radius:0px;
	}
	/* design fold on outer cover pages */
	.vbook.sc .cover.front .front::after, .vbook.sc .cover.back .front::after{
        left: 4%;
        width: 0.3%;
        background: rgba(0,0,0,0.05);
	}
	/* remove fold on inner cover pages */
	.vbook.sc .cover.front .back::after, .vbook.sc .cover.back .back::after{
        display: none;
	}
	/* tranparent bg on inner cover pages */
	.vbook.sc .page.cover .pp{
		background-color:transparent !important;
	}