@media screen and (min-width:1000px) {
    



    .flipbook{
        margin: 3em auto;
        width: 650px;
        height: 650px;
        position: relative;
        transform-style: preserve-3d;
        perspective: 900px;
    }
    
    .flipbook .leaf{
        position: absolute;
        transform-style: preserve-3d;
        height: 100%;
        width: 70%;
        background-color: #fff;
        left: 50%;
        transition: transform 1s;
        transform: rotate3d(0,1,0,0deg);
        transform-origin: left 0px;
    }
    
    .flipbook .leaf .page{
        transform-style: preserve-3d;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
    }
    
    .flipbook .leaf .page.front{
        transform: rotate3d(0,1,0,0deg) translate3d(0,0,0.1px);
    }
    
    .flipbook .leaf .page.front:not(.external){
        box-shadow: inset 5px 0px 5px -5px #0005;
    }
    
    .flipbook .leaf .page.back{
        transform: rotate3d(0,1,0,180deg) translate3d(0,0,0.1px);
    }
    
    .flipbook .leaf .page.back:not(.external){
        box-shadow: inset -5px 0px 5px -5px #0005;
    }
    
    .disable{
        user-select: none;
        opacity: 0.6;
    }
    
    
    .page{
        padding: 1em;
    }
    
    .page.front{
        border-radius: 0em 1em 1em 0;
    }
    
    .page.back{
        border-radius: 1em 0em 0em 1em;
    }
    
    .leaf{
        background-color: #0000 !important;
    }
    .controls{
        margin-top: 80px;
    }

    .controls2{
        margin-top: 10px;
    }
    
    }
    


@media screen and (max-width:800px) {
    



.flipbook{
    margin: 3em auto;
    width: 500px;
    height: 600px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 900px;
}

.flipbook .leaf{
    position: absolute;
    transform-style: preserve-3d;
    height: 100%;
    width: 70%;
    background-color: #fff;
    left: 50%;
    transition: transform 1s;
    transform: rotate3d(0,1,0,0deg);
    transform-origin: left 0px;
}

.flipbook .leaf .page{
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.flipbook .leaf .page.front{
    transform: rotate3d(0,1,0,0deg) translate3d(0,0,0.1px);
}

.flipbook .leaf .page.front:not(.external){
    box-shadow: inset 5px 0px 5px -5px #0005;
}

.flipbook .leaf .page.back{
    transform: rotate3d(0,1,0,180deg) translate3d(0,0,0.1px);
}

.flipbook .leaf .page.back:not(.external){
    box-shadow: inset -5px 0px 5px -5px #0005;
}

.disable{
    user-select: none;
    opacity: 0.6;
}


.page{
    padding: 1em;
}

.page.front{
    border-radius: 0em 1em 1em 0;
}

.page.back{
    border-radius: 1em 0em 0em 1em;
}

.leaf{
    background-color: #0000 !important;
}
.controls{
    margin-top: 80px;
}

.controls2{
    margin-top: 10px;
}

}



@media screen and (max-width:500px) {
    



    .flipbook{
        margin: 4em auto;
        width: 250px;
        height: 300px;
        position: relative;
        transform-style: preserve-3d;
        perspective: 900px;
    }
    
    .flipbook .leaf{
        position: absolute;
        transform-style: preserve-3d;
        height: 100%;
        width: 70%;
        background-color: #fff;
        left: 50%;
        transition: transform 1s;
        transform: rotate3d(0,1,0,0deg);
        transform-origin: left 0px;
    }
    
    .flipbook .leaf .page{
        transform-style: preserve-3d;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
    }
    
    .flipbook .leaf .page.front{
        transform: rotate3d(0,1,0,0deg) translate3d(0,0,0.1px);
    }
    
    .flipbook .leaf .page.front:not(.external){
        box-shadow: inset 5px 0px 5px -5px #0005;
    }
    
    .flipbook .leaf .page.back{
        transform: rotate3d(0,1,0,180deg) translate3d(0,0,0.1px);
    }
    
    .flipbook .leaf .page.back:not(.external){
        box-shadow: inset -5px 0px 5px -5px #0005;
    }
    
    .disable{
        user-select: none;
        opacity: 0.6;
    }
    
    
    .page{
        padding: 1em;
    }
    
    .page.front{
        border-radius: 0em 1em 1em 0;
    }
    
    .page.back{
        border-radius: 1em 0em 0em 1em;
    }
    
    .leaf{
        background-color: #0000 !important;
    }
    .controls{
        margin-top: 80px;
    }

    .controls2{
        margin-top: 10px;
    }
    
    }