* {
    box-sizing: border-box;
}
.loading-content {
    background-color: #b3b3b39e;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.loading-icon {
    background-image: url(/ResourcePackages/PS/assets/dist/images/loading.png);
    background-repeat: no-repeat;
    position: absolute;
    height: 50px;
    width: 50px;
    z-index: 1;
    top: 45%;
    left: 49%;
}
.container-fluid{
    padding-right:0;
    padding-left:0;
}
body {
    /* or any other parent wrapper */
    margin: 0;
    /*display: flex;*/
    height: 100dvh;
    perspective: 1000px;
    font: 13px/1.4 sans-serif;
    overflow: hidden;
    background: rgb(81, 85, 88);
}

.e-book {
    display: flex;
    margin: auto;
    width: 45%;
    /*height: 90%;*/
    /*1* let pointer event go trough pages of lower Z than .book */
    pointer-events: none;
    transform-style: preserve-3d;
    transition: translate 1s;
    translate: calc(min(var(--c), 1) * 50%) 0%;
    max-width: 1880px;
}
.desktop-43 {
    width: 43%;
}
.desktop-40 {
    width: 40%;
}
.desktop-37 {
    width: 37%;
}
.desktop-35 {
    width: 35%;
}
.desktop-33 {
    width: 33%;
}
.desktop-30 {
    width: 30%;
}
.e-book.end{
    translate: calc(min(var(--c), 1) * 100%) 0%;
}

.e-book .page {
    /* PS: Don't go below Z thickness of 0.4 to prevent browser's natural "zIndex" stacking */
    --z: 5px;
    flex: none;
    display: flex;
    width: 100%;
    height: 98%;
    /*1* allow pointer events on pages */
    cursor: grab;
    pointer-events: all;
    margin-top: 20px;
    user-select: none;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: left center;
	transform-origin: left center;
    transition: transform 1.5s,
        rotate 1s ease-in
            calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
    translate: calc(var(--i) * -100%) 0px 0px;
    
    transform: translateZ(
        calc((var(--c) - var(--i) - 0.5) * var(--z))
    );rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}

.e-book .front,
.e-book .back {
    flex: none;
    width: 100%;
    backface-visibility: hidden;
    background-color: #fff;
    /* Fix backface visibility Firefox: */
    translate: 0px;
}

.e-book .back {
    background: #fff7ea; /* Old browsers */
	background: -moz-linear-gradient(left, #fff7ea 0%, #ffffff 19%, #ffffff 82%, #eae2ce 94%, #cec7b7 99%, #878278 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fff7ea), color-stop(19%,#ffffff), color-stop(82%,#ffffff), color-stop(94%,#eae2ce), color-stop(99%,#cec7b7), color-stop(100%,#878278)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #fff7ea 0%,#ffffff 19%,#ffffff 82%,#eae2ce 94%,#cec7b7 99%,#878278 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #fff7ea 0%,#ffffff 19%,#ffffff 82%,#eae2ce 94%,#cec7b7 99%,#878278 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #fff7ea 0%,#ffffff 19%,#ffffff 82%,#eae2ce 94%,#cec7b7 99%,#878278 100%); /* IE10+ */
	background: linear-gradient(to right, #fff7ea 0%,#ffffff 19%,#ffffff 82%,#eae2ce 94%,#cec7b7 99%,#878278 100%); /* W3C */
    translate: -100% 0;
    rotate: 0 1 0 180deg;
}

.e-book .front{
	background: #878278; /* Old browsers */
	background: -moz-linear-gradient(left, #878278 0%, #cec7b7 1%, #eae2ce 6%, #ffffff 18%, #ffffff 81%, #fff7ea 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#878278), color-stop(1%,#cec7b7), color-stop(6%,#eae2ce), color-stop(18%,#ffffff), color-stop(81%,#ffffff), color-stop(100%,#fff7ea)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #878278 0%,#cec7b7 1%,#eae2ce 6%,#ffffff 18%,#ffffff 81%,#fff7ea 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #878278 0%,#cec7b7 1%,#eae2ce 6%,#ffffff 18%,#ffffff 81%,#fff7ea 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #878278 0%,#cec7b7 1%,#eae2ce 6%,#ffffff 18%,#ffffff 81%,#fff7ea 100%); /* IE10+ */
	background: linear-gradient(to right, #878278 0%,#cec7b7 1%,#eae2ce 6%,#ffffff 18%,#ffffff 81%,#fff7ea 100%); /* W3C */
}

.e-book .page img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.content-e-book .e-book-nav{
    width: 30px;
}

.content-e-book .btn-right {
    float: right;
}

    .content-e-book .btn-right .btn-right-image {
        background-image: url('/ResourcePackages/PS/assets/dist/images/btn_next.png');
    }

.content-e-book .btn-left .btn-left-image {
    background-image: url('/ResourcePackages/PS/assets/dist/images/btn_previous.png');
    left: 2px;
}

.content-e-book .btn-img {
    background-repeat: no-repeat;
    position: fixed;
    width: 30px;
    height: 30px;
    top: 45%;
    cursor: pointer;
    z-index: 1;
    background-size: 30px;
    background-color: #897b7b;
    border-radius: 15px;
}

.count-page-number {
    position: fixed;
    bottom: 1.5%;
    border-radius: 5px;
    background-color: #897b7b;
    font-size: 16px;
    width: 95px;
    text-align: center;
}

.content-e-book .form-body {
    position: fixed;
    bottom: 50px;
    left: 49%
}
.e-book-current-page-input {
    position: absolute;
    line-height: 14px;
    background: none;
    font-size: 14px;
    text-align: center;
    height: 25px;
    top: 13px;
    left: -30px;
    border: 0px solid rgba(128,128,128,.5);
    margin: 0px;
    width: 92.804px;
}

.count-color-transparent {
    color: transparent;
}
.e-newsletter {
    display: none !important;
}

@media screen and (min-width: 1700px) {
    .count-page-number {
        left: 47.3%;
    }
}
@media screen and (max-width: 1699px) {
    .count-page-number {
        left: 47.1%;
    }
}
@media screen and (max-width: 1399px) {
    .count-page-number {
        left: 46.7%;
    }
}
@media screen and (max-width: 1299px) {
    .count-page-number {
        left: 46.5%;
    }
}
@media screen and (max-width: 1150px) {
    .count-page-number {
        left: 46.3%;
    }
}
@media screen and (max-width: 1200px) {
    .count-page-number {
        left: 46%;
    }
    .e-book .page {
        margin-top: 10%;
    }
}
@media screen and (max-width: 1050px) {

    .e-book .page {
        margin-top: 15%;
    }
    .e-book {
        width: 95%;
    }
}
@media screen and (max-width: 820px) {
    .count-page-number {
        left: 45%;
    }
    .e-book .page {
        margin-top: 15%;
    }
    .e-book {
        width: 95%;
    }
}
@media screen and (max-width: 500px) {
    .count-page-number {
        left: 41%;
    }
    .e-book{
        width:95%;
    }
    .e-book .page{
        margin-top:50%;
    }

}