_slides.scss 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
  1. /**
  2. * Swiper 3.2.7
  3. * Most modern mobile touch slider and framework with hardware accelerated transitions
  4. *
  5. * http://www.idangero.us/swiper/
  6. *
  7. * Copyright 2015, Vladimir Kharlampidi
  8. * The iDangero.us
  9. * http://www.idangero.us/
  10. *
  11. * Licensed under MIT
  12. *
  13. * Released on: December 7, 2015
  14. */
  15. .swiper-container {
  16. margin: 0 auto;
  17. position: relative;
  18. overflow: hidden;
  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. -moz-box-orient: vertical;
  28. -ms-flex-direction: column;
  29. -webkit-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: -moz-box;
  39. display: -ms-flexbox;
  40. display: -webkit-flex;
  41. display: flex;
  42. -webkit-transition-property: -webkit-transform;
  43. -moz-transition-property: -moz-transform;
  44. -o-transition-property: -o-transform;
  45. -ms-transition-property: -ms-transform;
  46. transition-property: transform;
  47. -webkit-box-sizing: content-box;
  48. -moz-box-sizing: content-box;
  49. box-sizing: content-box;
  50. }
  51. .swiper-container-android .swiper-slide,
  52. .swiper-wrapper {
  53. -webkit-transform: translate3d(0px, 0, 0);
  54. -moz-transform: translate3d(0px, 0, 0);
  55. -o-transform: translate(0px, 0px);
  56. -ms-transform: translate3d(0px, 0, 0);
  57. transform: translate3d(0px, 0, 0);
  58. }
  59. .swiper-container-multirow > .swiper-wrapper {
  60. -webkit-box-lines: multiple;
  61. -moz-box-lines: multiple;
  62. -ms-flex-wrap: wrap;
  63. -webkit-flex-wrap: wrap;
  64. flex-wrap: wrap;
  65. }
  66. .swiper-container-free-mode > .swiper-wrapper {
  67. -webkit-transition-timing-function: ease-out;
  68. -moz-transition-timing-function: ease-out;
  69. -ms-transition-timing-function: ease-out;
  70. -o-transition-timing-function: ease-out;
  71. transition-timing-function: ease-out;
  72. margin: 0 auto;
  73. }
  74. .swiper-slide {
  75. display: block;
  76. -webkit-flex-shrink: 0;
  77. -ms-flex: 0 0 auto;
  78. flex-shrink: 0;
  79. width: 100%;
  80. height: 100%;
  81. position: relative;
  82. }
  83. /* Auto Height */
  84. .swiper-container-autoheight,
  85. .swiper-container-autoheight .swiper-slide {
  86. height: auto;
  87. }
  88. .swiper-container-autoheight .swiper-wrapper {
  89. -webkit-box-align: start;
  90. -ms-flex-align: start;
  91. -webkit-align-items: flex-start;
  92. align-items: flex-start;
  93. -webkit-transition-property: -webkit-transform, height;
  94. -moz-transition-property: -moz-transform;
  95. -o-transition-property: -o-transform;
  96. -ms-transition-property: -ms-transform;
  97. transition-property: transform, height;
  98. }
  99. /* a11y */
  100. .swiper-container .swiper-notification {
  101. position: absolute;
  102. left: 0;
  103. top: 0;
  104. pointer-events: none;
  105. opacity: 0;
  106. z-index: -1000;
  107. }
  108. /* IE10 Windows Phone 8 Fixes */
  109. .swiper-wp8-horizontal {
  110. -ms-touch-action: pan-y;
  111. touch-action: pan-y;
  112. }
  113. .swiper-wp8-vertical {
  114. -ms-touch-action: pan-x;
  115. touch-action: pan-x;
  116. }
  117. /* Arrows */
  118. .swiper-button-prev,
  119. .swiper-button-next {
  120. position: absolute;
  121. top: 50%;
  122. width: 27px;
  123. height: 44px;
  124. margin-top: -22px;
  125. z-index: 10;
  126. cursor: pointer;
  127. -moz-background-size: 27px 44px;
  128. -webkit-background-size: 27px 44px;
  129. background-size: 27px 44px;
  130. background-position: center;
  131. background-repeat: no-repeat;
  132. }
  133. .swiper-button-prev.swiper-button-disabled,
  134. .swiper-button-next.swiper-button-disabled {
  135. opacity: 0.35;
  136. cursor: auto;
  137. pointer-events: none;
  138. }
  139. .swiper-button-prev,
  140. .swiper-container-rtl .swiper-button-next {
  141. 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");
  142. left: 10px;
  143. right: auto;
  144. }
  145. .swiper-button-prev.swiper-button-black,
  146. .swiper-container-rtl .swiper-button-next.swiper-button-black {
  147. 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");
  148. }
  149. .swiper-button-prev.swiper-button-white,
  150. .swiper-container-rtl .swiper-button-next.swiper-button-white {
  151. 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");
  152. }
  153. .swiper-button-next,
  154. .swiper-container-rtl .swiper-button-prev {
  155. 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");
  156. right: 10px;
  157. left: auto;
  158. }
  159. .swiper-button-next.swiper-button-black,
  160. .swiper-container-rtl .swiper-button-prev.swiper-button-black {
  161. 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");
  162. }
  163. .swiper-button-next.swiper-button-white,
  164. .swiper-container-rtl .swiper-button-prev.swiper-button-white {
  165. 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");
  166. }
  167. /* Pagination Styles */
  168. .swiper-pagination {
  169. position: absolute;
  170. text-align: center;
  171. -webkit-transition: 300ms;
  172. -moz-transition: 300ms;
  173. -o-transition: 300ms;
  174. transition: 300ms;
  175. -webkit-transform: translate3d(0, 0, 0);
  176. -ms-transform: translate3d(0, 0, 0);
  177. -o-transform: translate3d(0, 0, 0);
  178. transform: translate3d(0, 0, 0);
  179. z-index: 10;
  180. }
  181. .swiper-pagination.swiper-pagination-hidden {
  182. opacity: 0;
  183. }
  184. .swiper-pagination-bullet {
  185. width: 8px;
  186. height: 8px;
  187. display: inline-block;
  188. border-radius: 100%;
  189. background: #000;
  190. opacity: 0.2;
  191. }
  192. button.swiper-pagination-bullet {
  193. border: none;
  194. margin: 0;
  195. padding: 0;
  196. box-shadow: none;
  197. -moz-appearance: none;
  198. -ms-appearance: none;
  199. -webkit-appearance: none;
  200. appearance: none;
  201. }
  202. .swiper-pagination-clickable .swiper-pagination-bullet {
  203. cursor: pointer;
  204. }
  205. .swiper-pagination-white .swiper-pagination-bullet {
  206. background: #fff;
  207. }
  208. .swiper-pagination-bullet-active {
  209. opacity: 1;
  210. }
  211. .swiper-pagination-white .swiper-pagination-bullet-active {
  212. background: #fff;
  213. }
  214. .swiper-pagination-black .swiper-pagination-bullet-active {
  215. background: #000;
  216. }
  217. .swiper-container-vertical > .swiper-pagination {
  218. right: 10px;
  219. top: 50%;
  220. -webkit-transform: translate3d(0px, -50%, 0);
  221. -moz-transform: translate3d(0px, -50%, 0);
  222. -o-transform: translate(0px, -50%);
  223. -ms-transform: translate3d(0px, -50%, 0);
  224. transform: translate3d(0px, -50%, 0);
  225. }
  226. .swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
  227. margin: 5px 0;
  228. display: block;
  229. }
  230. .swiper-container-horizontal > .swiper-pagination {
  231. bottom: 10px;
  232. left: 0;
  233. width: 100%;
  234. }
  235. .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
  236. margin: 0 5px;
  237. }
  238. /* 3D Container */
  239. .swiper-container-3d {
  240. -webkit-perspective: 1200px;
  241. -moz-perspective: 1200px;
  242. -o-perspective: 1200px;
  243. perspective: 1200px;
  244. }
  245. .swiper-container-3d .swiper-wrapper,
  246. .swiper-container-3d .swiper-slide,
  247. .swiper-container-3d .swiper-slide-shadow-left,
  248. .swiper-container-3d .swiper-slide-shadow-right,
  249. .swiper-container-3d .swiper-slide-shadow-top,
  250. .swiper-container-3d .swiper-slide-shadow-bottom,
  251. .swiper-container-3d .swiper-cube-shadow {
  252. -webkit-transform-style: preserve-3d;
  253. -moz-transform-style: preserve-3d;
  254. -ms-transform-style: preserve-3d;
  255. transform-style: preserve-3d;
  256. }
  257. .swiper-container-3d .swiper-slide-shadow-left,
  258. .swiper-container-3d .swiper-slide-shadow-right,
  259. .swiper-container-3d .swiper-slide-shadow-top,
  260. .swiper-container-3d .swiper-slide-shadow-bottom {
  261. position: absolute;
  262. left: 0;
  263. top: 0;
  264. width: 100%;
  265. height: 100%;
  266. pointer-events: none;
  267. z-index: 10;
  268. }
  269. .swiper-container-3d .swiper-slide-shadow-left {
  270. background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  271. /* Safari 4+, Chrome */
  272. background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  273. /* Chrome 10+, Safari 5.1+, iOS 5+ */
  274. background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  275. /* Firefox 3.6-15 */
  276. background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  277. /* Opera 11.10-12.00 */
  278. background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  279. /* Firefox 16+, IE10, Opera 12.50+ */
  280. }
  281. .swiper-container-3d .swiper-slide-shadow-right {
  282. background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  283. /* Safari 4+, Chrome */
  284. background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  285. /* Chrome 10+, Safari 5.1+, iOS 5+ */
  286. background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  287. /* Firefox 3.6-15 */
  288. background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  289. /* Opera 11.10-12.00 */
  290. background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  291. /* Firefox 16+, IE10, Opera 12.50+ */
  292. }
  293. .swiper-container-3d .swiper-slide-shadow-top {
  294. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  295. /* Safari 4+, Chrome */
  296. background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  297. /* Chrome 10+, Safari 5.1+, iOS 5+ */
  298. background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  299. /* Firefox 3.6-15 */
  300. background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  301. /* Opera 11.10-12.00 */
  302. background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  303. /* Firefox 16+, IE10, Opera 12.50+ */
  304. }
  305. .swiper-container-3d .swiper-slide-shadow-bottom {
  306. background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  307. /* Safari 4+, Chrome */
  308. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  309. /* Chrome 10+, Safari 5.1+, iOS 5+ */
  310. background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  311. /* Firefox 3.6-15 */
  312. background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  313. /* Opera 11.10-12.00 */
  314. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  315. /* Firefox 16+, IE10, Opera 12.50+ */
  316. }
  317. /* Coverflow */
  318. .swiper-container-coverflow .swiper-wrapper {
  319. /* Windows 8 IE 10 fix */
  320. -ms-perspective: 1200px;
  321. }
  322. /* Fade */
  323. .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  324. -webkit-transition-timing-function: ease-out;
  325. -moz-transition-timing-function: ease-out;
  326. -ms-transition-timing-function: ease-out;
  327. -o-transition-timing-function: ease-out;
  328. transition-timing-function: ease-out;
  329. }
  330. .swiper-container-fade .swiper-slide {
  331. pointer-events: none;
  332. }
  333. .swiper-container-fade .swiper-slide .swiper-slide {
  334. pointer-events: none;
  335. }
  336. .swiper-container-fade .swiper-slide-active,
  337. .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  338. pointer-events: auto;
  339. }
  340. /* Cube */
  341. .swiper-container-cube {
  342. overflow: visible;
  343. }
  344. .swiper-container-cube .swiper-slide {
  345. pointer-events: none;
  346. visibility: hidden;
  347. -webkit-transform-origin: 0 0;
  348. -moz-transform-origin: 0 0;
  349. -ms-transform-origin: 0 0;
  350. transform-origin: 0 0;
  351. -webkit-backface-visibility: hidden;
  352. -moz-backface-visibility: hidden;
  353. -ms-backface-visibility: hidden;
  354. backface-visibility: hidden;
  355. width: 100%;
  356. height: 100%;
  357. z-index: 1;
  358. }
  359. .swiper-container-cube.swiper-container-rtl .swiper-slide {
  360. -webkit-transform-origin: 100% 0;
  361. -moz-transform-origin: 100% 0;
  362. -ms-transform-origin: 100% 0;
  363. transform-origin: 100% 0;
  364. }
  365. .swiper-container-cube .swiper-slide-active,
  366. .swiper-container-cube .swiper-slide-next,
  367. .swiper-container-cube .swiper-slide-prev,
  368. .swiper-container-cube .swiper-slide-next + .swiper-slide {
  369. pointer-events: auto;
  370. visibility: visible;
  371. }
  372. .swiper-container-cube .swiper-slide-shadow-top,
  373. .swiper-container-cube .swiper-slide-shadow-bottom,
  374. .swiper-container-cube .swiper-slide-shadow-left,
  375. .swiper-container-cube .swiper-slide-shadow-right {
  376. z-index: 0;
  377. -webkit-backface-visibility: hidden;
  378. -moz-backface-visibility: hidden;
  379. -ms-backface-visibility: hidden;
  380. backface-visibility: hidden;
  381. }
  382. .swiper-container-cube .swiper-cube-shadow {
  383. position: absolute;
  384. left: 0;
  385. bottom: 0px;
  386. width: 100%;
  387. height: 100%;
  388. background: #000;
  389. opacity: 0.6;
  390. -webkit-filter: blur(50px);
  391. filter: blur(50px);
  392. z-index: 0;
  393. }
  394. /* Scrollbar */
  395. .swiper-scrollbar {
  396. border-radius: 10px;
  397. position: relative;
  398. -ms-touch-action: none;
  399. background: rgba(0, 0, 0, 0.1);
  400. }
  401. .swiper-container-horizontal > .swiper-scrollbar {
  402. position: absolute;
  403. left: 1%;
  404. bottom: 3px;
  405. z-index: 50;
  406. height: 5px;
  407. width: 98%;
  408. }
  409. .swiper-container-vertical > .swiper-scrollbar {
  410. position: absolute;
  411. right: 3px;
  412. top: 1%;
  413. z-index: 50;
  414. width: 5px;
  415. height: 98%;
  416. }
  417. .swiper-scrollbar-drag {
  418. height: 100%;
  419. width: 100%;
  420. position: relative;
  421. background: rgba(0, 0, 0, 0.5);
  422. border-radius: 10px;
  423. left: 0;
  424. top: 0;
  425. }
  426. .swiper-scrollbar-cursor-drag {
  427. cursor: move;
  428. }
  429. /* Preloader */
  430. .swiper-lazy-preloader {
  431. width: 42px;
  432. height: 42px;
  433. position: absolute;
  434. left: 50%;
  435. top: 50%;
  436. margin-left: -21px;
  437. margin-top: -21px;
  438. z-index: 10;
  439. -webkit-transform-origin: 50%;
  440. -moz-transform-origin: 50%;
  441. transform-origin: 50%;
  442. -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  443. -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  444. animation: swiper-preloader-spin 1s steps(12, end) infinite;
  445. }
  446. .swiper-lazy-preloader:after {
  447. display: block;
  448. content: "";
  449. width: 100%;
  450. height: 100%;
  451. 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");
  452. background-position: 50%;
  453. -webkit-background-size: 100%;
  454. background-size: 100%;
  455. background-repeat: no-repeat;
  456. }
  457. .swiper-lazy-preloader-white:after {
  458. 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");
  459. }
  460. @-webkit-keyframes swiper-preloader-spin {
  461. 100% {
  462. -webkit-transform: rotate(360deg);
  463. }
  464. }
  465. @keyframes swiper-preloader-spin {
  466. 100% {
  467. transform: rotate(360deg);
  468. }
  469. }
  470. ion-slides {
  471. width: 100%;
  472. height: 100%;
  473. display: block;
  474. }
  475. .slide-zoom {
  476. display: block;
  477. width: 100%;
  478. text-align: center;
  479. }
  480. .swiper-container {
  481. //position: absolute;
  482. //left: 0;
  483. //top: 0;
  484. width: 100%;
  485. height: 100%;
  486. padding: 0;
  487. //display: flex;
  488. overflow: hidden;
  489. }
  490. .swiper-wrapper {
  491. position: absolute;
  492. left: 0;
  493. top: 0;
  494. width: 100%;
  495. height: 100%;
  496. padding: 0;
  497. //display: flex;
  498. }
  499. .swiper-container {
  500. //width: 100%;
  501. //height: 100%;
  502. }
  503. .swiper-slide {
  504. width: 100%;
  505. height: 100%;
  506. box-sizing: border-box;
  507. //text-align: center;
  508. //font-size: 18px;
  509. //background: #fff;
  510. /* Center slide text vertically */
  511. //display: flex;
  512. //justify-content: center;
  513. //align-items: center;
  514. img {
  515. width: auto;
  516. height: auto;
  517. max-width: 100%;
  518. max-height: 100%;
  519. }
  520. }