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.

396 lines
7.3 KiB

  1. /* Magnific Popup CSS */
  2. .mfp-bg {
  3. top: 0;
  4. left: 0;
  5. width: 100%;
  6. height: 100%;
  7. z-index: 1042;
  8. overflow: hidden;
  9. position: fixed;
  10. background: #0b0b0b;
  11. opacity: 0.8;
  12. filter: alpha(opacity=80); }
  13. .mfp-wrap {
  14. top: 0;
  15. left: 0;
  16. width: 100%;
  17. height: 100%;
  18. z-index: 1043;
  19. position: fixed;
  20. outline: none !important;
  21. -webkit-backface-visibility: hidden; }
  22. .mfp-container {
  23. text-align: center;
  24. position: absolute;
  25. width: 100%;
  26. height: 100%;
  27. left: 0;
  28. top: 0;
  29. padding: 0 8px;
  30. -webkit-box-sizing: border-box;
  31. -moz-box-sizing: border-box;
  32. box-sizing: border-box; }
  33. .mfp-container:before {
  34. content: '';
  35. display: inline-block;
  36. height: 100%;
  37. vertical-align: middle; }
  38. .mfp-align-top .mfp-container:before {
  39. display: none; }
  40. .mfp-content {
  41. position: relative;
  42. display: inline-block;
  43. vertical-align: middle;
  44. margin: 0 auto;
  45. text-align: left;
  46. z-index: 1045; }
  47. .mfp-inline-holder .mfp-content,
  48. .mfp-ajax-holder .mfp-content {
  49. width: 100%;
  50. cursor: auto; }
  51. .mfp-ajax-cur {
  52. cursor: progress; }
  53. .mfp-zoom-out-cur,
  54. .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  55. cursor: -moz-zoom-out;
  56. cursor: -webkit-zoom-out;
  57. cursor: zoom-out; }
  58. .mfp-zoom {
  59. cursor: pointer;
  60. cursor: -webkit-zoom-in;
  61. cursor: -moz-zoom-in;
  62. cursor: zoom-in; }
  63. .mfp-auto-cursor .mfp-content {
  64. cursor: auto; }
  65. .mfp-close,
  66. .mfp-arrow,
  67. .mfp-preloader,
  68. .mfp-counter {
  69. -webkit-user-select: none;
  70. -moz-user-select: none;
  71. user-select: none; }
  72. .mfp-loading.mfp-figure {
  73. display: none; }
  74. .mfp-hide {
  75. display: none !important; }
  76. .mfp-preloader {
  77. color: #cccccc;
  78. position: absolute;
  79. top: 50%;
  80. width: auto;
  81. text-align: center;
  82. margin-top: -0.8em;
  83. left: 8px;
  84. right: 8px;
  85. z-index: 1044; }
  86. .mfp-preloader a {
  87. color: #cccccc; }
  88. .mfp-preloader a:hover {
  89. color: white; }
  90. .mfp-s-ready .mfp-preloader {
  91. display: none; }
  92. .mfp-s-error .mfp-content {
  93. display: none; }
  94. button.mfp-close,
  95. button.mfp-arrow {
  96. overflow: visible;
  97. cursor: pointer;
  98. background: transparent;
  99. border: 0;
  100. -webkit-appearance: none;
  101. display: block;
  102. padding: 0;
  103. z-index: 1046;
  104. -webkit-box-shadow: none;
  105. box-shadow: none; }
  106. button::-moz-focus-inner {
  107. padding: 0;
  108. border: 0; }
  109. .mfp-close {
  110. width: 44px;
  111. height: 44px;
  112. line-height: 44px;
  113. position: absolute;
  114. right: 0;
  115. top: 0;
  116. text-decoration: none;
  117. text-align: center;
  118. opacity: 0.65;
  119. padding: 0 0 18px 10px;
  120. color: white;
  121. font-style: normal;
  122. font-size: 28px;
  123. font-family: Arial, Baskerville, monospace; }
  124. .mfp-close:hover, .mfp-close:focus {
  125. opacity: 1; }
  126. .mfp-close:active {
  127. top: 1px; }
  128. .mfp-close-btn-in .mfp-close {
  129. color: #333333; }
  130. .mfp-image-holder .mfp-close,
  131. .mfp-iframe-holder .mfp-close {
  132. color: white;
  133. right: -6px;
  134. text-align: right;
  135. padding-right: 6px;
  136. width: 100%; }
  137. .mfp-counter {
  138. position: absolute;
  139. top: 0;
  140. right: 0;
  141. color: #cccccc;
  142. font-size: 12px;
  143. line-height: 18px; }
  144. .mfp-arrow {
  145. position: absolute;
  146. opacity: 0.65;
  147. margin: 0;
  148. top: 50%;
  149. margin-top: -55px;
  150. padding: 0;
  151. width: 90px;
  152. height: 110px;
  153. -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  154. .mfp-arrow:active {
  155. margin-top: -54px; }
  156. .mfp-arrow:hover,
  157. .mfp-arrow:focus {
  158. opacity: 1; }
  159. .mfp-arrow:before, .mfp-arrow:after,
  160. .mfp-arrow .mfp-b,
  161. .mfp-arrow .mfp-a {
  162. content: '';
  163. display: block;
  164. width: 0;
  165. height: 0;
  166. position: absolute;
  167. left: 0;
  168. top: 0;
  169. margin-top: 35px;
  170. margin-left: 35px;
  171. border: medium inset transparent; }
  172. .mfp-arrow:after,
  173. .mfp-arrow .mfp-a {
  174. border-top-width: 13px;
  175. border-bottom-width: 13px;
  176. top: 8px; }
  177. .mfp-arrow:before,
  178. .mfp-arrow .mfp-b {
  179. border-top-width: 21px;
  180. border-bottom-width: 21px; }
  181. .mfp-arrow-left {
  182. left: 0; }
  183. .mfp-arrow-left:after,
  184. .mfp-arrow-left .mfp-a {
  185. border-right: 17px solid white;
  186. margin-left: 31px; }
  187. .mfp-arrow-left:before,
  188. .mfp-arrow-left .mfp-b {
  189. margin-left: 25px;
  190. border-right: 27px solid #3f3f3f; }
  191. .mfp-arrow-right {
  192. right: 0; }
  193. .mfp-arrow-right:after,
  194. .mfp-arrow-right .mfp-a {
  195. border-left: 17px solid white;
  196. margin-left: 39px; }
  197. .mfp-arrow-right:before,
  198. .mfp-arrow-right .mfp-b {
  199. border-left: 27px solid #3f3f3f; }
  200. .mfp-iframe-holder {
  201. padding-top: 40px;
  202. padding-bottom: 40px; }
  203. .mfp-iframe-holder .mfp-content {
  204. line-height: 0;
  205. width: 100%;
  206. max-width: 900px; }
  207. .mfp-iframe-scaler {
  208. width: 100%;
  209. height: 0;
  210. overflow: hidden;
  211. padding-top: 56.25%; }
  212. .mfp-iframe-scaler iframe {
  213. position: absolute;
  214. display: block;
  215. top: 0;
  216. left: 0;
  217. width: 100%;
  218. height: 100%;
  219. box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  220. background: black; }
  221. .mfp-iframe-holder .mfp-close {
  222. top: -40px; }
  223. /* Main image in popup */
  224. img.mfp-img {
  225. width: auto;
  226. max-width: 100%;
  227. height: auto;
  228. display: block;
  229. line-height: 0;
  230. -webkit-box-sizing: border-box;
  231. -moz-box-sizing: border-box;
  232. box-sizing: border-box;
  233. padding: 40px 0 40px;
  234. margin: 0 auto; }
  235. /* The shadow behind the image */
  236. .mfp-figure:after {
  237. content: '';
  238. position: absolute;
  239. left: 0;
  240. top: 40px;
  241. bottom: 40px;
  242. display: block;
  243. right: 0;
  244. width: auto;
  245. height: auto;
  246. z-index: -1;
  247. box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  248. background: #444444; }
  249. .mfp-figure {
  250. line-height: 0; }
  251. .mfp-bottom-bar {
  252. margin-top: -36px;
  253. position: absolute;
  254. top: 100%;
  255. left: 0;
  256. width: 100%;
  257. cursor: auto; }
  258. .mfp-title {
  259. text-align: left;
  260. line-height: 18px;
  261. color: #f3f3f3;
  262. word-wrap: break-word;
  263. padding-right: 36px; }
  264. .mfp-figure small {
  265. color: #bdbdbd;
  266. display: block;
  267. font-size: 12px;
  268. line-height: 14px; }
  269. .mfp-image-holder .mfp-content {
  270. max-width: 100%; }
  271. .mfp-gallery .mfp-image-holder .mfp-figure {
  272. cursor: pointer; }
  273. @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  274. /**
  275. * Remove all paddings around the image on small screen
  276. */
  277. .mfp-img-mobile .mfp-image-holder {
  278. padding-left: 0;
  279. padding-right: 0; }
  280. .mfp-img-mobile img.mfp-img {
  281. padding: 0; }
  282. /* The shadow behind the image */
  283. .mfp-img-mobile .mfp-figure:after {
  284. top: 0;
  285. bottom: 0; }
  286. .mfp-img-mobile .mfp-bottom-bar {
  287. background: rgba(0, 0, 0, 0.6);
  288. bottom: 0;
  289. margin: 0;
  290. top: auto;
  291. padding: 3px 5px;
  292. position: fixed;
  293. -webkit-box-sizing: border-box;
  294. -moz-box-sizing: border-box;
  295. box-sizing: border-box; }
  296. .mfp-img-mobile .mfp-bottom-bar:empty {
  297. padding: 0; }
  298. .mfp-img-mobile .mfp-counter {
  299. right: 5px;
  300. top: 3px; }
  301. .mfp-img-mobile .mfp-close {
  302. top: 0;
  303. right: 0;
  304. width: 35px;
  305. height: 35px;
  306. line-height: 35px;
  307. background: rgba(0, 0, 0, 0.6);
  308. position: fixed;
  309. text-align: center;
  310. padding: 0; }
  311. .mfp-img-mobile .mfp-figure small {
  312. display: inline;
  313. margin-left: 5px; } }
  314. @media all and (max-width: 900px) {
  315. .mfp-arrow {
  316. -webkit-transform: scale(0.75);
  317. transform: scale(0.75); }
  318. .mfp-arrow-left {
  319. -webkit-transform-origin: 0;
  320. transform-origin: 0; }
  321. .mfp-arrow-right {
  322. -webkit-transform-origin: 100%;
  323. transform-origin: 100%; }
  324. .mfp-container {
  325. padding-left: 6px;
  326. padding-right: 6px; } }
  327. .mfp-ie7 .mfp-img {
  328. padding: 0; }
  329. .mfp-ie7 .mfp-bottom-bar {
  330. width: 600px;
  331. left: 50%;
  332. margin-left: -300px;
  333. margin-top: 5px;
  334. padding-bottom: 5px; }
  335. .mfp-ie7 .mfp-container {
  336. padding: 0; }
  337. .mfp-ie7 .mfp-content {
  338. padding-top: 44px; }
  339. .mfp-ie7 .mfp-close {
  340. top: 0;
  341. right: 0;
  342. padding-top: 0; }