magnific-popup.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
  1. /* Magnific Popup CSS */
  2. .mfp-bg {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. z-index: 1802;
  7. width: 100%;
  8. height: 100%;
  9. overflow: hidden;
  10. background: #0b0b0b;
  11. opacity: 0.8; }
  12. .mfp-wrap {
  13. position: fixed;
  14. top: 0;
  15. left: 0;
  16. z-index: 1803;
  17. width: 100%;
  18. height: 100%;
  19. outline: none !important;
  20. -webkit-backface-visibility: hidden; }
  21. .mfp-container {
  22. position: absolute;
  23. top: 0;
  24. left: 0;
  25. box-sizing: border-box;
  26. width: 100%;
  27. height: 100%;
  28. padding: 0 8px;
  29. text-align: center; }
  30. .mfp-container:before {
  31. display: inline-block;
  32. height: 100%;
  33. vertical-align: middle;
  34. content: ""; }
  35. .mfp-align-top .mfp-container:before {
  36. display: none; }
  37. .mfp-content {
  38. position: relative;
  39. z-index: 1805;
  40. display: inline-block;
  41. margin: 0 auto;
  42. text-align: left;
  43. vertical-align: middle; }
  44. .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  45. width: 100%;
  46. cursor: auto; }
  47. .mfp-ajax-cur {
  48. cursor: progress; }
  49. .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  50. cursor: zoom-out; }
  51. .mfp-zoom {
  52. cursor: pointer;
  53. cursor: zoom-in; }
  54. .mfp-auto-cursor .mfp-content {
  55. cursor: auto; }
  56. .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  57. -webkit-user-select: none;
  58. -moz-user-select: none;
  59. -ms-user-select: none;
  60. user-select: none; }
  61. .mfp-loading.mfp-figure {
  62. display: none; }
  63. .mfp-hide {
  64. display: none !important; }
  65. .mfp-preloader {
  66. position: absolute;
  67. top: 50%;
  68. right: 8px;
  69. left: 8px;
  70. z-index: 1804;
  71. width: auto;
  72. margin-top: -0.8em;
  73. color: #ccc;
  74. text-align: center; }
  75. .mfp-preloader a {
  76. color: #ccc; }
  77. .mfp-preloader a:hover {
  78. color: #fff; }
  79. .mfp-s-ready .mfp-preloader {
  80. display: none; }
  81. .mfp-s-error .mfp-content {
  82. display: none; }
  83. button.mfp-close, button.mfp-arrow {
  84. z-index: 1806;
  85. display: block;
  86. padding: 0;
  87. overflow: visible;
  88. -ms-touch-action: manipulation;
  89. touch-action: manipulation;
  90. cursor: pointer;
  91. background: transparent;
  92. border: 0;
  93. outline: none;
  94. box-shadow: none;
  95. -webkit-appearance: none; }
  96. button::-moz-focus-inner {
  97. padding: 0;
  98. border: 0; }
  99. .mfp-close {
  100. position: absolute;
  101. top: 0;
  102. right: 0;
  103. width: 44px;
  104. height: 44px;
  105. padding: 0 0 18px 10px;
  106. font-family: Arial, Baskerville, monospace;
  107. font-size: 28px;
  108. font-style: normal;
  109. line-height: 44px;
  110. color: #fff;
  111. text-align: center;
  112. text-decoration: none;
  113. opacity: 0.65; }
  114. .mfp-close:hover, .mfp-close:focus {
  115. opacity: 1; }
  116. .mfp-close:active {
  117. top: 1px; }
  118. .mfp-close-btn-in .mfp-close {
  119. color: #333; }
  120. .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  121. right: -6px;
  122. width: 100%;
  123. padding-right: 6px;
  124. color: #fff;
  125. text-align: right; }
  126. .mfp-counter {
  127. position: absolute;
  128. top: 0;
  129. right: 0;
  130. font-size: 12px;
  131. line-height: 18px;
  132. color: #ccc;
  133. white-space: nowrap; }
  134. .mfp-arrow {
  135. position: absolute;
  136. top: 50%;
  137. width: 90px;
  138. height: 110px;
  139. padding: 0;
  140. margin: 0;
  141. margin-top: -55px;
  142. opacity: 0.65;
  143. -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  144. .mfp-arrow:active {
  145. margin-top: -54px; }
  146. .mfp-arrow:hover, .mfp-arrow:focus {
  147. opacity: 1; }
  148. .mfp-arrow:before, .mfp-arrow:after {
  149. position: absolute;
  150. top: 0;
  151. left: 0;
  152. display: block;
  153. width: 0;
  154. height: 0;
  155. margin-top: 35px;
  156. margin-left: 35px;
  157. content: "";
  158. border: medium inset transparent; }
  159. .mfp-arrow:after {
  160. top: 8px;
  161. border-top-width: 13px;
  162. border-bottom-width: 13px; }
  163. .mfp-arrow:before {
  164. border-top-width: 21px;
  165. border-bottom-width: 21px;
  166. opacity: .7; }
  167. .mfp-arrow-left {
  168. left: 0; }
  169. .mfp-arrow-left:after {
  170. margin-left: 31px;
  171. border-right: 17px solid #fff; }
  172. .mfp-arrow-left:before {
  173. margin-left: 25px;
  174. border-right: 27px solid #3f3f3f; }
  175. .mfp-arrow-right {
  176. right: 0; }
  177. .mfp-arrow-right:after {
  178. margin-left: 39px;
  179. border-left: 17px solid #fff; }
  180. .mfp-arrow-right:before {
  181. border-left: 27px solid #3f3f3f; }
  182. .mfp-iframe-holder {
  183. padding-top: 40px;
  184. padding-bottom: 40px; }
  185. .mfp-iframe-holder .mfp-content {
  186. width: 100%;
  187. max-width: 900px;
  188. line-height: 0; }
  189. .mfp-iframe-holder .mfp-close {
  190. top: -40px; }
  191. .mfp-iframe-scaler {
  192. width: 100%;
  193. height: 0;
  194. padding-top: 56.25%;
  195. overflow: hidden; }
  196. .mfp-iframe-scaler iframe {
  197. position: absolute;
  198. top: 0;
  199. left: 0;
  200. display: block;
  201. width: 100%;
  202. height: 100%;
  203. background: #000;
  204. box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
  205. @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  206. /**
  207. * Remove all paddings around the image on small screen
  208. */
  209. .mfp-img-mobile .mfp-image-holder {
  210. padding-right: 0;
  211. padding-left: 0; }
  212. .mfp-img-mobile img.mfp-img {
  213. padding: 0; }
  214. .mfp-img-mobile .mfp-figure:after {
  215. top: 0;
  216. bottom: 0; }
  217. .mfp-img-mobile .mfp-figure small {
  218. display: inline;
  219. margin-left: 5px; }
  220. .mfp-img-mobile .mfp-bottom-bar {
  221. position: fixed;
  222. top: auto;
  223. bottom: 0;
  224. box-sizing: border-box;
  225. padding: 3px 5px;
  226. margin: 0;
  227. background: rgba(0, 0, 0, 0.6); }
  228. .mfp-img-mobile .mfp-bottom-bar:empty {
  229. padding: 0; }
  230. .mfp-img-mobile .mfp-counter {
  231. top: 3px;
  232. right: 5px; }
  233. .mfp-img-mobile .mfp-close {
  234. position: fixed;
  235. top: 0;
  236. right: 0;
  237. width: 35px;
  238. height: 35px;
  239. padding: 0;
  240. line-height: 35px;
  241. text-align: center;
  242. background: rgba(0, 0, 0, 0.6); } }
  243. /* Main image in popup */
  244. img.mfp-img {
  245. box-sizing: border-box;
  246. display: block;
  247. width: auto;
  248. max-width: 100%;
  249. height: auto;
  250. padding: 40px 0 40px;
  251. margin: 0 auto;
  252. line-height: 0; }
  253. /* The shadow behind the image */
  254. .mfp-figure {
  255. line-height: 0; }
  256. .mfp-figure:after {
  257. position: absolute;
  258. top: 40px;
  259. right: 0;
  260. bottom: 40px;
  261. left: 0;
  262. z-index: -1;
  263. display: block;
  264. width: auto;
  265. height: auto;
  266. content: "";
  267. background: #444;
  268. box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
  269. .mfp-figure small {
  270. display: block;
  271. font-size: 12px;
  272. line-height: 14px;
  273. color: #bdbdbd; }
  274. .mfp-figure figure {
  275. margin: 0; }
  276. .mfp-bottom-bar {
  277. position: absolute;
  278. top: 100%;
  279. left: 0;
  280. width: 100%;
  281. margin-top: -36px;
  282. cursor: auto; }
  283. .mfp-title {
  284. padding-right: 36px;
  285. line-height: 18px;
  286. color: #f3f3f3;
  287. text-align: left;
  288. word-wrap: break-word; }
  289. .mfp-image-holder .mfp-content {
  290. max-width: 100%; }
  291. .mfp-gallery .mfp-image-holder .mfp-figure {
  292. cursor: pointer; }
  293. /*
  294. ====== Zoom effect ======
  295. */
  296. .mfp-zoom-in .mfp-with-anim {
  297. opacity: 0;
  298. transition: all .2s ease-in-out;
  299. -webkit-transform: scale(0.8);
  300. transform: scale(0.8); }
  301. .mfp-zoom-in.mfp-bg {
  302. opacity: 0;
  303. transition: all .3s ease-out; }
  304. .mfp-zoom-in.mfp-ready .mfp-with-anim {
  305. opacity: 1;
  306. -webkit-transform: scale(1);
  307. transform: scale(1); }
  308. .mfp-zoom-in.mfp-ready.mfp-bg {
  309. opacity: .8; }
  310. .mfp-zoom-in.mfp-removing .mfp-with-anim {
  311. opacity: 0;
  312. -webkit-transform: scale(0.8);
  313. transform: scale(0.8); }
  314. .mfp-zoom-in.mfp-removing.mfp-bg {
  315. opacity: 0; }
  316. /*
  317. ====== Newspaper effect ======
  318. */
  319. .mfp-newspaper .mfp-with-anim {
  320. opacity: 0;
  321. transition: all .5s;
  322. -webkit-transform: scale(0) rotate(500deg);
  323. transform: scale(0) rotate(500deg); }
  324. .mfp-newspaper.mfp-bg {
  325. opacity: 0;
  326. transition: all .5s; }
  327. .mfp-newspaper.mfp-ready .mfp-with-anim {
  328. opacity: 1;
  329. -webkit-transform: scale(1) rotate(0deg);
  330. transform: scale(1) rotate(0deg); }
  331. .mfp-newspaper.mfp-ready.mfp-bg {
  332. opacity: .8; }
  333. .mfp-newspaper.mfp-removing .mfp-with-anim {
  334. opacity: 0;
  335. -webkit-transform: scale(0) rotate(500deg);
  336. transform: scale(0) rotate(500deg); }
  337. .mfp-newspaper.mfp-removing.mfp-bg {
  338. opacity: 0; }
  339. /*
  340. ====== Move-horizontal effect ======
  341. */
  342. .mfp-move-horizontal .mfp-with-anim {
  343. opacity: 0;
  344. transition: all .3s;
  345. -webkit-transform: translateX(-50px);
  346. transform: translateX(-50px); }
  347. .mfp-move-horizontal.mfp-bg {
  348. opacity: 0;
  349. transition: all .3s; }
  350. .mfp-move-horizontal.mfp-ready .mfp-with-anim {
  351. opacity: 1;
  352. -webkit-transform: translateX(0);
  353. transform: translateX(0); }
  354. .mfp-move-horizontal.mfp-ready.mfp-bg {
  355. opacity: .8; }
  356. .mfp-move-horizontal.mfp-removing .mfp-with-anim {
  357. opacity: 0;
  358. -webkit-transform: translateX(50px);
  359. transform: translateX(50px); }
  360. .mfp-move-horizontal.mfp-removing.mfp-bg {
  361. opacity: 0; }
  362. /*
  363. ====== Move-from-top effect ======
  364. */
  365. .mfp-move-from-top .mfp-content {
  366. vertical-align: top; }
  367. .mfp-move-from-top .mfp-with-anim {
  368. opacity: 0;
  369. transition: all .2s;
  370. -webkit-transform: translateY(-100px);
  371. transform: translateY(-100px); }
  372. .mfp-move-from-top.mfp-bg {
  373. opacity: 0;
  374. transition: all .2s; }
  375. .mfp-move-from-top.mfp-ready .mfp-with-anim {
  376. opacity: 1;
  377. -webkit-transform: translateY(0);
  378. transform: translateY(0); }
  379. .mfp-move-from-top.mfp-ready.mfp-bg {
  380. opacity: .8; }
  381. .mfp-move-from-top.mfp-removing .mfp-with-anim {
  382. opacity: 0;
  383. -webkit-transform: translateY(-50px);
  384. transform: translateY(-50px); }
  385. .mfp-move-from-top.mfp-removing.mfp-bg {
  386. opacity: 0; }
  387. /*
  388. ====== 3d unfold ======
  389. */
  390. .mfp-3d-unfold .mfp-content {
  391. -webkit-perspective: 2000px;
  392. perspective: 2000px; }
  393. .mfp-3d-unfold .mfp-with-anim {
  394. opacity: 0;
  395. transition: all .3s ease-in-out;
  396. -webkit-transform: rotateY(-60deg);
  397. transform: rotateY(-60deg);
  398. -webkit-transform-style: preserve-3d;
  399. transform-style: preserve-3d; }
  400. .mfp-3d-unfold.mfp-bg {
  401. opacity: 0;
  402. transition: all .5s; }
  403. .mfp-3d-unfold.mfp-ready .mfp-with-anim {
  404. opacity: 1;
  405. -webkit-transform: rotateY(0deg);
  406. transform: rotateY(0deg); }
  407. .mfp-3d-unfold.mfp-ready.mfp-bg {
  408. opacity: .8; }
  409. .mfp-3d-unfold.mfp-removing .mfp-with-anim {
  410. opacity: 0;
  411. -webkit-transform: rotateY(60deg);
  412. transform: rotateY(60deg); }
  413. .mfp-3d-unfold.mfp-removing.mfp-bg {
  414. opacity: 0; }
  415. /*
  416. ====== Zoom-out effect ======
  417. */
  418. .mfp-zoom-out .mfp-with-anim {
  419. opacity: 0;
  420. transition: all .3s ease-in-out;
  421. -webkit-transform: scale(1.3);
  422. transform: scale(1.3); }
  423. .mfp-zoom-out.mfp-bg {
  424. opacity: 0;
  425. transition: all .3s ease-out; }
  426. .mfp-zoom-out.mfp-ready .mfp-with-anim {
  427. opacity: 1;
  428. -webkit-transform: scale(1);
  429. transform: scale(1); }
  430. .mfp-zoom-out.mfp-ready.mfp-bg {
  431. opacity: .8; }
  432. .mfp-zoom-out.mfp-removing .mfp-with-anim {
  433. opacity: 0;
  434. -webkit-transform: scale(1.3);
  435. transform: scale(1.3); }
  436. .mfp-zoom-out.mfp-removing.mfp-bg {
  437. opacity: 0; }
  438. @media all and (max-width: 900px) {
  439. .mfp-arrow {
  440. -webkit-transform: scale(0.75);
  441. transform: scale(0.75); }
  442. .mfp-arrow-left {
  443. -webkit-transform-origin: 0;
  444. transform-origin: 0; }
  445. .mfp-arrow-right {
  446. -webkit-transform-origin: 100%;
  447. transform-origin: 100%; }
  448. .mfp-container {
  449. padding-right: 6px;
  450. padding-left: 6px; } }