swiper.css 22 KB

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