You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

899 lines
19 KiB

2 years ago
  1. body.compensate-for-scrollbar {
  2. overflow: hidden;
  3. }
  4. .fancybox-active {
  5. height: auto;
  6. }
  7. .fancybox-is-hidden {
  8. left: -9999px;
  9. margin: 0;
  10. position: absolute !important;
  11. top: -9999px;
  12. visibility: hidden;
  13. }
  14. .fancybox-container {
  15. -webkit-backface-visibility: hidden;
  16. backface-visibility: hidden;
  17. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  18. height: 100%;
  19. left: 0;
  20. position: fixed;
  21. -webkit-tap-highlight-color: transparent;
  22. top: 0;
  23. -webkit-transform: translateZ(0);
  24. transform: translateZ(0);
  25. width: 100%;
  26. z-index: 99992;
  27. }
  28. .fancybox-container * {
  29. box-sizing: border-box;
  30. }
  31. .fancybox-outer,
  32. .fancybox-inner,
  33. .fancybox-bg,
  34. .fancybox-stage {
  35. bottom: 0;
  36. left: 0;
  37. position: absolute;
  38. right: 0;
  39. top: 0;
  40. }
  41. .fancybox-outer {
  42. -webkit-overflow-scrolling: touch;
  43. overflow-y: auto;
  44. }
  45. .fancybox-bg {
  46. background: #1e1e1e;
  47. opacity: 0;
  48. transition-duration: inherit;
  49. transition-property: opacity;
  50. transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
  51. }
  52. .fancybox-is-open .fancybox-bg {
  53. opacity: .87;
  54. transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  55. }
  56. .fancybox-infobar,
  57. .fancybox-toolbar,
  58. .fancybox-caption,
  59. .fancybox-navigation .fancybox-button {
  60. direction: ltr;
  61. opacity: 0;
  62. position: absolute;
  63. transition: opacity .25s, visibility 0s linear .25s;
  64. visibility: hidden;
  65. z-index: 99997;
  66. }
  67. .fancybox-show-infobar .fancybox-infobar,
  68. .fancybox-show-toolbar .fancybox-toolbar,
  69. .fancybox-show-caption .fancybox-caption,
  70. .fancybox-show-nav .fancybox-navigation .fancybox-button {
  71. opacity: 1;
  72. transition: opacity .25s, visibility 0s;
  73. visibility: visible;
  74. }
  75. .fancybox-infobar {
  76. color: #ccc;
  77. font-size: 13px;
  78. -webkit-font-smoothing: subpixel-antialiased;
  79. height: 44px;
  80. left: 0;
  81. line-height: 44px;
  82. min-width: 44px;
  83. mix-blend-mode: difference;
  84. padding: 0 10px;
  85. pointer-events: none;
  86. text-align: center;
  87. top: 0;
  88. -webkit-touch-callout: none;
  89. -webkit-user-select: none;
  90. -moz-user-select: none;
  91. -ms-user-select: none;
  92. user-select: none;
  93. }
  94. .fancybox-toolbar {
  95. right: 0;
  96. top: 0;
  97. }
  98. .fancybox-stage {
  99. direction: ltr;
  100. overflow: visible;
  101. -webkit-transform: translate3d(0, 0, 0);
  102. z-index: 99994;
  103. }
  104. .fancybox-is-open .fancybox-stage {
  105. overflow: hidden;
  106. }
  107. .fancybox-slide {
  108. -webkit-backface-visibility: hidden;
  109. backface-visibility: hidden;
  110. display: none;
  111. height: 100%;
  112. left: 0;
  113. outline: none;
  114. overflow: auto;
  115. -webkit-overflow-scrolling: touch;
  116. padding: 44px;
  117. position: absolute;
  118. text-align: center;
  119. top: 0;
  120. transition-property: opacity, -webkit-transform;
  121. transition-property: transform, opacity;
  122. transition-property: transform, opacity, -webkit-transform;
  123. white-space: normal;
  124. width: 100%;
  125. z-index: 99994;
  126. }
  127. .fancybox-slide::before {
  128. content: '';
  129. display: inline-block;
  130. height: 100%;
  131. margin-right: -.25em;
  132. vertical-align: middle;
  133. width: 0;
  134. }
  135. .fancybox-is-sliding .fancybox-slide,
  136. .fancybox-slide--previous,
  137. .fancybox-slide--current,
  138. .fancybox-slide--next {
  139. display: block;
  140. }
  141. .fancybox-slide--next {
  142. z-index: 99995;
  143. }
  144. .fancybox-slide--image {
  145. overflow: visible;
  146. padding: 44px 0;
  147. }
  148. .fancybox-slide--image::before {
  149. display: none;
  150. }
  151. .fancybox-slide--html {
  152. padding: 6px 6px 0 6px;
  153. }
  154. .fancybox-slide--iframe {
  155. padding: 44px 44px 0;
  156. }
  157. .fancybox-content {
  158. background: #fff;
  159. display: inline-block;
  160. margin: 0 0 6px 0;
  161. max-width: 100%;
  162. overflow: auto;
  163. padding: 0;
  164. padding: 24px;
  165. position: relative;
  166. text-align: left;
  167. vertical-align: middle;
  168. }
  169. .fancybox-slide--image .fancybox-content {
  170. -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
  171. animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
  172. -webkit-backface-visibility: hidden;
  173. backface-visibility: hidden;
  174. background: transparent;
  175. background-repeat: no-repeat;
  176. background-size: 100% 100%;
  177. left: 0;
  178. margin: 0;
  179. max-width: none;
  180. overflow: visible;
  181. padding: 0;
  182. position: absolute;
  183. top: 0;
  184. -webkit-transform-origin: top left;
  185. -ms-transform-origin: top left;
  186. transform-origin: top left;
  187. transition-property: opacity, -webkit-transform;
  188. transition-property: transform, opacity;
  189. transition-property: transform, opacity, -webkit-transform;
  190. -webkit-user-select: none;
  191. -moz-user-select: none;
  192. -ms-user-select: none;
  193. user-select: none;
  194. z-index: 99995;
  195. }
  196. .fancybox-can-zoomOut .fancybox-content {
  197. cursor: -webkit-zoom-out;
  198. cursor: zoom-out;
  199. }
  200. .fancybox-can-zoomIn .fancybox-content {
  201. cursor: -webkit-zoom-in;
  202. cursor: zoom-in;
  203. }
  204. .fancybox-can-drag .fancybox-content {
  205. cursor: -webkit-grab;
  206. cursor: grab;
  207. }
  208. .fancybox-is-dragging .fancybox-content {
  209. cursor: -webkit-grabbing;
  210. cursor: grabbing;
  211. }
  212. .fancybox-container [data-selectable='true'] {
  213. cursor: text;
  214. }
  215. .fancybox-image,
  216. .fancybox-spaceball {
  217. background: transparent;
  218. border: 0;
  219. height: 100%;
  220. left: 0;
  221. margin: 0;
  222. max-height: none;
  223. max-width: none;
  224. padding: 0;
  225. position: absolute;
  226. top: 0;
  227. -webkit-user-select: none;
  228. -moz-user-select: none;
  229. -ms-user-select: none;
  230. user-select: none;
  231. width: 100%;
  232. }
  233. .fancybox-spaceball {
  234. z-index: 1;
  235. }
  236. .fancybox-slide--html .fancybox-content {
  237. margin-bottom: 6px;
  238. }
  239. .fancybox-slide--video .fancybox-content,
  240. .fancybox-slide--map .fancybox-content,
  241. .fancybox-slide--iframe .fancybox-content {
  242. height: 100%;
  243. margin: 0;
  244. overflow: visible;
  245. padding: 0;
  246. width: 100%;
  247. }
  248. .fancybox-slide--video .fancybox-content {
  249. background: #000;
  250. }
  251. .fancybox-slide--map .fancybox-content {
  252. background: #e5e3df;
  253. }
  254. .fancybox-slide--iframe .fancybox-content {
  255. background: #fff;
  256. height: calc(100% - 44px);
  257. margin-bottom: 44px;
  258. }
  259. .fancybox-video,
  260. .fancybox-iframe {
  261. background: transparent;
  262. border: 0;
  263. height: 100%;
  264. margin: 0;
  265. overflow: hidden;
  266. padding: 0;
  267. width: 100%;
  268. }
  269. .fancybox-iframe {
  270. vertical-align: top;
  271. }
  272. .fancybox-error {
  273. background: #fff;
  274. cursor: default;
  275. max-width: 400px;
  276. padding: 40px;
  277. width: 100%;
  278. }
  279. .fancybox-error p {
  280. color: #444;
  281. font-size: 16px;
  282. line-height: 20px;
  283. margin: 0;
  284. padding: 0;
  285. }
  286. /* Buttons */
  287. .fancybox-button {
  288. background: rgba(30, 30, 30, 0.6);
  289. border: 0;
  290. border-radius: 0;
  291. cursor: pointer;
  292. display: inline-block;
  293. height: 44px;
  294. margin: 0;
  295. outline: none;
  296. padding: 10px;
  297. transition: color .2s;
  298. vertical-align: top;
  299. width: 44px;
  300. }
  301. .fancybox-button,
  302. .fancybox-button:visited,
  303. .fancybox-button:link {
  304. color: #ccc;
  305. }
  306. .fancybox-button:focus,
  307. .fancybox-button:hover {
  308. color: #fff;
  309. }
  310. .fancybox-button.disabled,
  311. .fancybox-button.disabled:hover,
  312. .fancybox-button[disabled],
  313. .fancybox-button[disabled]:hover {
  314. color: #888;
  315. cursor: default;
  316. }
  317. .fancybox-button svg {
  318. display: block;
  319. overflow: visible;
  320. position: relative;
  321. shape-rendering: geometricPrecision;
  322. }
  323. .fancybox-button svg path {
  324. fill: transparent;
  325. stroke: currentColor;
  326. stroke-linejoin: round;
  327. stroke-width: 3;
  328. }
  329. .fancybox-button--play svg path:nth-child(2) {
  330. display: none;
  331. }
  332. .fancybox-button--pause svg path:nth-child(1) {
  333. display: none;
  334. }
  335. .fancybox-button--play svg path,
  336. .fancybox-button--share svg path,
  337. .fancybox-button--thumbs svg path {
  338. fill: currentColor;
  339. }
  340. .fancybox-button--share svg path {
  341. stroke-width: 1;
  342. }
  343. /* Navigation arrows */
  344. .fancybox-navigation .fancybox-button {
  345. height: 38px;
  346. opacity: 0;
  347. padding: 6px;
  348. position: absolute;
  349. top: 50%;
  350. width: 38px;
  351. }
  352. .fancybox-show-nav .fancybox-navigation .fancybox-button {
  353. transition: opacity .25s, visibility 0s, color .25s;
  354. }
  355. .fancybox-navigation .fancybox-button::after {
  356. content: '';
  357. left: -25px;
  358. padding: 50px;
  359. position: absolute;
  360. top: -25px;
  361. }
  362. .fancybox-navigation .fancybox-button--arrow_left {
  363. left: 6px;
  364. }
  365. .fancybox-navigation .fancybox-button--arrow_right {
  366. right: 6px;
  367. }
  368. /* Close button on the top right corner of html content */
  369. .fancybox-close-small {
  370. background: transparent;
  371. border: 0;
  372. border-radius: 0;
  373. color: #555;
  374. cursor: pointer;
  375. height: 44px;
  376. margin: 0;
  377. padding: 6px;
  378. position: absolute;
  379. right: 0;
  380. top: 0;
  381. width: 44px;
  382. z-index: 10;
  383. }
  384. .fancybox-close-small svg {
  385. fill: transparent;
  386. opacity: .8;
  387. stroke: currentColor;
  388. stroke-width: 1.5;
  389. transition: stroke .1s;
  390. }
  391. .fancybox-close-small:focus {
  392. outline: none;
  393. }
  394. .fancybox-close-small:hover svg {
  395. opacity: 1;
  396. }
  397. .fancybox-slide--image .fancybox-close-small,
  398. .fancybox-slide--video .fancybox-close-small,
  399. .fancybox-slide--iframe .fancybox-close-small {
  400. color: #ccc;
  401. padding: 5px;
  402. right: -12px;
  403. top: -44px;
  404. }
  405. .fancybox-slide--image .fancybox-close-small:hover svg,
  406. .fancybox-slide--video .fancybox-close-small:hover svg,
  407. .fancybox-slide--iframe .fancybox-close-small:hover svg {
  408. background: transparent;
  409. color: #fff;
  410. }
  411. .fancybox-is-scaling .fancybox-close-small,
  412. .fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small {
  413. display: none;
  414. }
  415. /* Caption */
  416. .fancybox-caption {
  417. bottom: 0;
  418. color: #fff;
  419. font-size: 14px;
  420. font-weight: 400;
  421. left: 0;
  422. line-height: 1.5;
  423. padding: 25px 44px 25px 44px;
  424. right: 0;
  425. }
  426. .fancybox-caption::before {
  427. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC);
  428. background-repeat: repeat-x;
  429. background-size: contain;
  430. bottom: 0;
  431. content: '';
  432. display: block;
  433. left: 0;
  434. pointer-events: none;
  435. position: absolute;
  436. right: 0;
  437. top: -25px;
  438. z-index: -1;
  439. }
  440. .fancybox-caption::after {
  441. border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  442. content: '';
  443. display: block;
  444. left: 44px;
  445. position: absolute;
  446. right: 44px;
  447. top: 0;
  448. }
  449. .fancybox-caption a,
  450. .fancybox-caption a:link,
  451. .fancybox-caption a:visited {
  452. color: #ccc;
  453. text-decoration: none;
  454. }
  455. .fancybox-caption a:hover {
  456. color: #fff;
  457. text-decoration: underline;
  458. }
  459. /* Loading indicator */
  460. .fancybox-loading {
  461. -webkit-animation: fancybox-rotate .8s infinite linear;
  462. animation: fancybox-rotate .8s infinite linear;
  463. background: transparent;
  464. border: 6px solid rgba(100, 100, 100, 0.5);
  465. border-radius: 100%;
  466. border-top-color: #fff;
  467. height: 60px;
  468. left: 50%;
  469. margin: -30px 0 0 -30px;
  470. opacity: .6;
  471. padding: 0;
  472. position: absolute;
  473. top: 50%;
  474. width: 60px;
  475. z-index: 99999;
  476. }
  477. @-webkit-keyframes fancybox-rotate {
  478. from {
  479. -webkit-transform: rotate(0deg);
  480. transform: rotate(0deg);
  481. }
  482. to {
  483. -webkit-transform: rotate(359deg);
  484. transform: rotate(359deg);
  485. }
  486. }
  487. @keyframes fancybox-rotate {
  488. from {
  489. -webkit-transform: rotate(0deg);
  490. transform: rotate(0deg);
  491. }
  492. to {
  493. -webkit-transform: rotate(359deg);
  494. transform: rotate(359deg);
  495. }
  496. }
  497. /* Transition effects */
  498. .fancybox-animated {
  499. transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
  500. }
  501. /* transitionEffect: slide */
  502. .fancybox-fx-slide.fancybox-slide--previous {
  503. opacity: 0;
  504. -webkit-transform: translate3d(-100%, 0, 0);
  505. transform: translate3d(-100%, 0, 0);
  506. }
  507. .fancybox-fx-slide.fancybox-slide--next {
  508. opacity: 0;
  509. -webkit-transform: translate3d(100%, 0, 0);
  510. transform: translate3d(100%, 0, 0);
  511. }
  512. .fancybox-fx-slide.fancybox-slide--current {
  513. opacity: 1;
  514. -webkit-transform: translate3d(0, 0, 0);
  515. transform: translate3d(0, 0, 0);
  516. }
  517. /* transitionEffect: fade */
  518. .fancybox-fx-fade.fancybox-slide--previous,
  519. .fancybox-fx-fade.fancybox-slide--next {
  520. opacity: 0;
  521. transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  522. }
  523. .fancybox-fx-fade.fancybox-slide--current {
  524. opacity: 1;
  525. }
  526. /* transitionEffect: zoom-in-out */
  527. .fancybox-fx-zoom-in-out.fancybox-slide--previous {
  528. opacity: 0;
  529. -webkit-transform: scale3d(1.5, 1.5, 1.5);
  530. transform: scale3d(1.5, 1.5, 1.5);
  531. }
  532. .fancybox-fx-zoom-in-out.fancybox-slide--next {
  533. opacity: 0;
  534. -webkit-transform: scale3d(0.5, 0.5, 0.5);
  535. transform: scale3d(0.5, 0.5, 0.5);
  536. }
  537. .fancybox-fx-zoom-in-out.fancybox-slide--current {
  538. opacity: 1;
  539. -webkit-transform: scale3d(1, 1, 1);
  540. transform: scale3d(1, 1, 1);
  541. }
  542. /* transitionEffect: rotate */
  543. .fancybox-fx-rotate.fancybox-slide--previous {
  544. opacity: 0;
  545. -webkit-transform: rotate(-360deg);
  546. -ms-transform: rotate(-360deg);
  547. transform: rotate(-360deg);
  548. }
  549. .fancybox-fx-rotate.fancybox-slide--next {
  550. opacity: 0;
  551. -webkit-transform: rotate(360deg);
  552. -ms-transform: rotate(360deg);
  553. transform: rotate(360deg);
  554. }
  555. .fancybox-fx-rotate.fancybox-slide--current {
  556. opacity: 1;
  557. -webkit-transform: rotate(0deg);
  558. -ms-transform: rotate(0deg);
  559. transform: rotate(0deg);
  560. }
  561. /* transitionEffect: circular */
  562. .fancybox-fx-circular.fancybox-slide--previous {
  563. opacity: 0;
  564. -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  565. transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  566. }
  567. .fancybox-fx-circular.fancybox-slide--next {
  568. opacity: 0;
  569. -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  570. transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  571. }
  572. .fancybox-fx-circular.fancybox-slide--current {
  573. opacity: 1;
  574. -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  575. transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  576. }
  577. /* transitionEffect: tube */
  578. .fancybox-fx-tube.fancybox-slide--previous {
  579. -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
  580. transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
  581. }
  582. .fancybox-fx-tube.fancybox-slide--next {
  583. -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
  584. transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
  585. }
  586. .fancybox-fx-tube.fancybox-slide--current {
  587. -webkit-transform: translate3d(0, 0, 0) scale(1);
  588. transform: translate3d(0, 0, 0) scale(1);
  589. }
  590. /* Share */
  591. .fancybox-share {
  592. background: #f4f4f4;
  593. border-radius: 3px;
  594. max-width: 90%;
  595. padding: 30px;
  596. text-align: center;
  597. }
  598. .fancybox-share h1 {
  599. color: #222;
  600. font-size: 35px;
  601. font-weight: 700;
  602. margin: 0 0 20px 0;
  603. }
  604. .fancybox-share p {
  605. margin: 0;
  606. padding: 0;
  607. }
  608. .fancybox-share__button {
  609. border: 0;
  610. border-radius: 3px;
  611. display: inline-block;
  612. font-size: 14px;
  613. font-weight: 700;
  614. line-height: 40px;
  615. margin: 0 5px 10px 5px;
  616. min-width: 130px;
  617. padding: 0 15px;
  618. text-decoration: none;
  619. transition: all .2s;
  620. -webkit-user-select: none;
  621. -moz-user-select: none;
  622. -ms-user-select: none;
  623. user-select: none;
  624. white-space: nowrap;
  625. }
  626. .fancybox-share__button:visited,
  627. .fancybox-share__button:link {
  628. color: #fff;
  629. }
  630. .fancybox-share__button:hover {
  631. text-decoration: none;
  632. }
  633. .fancybox-share__button--fb {
  634. background: #3b5998;
  635. }
  636. .fancybox-share__button--fb:hover {
  637. background: #344e86;
  638. }
  639. .fancybox-share__button--pt {
  640. background: #bd081d;
  641. }
  642. .fancybox-share__button--pt:hover {
  643. background: #aa0719;
  644. }
  645. .fancybox-share__button--tw {
  646. background: #1da1f2;
  647. }
  648. .fancybox-share__button--tw:hover {
  649. background: #0d95e8;
  650. }
  651. .fancybox-share__button svg {
  652. height: 25px;
  653. margin-right: 7px;
  654. position: relative;
  655. top: -1px;
  656. vertical-align: middle;
  657. width: 25px;
  658. }
  659. .fancybox-share__button svg path {
  660. fill: #fff;
  661. }
  662. .fancybox-share__input {
  663. background: transparent;
  664. border: 0;
  665. border-bottom: 1px solid #d7d7d7;
  666. border-radius: 0;
  667. color: #5d5b5b;
  668. font-size: 14px;
  669. margin: 10px 0 0 0;
  670. outline: none;
  671. padding: 10px 15px;
  672. width: 100%;
  673. }
  674. /* Thumbs */
  675. .fancybox-thumbs {
  676. background: #fff;
  677. bottom: 0;
  678. display: none;
  679. margin: 0;
  680. -webkit-overflow-scrolling: touch;
  681. -ms-overflow-style: -ms-autohiding-scrollbar;
  682. padding: 2px 2px 4px 2px;
  683. position: absolute;
  684. right: 0;
  685. -webkit-tap-highlight-color: transparent;
  686. top: 0;
  687. width: 212px;
  688. z-index: 99995;
  689. }
  690. .fancybox-thumbs-x {
  691. overflow-x: auto;
  692. overflow-y: hidden;
  693. }
  694. .fancybox-show-thumbs .fancybox-thumbs {
  695. display: block;
  696. }
  697. .fancybox-show-thumbs .fancybox-inner {
  698. right: 212px;
  699. }
  700. .fancybox-thumbs > ul {
  701. font-size: 0;
  702. height: 100%;
  703. list-style: none;
  704. margin: 0;
  705. overflow-x: hidden;
  706. overflow-y: auto;
  707. padding: 0;
  708. position: absolute;
  709. position: relative;
  710. white-space: nowrap;
  711. width: 100%;
  712. }
  713. .fancybox-thumbs-x > ul {
  714. overflow: hidden;
  715. }
  716. .fancybox-thumbs-y > ul::-webkit-scrollbar {
  717. width: 7px;
  718. }
  719. .fancybox-thumbs-y > ul::-webkit-scrollbar-track {
  720. background: #fff;
  721. border-radius: 10px;
  722. box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  723. }
  724. .fancybox-thumbs-y > ul::-webkit-scrollbar-thumb {
  725. background: #2a2a2a;
  726. border-radius: 10px;
  727. }
  728. .fancybox-thumbs > ul > li {
  729. -webkit-backface-visibility: hidden;
  730. backface-visibility: hidden;
  731. cursor: pointer;
  732. float: left;
  733. height: 75px;
  734. margin: 2px;
  735. max-height: calc(100% - 8px);
  736. max-width: calc(50% - 4px);
  737. outline: none;
  738. overflow: hidden;
  739. padding: 0;
  740. position: relative;
  741. -webkit-tap-highlight-color: transparent;
  742. width: 100px;
  743. }
  744. .fancybox-thumbs-loading {
  745. background: rgba(0, 0, 0, 0.1);
  746. }
  747. .fancybox-thumbs > ul > li {
  748. background-position: center center;
  749. background-repeat: no-repeat;
  750. background-size: cover;
  751. }
  752. .fancybox-thumbs > ul > li:before {
  753. border: 4px solid #4ea7f9;
  754. bottom: 0;
  755. content: '';
  756. left: 0;
  757. opacity: 0;
  758. position: absolute;
  759. right: 0;
  760. top: 0;
  761. transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  762. z-index: 99991;
  763. }
  764. .fancybox-thumbs .fancybox-thumbs-active:before {
  765. opacity: 1;
  766. }
  767. /* Styling for Small-Screen Devices */
  768. @media all and (max-width: 800px) {
  769. .fancybox-thumbs {
  770. width: 110px;
  771. }
  772. .fancybox-show-thumbs .fancybox-inner {
  773. right: 110px;
  774. }
  775. .fancybox-thumbs > ul > li {
  776. max-width: calc(100% - 10px);
  777. }
  778. }