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>

How to check if page is exists or not in wordpress ?

check if page is exists or not in wordpress.

function pagecheck(){

$pagetitle = 'Sample Pagee';
$page = get_page_by_title( $pagetitle, OBJECT, 'page' );
$pageid = $page->ID;

if($pageid){
//echo "Exist";
}
else
{

echo "not Exist";

}

}
add_action('admin_head','pagecheck');

How to create wordpress page with code in wordpress?

Create wordpress page with code in wordpress.Define page template in wp_insert_post.

add_action( 'admin_init', 'mytheme_admin_init' );
function mytheme_admin_init() {
    if ( ! get_option( 'mytheme_installed' ) ) {
        $new_page_id = wp_insert_post( array(
            'post_title'     => 'Blog',
            'post_type'      => 'page',
            'post_name'      => 'blog',
            'comment_status' => 'closed',
            'ping_status'    => 'closed',
            'post_content'   => '',
            'post_status'    => 'publish',
            'post_author'    => get_user_by( 'id', 1 )->user_id,
            'menu_order'     => 0,
            // Assign page template
            'page_template'  => 'template-blog.php'
        ) );

        update_option( 'mytheme_installed', true );
    }
}

In working...........

add_action( 'admin_init', 'mytheme_admin_init' );
function mytheme_admin_init() {
    if ( ! get_option( 'front page' ) ) {
        $new_page_id = wp_insert_post( array(
            'post_title'     => 'front page',
            'post_type'      => 'page',
            'post_name'      => 'front page',
            'comment_status' => 'closed',
            'ping_status'    => 'closed',
            'post_content'   => '',
            'post_status'    => 'publish',
            'post_author'    => 1,
            'menu_order'     => 0,
            // Assign page template
            //'page_template'  => 'template-jassi.php'
        ) );

        update_option( 'front page', true );
    }
 
      if ( ! get_option( 'Contact Us' ) ) {
        $new_page_id = wp_insert_post( array(
            'post_title'     => 'Contact Us',
            'post_type'      => 'page',
            'post_name'      => 'Contact Us',
            'comment_status' => 'closed',
            'ping_status'    => 'closed',
            'post_content'   => '',
            'post_status'    => 'publish',
            'post_author'    => get_user_by( 'id', 1 )->user_id,
            'menu_order'     => 0,
            // Assign page template
            //'page_template'  => 'template-jassi.php'
        ) );

        update_option( 'Contact Us', true );
    }
 
 
      if ( ! get_option( 'About Us' ) ) {
        $new_page_id = wp_insert_post( array(
            'post_title'     => 'About Us',
            'post_type'      => 'page',
            'post_name'      => 'About Us',
            'comment_status' => 'closed',
            'ping_status'    => 'closed',
            'post_content'   => '',
            'post_status'    => 'publish',
            'post_author'    => get_user_by( 'id', 1 )->user_id,
            'menu_order'     => 0,
            // Assign page template
            //'page_template'  => 'template-jassi.php'
        ) );

        update_option( 'About Us', true );
    }
 
 
      if ( ! get_option( 'Privacy Policy' ) ) {
        $new_page_id = wp_insert_post( array(
            'post_title'     => 'Privacy Policy',
            'post_type'      => 'page',
            'post_name'      => 'Privacy Policy',
            'comment_status' => 'closed',
            'ping_status'    => 'closed',
            'post_content'   => '',
            'post_status'    => 'publish',
            'post_author'    => get_user_by( 'id', 1 )->user_id,
            'menu_order'     => 0,
            // Assign page template
            //'page_template'  => 'template-jassi.php'
        ) );

        update_option( 'Privacy Policy', true );
    }
 
 
     if ( ! get_option( 'term and condition' ) ) {
        $new_page_id = wp_insert_post( array(
            'post_title'     => 'term and condition',
            'post_type'      => 'page',
            'post_name'      => 'term and condition',
            'comment_status' => 'closed',
            'ping_status'    => 'closed',
            'post_content'   => '',
            'post_status'    => 'publish',
            'post_author'    => get_user_by( 'id', 1 )->user_id,
            'menu_order'     => 0,
            // Assign page template
            //'page_template'  => 'template-jassi.php'
        ) );

        update_option( 'term and condition', true );
    }
 
 
   if ( ! get_option( 'Test' ) ) {
        $new_page_id = wp_insert_post( array(
            'post_title'     => 'Test',
            'post_type'      => 'page',
            'post_name'      => 'Test',
            'comment_status' => 'closed',
            'ping_status'    => 'closed',
            'post_content'   => '',
            'post_status'    => 'publish',
            'post_author'    => get_user_by( 'id', 1 )->user_id,
            'menu_order'     => 0,
            // Assign page template
            //'page_template'  => 'template-jassi.php'
        ) );

        update_option( 'Test', true );
    }
}

How to create custom meta box inside custom post type in wordpress?

Create custom meta box inside custom post type in wordpress.

<?php

/* custom meta box */

function flipalbums_add_meta_boxes( $post ){
add_meta_box( 'flipalbum_meta_box', __( 'Extras', 'flipalbum_audio_plugin' ), 'flipalbum_audio_meta_box', 'flipalbums', 'normal', 'low' );
}
add_action( 'add_meta_boxes_flipalbums', 'flipalbums_add_meta_boxes' );



function flipalbum_audio_meta_box( $post ){
// make sure the form request comes from WordPress
wp_nonce_field( basename( __FILE__ ), 'flipalbum_meta_box_nonce' );

// retrieve the _food_cholesterol current value
//$current_cholesterol = get_post_meta( $post->ID, '_food_cholesterol', true );

// retrieve the _flip_music_file current value
$current_music = get_post_meta( $post->ID, '_flip_music_file', true );

$customer_email = get_post_meta( $post->ID, '_flip_customer_email', true );

$customer_pin = get_post_meta( $post->ID, '_flip_customer_pin', true );

//$vitamins = array( 'Vitamin A', 'Thiamin (B1)', 'Riboflavin (B2)', 'Niacin (B3)', 'Pantothenic Acid (B5)', 'Vitamin B6', 'Vitamin B12', 'Vitamin C', 'Vitamin D', 'Vitamin E', 'Vitamin K' );

// stores _food_vitamins array
//$current_vitamins = ( get_post_meta( $post->ID, '_food_vitamins', true ) ) ? get_post_meta( $post->ID, '_food_vitamins', true ) : array();

?>
<div class='inside'>

<!--<h3><?php _e( 'Cholesterol', 'flipalbum_audio_plugin' ); ?></h3>
<p>
<input type="radio" name="cholesterol" value="0" <?php checked( $current_cholesterol, '0' ); ?> /> Yes<br />
<input type="radio" name="cholesterol" value="1" <?php checked( $current_cholesterol, '1' ); ?> /> No
</p>-->

<h3><?php _e( 'Music File Goes here', 'flipalbum_audio_plugin' ); ?></h3>
<p>
<input type="text" name="music" value="<?php echo $current_music; ?>" style="width:100%"/>
</p>

<!--<h3><?php _e( 'Vitamins', 'flipalbum_audio_plugin' ); ?></h3>
<p>
<?php
foreach ( $vitamins as $vitamin ) {
?>
<input type="checkbox" name="vitamins[]" value="<?php echo $vitamin; ?>" <?php checked( ( in_array( $vitamin, $current_vitamins ) ) ? $vitamin : '', $vitamin ); ?> /><?php echo $vitamin; ?> <br />
<?php
}
?>
</p>-->
</div>


<div class='inside'>
<h3><?php _e( 'User Email', 'flipalbum_audio_plugin' ); ?></h3>
<p>
<input type="text" name="custemail" value="<?php echo $customer_email; ?>" style="width:100%"/>
</p>


</div>
<div class='inside'>
<h3><?php _e( 'User PIN', 'flipalbum_audio_plugin' ); ?></h3>
<p>
<input type="text" name="custpin" value="<?php echo $customer_pin; ?>" style="width:100%"/>
</p>


</div>

<?php
}


function flipalbums_save_meta_boxes_data( $post_id ){
// verify taxonomies meta box nonce
if ( !isset( $_POST['flipalbum_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['flipalbum_meta_box_nonce'], basename( __FILE__ ) ) ){
return;
}

// return if autosave
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
return;
}

// Check the user's permissions.
if ( ! current_user_can( 'edit_post', $post_id ) ){
return;
}

// store custom fields values
// cholesterol string
/* if ( isset( $_REQUEST['cholesterol'] ) ) {
update_post_meta( $post_id, '_food_cholesterol', sanitize_text_field( $_POST['cholesterol'] ) );
} */

// store custom fields values
// music string
if ( isset( $_REQUEST['music'] ) ) {
update_post_meta( $post_id, '_flip_music_file', sanitize_text_field( $_POST['music'] ) );
}

if ( isset( $_REQUEST['custemail'] ) ) {
update_post_meta( $post_id, '_flip_customer_email', sanitize_text_field( $_POST['custemail'] ) );
}
if ( isset( $_REQUEST['custpin'] ) ) {
update_post_meta( $post_id, '_flip_customer_pin', sanitize_text_field( $_POST['custpin'] ) );
}

// store custom fields values
/* if( isset( $_POST['vitamins'] ) ){
$vitamins = (array) $_POST['vitamins'];

// sinitize array
$vitamins = array_map( 'sanitize_text_field', $vitamins );

// save data
update_post_meta( $post_id, '_food_vitamins', $vitamins );
}else{
// delete data
delete_post_meta( $post_id, '_food_vitamins' );
} */
}
add_action( 'save_post_flipalbums', 'flipalbums_save_meta_boxes_data', 10, 2 );

How to register custom post in wordpress?

Register custom post in wordpress.

 

 // Register Custom Post Type

function three_d_albums_post_type() {

$labels = array(

'name'                  => _x( '3D Album', 'Post Type General Name', 'text_domain' ),

'singular_name'         => _x( '3D Albums', 'Post Type Singular Name', 'text_domain' ),

'menu_name'             => __( '3D Albums', 'text_domain' ),

'name_admin_bar'        => __( '3D Albums', 'text_domain' ),

'archives'              => __( 'Item Archives', 'text_domain' ),

'attributes'            => __( 'Item Attributes', 'text_domain' ),

'parent_item_colon'     => __( 'Parent Item:', 'text_domain' ),

'all_items'             => __( 'All Items', 'text_domain' ),

'add_new_item'          => __( 'Add New Item', 'text_domain' ),

'add_new'               => __( 'Add New', 'text_domain' ),

'new_item'              => __( 'New Item', 'text_domain' ),

'edit_item'             => __( 'Edit Item', 'text_domain' ),

'update_item'           => __( 'Update Item', 'text_domain' ),

'view_item'             => __( 'View Item', 'text_domain' ),

'view_items'            => __( 'View Items', 'text_domain' ),

'search_items'          => __( 'Search Item', 'text_domain' ),

'not_found'             => __( 'Not found', 'text_domain' ),

'not_found_in_trash'    => __( 'Not found in Trash', 'text_domain' ),

'featured_image'        => __( 'Featured Image', 'text_domain' ),

'set_featured_image'    => __( 'Set featured image', 'text_domain' ),

'remove_featured_image' => __( 'Remove featured image', 'text_domain' ),

'use_featured_image'    => __( 'Use as featured image', 'text_domain' ),

'insert_into_item'      => __( 'Insert into item', 'text_domain' ),

'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ),

'items_list'            => __( 'Items list', 'text_domain' ),

'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),

'filter_items_list'     => __( 'Filter items list', 'text_domain' ),

);

$args = array(

'label'                 => __( '3D Albums', 'text_domain' ),

'description'           => __( 'Post Type Description', 'text_domain' ),

'labels'                => $labels,

'supports'              => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),

'taxonomies'            => array( 'category', 'post_tag' ),

'hierarchical'          => false,

'public'                => true,

'show_ui'               => true,

'show_in_menu'          => true,

'menu_position'         => 5,

'show_in_admin_bar'     => true,

'show_in_nav_menus'     => true,

'can_export'            => true,

'has_archive'           => true,

'exclude_from_search'   => true,

'publicly_queryable'    => true,

'capability_type'       => 'page',

);

register_post_type( '3D_Albums', $args );

}

add_action( 'init', 'three_d_albums_post_type', 0 );

How to create menu on my account page in woocommerce?

create menu on my account page in woocommerce.

/* my account add code */


function my_albumspoints() {
add_rewrite_endpoint( 'my-albums', EP_ROOT | EP_PAGES );
}

add_action( 'init', 'my_albumspoints' );

/**
 * Add new query var.
 *
 * @param array $vars
 * @return array
 */
function my_custom_query_vars( $vars ) {
$vars[] = 'my-albums';

return $vars;
}

add_filter( 'query_vars', 'my_custom_query_vars', 0 );


function my_custom_flush_rewrite_rules() {
add_rewrite_endpoint( 'my-albums', EP_ROOT | EP_PAGES );
flush_rewrite_rules();
}

add_action( 'after_switch_theme', 'my_custom_flush_rewrite_rules' );



function my_custom_insert_after_helper( $items, $new_items, $after ) {
// Search for the item position and +1 since is after the selected item key.
$position = array_search( $after, array_keys( $items ) ) + 0;

// Insert the new item.
$array = array_slice( $items, 0, $position, true );
$array += $new_items;
$array += array_slice( $items, $position, count( $items ) - $position, true );

    return $array;
}

/* My Albums in My Account  */
function my_custom_my_account_menu_items( $items ) {
$new_items = array();
$new_items['my-albums'] = __( 'My Albums', 'woocommerce' );

// Add the new item after `orders`.
return my_custom_insert_after_helper( $items, $new_items, 'orders' );
}

add_filter( 'woocommerce_account_menu_items', 'my_custom_my_account_menu_items' );


function my_albumspoint_content() {
echo do_shortcode('[total-albums]');
}
add_action( 'woocommerce_account_my-albums_endpoint', 'my_albumspoint_content' );



function my_albumspoint_title( $title ) {
global $wp_query;

$is_endpoint = isset( $wp_query->query_vars['my-albums'] );

if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
// New page title.
$title = __( 'My Albums', 'woocommerce' );

remove_filter( 'the_title', 'my_albumspoint_title' );
}

return $title;
}

add_filter( 'the_title', 'my_albumspoint_title' );