Skip to main content

How to create flipbook effect in html/css and jquery?

Create flipbook effect in html/css and jquery.




<script>

function initGoodies() {

jQuery(".see-back").on("click", function () {
jQuery(this).parents(".book-images").find(".book").toggleClass("back-view");
});
}



jQuery(document).ready(function ($) {

initGoodies();

});
</script>

<div class="product-overview__image">

<div class="book-images">
<div class="book">
<img width="300" height="457" src="https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-300x457.jpg" class="placeholder wp-post-image" alt="" srcset="https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-300x457.jpg 300w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-197x300.jpg 197w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-768x1170.jpg 768w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-672x1024.jpg 672w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-345x525.jpg 345w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-263x400.jpg 263w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1.jpg 893w" sizes="(max-width: 300px) 100vw, 300px"> <div class="book__page book__page--front">
<img width="300" height="457" src="https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-300x457.jpg" class="attachment-shop_single size-shop_single wp-post-image" alt="" srcset="https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-300x457.jpg 300w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-197x300.jpg 197w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-768x1170.jpg 768w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-672x1024.jpg 672w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-345x525.jpg 345w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1-263x400.jpg 263w, https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2017/06/book-1.jpg 893w" sizes="(max-width: 300px) 100vw, 300px"> </div>
<div class="book__page book__page--back">
<img src="https://demo2.tokomoo.com/livre/wp-content/uploads/sites/16/2016/10/Book_002_1-300x463.jpg" alt="Back Cover">
</div>
<div class="book__page book__page--first-page"></div>
<div class="book__page book__page--second-page"></div>
<div class="book__page book__page--side"></div>
<div class="book__page book__page--side-paper"></div>
</div>
<div class="book__action">
<button class="see-back button button--secondary">
<i class="dripicons-clockwise"></i>
<span>Flip to Back</span>
</button>
</div>
</div>
</div>




<style>







.product-overview__image {
    width:40%;
}
@media screen and (max-width: 768px) {
    .product-overview__image {
        margin-bottom:40px;
    }
}
.product-overview__image .images img {
    width:100%;
    height:auto;
}
.product-overview__image .images .thumbnails.columns-3 {
    margin:0 -5px;
}
.product-overview__image .images .thumbnails.columns-3:after {
    display:block;
    clear:both;
    content:" ";
}
.product-overview__image .images .thumbnails.columns-3 a {
    float:left;
    width:33.3333%;
    padding:5px;
}
.product-overview__image, .product-overview__summary {
    float:left;
}
@media screen and (max-width: 768px) {
    .product-overview__image, .product-overview__summary {
        display:block;
        float:none;
        width:100%;
    }
}
.deal-end-soon .product-overview__image img {
    display:block;
    margin:0 auto;
}


.book-images {
    -webkit-perspective:2000px;
    perspective:2000px;
}
.book-images .book {
    position:relative;
    width:80%;
    max-width:100%;
    margin:0 auto;
    -webkit-transition:-webkit-transform 0.6s ease;
    -o-transition:-o-transform 0.6s ease;
    transition:-webkit-transform 0.6s ease;
    transition:transform 0.6s ease;
    transition:transform 0.6s ease, -webkit-transform 0.6s ease, -o-transform 0.6s ease;
    -webkit-transform:rotateY(0);
    transform:rotateY(0);
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.book-images .book.back-view {
    -webkit-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}
.rtl .book-images .book.back-view {
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}
.book-images .book:not(.back-view):hover {
    -webkit-transform:rotateY(-30deg);
    transform:rotateY(-30deg);
}
.rtl .book-images .book:not(.back-view):hover {
    -webkit-transform:rotateY(30deg);
    transform:rotateY(30deg);
}
.book-images .book:not(.back-view):hover .book__page--front {
    -webkit-transform:rotateY(-20deg);
    transform:rotateY(-20deg);
}
.rtl .book-images .book:not(.back-view):hover .book__page--front {
    -webkit-transform:rotateY(20deg);
    transform:rotateY(20deg);
}
.book-images .book:not(.back-view):hover .book__page--first-page {
    -webkit-transform:rotateY(-10deg);
    transform:rotateY(-10deg);
}
.rtl .book-images .book:not(.back-view):hover .book__page--first-page {
    -webkit-transform:rotateY(10deg);
    transform:rotateY(10deg);
}
.book-images .book img {
    display:block;
    width:100%;
    height:auto;
}
.book-images .book .placeholder {
    display:block;
    visibility:hidden;
    height:auto;
}
.book-images .book__page {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-image:-o-linear-gradient(45deg, white, #fafafa);
    background-image:linear-gradient(45deg, white, #fafafa);
    -webkit-transition:-webkit-transform 0.3s ease;
    -o-transition:-o-transform 0.3s ease;
    transition:-webkit-transform 0.3s ease;
    transition:transform 0.3s ease;
    transition:transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease;
    -webkit-transform-origin:0;
    -ms-transform-origin:0;
    -o-transform-origin:0;
    transform-origin:0;
    will-change:transform;
}
.book-images .book__page img {
    display:block;
    width:100%;
    height:auto;
}
.book-images .book__page--side {
    bottom:0;
    width:50px;
    background-color:#333333;
    background-image:-o-linear-gradient(45deg, #333333, #111111);
    background-image:linear-gradient(45deg, #333333, #111111);
    -webkit-transform:rotateY(90deg);
    transform:rotateY(90deg);
}
.rtl .book-images .book__page--side {
    left:100%;
}
.book-images .book__page--side-paper {
    bottom:0;
    left:100%;
    width:50px;
    background-color:white;
    background-color:#f3f3f3;
    /* IE9, iOS 3.2+ */
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjAxMzAwMDAwMDAwMDAwMDAwMSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjAyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDMyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDMxOTU4NzYyODg2NTk3OTM2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDQ0OTU4NzYyODg2NTk3OTQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4wNTE5NTg3NjI4ODY1OTc5MyIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjA2Mzk1ODc2Mjg4NjU5Nzk0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDYzOTE3NTI1NzczMTk1ODciLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4wNzY5MTc1MjU3NzMxOTU4NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjA4MzkxNzUyNTc3MzE5NTg2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDk1OTE3NTI1NzczMTk1ODciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4wOTU4NzYyODg2NTk3OTM4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTA4ODc2Mjg4NjU5NzkzODIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4xMTU4NzYyODg2NTk3OTM4MSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjEyNzg3NjI4ODY1OTc5Mzg0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTI3ODM1MDUxNTQ2MzkxNzQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4xNDA4MzUwNTE1NDYzOTE3NSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE0NzgzNTA1MTU0NjM5MTczIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTU5ODM1MDUxNTQ2MzkxNzQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4xNTk3OTM4MTQ0MzI5ODk2OCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE3Mjc5MzgxNDQzMjk4OTY2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTc5NzkzODE0NDMyOTg5NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE5MTc5MzgxNDQzMjk4OTY4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTkxNzUyNTc3MzE5NTg3NiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjIwNDc1MjU3NzMxOTU4NzYzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMjExNzUyNTc3MzE5NTg3NjMiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yMjM3NTI1NzczMTk1ODc2MSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjIyMzcxMTM0MDIwNjE4NTU1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMjM2NzExMzQwMjA2MTg1NTYiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yNDM3MTEzNDAyMDYxODU1NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjI1NTcxMTM0MDIwNjE4NTUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yNTU2NzAxMDMwOTI3ODM1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMjY4NjcwMTAzMDkyNzgzNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjI3NTY3MDEwMzA5Mjc4MzUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yODc2NzAxMDMwOTI3ODM0NiIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjI4NzYyODg2NTk3OTM4MTQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zMDA2Mjg4NjU5NzkzODE0MyIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjMwNzYyODg2NTk3OTM4MTQ0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzE5NjI4ODY1OTc5MzgxNCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjMxOTU4NzYyODg2NTk3OTM2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzMyNTg3NjI4ODY1OTc5MzciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zMzk1ODc2Mjg4NjU5Nzk0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzUxNTg3NjI4ODY1OTc5MzMiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zNTE1NDYzOTE3NTI1NzczIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzY0NTQ2MzkxNzUyNTc3MjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zNzE1NDYzOTE3NTI1NzcyNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjM4MzU0NjM5MTc1MjU3NzMiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zODM1MDUxNTQ2MzkxNzUyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzk2NTA1MTU0NjM5MTc1MjQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC40MDM1MDUxNTQ2MzkxNzUyNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQxNTUwNTE1NDYzOTE3NTI2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDE1NDYzOTE3NTI1NzczMTYiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC40Mjg0NjM5MTc1MjU3NzMxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDM1NDYzOTE3NTI1NzczMSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQ0NzQ2MzkxNzUyNTc3MzIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC40NDc0MjI2ODA0MTIzNzExIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDYwNDIyNjgwNDEyMzcxMDUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC40Njc0MjI2ODA0MTIzNzExIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDc5NDIyNjgwNDEyMzcxMSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQ3OTM4MTQ0MzI5ODk2OSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQ5MjM4MTQ0MzI5ODk2OSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQ5OTM4MTQ0MzI5ODk2OSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjUxMTM4MTQ0MzI5ODk2OTEiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41MTEzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41MjQzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41MzEzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41NDMzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41NDMyOTg5NjkwNzIxNjQ5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNTU2Mjk4OTY5MDcyMTY0OSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjU2MzI5ODk2OTA3MjE2NDkiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41NzUyOTg5NjkwNzIxNjQ5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNTc1MjU3NzMxOTU4NzYyOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjU4ODI1NzczMTk1ODc2MjkiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41OTUyNTc3MzE5NTg3NjI5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjA3MjU3NzMxOTU4NzYyOSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjYwNzIxNjQ5NDg0NTM2MDgiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42MjAyMTY0OTQ4NDUzNjA4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjI3MjE2NDk0ODQ1MzYwOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjYzOTIxNjQ5NDg0NTM2MDgiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42MzkxNzUyNTc3MzE5NTg3Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjUyMTc1MjU3NzMxOTU4NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjY1OTE3NTI1NzczMTk1ODciLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42NzExNzUyNTc3MzE5NTg2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjcxMTM0MDIwNjE4NTU2NiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjY4NDEzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42OTExMzQwMjA2MTg1NTY3Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzAzMTM0MDIwNjE4NTU2NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjcwMzA5Mjc4MzUwNTE1NDYiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC43MTYwOTI3ODM1MDUxNTQ1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzIzMDkyNzgzNTA1MTU0NiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjczNTA5Mjc4MzUwNTE1NDYiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC43MzUwNTE1NDYzOTE3NTI0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzQ4MDUxNTQ2MzkxNzUyNCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjc1NTA1MTU0NjM5MTc1MjQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC43NjcwNTE1NDYzOTE3NTI0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzY3MDEwMzA5Mjc4MzUwNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjc4MDAxMDMwOTI3ODM1MDUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC43ODcwMTAzMDkyNzgzNTA1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzk5MDEwMzA5Mjc4MzUwNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjc5ODk2OTA3MjE2NDk0ODQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC44MTE5NjkwNzIxNjQ5NDg0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODE4OTY5MDcyMTY0OTQ4NCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjgzMDk2OTA3MjE2NDk0ODQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC44MzA5Mjc4MzUwNTE1NDYzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODQzOTI3ODM1MDUxNTQ2MiIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjg1MDkyNzgzNTA1MTU0NjIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC44NjI5Mjc4MzUwNTE1NDY0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODYyODg2NTk3OTM4MTQ0NCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjg3NTg4NjU5NzkzODE0NDMiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC44ODI4ODY1OTc5MzgxNDQzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODk0ODg2NTk3OTM4MTQ0NCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjg5NDg0NTM2MDgyNDc0MjIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC45MDc4NDUzNjA4MjQ3NDIyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuOTE0ODQ1MzYwODI0NzQyMiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjkyNjg0NTM2MDgyNDc0MjIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC45MjY4MDQxMjM3MTEzNDAxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuOTM5ODA0MTIzNzExMzQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC45NDY4MDQxMjM3MTEzNDAyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuOTU4ODA0MTIzNzExMzQwMiIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk1ODc2Mjg4NjU5NzkzOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk3MTc2Mjg4NjU5NzkzOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk3ODc2Mjg4NjU5NzkzOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk5MDc2Mjg4NjU5NzkzOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk5MDcyMTY0OTQ4NDUzNiIvPjxzdG9wIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
    /* Android 2.3 */
    background-image:-webkit-repeating-linear-gradient(left, white 0%, #ebebeb 1.3%, white 2%, #e2e2e2 3.2%);
    /* IE10+ */
    background-image:-o-repeating-linear-gradient(left, white 0%, #ebebeb 1.3%, white 2%, #e2e2e2 3.2%);
    background-image:repeating-linear-gradient(to right, white 0%, #ebebeb 1.3%, white 2%, #e2e2e2 3.2%);
    background-image:-ms-repeating-linear-gradient(left, white 0%, #ebebeb 1.3%, white 2%, #e2e2e2 3.2%);
    -webkit-transform:rotateY(90deg);
    transform:rotateY(90deg);
    /* IE8- CSS hack */
}
@media \0screen\,screen\9 {
    .book-images .book__page--side-paper {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffffff",endColorstr="#ffe2e2e2",GradientType=1);
    }
}
.rtl .book-images .book__page--side-paper {
    left:0;
}
.book-images .book__page--front {
    background-color:#333333;
    -webkit-transform:rotateY(-2deg);
    transform:rotateY(-2deg);
}
.rtl .book-images .book__page--front {
    -webkit-transform:rotateY(2deg);
    transform:rotateY(2deg);
    -webkit-transform-origin:100%;
    -ms-transform-origin:100%;
    -o-transform-origin:100%;
    transform-origin:100%;
}
.book-images .book__page--front:after {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background:-o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 15px, transparent, 16px, transparent);
    background:linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 15px, transparent, 16px, transparent);
    content:" ";
}
.rtl .book-images .book__page--front:after {
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}
.book-images .book__page--back {
    width:100%;
    height:100%;
    background:url("../img/pattern.png") !important;
    -webkit-box-shadow:15px 15px 30px rgba(0, 0, 0, 0.1);
    box-shadow:15px 15px 30px rgba(0, 0, 0, 0.1);
    -webkit-transform:translateZ(-50px) rotateY(180deg);
    transform:translateZ(-50px) rotateY(180deg);
    -webkit-transform-origin:center;
    -ms-transform-origin:center;
    -o-transform-origin:center;
    transform-origin:center;
}
.book-images .book__page--back:after {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:-o-linear-gradient(right, transparent, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.5) 15px, transparent, 16px, transparent);
    background:linear-gradient(-90deg, transparent, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.5) 15px, transparent, 16px, transparent);
    content:" ";
}
.rtl .book-images .book__page--back:after {
    -webkit-transform:rotate(-180deg);
    -ms-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
}
.book-images .book__page--first-page, .book-images .book__page--second-page {
    width:100%;
    height:100%;
    background-color:white;
}
.book-images .book__page--first-page {
    background-image:-o-linear-gradient(15deg, #aaaaaa, #cccccc);
    background-image:linear-gradient(75deg, #aaaaaa, #cccccc);
    -webkit-transform:rotateY(-1deg);
    transform:rotateY(-1deg);
}
.rtl .book-images .book__page--first-page {
    -webkit-transform-origin:100% 0;
    -ms-transform-origin:100% 0;
    -o-transform-origin:100% 0;
    transform-origin:100% 0;
}
.book-images .book__page--second-page {
    background-color:#fafafa;
    background-image:-o-linear-gradient(45deg, #f3f3f3, #fafafa);
    background-image:linear-gradient(45deg, #f3f3f3, #fafafa);
}
.no-preserve3d .book-images .book__page--back, .no-preserve3d .book-images .book__page--first-page, .no-preserve3d .book-images .book__page--side, .no-preserve3d .book-images .book__page--side-paper, .no-preserve3d .book-images .book__page--second-page {
    display:none;
}
.book-images .book__action {
    width:80%;
    margin:0 auto;
    padding-top:50px;
    text-align:center;
}
.no-preserve3d .book-images .book__action .see-back {
    display:none;
}
.book-images .book__action button, .book-images .book__action .see-inside {
    display:inline-block;
    margin:0 5px;
    padding:5px 15px;
    border:none;
    font-size:inherit;
    font-size:15px;
    line-height:1;
    cursor:pointer;
}
.book-images .book__action button [class*="ico"], .book-images .book__action .see-inside [class*="ico"] {
    display:inline-block;
    width:13px;
    height:13px;
    margin-right:10px;
    color:inherit;
    font-size:13px;
    line-height:1;
    vertical-align:middle;
}
.book-images .book__action button [class*="ico"]:before, .book-images .book__action .see-inside [class*="ico"]:before {
    line-height:1;
}

.book-images {
    -webkit-perspective:2000px;
    perspective:2000px;
}
.book-images .book {
    position:relative;
    width:80%;
    max-width:100%;
    margin:0 auto;
    -webkit-transition:-webkit-transform 0.6s ease;
    -o-transition:-o-transform 0.6s ease;
    transition:-webkit-transform 0.6s ease;
    transition:transform 0.6s ease;
    transition:transform 0.6s ease, -webkit-transform 0.6s ease, -o-transform 0.6s ease;
    -webkit-transform:rotateY(0);
    transform:rotateY(0);
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.book-images .book.back-view {
    -webkit-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}
.rtl .book-images .book.back-view {
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}
.book-images .book:not(.back-view):hover {
    -webkit-transform:rotateY(-30deg);
    transform:rotateY(-30deg);
}
.rtl .book-images .book:not(.back-view):hover {
    -webkit-transform:rotateY(30deg);
    transform:rotateY(30deg);
}
.book-images .book:not(.back-view):hover .book__page--front {
    -webkit-transform:rotateY(-20deg);
    transform:rotateY(-20deg);
}
.rtl .book-images .book:not(.back-view):hover .book__page--front {
    -webkit-transform:rotateY(20deg);
    transform:rotateY(20deg);
}
.book-images .book:not(.back-view):hover .book__page--first-page {
    -webkit-transform:rotateY(-10deg);
    transform:rotateY(-10deg);
}
.rtl .book-images .book:not(.back-view):hover .book__page--first-page {
    -webkit-transform:rotateY(10deg);
    transform:rotateY(10deg);
}
.book-images .book img {
    display:block;
    width:100%;
    height:auto;
}
.book-images .book .placeholder {
    display:block;
    visibility:hidden;
    height:auto;
}
.book-images .book__page {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-image:-o-linear-gradient(45deg, white, #fafafa);
    background-image:linear-gradient(45deg, white, #fafafa);
    -webkit-transition:-webkit-transform 0.3s ease;
    -o-transition:-o-transform 0.3s ease;
    transition:-webkit-transform 0.3s ease;
    transition:transform 0.3s ease;
    transition:transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease;
    -webkit-transform-origin:0;
    -ms-transform-origin:0;
    -o-transform-origin:0;
    transform-origin:0;
    will-change:transform;
}
.book-images .book__page img {
    display:block;
    width:100%;
    height:auto;
}
.book-images .book__page--side {
    bottom:0;
    width:50px;
    background-color:#333333;
    background-image:-o-linear-gradient(45deg, #333333, #111111);
    background-image:linear-gradient(45deg, #333333, #111111);
    -webkit-transform:rotateY(90deg);
    transform:rotateY(90deg);
}
.rtl .book-images .book__page--side {
    left:100%;
}
.book-images .book__page--side-paper {
    bottom:0;
    left:100%;
    width:50px;
    background-color:white;
    background-color:#f3f3f3;
    /* IE9, iOS 3.2+ */
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjAxMzAwMDAwMDAwMDAwMDAwMSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjAyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDMyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDMxOTU4NzYyODg2NTk3OTM2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDQ0OTU4NzYyODg2NTk3OTQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4wNTE5NTg3NjI4ODY1OTc5MyIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjA2Mzk1ODc2Mjg4NjU5Nzk0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDYzOTE3NTI1NzczMTk1ODciLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4wNzY5MTc1MjU3NzMxOTU4NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjA4MzkxNzUyNTc3MzE5NTg2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMDk1OTE3NTI1NzczMTk1ODciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4wOTU4NzYyODg2NTk3OTM4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTA4ODc2Mjg4NjU5NzkzODIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4xMTU4NzYyODg2NTk3OTM4MSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjEyNzg3NjI4ODY1OTc5Mzg0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTI3ODM1MDUxNTQ2MzkxNzQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4xNDA4MzUwNTE1NDYzOTE3NSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE0NzgzNTA1MTU0NjM5MTczIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTU5ODM1MDUxNTQ2MzkxNzQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4xNTk3OTM4MTQ0MzI5ODk2OCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE3Mjc5MzgxNDQzMjk4OTY2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTc5NzkzODE0NDMyOTg5NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE5MTc5MzgxNDQzMjk4OTY4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMTkxNzUyNTc3MzE5NTg3NiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjIwNDc1MjU3NzMxOTU4NzYzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMjExNzUyNTc3MzE5NTg3NjMiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yMjM3NTI1NzczMTk1ODc2MSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjIyMzcxMTM0MDIwNjE4NTU1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMjM2NzExMzQwMjA2MTg1NTYiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yNDM3MTEzNDAyMDYxODU1NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjI1NTcxMTM0MDIwNjE4NTUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yNTU2NzAxMDMwOTI3ODM1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMjY4NjcwMTAzMDkyNzgzNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjI3NTY3MDEwMzA5Mjc4MzUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4yODc2NzAxMDMwOTI3ODM0NiIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjI4NzYyODg2NTk3OTM4MTQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zMDA2Mjg4NjU5NzkzODE0MyIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjMwNzYyODg2NTk3OTM4MTQ0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzE5NjI4ODY1OTc5MzgxNCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjMxOTU4NzYyODg2NTk3OTM2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzMyNTg3NjI4ODY1OTc5MzciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zMzk1ODc2Mjg4NjU5Nzk0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzUxNTg3NjI4ODY1OTc5MzMiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zNTE1NDYzOTE3NTI1NzczIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzY0NTQ2MzkxNzUyNTc3MjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zNzE1NDYzOTE3NTI1NzcyNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjM4MzU0NjM5MTc1MjU3NzMiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC4zODM1MDUxNTQ2MzkxNzUyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzk2NTA1MTU0NjM5MTc1MjQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC40MDM1MDUxNTQ2MzkxNzUyNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQxNTUwNTE1NDYzOTE3NTI2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDE1NDYzOTE3NTI1NzczMTYiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC40Mjg0NjM5MTc1MjU3NzMxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDM1NDYzOTE3NTI1NzczMSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQ0NzQ2MzkxNzUyNTc3MzIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC40NDc0MjI2ODA0MTIzNzExIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDYwNDIyNjgwNDEyMzcxMDUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC40Njc0MjI2ODA0MTIzNzExIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDc5NDIyNjgwNDEyMzcxMSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQ3OTM4MTQ0MzI5ODk2OSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQ5MjM4MTQ0MzI5ODk2OSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQ5OTM4MTQ0MzI5ODk2OSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjUxMTM4MTQ0MzI5ODk2OTEiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41MTEzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41MjQzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41MzEzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41NDMzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41NDMyOTg5NjkwNzIxNjQ5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNTU2Mjk4OTY5MDcyMTY0OSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjU2MzI5ODk2OTA3MjE2NDkiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41NzUyOTg5NjkwNzIxNjQ5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNTc1MjU3NzMxOTU4NzYyOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjU4ODI1NzczMTk1ODc2MjkiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41OTUyNTc3MzE5NTg3NjI5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjA3MjU3NzMxOTU4NzYyOSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjYwNzIxNjQ5NDg0NTM2MDgiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42MjAyMTY0OTQ4NDUzNjA4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjI3MjE2NDk0ODQ1MzYwOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjYzOTIxNjQ5NDg0NTM2MDgiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42MzkxNzUyNTc3MzE5NTg3Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjUyMTc1MjU3NzMxOTU4NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjY1OTE3NTI1NzczMTk1ODciLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42NzExNzUyNTc3MzE5NTg2Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjcxMTM0MDIwNjE4NTU2NiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjY4NDEzNDAyMDYxODU1NjciLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC42OTExMzQwMjA2MTg1NTY3Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzAzMTM0MDIwNjE4NTU2NyIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjcwMzA5Mjc4MzUwNTE1NDYiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC43MTYwOTI3ODM1MDUxNTQ1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzIzMDkyNzgzNTA1MTU0NiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjczNTA5Mjc4MzUwNTE1NDYiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC43MzUwNTE1NDYzOTE3NTI0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzQ4MDUxNTQ2MzkxNzUyNCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjc1NTA1MTU0NjM5MTc1MjQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC43NjcwNTE1NDYzOTE3NTI0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzY3MDEwMzA5Mjc4MzUwNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjc4MDAxMDMwOTI3ODM1MDUiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC43ODcwMTAzMDkyNzgzNTA1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNzk5MDEwMzA5Mjc4MzUwNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjc5ODk2OTA3MjE2NDk0ODQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC44MTE5NjkwNzIxNjQ5NDg0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODE4OTY5MDcyMTY0OTQ4NCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjgzMDk2OTA3MjE2NDk0ODQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC44MzA5Mjc4MzUwNTE1NDYzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODQzOTI3ODM1MDUxNTQ2MiIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjg1MDkyNzgzNTA1MTU0NjIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC44NjI5Mjc4MzUwNTE1NDY0Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODYyODg2NTk3OTM4MTQ0NCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjg3NTg4NjU5NzkzODE0NDMiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC44ODI4ODY1OTc5MzgxNDQzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODk0ODg2NTk3OTM4MTQ0NCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjg5NDg0NTM2MDgyNDc0MjIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZWJlYmViIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC45MDc4NDUzNjA4MjQ3NDIyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuOTE0ODQ1MzYwODI0NzQyMiIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjkyNjg0NTM2MDgyNDc0MjIiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC45MjY4MDQxMjM3MTEzNDAxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuOTM5ODA0MTIzNzExMzQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC45NDY4MDQxMjM3MTEzNDAyIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuOTU4ODA0MTIzNzExMzQwMiIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk1ODc2Mjg4NjU5NzkzOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk3MTc2Mjg4NjU5NzkzOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk3ODc2Mjg4NjU5NzkzOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk5MDc2Mjg4NjU5NzkzOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjk5MDcyMTY0OTQ4NDUzNiIvPjxzdG9wIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
    /* Android 2.3 */
    background-image:-webkit-repeating-linear-gradient(left, white 0%, #ebebeb 1.3%, white 2%, #e2e2e2 3.2%);
    /* IE10+ */
    background-image:-o-repeating-linear-gradient(left, white 0%, #ebebeb 1.3%, white 2%, #e2e2e2 3.2%);
    background-image:repeating-linear-gradient(to right, white 0%, #ebebeb 1.3%, white 2%, #e2e2e2 3.2%);
    background-image:-ms-repeating-linear-gradient(left, white 0%, #ebebeb 1.3%, white 2%, #e2e2e2 3.2%);
    -webkit-transform:rotateY(90deg);
    transform:rotateY(90deg);
    /* IE8- CSS hack */
}
@media \0screen\,screen\9 {
    .book-images .book__page--side-paper {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffffff",endColorstr="#ffe2e2e2",GradientType=1);
    }
}
.rtl .book-images .book__page--side-paper {
    left:0;
}
.book-images .book__page--front {
    background-color:#333333;
    -webkit-transform:rotateY(-2deg);
    transform:rotateY(-2deg);
}
.rtl .book-images .book__page--front {
    -webkit-transform:rotateY(2deg);
    transform:rotateY(2deg);
    -webkit-transform-origin:100%;
    -ms-transform-origin:100%;
    -o-transform-origin:100%;
    transform-origin:100%;
}
.book-images .book__page--front:after {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background:-o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 15px, transparent, 16px, transparent);
    background:linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 15px, transparent, 16px, transparent);
    content:" ";
}
.rtl .book-images .book__page--front:after {
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}
.book-images .book__page--back {
    width:100%;
    height:100%;
    background:url("../img/pattern.png") !important;
    -webkit-box-shadow:15px 15px 30px rgba(0, 0, 0, 0.1);
    box-shadow:15px 15px 30px rgba(0, 0, 0, 0.1);
    -webkit-transform:translateZ(-50px) rotateY(180deg);
    transform:translateZ(-50px) rotateY(180deg);
    -webkit-transform-origin:center;
    -ms-transform-origin:center;
    -o-transform-origin:center;
    transform-origin:center;
}
.book-images .book__page--back:after {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:-o-linear-gradient(right, transparent, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.5) 15px, transparent, 16px, transparent);
    background:linear-gradient(-90deg, transparent, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.5) 15px, transparent, 16px, transparent);
    content:" ";
}
.rtl .book-images .book__page--back:after {
    -webkit-transform:rotate(-180deg);
    -ms-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
}
.book-images .book__page--first-page, .book-images .book__page--second-page {
    width:100%;
    height:100%;
    background-color:white;
}
.book-images .book__page--first-page {
    background-image:-o-linear-gradient(15deg, #aaaaaa, #cccccc);
    background-image:linear-gradient(75deg, #aaaaaa, #cccccc);
    -webkit-transform:rotateY(-1deg);
    transform:rotateY(-1deg);
}
.rtl .book-images .book__page--first-page {
    -webkit-transform-origin:100% 0;
    -ms-transform-origin:100% 0;
    -o-transform-origin:100% 0;
    transform-origin:100% 0;
}
.book-images .book__page--second-page {
    background-color:#fafafa;
    background-image:-o-linear-gradient(45deg, #f3f3f3, #fafafa);
    background-image:linear-gradient(45deg, #f3f3f3, #fafafa);
}
.no-preserve3d .book-images .book__page--back, .no-preserve3d .book-images .book__page--first-page, .no-preserve3d .book-images .book__page--side, .no-preserve3d .book-images .book__page--side-paper, .no-preserve3d .book-images .book__page--second-page {
    display:none;
}
.book-images .book__action {
    width:80%;
    margin:0 auto;
    padding-top:50px;
    text-align:center;
}
.no-preserve3d .book-images .book__action .see-back {
    display:none;
}
.book-images .book__action button, .book-images .book__action .see-inside {
    display:inline-block;
    margin:0 5px;
    padding:5px 15px;
    border:none;
    font-size:inherit;
    font-size:15px;
    line-height:1;
    cursor:pointer;
}
.book-images .book__action button [class*="ico"], .book-images .book__action .see-inside [class*="ico"] {
    display:inline-block;
    width:13px;
    height:13px;
    margin-right:10px;
    color:inherit;
    font-size:13px;
    line-height:1;
    vertical-align:middle;
}
.book-images .book__action button [class*="ico"]:before, .book-images .book__action .see-inside [class*="ico"]:before {
    line-height:1;
}

.book-images .book__action {
    width:80%;
    margin:0 auto;
    padding-top:50px;
    text-align:center;
}
.no-preserve3d .book-images .book__action .see-back {
    display:none;
}
.book-images .book__action button, .book-images .book__action .see-inside {
    display:inline-block;
    margin:0 5px;
    padding:5px 15px;
    border:none;
    font-size:inherit;
    font-size:15px;
    line-height:1;
    cursor:pointer;
}
.book-images .book__action button [class*="ico"], .book-images .book__action .see-inside [class*="ico"] {
    display:inline-block;
    width:13px;
    height:13px;
    margin-right:10px;
    color:inherit;
    font-size:13px;
    line-height:1;
    vertical-align:middle;
}
.book-images .book__action button [class*="ico"]:before, .book-images .book__action .see-inside [class*="ico"]:before {
    line-height:1;
}
.no-preserve3d .book-images .book__action .see-back {
    display:none;
}
.button--secondary, .product-grid .product__action .button.yith-wcqv-button, .product-grid .product__action button.yith-wcqv-button, .product-grid .product__action input.yith-wcqv-button[type="submit"], .product-grid .product__action input.yith-wcqv-button[type="reset"], .product-list .product__action .yith-wcqv-button {
    color:white;
    background-color:#b2dc71;
}
.button--secondary:hover, .product-grid .product__action .button.yith-wcqv-button:hover, .product-grid .product__action button.yith-wcqv-button:hover, .product-grid .product__action input.yith-wcqv-button:hover[type="submit"], .product-grid .product__action input.yith-wcqv-button:hover[type="reset"], .product-list .product__action .yith-wcqv-button:hover {
    color:white;
    background-color:#d0e1b7;
}


</style>




Comments

Post a Comment

Popular posts from this blog

How to use inner html value or data in php from javascript(innerHTML)?

 use inner html value or data in php from javascript(innerHTML)? <html> <body> <p id="demo">use inner html value in php(innerhtml)</p> <script>   var jassi = document.getElementById("demo").innerHTML;   //document.write(jassi); </script> <?php $jassi = '<script>document.write(jassi);</script>'; echo $jassi; ?> </body> </html>
Post a Comment
Read more

How to get store data from WCFM(Best Multi Vendor Marketplace) Plugin?

 Get store data from WCFM(Best Multi Vendor Marketplace) Plugin. global $WCFM, $WCFMmp, $wp, $WCFM_Query, $post; $store_id = ''; if ( isset( $attr['id'] ) && !empty( $attr['id'] ) ) { $store_id = absint($attr['id']); } if (  wcfm_is_store_page() ) { $wcfm_store_url = get_option( 'wcfm_store_url', 'store' ); $store_name = apply_filters( 'wcfmmp_store_query_var', get_query_var( $wcfm_store_url ) ); $store_id  = 0; if ( !empty( $store_name ) ) { $store_user = get_user_by( 'slug', $store_name ); } $store_id    = $store_user->ID; } $user_id = $store_id;  $vendor_data = get_user_meta( $user_id, 'wcfmmp_profile_settings', true ); $street_1 = $vendor_data['address']['street_1']; $street_2 = $vendor_data['address']['street_2']; $city     = $vendor_data['address']['city']; $zip      = $vendor_data['address']['zip&#
Post a Comment
Read more

How to create login with phone number in woocommerce wordpress?

Create login with phone number in woocommerce wordpress. function wooc_extra_register_fields() {?>        <p class="form-row form-row-wide">        <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?><span class="required">*</span></label>        <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />        </p>            <?php  }  add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );  function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) { if ( isset( $_POST['billing_phone'] ) ) {    $hasPhoneNumber= get_users('meta_value='.$_POST['billing_phone']);    if ( !empty($hasPhoneNumber)) {      $validation_er
Post a Comment
Read more