/** * per 8.4.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://perjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 21, 2022 */ :root{--per-theme-color:#007aff} .per{margin-left:auto; margin-right:auto; position:relative; overflow:hidden; list-style:none; padding:0;z-index:1} .per-per{ position:relative; width:100%; height:100%; z-index:1; display:flex; transition-property:transform; box-sizing:content-box } .per-vertical> .per-per{ flex-direction:column} .per-android .per-slide, .per-per{transform:translate3d(0px,0,0)} .per-pointer-events{touch-action:pan-y} .per-pointer-events.per-vertical{touch-action:pan-x} .per-slide{flex-shrink:0;width:100%;height:100%; position:relative;transition-property:transform} .per-slide-invisible-blank{visibility:hidden} .per-autoheight, .per-autoheight .per-slide{height:auto} .per-autoheight .per-per{align-items:flex-start;transition-property:transform,height} .per-backface-hidden .per-slide{transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden} .per-3d, .per-3d.per-css-mode .per-per{perspective:1200px} .per-3d .per-cube-shadow, .per-3d .per-slide, .per-3d .per-css-mode>.per-per{overflow:auto;scrollbar-width:none;-ms-overflow-style:none} .per-css-mode>.per-per::-webkit-scrollbar{display:none} .per-css-mode>.per-per>.per-slide{scroll-snap-align:start start} .per-horizontal.per-css-mode>.per-per{scroll-snap-type:x mandatory} .per-vertical.per-css-mode>.per-wrapper{scroll-snap-type:y mandatory} .per-centered>.per-per::before{content:'';flex-shrink:0;order:9999} .per-centered.per-horizontal>.per-per> .per-slide:first-child{margin-inline-start:var(--per-centered-offset-before)} .per-centered.per-horizontal>.per-per::before{height:100%;min-height:1px;width:var(--per-centered-offset-after)} .per-centered.per-vertical>.per-per>.per-slide:first-child{margin-block-start:var(--per-centered-offset-before)} .per-centered.per-vertical>.per-per::before{width:100%;min-width:1px;height:var(--per-centered-offset-after)} .per-centered>.per-per>.per-slide{scroll-snap-align:center center} .per-virtual .per-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.per-virtual.per-css-mode .per-per::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.per-virtual.per-css-mode.per-horizontal .per-per::after{height:1px;width:var(--per-virtual-size)}.per-virtual.per-css-mode.per-vertical .per-per::after{width:1px;height:var(--per-virtual-size)}:root{--per-navigation-size:44px} .per-pagination.per-pagination-hidden{opacity:0}.per-pagination-disabled>.per-pagination, .per-pagination.per-pagination-disabled{display:none!important}.per-horizontal> .per-pagination-bullets,.per-pagination-bullets.per-pagination-horizontal, .per-pagination-custom,.per-pagination-fraction{bottom:10px;left:0;width:100%} .per-pagination-bullets-dynamic{overflow:hidden;font-size:0} .per-pagination-bullets-dynamic .per-pagination-bullet{transform:scale(.33);position:relative} .per-pagination-bullets-dynamic .per-pagination-bullet-active{transform:scale(1)} .per-pagination-bullets-dynamic .per-pagination-bullet-active-main{transform:scale(1)} .per-pagination-bullets-dynamic .per-pagination-bullet-active-prev{transform:scale(.66)} .per-pagination-bullets-dynamic .per-pagination-bullet-active-prev-prev{transform:scale(.33)} .per-pagination-bullets-dynamic .per-pagination-bullet-active-next{transform:scale(.66)} .per-pagination-bullets-dynamic .per-pagination-bullet-active-next-next{transform:scale(.33)} .per-pagination-bullet{width:var(--per-pagination-bullet-width, var(--per-pagination-bullet-size,8px)); height:var(--per-pagination-bullet-height,var(--per-pagination-bullet-size,8px)); display:inline-block;border-radius:50%;background:var(--per-pagination-bullet-inactive-color,#000); opacity:var(--per-pagination-bullet-inactive-opacity, .2)}button .per-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none; -webkit-appearance:none;appearance:none} .per-pagination-clickable .per-pagination-bullet{cursor:pointer} .per-pagination-bullet:only-child{display:none!important} .per-pagination-bullet-active{opacity:var(--per-pagination-bullet-opacity, 1); background:var(--per-pagination-color,var(--per-theme-color))} .per-pagination-vertical.per-pagination-bullets, .per-vertical> .per-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)} .per-pagination-vertical.per-pagination-bullets .per-pagination-bullet,.per-vertical> .per-pagination-bullets .per-pagination-bullet{margin:var(--per-pagination-bullet-vertical-gap,6px) 0;display:block} .per-pagination-vertical.per-pagination-bullets .per-pagination-bullets-dynamic, .per-vertical>.per-pagination-bullets .per-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px} .per-pagination-vertical .per-pagination-bullets .per-pagination-bullets-dynamic .per-pagination-bullet, .per-vertical>.per-pagination-bullets .per-pagination-bullets-dynamic .per-pagination-bullet{display:inline-block;transition:.2s transform,.2s top} .per-horizontal>.per-pagination-bullets .per-pagination-bullet, .per-pagination-horizontal .per-pagination-bullets .per-pagination-bullet{ margin:0 var(--per-pagination-bullet-horizontal-gap,4px)} .per-horizontal> .per-pagination-bullets .per-pagination-bullets-dynamic,.per-pagination-horizontal .per-pagination-bullets .per-pagination-bullets-dynamic{ left:50%;transform:translateX(-50%); white-space:nowrap}.per-horizontal> .per-pagination-bullets.per-pagination-bullets-dynamic .per-pagination-bullet, .per-pagination-horizontal .per-pagination-bullets .per-pagination-bullets-dynamic .per-pagination-bullet{transition:.2s transform,.2s left} .per-horizontal.per-rtl> .per-pagination-bullets-dynamic .per-pagination-bullet{transition:.2s transform,.2s right} .per-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute} .per-pagination-progressbar .per-pagination-progressbar-fill{background:var(--per-pagination-color, var(--per-theme-color));position:absolute; left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top} .per-rtl .per-pagination-progressbar .per-pagination-progressbar-fill{transform-origin:right top} .per-horizontal>.per-pagination-progressbar, .per-pagination-progressbar.per-pagination-horizontal, .per-pagination-progressbar.per-pagination-vertical .per-pagination-progressbar-opposite, .per-vertical>.per-pagination-progressbar .per-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0} .per-horizontal> .per-pagination-progressbar .per-pagination-progressbar-opposite, .per-pagination-progressbar.per-pagination-horizontal .per-pagination-progressbar-opposite, .per-pagination-progressbar .per-pagination-vertical, .per-vertical> .per-pagination-progressbar{width:4px;height:100%;left:0;top:0} .per-pagination-lock{ display:none}.per-scrollbar{ border-radius:10px; position:relative;-ms-touch-action:none; background:rgba(0,0,0,.1)} .per-scrollbar-disabled>.per-scrollbar, .per-scrollbar.per-scrollbar-disabled{display:none!important} .per-horizontal>.per-scrollbar, .per-scrollbar.per-scrollbar-horizontal{position:absolute;left:1%; bottom:3px;z-index:50;height:5px;width:98%} .per-scrollbar.per-scrollbar-vertical, .per-vertical>.per-scrollbar{ position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%} .per-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0} .per-scrollbar-cursor-drag{cursor:move} .per-scrollbar-lock{display:none} .per-zoom-container{width:100%;height:100%;display:flex; justify-content:center;align-items:center;text-align:center} .per-zoom-container>canvas, .per-zoom-container>.per-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain} .per-slide-zoomed{cursor:move}.per-lazy-preloader{width:42px;height:42px; position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10; transform-origin:50%;box-sizing:border-box;border:4px solid var(--per-preloader-color,var(--per-theme-color));border-radius:50%;border-top-color:transparent} .per-watch-progress .per-slide-visible .per-lazy-preloader,.per:not(.per-watch-progress) .per-lazy-preloader{animation:per-preloader-spin 1s infinite linear} .per-lazy-preloader-white{--per-preloader-color:#fff} .per-lazy-preloader-black{--per-preloader-color:#000}@keyframes per-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} .per .per-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000} .per-free-mode>.per-per{transition-timing-function:ease-out;margin:0 auto} .per-grid>.per-per{flex-wrap:wrap}.per-grid-column>.per-pper{flex-wrap:wrap;flex-direction:column} .per-fade.per-free-mode .per-slide{transition-timing-function:ease-out} .per-fade .per-slide{pointer-events:none;transition-property:opacity} .per-fade .per-slide .per-slide{pointer-events:none}.per-fade .per-slide-active,.per-fade .per-slide-active .per-slide-active{pointer-events:auto} .per-cube{overflow:visible}.per-cube .per-slide{ pointer-events:none;-webkit-backface-visibility:hidden; backface-visibility:hidden;z-index:1;visibility:hidden; transform-origin:0 0;width:100%;height:100%} .per-cube .per-slide .per-slide{pointer-events:none} .per-cube.per-rtl .per-slide{transform-origin:100% 0} .per-cube .per-slide-active,.per-cube .per-slide-active .per-slide-active{pointer-events:auto}.per-cube .per-slide-active,.per-cube .per-slide-next,.per-cube .per-slide-next+.per-slide,.per-cube .per-slide-prev{pointer-events:auto;visibility:visible}.per-cube .per-slide-shadow-bottom,.per-cube .per-slide-shadow-left, .per-cube .per-slide-shadow-right,.per-cube .per-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .per-cube .per-cube-shadow{position:absolute;left:0 ;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.per-cube .per-cube-shadow:before{content:''; background:#000;position:absolute; left:0;top:0; bottom:0;right:0; filter:blur(50px)} .per-flip{overflow:visible} .per-flip .per-slide{pointer-events:none; -webkit-backface-visibility:hidden; backface-visibility:hidden;z-index:1} .per-flip .per-slide .per-slide{pointer-events:none} .per-flip .per-slide-active,.per-flip .per-slide-active .per-slide-active{pointer-events:auto} .per-flip .per-slide-shadow-bottom,.per-flip .per-slide-shadow-left,.per-flip .per-slide-shadow-right,.per-flip .per-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden; backface-visibility:hidden} .per-creative .per-slide{-webkit-backface-visibility:hidden; backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height} .per-cards{overflow:visible}.per-cards .per-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}