swiper.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
  1. /**
  2. * Swiper 4.5.3
  3. * Most modern mobile touch slider and framework with hardware accelerated transitions
  4. * http://www.idangero.us/swiper/
  5. *
  6. * Copyright 2014-2019 Vladimir Kharlampidi
  7. *
  8. * Released under the MIT License
  9. *
  10. * Released on: October 16, 2019
  11. */
  12. .swiper-container {
  13. margin-left: auto;
  14. margin-right: auto;
  15. position: relative;
  16. overflow: hidden;
  17. list-style: none;
  18. padding: 0;
  19. /* Fix of Webkit flickering */
  20. z-index: 1;
  21. }
  22. .swiper-container-no-flexbox .swiper-slide {
  23. float: left;
  24. }
  25. .swiper-container-vertical > .swiper-wrapper {
  26. -webkit-box-orient: vertical;
  27. -webkit-box-direction: normal;
  28. -webkit-flex-direction: column;
  29. -ms-flex-direction: column;
  30. flex-direction: column;
  31. }
  32. .swiper-wrapper {
  33. position: relative;
  34. width: 100%;
  35. height: 100%;
  36. z-index: 1;
  37. display: -webkit-box;
  38. display: -webkit-flex;
  39. display: -ms-flexbox;
  40. display: flex;
  41. -webkit-transition-property: -webkit-transform;
  42. transition-property: -webkit-transform;
  43. -o-transition-property: transform;
  44. transition-property: transform;
  45. transition-property: transform, -webkit-transform;
  46. -webkit-box-sizing: content-box;
  47. box-sizing: content-box;
  48. }
  49. .swiper-container-android .swiper-slide,
  50. .swiper-wrapper {
  51. -webkit-transform: translate3d(0px, 0, 0);
  52. transform: translate3d(0px, 0, 0);
  53. }
  54. .swiper-container-multirow > .swiper-wrapper {
  55. -webkit-flex-wrap: wrap;
  56. -ms-flex-wrap: wrap;
  57. flex-wrap: wrap;
  58. }
  59. .swiper-container-free-mode > .swiper-wrapper {
  60. -webkit-transition-timing-function: ease-out;
  61. -o-transition-timing-function: ease-out;
  62. transition-timing-function: ease-out;
  63. margin: 0 auto;
  64. }
  65. .swiper-slide {
  66. -webkit-flex-shrink: 0;
  67. -ms-flex-negative: 0;
  68. flex-shrink: 0;
  69. width: 100%;
  70. height: 100%;
  71. position: relative;
  72. -webkit-transition-property: -webkit-transform;
  73. transition-property: -webkit-transform;
  74. -o-transition-property: transform;
  75. transition-property: transform;
  76. transition-property: transform, -webkit-transform;
  77. }
  78. .swiper-slide-invisible-blank {
  79. visibility: hidden;
  80. }
  81. /* Auto Height */
  82. .swiper-container-autoheight,
  83. .swiper-container-autoheight .swiper-slide {
  84. height: auto;
  85. }
  86. .swiper-container-autoheight .swiper-wrapper {
  87. -webkit-box-align: start;
  88. -webkit-align-items: flex-start;
  89. -ms-flex-align: start;
  90. align-items: flex-start;
  91. -webkit-transition-property: height, -webkit-transform;
  92. transition-property: height, -webkit-transform;
  93. -o-transition-property: transform, height;
  94. transition-property: transform, height;
  95. transition-property: transform, height, -webkit-transform;
  96. }
  97. /* 3D Effects */
  98. .swiper-container-3d {
  99. -webkit-perspective: 1200px;
  100. perspective: 1200px;
  101. }
  102. .swiper-container-3d .swiper-wrapper,
  103. .swiper-container-3d .swiper-slide,
  104. .swiper-container-3d .swiper-slide-shadow-left,
  105. .swiper-container-3d .swiper-slide-shadow-right,
  106. .swiper-container-3d .swiper-slide-shadow-top,
  107. .swiper-container-3d .swiper-slide-shadow-bottom,
  108. .swiper-container-3d .swiper-cube-shadow {
  109. -webkit-transform-style: preserve-3d;
  110. transform-style: preserve-3d;
  111. }
  112. .swiper-container-3d .swiper-slide-shadow-left,
  113. .swiper-container-3d .swiper-slide-shadow-right,
  114. .swiper-container-3d .swiper-slide-shadow-top,
  115. .swiper-container-3d .swiper-slide-shadow-bottom {
  116. position: absolute;
  117. left: 0;
  118. top: 0;
  119. width: 100%;
  120. height: 100%;
  121. pointer-events: none;
  122. z-index: 10;
  123. }
  124. .swiper-container-3d .swiper-slide-shadow-left {
  125. background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  126. background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  127. background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  128. background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  129. }
  130. .swiper-container-3d .swiper-slide-shadow-right {
  131. background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  132. background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  133. background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  134. background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  135. }
  136. .swiper-container-3d .swiper-slide-shadow-top {
  137. background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  138. background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  139. background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  140. background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  141. }
  142. .swiper-container-3d .swiper-slide-shadow-bottom {
  143. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  144. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  145. background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  146. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  147. }
  148. /* IE10 Windows Phone 8 Fixes */
  149. .swiper-container-wp8-horizontal,
  150. .swiper-container-wp8-horizontal > .swiper-wrapper {
  151. -ms-touch-action: pan-y;
  152. touch-action: pan-y;
  153. }
  154. .swiper-container-wp8-vertical,
  155. .swiper-container-wp8-vertical > .swiper-wrapper {
  156. -ms-touch-action: pan-x;
  157. touch-action: pan-x;
  158. }
  159. .swiper-button-prev,
  160. .swiper-button-next {
  161. position: absolute;
  162. top: 50%;
  163. width: 27px;
  164. height: 44px;
  165. margin-top: -22px;
  166. z-index: 10;
  167. cursor: pointer;
  168. background-size: 27px 44px;
  169. background-position: center;
  170. background-repeat: no-repeat;
  171. }
  172. .swiper-button-prev.swiper-button-disabled,
  173. .swiper-button-next.swiper-button-disabled {
  174. opacity: 0.35;
  175. cursor: auto;
  176. pointer-events: none;
  177. }
  178. .swiper-button-prev,
  179. .swiper-container-rtl .swiper-button-next {
  180. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  181. left: 10px;
  182. right: auto;
  183. }
  184. .swiper-button-next,
  185. .swiper-container-rtl .swiper-button-prev {
  186. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  187. right: 10px;
  188. left: auto;
  189. }
  190. .swiper-button-prev.swiper-button-white,
  191. .swiper-container-rtl .swiper-button-next.swiper-button-white {
  192. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  193. }
  194. .swiper-button-next.swiper-button-white,
  195. .swiper-container-rtl .swiper-button-prev.swiper-button-white {
  196. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  197. }
  198. .swiper-button-prev.swiper-button-black,
  199. .swiper-container-rtl .swiper-button-next.swiper-button-black {
  200. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
  201. }
  202. .swiper-button-next.swiper-button-black,
  203. .swiper-container-rtl .swiper-button-prev.swiper-button-black {
  204. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
  205. }
  206. .swiper-button-lock {
  207. display: none;
  208. }
  209. .swiper-pagination {
  210. position: absolute;
  211. text-align: center;
  212. -webkit-transition: 300ms opacity;
  213. -o-transition: 300ms opacity;
  214. transition: 300ms opacity;
  215. -webkit-transform: translate3d(0, 0, 0);
  216. transform: translate3d(0, 0, 0);
  217. z-index: 10;
  218. }
  219. .swiper-pagination.swiper-pagination-hidden {
  220. opacity: 0;
  221. }
  222. /* Common Styles */
  223. .swiper-pagination-fraction,
  224. .swiper-pagination-custom,
  225. .swiper-container-horizontal > .swiper-pagination-bullets {
  226. bottom: 10px;
  227. left: 0;
  228. width: 100%;
  229. }
  230. /* Bullets */
  231. .swiper-pagination-bullets-dynamic {
  232. overflow: hidden;
  233. font-size: 0;
  234. }
  235. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  236. -webkit-transform: scale(0.33);
  237. -ms-transform: scale(0.33);
  238. transform: scale(0.33);
  239. position: relative;
  240. }
  241. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  242. -webkit-transform: scale(1);
  243. -ms-transform: scale(1);
  244. transform: scale(1);
  245. }
  246. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  247. -webkit-transform: scale(1);
  248. -ms-transform: scale(1);
  249. transform: scale(1);
  250. }
  251. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  252. -webkit-transform: scale(0.66);
  253. -ms-transform: scale(0.66);
  254. transform: scale(0.66);
  255. }
  256. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  257. -webkit-transform: scale(0.33);
  258. -ms-transform: scale(0.33);
  259. transform: scale(0.33);
  260. }
  261. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  262. -webkit-transform: scale(0.66);
  263. -ms-transform: scale(0.66);
  264. transform: scale(0.66);
  265. }
  266. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  267. -webkit-transform: scale(0.33);
  268. -ms-transform: scale(0.33);
  269. transform: scale(0.33);
  270. }
  271. .swiper-pagination-bullet {
  272. width: 8px;
  273. height: 8px;
  274. display: inline-block;
  275. border-radius: 100%;
  276. background: #000;
  277. opacity: 0.2;
  278. }
  279. button.swiper-pagination-bullet {
  280. border: none;
  281. margin: 0;
  282. padding: 0;
  283. -webkit-box-shadow: none;
  284. box-shadow: none;
  285. -webkit-appearance: none;
  286. -moz-appearance: none;
  287. appearance: none;
  288. }
  289. .swiper-pagination-clickable .swiper-pagination-bullet {
  290. cursor: pointer;
  291. }
  292. .swiper-pagination-bullet-active {
  293. opacity: 1;
  294. background: #007aff;
  295. }
  296. .swiper-container-vertical > .swiper-pagination-bullets {
  297. right: 10px;
  298. top: 50%;
  299. -webkit-transform: translate3d(0px, -50%, 0);
  300. transform: translate3d(0px, -50%, 0);
  301. }
  302. .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  303. margin: 6px 0;
  304. display: block;
  305. }
  306. .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  307. top: 50%;
  308. -webkit-transform: translateY(-50%);
  309. -ms-transform: translateY(-50%);
  310. transform: translateY(-50%);
  311. width: 8px;
  312. }
  313. .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  314. display: inline-block;
  315. -webkit-transition: 200ms top, 200ms -webkit-transform;
  316. transition: 200ms top, 200ms -webkit-transform;
  317. -o-transition: 200ms transform, 200ms top;
  318. transition: 200ms transform, 200ms top;
  319. transition: 200ms transform, 200ms top, 200ms -webkit-transform;
  320. }
  321. .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  322. margin: 0 4px;
  323. }
  324. .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  325. left: 50%;
  326. -webkit-transform: translateX(-50%);
  327. -ms-transform: translateX(-50%);
  328. transform: translateX(-50%);
  329. white-space: nowrap;
  330. }
  331. .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  332. -webkit-transition: 200ms left, 200ms -webkit-transform;
  333. transition: 200ms left, 200ms -webkit-transform;
  334. -o-transition: 200ms transform, 200ms left;
  335. transition: 200ms transform, 200ms left;
  336. transition: 200ms transform, 200ms left, 200ms -webkit-transform;
  337. }
  338. .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  339. -webkit-transition: 200ms right, 200ms -webkit-transform;
  340. transition: 200ms right, 200ms -webkit-transform;
  341. -o-transition: 200ms transform, 200ms right;
  342. transition: 200ms transform, 200ms right;
  343. transition: 200ms transform, 200ms right, 200ms -webkit-transform;
  344. }
  345. /* Progress */
  346. .swiper-pagination-progressbar {
  347. background: rgba(0, 0, 0, 0.25);
  348. position: absolute;
  349. }
  350. .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  351. background: #007aff;
  352. position: absolute;
  353. left: 0;
  354. top: 0;
  355. width: 100%;
  356. height: 100%;
  357. -webkit-transform: scale(0);
  358. -ms-transform: scale(0);
  359. transform: scale(0);
  360. -webkit-transform-origin: left top;
  361. -ms-transform-origin: left top;
  362. transform-origin: left top;
  363. }
  364. .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  365. -webkit-transform-origin: right top;
  366. -ms-transform-origin: right top;
  367. transform-origin: right top;
  368. }
  369. .swiper-container-horizontal > .swiper-pagination-progressbar,
  370. .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  371. width: 100%;
  372. height: 4px;
  373. left: 0;
  374. top: 0;
  375. }
  376. .swiper-container-vertical > .swiper-pagination-progressbar,
  377. .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  378. width: 4px;
  379. height: 100%;
  380. left: 0;
  381. top: 0;
  382. }
  383. .swiper-pagination-white .swiper-pagination-bullet-active {
  384. background: #ffffff;
  385. }
  386. .swiper-pagination-progressbar.swiper-pagination-white {
  387. background: rgba(255, 255, 255, 0.25);
  388. }
  389. .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
  390. background: #ffffff;
  391. }
  392. .swiper-pagination-black .swiper-pagination-bullet-active {
  393. background: #000000;
  394. }
  395. .swiper-pagination-progressbar.swiper-pagination-black {
  396. background: rgba(0, 0, 0, 0.25);
  397. }
  398. .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
  399. background: #000000;
  400. }
  401. .swiper-pagination-lock {
  402. display: none;
  403. }
  404. /* Scrollbar */
  405. .swiper-scrollbar {
  406. border-radius: 10px;
  407. position: relative;
  408. -ms-touch-action: none;
  409. background: rgba(0, 0, 0, 0.1);
  410. }
  411. .swiper-container-horizontal > .swiper-scrollbar {
  412. position: absolute;
  413. left: 1%;
  414. bottom: 3px;
  415. z-index: 50;
  416. height: 5px;
  417. width: 98%;
  418. }
  419. .swiper-container-vertical > .swiper-scrollbar {
  420. position: absolute;
  421. right: 3px;
  422. top: 1%;
  423. z-index: 50;
  424. width: 5px;
  425. height: 98%;
  426. }
  427. .swiper-scrollbar-drag {
  428. height: 100%;
  429. width: 100%;
  430. position: relative;
  431. background: rgba(0, 0, 0, 0.5);
  432. border-radius: 10px;
  433. left: 0;
  434. top: 0;
  435. }
  436. .swiper-scrollbar-cursor-drag {
  437. cursor: move;
  438. }
  439. .swiper-scrollbar-lock {
  440. display: none;
  441. }
  442. .swiper-zoom-container {
  443. width: 100%;
  444. height: 100%;
  445. display: -webkit-box;
  446. display: -webkit-flex;
  447. display: -ms-flexbox;
  448. display: flex;
  449. -webkit-box-pack: center;
  450. -webkit-justify-content: center;
  451. -ms-flex-pack: center;
  452. justify-content: center;
  453. -webkit-box-align: center;
  454. -webkit-align-items: center;
  455. -ms-flex-align: center;
  456. align-items: center;
  457. text-align: center;
  458. }
  459. .swiper-zoom-container > img,
  460. .swiper-zoom-container > svg,
  461. .swiper-zoom-container > canvas {
  462. max-width: 100%;
  463. max-height: 100%;
  464. -o-object-fit: contain;
  465. object-fit: contain;
  466. }
  467. .swiper-slide-zoomed {
  468. cursor: move;
  469. }
  470. /* Preloader */
  471. .swiper-lazy-preloader {
  472. width: 42px;
  473. height: 42px;
  474. position: absolute;
  475. left: 50%;
  476. top: 50%;
  477. margin-left: -21px;
  478. margin-top: -21px;
  479. z-index: 10;
  480. -webkit-transform-origin: 50%;
  481. -ms-transform-origin: 50%;
  482. transform-origin: 50%;
  483. -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  484. animation: swiper-preloader-spin 1s steps(12, end) infinite;
  485. }
  486. .swiper-lazy-preloader:after {
  487. display: block;
  488. content: '';
  489. width: 100%;
  490. height: 100%;
  491. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  492. background-position: 50%;
  493. background-size: 100%;
  494. background-repeat: no-repeat;
  495. }
  496. .swiper-lazy-preloader-white:after {
  497. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  498. }
  499. @-webkit-keyframes swiper-preloader-spin {
  500. 100% {
  501. -webkit-transform: rotate(360deg);
  502. transform: rotate(360deg);
  503. }
  504. }
  505. @keyframes swiper-preloader-spin {
  506. 100% {
  507. -webkit-transform: rotate(360deg);
  508. transform: rotate(360deg);
  509. }
  510. }
  511. /* a11y */
  512. .swiper-container .swiper-notification {
  513. position: absolute;
  514. left: 0;
  515. top: 0;
  516. pointer-events: none;
  517. opacity: 0;
  518. z-index: -1000;
  519. }
  520. .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  521. -webkit-transition-timing-function: ease-out;
  522. -o-transition-timing-function: ease-out;
  523. transition-timing-function: ease-out;
  524. }
  525. .swiper-container-fade .swiper-slide {
  526. pointer-events: none;
  527. -webkit-transition-property: opacity;
  528. -o-transition-property: opacity;
  529. transition-property: opacity;
  530. }
  531. .swiper-container-fade .swiper-slide .swiper-slide {
  532. pointer-events: none;
  533. }
  534. .swiper-container-fade .swiper-slide-active,
  535. .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  536. pointer-events: auto;
  537. }
  538. .swiper-container-cube {
  539. overflow: visible;
  540. }
  541. .swiper-container-cube .swiper-slide {
  542. pointer-events: none;
  543. -webkit-backface-visibility: hidden;
  544. backface-visibility: hidden;
  545. z-index: 1;
  546. visibility: hidden;
  547. -webkit-transform-origin: 0 0;
  548. -ms-transform-origin: 0 0;
  549. transform-origin: 0 0;
  550. width: 100%;
  551. height: 100%;
  552. }
  553. .swiper-container-cube .swiper-slide .swiper-slide {
  554. pointer-events: none;
  555. }
  556. .swiper-container-cube.swiper-container-rtl .swiper-slide {
  557. -webkit-transform-origin: 100% 0;
  558. -ms-transform-origin: 100% 0;
  559. transform-origin: 100% 0;
  560. }
  561. .swiper-container-cube .swiper-slide-active,
  562. .swiper-container-cube .swiper-slide-active .swiper-slide-active {
  563. pointer-events: auto;
  564. }
  565. .swiper-container-cube .swiper-slide-active,
  566. .swiper-container-cube .swiper-slide-next,
  567. .swiper-container-cube .swiper-slide-prev,
  568. .swiper-container-cube .swiper-slide-next + .swiper-slide {
  569. pointer-events: auto;
  570. visibility: visible;
  571. }
  572. .swiper-container-cube .swiper-slide-shadow-top,
  573. .swiper-container-cube .swiper-slide-shadow-bottom,
  574. .swiper-container-cube .swiper-slide-shadow-left,
  575. .swiper-container-cube .swiper-slide-shadow-right {
  576. z-index: 0;
  577. -webkit-backface-visibility: hidden;
  578. backface-visibility: hidden;
  579. }
  580. .swiper-container-cube .swiper-cube-shadow {
  581. position: absolute;
  582. left: 0;
  583. bottom: 0px;
  584. width: 100%;
  585. height: 100%;
  586. background: #000;
  587. opacity: 0.6;
  588. -webkit-filter: blur(50px);
  589. filter: blur(50px);
  590. z-index: 0;
  591. }
  592. .swiper-container-flip {
  593. overflow: visible;
  594. }
  595. .swiper-container-flip .swiper-slide {
  596. pointer-events: none;
  597. -webkit-backface-visibility: hidden;
  598. backface-visibility: hidden;
  599. z-index: 1;
  600. }
  601. .swiper-container-flip .swiper-slide .swiper-slide {
  602. pointer-events: none;
  603. }
  604. .swiper-container-flip .swiper-slide-active,
  605. .swiper-container-flip .swiper-slide-active .swiper-slide-active {
  606. pointer-events: auto;
  607. }
  608. .swiper-container-flip .swiper-slide-shadow-top,
  609. .swiper-container-flip .swiper-slide-shadow-bottom,
  610. .swiper-container-flip .swiper-slide-shadow-left,
  611. .swiper-container-flip .swiper-slide-shadow-right {
  612. z-index: 0;
  613. -webkit-backface-visibility: hidden;
  614. backface-visibility: hidden;
  615. }
  616. .swiper-container-coverflow .swiper-wrapper {
  617. /* Windows 8 IE 10 fix */
  618. -ms-perspective: 1200px;
  619. }