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