html {
  --page-count: 70;
  --page-count-range: clamp(1, calc(var(--page-count) / 50), 20);
  --page-width: calc(10px * var(--page-count-range));
  --thickness: 40px;
}
.book1 {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}
.book__wrapper {
    background-image:url('../images/book_preview_01.jpg');
    background-size:cover;
    transform: rotateY(0deg);
    position: relative;
    transform-style: preserve-3d;
    width: 140px;
    height: 210px;
    transition: transform 0.4s ease;
}
.book__cover {
    background-image:url('../images/book_preview_01.jpg');
    background-size:cover;
    position: absolute;
    width: 140px;
    height: 210px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    box-shadow: 1px 1px 10px #b1b1b1;
    transition: all 0.4s ease;
}


.book__wrapper::before {
    content: ' ';
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.00)), repeating-linear-gradient(90deg, white, #ffffff 1px, white 3px, #ffffff 1px);
    transform: rotateY(90deg) translateX(calc(var(--thickness) / 7)) translateZ(calc(var(--thickness) / 1.2));
    height: calc(210px - 2 * 3px);
    width: var(--page-width);
    top: 3px;
    position: absolute;
    transform: translateX(calc(4px - var(--page-width) / 2 - 3px)) rotateY(90deg) translateX(calc(calc(var(--page-width)) / 2));
    left:-1px;
}

.book__wrapper::after {
    background: #4e4e4e;
    content: ' ';
    position: absolute;
    left: 0;
    width: 140px;
    height: 210px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    transform: translateZ(calc(var(--page-width) * -1.2));
}

.make-it-slow:hover .book__wrapper {
    transform: rotateY(28deg);
}
.make-it-slow:hover .book__cover {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-shadow: -5px 3px 20px #8a8a8a;
}
.creditbalance_menu{
    color:#FFFFFF;
    background-color:#3C4E8A;
    margin:5px;
    padding:12px 0;
    text-align:center;
    line-height:23px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.textlink1{
    color:#0089A6;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor:pointer;
}
.textlink1:hover{
    color:#008ba9;
    text-shadow: 0px 0px 3px #6adaf2;
}
body {
    /*font-family: sans-serif;*/
    direction:ltr !important;
}



/* The slow way */
.make-it-slow {
    box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease-in-out;
    border:solid 1px #dbdbdb;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.24);
    border:solid 1px #cfcfcf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}


@font-face {
    font-family: IRANSans;
    src: url(../fonts/iransans.ttf);
}

.path_1 {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@-webkit-keyframes color {
    100%,0% { stroke: #4285F4; }
    40% { stroke: #EA4335; }
    66% { stroke: #FBBC05; }
    80%,90% { stroke: #34A853; }
}
@keyframes color {
    100%,0% { stroke: #4285F4; }
    40% { stroke: #EA4335; }
    66% { stroke: #FBBC05; }
    80%,90% { stroke: #34A853; }
}

.Loading_div {
    width: 220px;
    height: 50px;
    background: #333333;
    position: fixed;
    -webkit-animation: mymove 0.7s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation: mymove 0.7s;
    animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {
        right: -220px;
        top: 90vh;
    }
    to {
        right: 50px;
        top: 90vh;
    }
}

@keyframes mymove {
    from {
        right: -220px;
        top: 90vh;
    }
    to {
        right: 50px;
        top: 90vh;
    }
}
.strikediag {
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.sirang0100_prev,
.sirang0100_next {
	top: 44% !important;
}
.Vitrin_Banner{
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    background-color:#FFFFFF;
    border:solid 1px #eeeeee;
    text-align:center;
    display:block;
    width:100%;
}
.Vitrin_Banner_Pic{
    max-width:100%;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}