PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 2.19
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v2.19
3.36 3.35 3.34 3.33 2.19 2.20 2.21 2.22 2.23 2.24 2.25 2.26 2.27 2.28 2.29 2.30 2.31 2.32 2.33 2.34 2.40 2.41 2.42 2.43 2.44 All 141 releases
photonic / include / css / photonic.css

photonic.css in Photonic Gallery & Lightbox for Flickr, SmugMug & Others 2.19, at include/css/photonic.css

502 lines 20.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #photonic-social { padding: 0.2em; border: none; border-radius: 4px;background: #111;background: rgba(0, 0, 0, 0.5); display: inline-block; }
2 #photonic-social a { width: 28px; height: 28px; display: block; float: left; color: inherit; text-decoration: none; margin: 0 0.2em; cursor: pointer; }
3 a.photonic-buy-link { width: 28px; height: 28px; display: inline-block; color: inherit; text-decoration: none; margin: 0 0.4em; cursor: pointer; vertical-align: middle; }
4 #photonic-social div, .photonic-buy-link .icon-buy { font-size: 28px; float: left; position: relative; width: 100%; height: 100%; background-image: url('../images/Icons.svg?v=2.00'); background-color: #bbb; background-size: 100%; background-repeat: no-repeat; border-radius: 3px; }
5 #photonic-social a:hover div { background-color: #6af; }
6 #photonic-social a:first-child {margin-left: 0; }
7 #photonic-social a:last-child {margin-right: 0; }
8 #photonic-social .icon-facebook { background-position: 0 0; }
9 #photonic-social .icon-twitter { background-position: 0 -112px; }
10 #photonic-social .icon-googleplus { background-position: 0 -28px; }
11 #photonic-social .icon-pinterest { background-position: 0 -56px; }
12 .photonic-buy-link .icon-buy { background-position: 0 -252px; background-color: transparent; }
13 #photonic-social .icon-twitter:before, #photonic-social .icon-googleplus:before, #photonic-social .icon-facebook:before, #photonic-social .icon-twitter:after, #photonic-social .icon-googleplus:after, #photonic-social .icon-facebook:after { content: '' !important; }
14 #swipebox-arrows {text-align: center; }
15 #swipebox-arrows #photonic-social { background: none; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
16 #cboxContent #photonic-social { position: absolute; top: 14px; left: 14px; }
17 .fancybox-title #photonic-social {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
18 .fancybox-title-inside-wrap { margin-top: 10px !important; padding-top: 0 !important; }
19 .fancybox-title-over-wrap { display: block; width: 100%; box-sizing: border-box; }
20 #pp_full_res #photonic-social { position: absolute; top: 14px; left: 28px;}
21 #imagelightbox-overlay #photonic-social { position: absolute; top: 2.5em; left: 2.5em; }
22 .lg-toolbar #photonic-social { float: right; margin-top: 8px; background: transparent; }
23 .photonic-featherlight #photonic-social { position: absolute; top: 5%; left: 5%; }
24 .fancybox-caption #photonic-social { float: right; }
25 #lightcase-content { background: transparent; }
26 .fancybox-slide--html .fancybox-content { overflow: hidden; padding: 0; }
27 @media screen and (min-width: 641px) {
28 #lightcase-case:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { padding: 0; overflow: hidden; }
29 }
30 video.photonic { margin: 0; padding: 0; }
31
32
33 /*.photonic-featherlight .featherlight-inner { max-height: 100%; }*/
34 div.photonic-slideshow {
35 width: 100%;
36 clear: both;
37 display: -ms-flexbox;
38 -ms-box-orient: horizontal;
39
40 display: -webkit-box;
41 display: -moz-box;
42 -webkit-box-orient: horizontal;
43 -moz-box-orient: horizontal;
44
45 display: -webkit-flex;
46 display: -moz-flex;
47 display: -ms-flex;
48 display: flex;
49 }
50
51 div.photonic-slideshow .lSSlideOuter { width: 100%; }
52
53 .photonic-slideshow-adapt-height-width img { width: 100%; }
54 .lSAction > .lSNext, .lSAction > .lSPrev { color: transparent; }
55 .lightSlider li {position: relative; }
56 .photonic-slide-center .lightSlider li { text-align: center; }
57 .lSSlideOuter .lSPager.lSGallery { margin-bottom: 5px; margin-top: 0 !important; }
58 .photonic-slideshow-img { display: none; }
59 .lSSlideOuter .photonic-slideshow-img { display: list-item; }
60
61 ul.slideshow-grid-panel { float: left; width: 100% !important; position: relative; display: inline-block; }
62 li.slideshow-grid { width: 100% !important; }
63 li.slideshow-grid li { display: inline-block; }
64 .slideshow-grid-panel a { display: inline-block; }
65
66 .photonic-standard-layout {
67 float: left;
68 width: 100%;
69 margin: 0;
70 padding: 0;
71
72 display: -ms-flexbox;
73 -ms-box-orient: horizontal;
74
75 display: -webkit-box;
76 display: -moz-box;
77 -webkit-box-orient: horizontal;
78 -moz-box-orient: horizontal;
79
80 display: -webkit-flex;
81 display: -moz-flex;
82 display: -ms-flex;
83 display: flex;
84
85 -webkit-flex-wrap: wrap;
86 -moz-flex-wrap: wrap;
87 -ms-flex-wrap: wrap;
88 flex-wrap: wrap;
89 }
90 .photonic-standard-layout .photonic-level-1 { float: left; position: relative; }
91 .photonic-standard-layout .photonic-level-1:after { content: ''; visibility: hidden; display: block; height: 0; clear: both; }
92
93 .photonic-gallery-1c { width: 98%; }
94 .photonic-gallery-2c { width: 49%; }
95 .photonic-gallery-3c { width: 32%; }
96 .photonic-gallery-4c { width: 24%; }
97 .photonic-gallery-5c { width: 19%; }
98 .photonic-gallery-6c { width: 16%; }
99 .photonic-gallery-7c { width: 14%; }
100 .photonic-gallery-8c { width: 12%; }
101 .photonic-gallery-9c { width: 10.5%; }
102 .photonic-gallery-10c { width: 9.5%; }
103 .photonic-gallery-11c { width: 8.6%; }
104 .photonic-gallery-12c { width: 8%; }
105 .photonic-gallery-13c { width: 7.2%; }
106 .photonic-gallery-14c { width: 6.8%; }
107 .photonic-gallery-15c { width: 6.5%; }
108 .photonic-gallery-16c { width: 6.2%; }
109 .photonic-gallery-17c { width: 5.8%; }
110 .photonic-gallery-18c { width: 5.5%; }
111 .photonic-gallery-19c { width: 5.2%; }
112 .photonic-gallery-20c { width: 4.95%; }
113
114 .photonic-tree li { list-style: none; }
115
116 .photonic-panel ul { padding: 0; margin: 10px auto; }
117 .photonic-panel { display: none; text-align: center; width: 800px; z-index: 5; padding: 10px; border-radius:10px; }
118
119 .photonic-thumb {
120 /*display: inline-block;*/
121 display: none;
122 list-style: none;
123 vertical-align: top;
124 text-align: center;
125 background: transparent !important;
126 line-height: 1.1em;
127 zoom: 1;
128 box-sizing: border-box;
129 padding: 5px;
130 }
131
132 .slideshow-grid-panel .photonic-level-1 { display: inline-block; }
133
134 .photonic-masonry-layout { width: 100% !important; position: relative; clear: both; margin: 0 auto; }
135 .photonic-masonry-layout .photonic-thumb { width: 100%; display: block; }
136 .photonic-ie .photonic-masonry-layout .photonic-thumb { display: inline-block; }
137 .photonic-masonry-layout .photonic-thumb a { padding: 0; width: 100%; }
138 .photonic-masonry-layout.title-display-below .photonic-title { padding: 2px; overflow: hidden; font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.7em;}
139 .photonic-masonry-layout .photonic-thumb a img { width: 100%; height: 100%; padding: 0; display: none; }
140 .photonic-stream .photonic-masonry-layout .photonic-thumb { margin: 0; position: relative; }
141 .photonic-masonry-layout { -moz-column-gap: 0; -webkit-column-gap: 0; column-gap: 0; }
142
143 .photonic-mosaic-layout { width: 100% !important; position: relative; clear: both; margin: 0 auto; overflow: hidden; }
144 .photonic-mosaic-layout .photonic-thumb { display: inline-block; margin: 0; position: absolute; padding: 0; }
145 .photonic-mosaic-layout .photonic-thumb a { padding: 0; width: 100%; height: 100%; }
146 .photonic-mosaic-layout .photonic-thumb a img { width: 100%; height: 100%; padding: 0; display: none; }
147 .photonic-stream .photonic-mosaic-layout .photonic-thumb { margin: 0; }
148
149 a.photonic-level-3-expand {
150 float: right;
151 text-decoration: none;
152 -webkit-box-shadow: none;
153 -moz-box-shadow: none;
154 box-shadow: none;
155 width: 1.5em;
156 height: 1.5em;
157 border-radius: 50%;
158 background-image: url('../images/Icons.svg?v=2.00');
159 background-size: 100%;
160 background-repeat: no-repeat;
161 background-color: #fff;
162 }
163 a.photonic-level-3-expand-plus {
164 background-position: 0 -7.5em;
165 }
166 a.photonic-level-3-expand-down {
167 background-position: 0 -9em;
168 }
169 a.photonic-level-3-expand-up {
170 background-position: 0 -10.5em;
171 }
172 a.photonic-level-3-expand:hover {
173 text-decoration: none;
174 background-color: #6af;
175 }
176
177 .photonic-stream { clear: both; display: inline-block; width: 100%; margin: 1.6em 0;}
178
179 /*.photonic-thumb-circle a { clip-path: circle(50%); }*/
180 .photonic-stream img.circle {
181 border-radius: 50%;
182 }
183
184 .photonic-random-layout {
185 display: inline-block;
186 width: 100% !important;
187 }
188
189 .photonic-random-layout .photonic-pad-photos { display: none; }
190 .photonic-random-layout .photonic-level-2 { display: none; }
191
192 .photonic-random-layout .photonic-tiled-photo {
193 float: left; position: relative; padding: 5px; box-sizing: border-box; background-size: 100% 100%;
194 }
195
196 .photonic-tiled-photo img {
197 width: 100% !important; height: 100% !important;
198 }
199 .photonic-tiled-photo a { box-sizing: border-box; display: block; width: 100%; height: 100%; color: transparent; }
200
201 .photonic-title-info { position: relative; }
202 .title-display-hover-slidedown-show .photonic-title-info { margin-top: -100%; }
203 .title-display-hover-slideup-show .photonic-thumb a img, .title-display-slideup-stick .photonic-thumb a img { padding: 0; }
204 .title-display-hover-slideup-show a .photonic-title, .photonic-slideshow.title-display-hover-slideup-show li .photonic-title,
205 .title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title {
206 background: #111;
207 background: rgba(33, 33, 33, 0.8);
208 display: none;
209 width: 100%;
210 font-size: 0.7em;
211 color: #ddd;
212 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
213 position: absolute;
214 padding: 3px;
215 text-align: left;
216 box-sizing: border-box;
217 }
218 .title-display-hover-slideup-show a .photonic-title, .photonic-slideshow.title-display-hover-slideup-show li .photonic-title, .title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { bottom: 0; }
219 .photonic-slideshow.title-display-hover-slideup-show li .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { font-size: 1em; }
220 .photonic-standard-layout.title-display-slideup-stick a .photonic-title, .slideshow-grid-panel.title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { display: block; }
221 .photonic-slideshow.title-display-below li .photonic-title {
222 background-color: rgba(0, 0, 0, 0.75);
223 position: absolute;
224 bottom: 0;
225 left: 0;
226 padding: 20px;
227 color: white;
228 width: 100%;
229 }
230
231 .photonic-thumbnail-effect-opacity .photonic-thumb img { filter: alpha(opacity=75); opacity: 0.75; }
232 .photonic-thumbnail-effect-opacity .photonic-thumb a:hover img { filter: alpha(opacity=100); opacity: 1; }
233
234 .photonic-thumbnail-effect-zoom a img { -webkit-transition: transform 2s ease; -moz-transition: transform 2s ease; -ms-transition: transform 2s ease; -o-transition: transform 2s ease; transition: transform 2s ease; }
235 .photonic-thumbnail-effect-zoom a:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
236 /*.photonic-thumbnail-effect-zoom a:hover img.circle { clip-path: circle(40%); }*/
237 .photonic-thumbnail-effect-zoom a, .photonic-thumbnail-effect-zoom a:hover { overflow: hidden; }
238
239 .photonic-thumb a img { padding: 5px; display: inline-block; }
240 .photonic-thumb a { display: inline-block; text-align: center; text-decoration: none; font-size: 0.9em; vertical-align: middle; border: none; /*padding: 5px;*/ box-shadow: none; width: 100%; }
241 .photonic-thumb a span { display: block; padding: 3px; width: 100%; }
242
243 .photonic-flickr-collection { display: inline-block; width: 100%; text-align: left; border-width: 0 0 1px 0; border-style: dotted; border-color: #888; padding: 0.5em 0; margin: 0.5em 0; }
244 .photonic-flickr-set, .photonic-flickr-gallery, .photonic-smug-album, .photonic-smug-folder, .photonic-smug-sub-category, .photonic-zenfolio-set, .photonic-zenfolio-group { list-style: none; display: inline-block; width: 100%; text-align: left; border-width: 1px 0 1px 0; border-style: dotted; border-color: #888; padding: 0.5em 0; margin: 0.5em 0; }
245
246 .photonic-header-title { display: block; text-decoration: none; }
247 .photonic-set-photo-count, .photonic-gallery-photo-count, .photonic-album-photo-count { font-size: 85%; font-style: italic; display: block; }
248
249 .photonic-header-thumb { float: left; margin: 0 1em 0 0; }
250 .photonic-header-details { /*float: left;*/ overflow: hidden; }
251 .photonic-header-title { font-size: 120%; font-weight: bold; display: block; }
252 .photonic-header-info { font-size: 90%; font-style: italic; }
253
254 .photonic-loading {
255 position: fixed;
256 top: 50%;
257 left: 50%;
258 width: 100px;
259 height: 100px;
260 margin-top: -50px;
261 margin-left: -50px;
262 cursor: pointer;
263 overflow: hidden;
264 z-index: 1100;
265 display: none;
266 background: #fff url(../images/loading.gif) no-repeat center;
267 }
268
269 .photonic-more-button, .photonic-more-button:visited,
270 .photonic-login-box a.auth-button, .photonic-login-box a.auth-button:visited {
271 padding: 10px 15px;
272 display: inline-block;
273 text-align: center;
274 text-decoration: none;
275 min-width: 120px;
276 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
277 font-size: 14px;
278 margin: 20px 0 0;
279 background: #6af;
280 background: linear-gradient(#336699 20%, #224477 100%);
281 color: #fff;
282 float: none;
283 border-radius: 3px;
284 }
285
286 .photonic-more-button:hover, .photonic-more-button:active, .photonic-more-button:focus,
287 .photonic-login-box a.auth-button:hover, .photonic-login-box a.auth-button:active, .photonic-login-box a.auth-button:focus {
288 text-decoration: none;
289 color: #fff;
290 background: #48d;
291 background: linear-gradient(#224477 20%, #336699 100%);
292 }
293
294 .photonic-login-box {
295 border: 1px solid #888;
296 padding: 10px;
297 border-radius: 5px;
298 display: block;
299 clear: both;
300 }
301
302 .photonic-auth-button, .photonic-more-button {
303 margin: 0 auto;
304 text-align: center;
305 }
306 .photonic-more-link-container {
307 text-align: right;
308 display: inline-block;
309 width: 100%;
310 }
311
312 .photonic-panel-header { top: 0; left: 0; padding: 10px 0; text-align: left; font-weight: bold; border-bottom: 5px solid #787878; color: #787878; position: relative; display: table; width: 100%; border-top: none; margin: 0; }
313 .photonic-panel-header div { vertical-align: middle; margin: 0 5px; }
314 .photonic-panel-header a { text-decoration: none; font-size: 100%; }
315
316 .photonic-password-prompter { display: none; }
317 .photonic-password-submit {
318 background: #6af;
319 background: linear-gradient(to bottom right, #336699 20%, #224477 100%);
320 display: inline-block;
321 box-sizing: border-box;
322 margin-top: 0.5em;
323 }
324 .photonic-password-submit a {
325 color: #fff;
326 padding: 0.5em 1em;
327 text-decoration: none;
328 display: block;
329 }
330 .photonic-jq {
331 background: #fff;
332 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
333 font-size: 14px;
334 }
335 .photonic-jq p { margin-bottom: 1em; }
336 .photonic-jq .ui-button { background: transparent; font-weight: normal; padding: 0; border: 0; cursor: pointer; color: #fff}
337 .photonic-jq .ui-dialog-titlebar {
338 background: #6af;
339 background: linear-gradient(to bottom right, #336699 20%, #224477 100%);
340 color: #fff;
341 border-bottom-left-radius: 0;
342 border-bottom-right-radius: 0;
343 box-sizing: border-box;
344 }
345
346 /*button icon element(s) */
347 .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
348 .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
349 .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
350 .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
351 .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
352
353 /* Misc visuals
354 ----------------------------------*/
355
356 /* Corner radius */
357 .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 4px }
358 .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 4px }
359 .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 4px }
360 .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 4px }
361
362 /* Overlays */
363 .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 80; }
364 .ui-widget-overlay { background: #000; opacity: .3;filter:Alpha(Opacity=30) }
365 .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa; opacity: .3;filter:Alpha(Opacity=30); border-radius: 8px; }
366
367
368 #TB_overlay { z-index: 1050 !important; }
369 #TB_window { z-index: 1060 !important; }
370
371 .ui-tooltip {
372 padding: 8px;
373 position: absolute;
374 z-index: 9999;
375 max-width: 300px;
376 -webkit-box-shadow: 0 0 5px #aaa;
377 box-shadow: 0 0 5px #aaa;
378 background: #333;
379 background: rgba(33, 33, 33, 0.8);
380 color: #eee;
381 }
382 body .ui-tooltip {
383 border-width: 2px;
384 }
385 .ui-tooltip-content {
386 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
387 }
388 .ui-helper-hidden-accessible {
389 border: 0;
390 clip: rect(0 0 0 0);
391 height: 1px;
392 margin: -1px;
393 overflow: hidden;
394 padding: 0;
395 position: absolute;
396 width: 1px;
397 }
398
399 .ui-dialog.photonic-jq { z-index: 1000 !important ;}
400 .ui-dialog.photonic-jq { position: relative; width: 300px; }
401 .ui-dialog.photonic-jq .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; display: inline-block; width: 100%; }
402 .ui-dialog.photonic-jq .ui-dialog-title { float: left; margin: .1em 0 .2em; }
403 .ui-dialog.photonic-jq .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; box-shadow: none;}
404 .ui-dialog.photonic-jq .ui-dialog-titlebar-close span { display: block; margin: 1px; }
405 .ui-dialog.photonic-jq .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
406 .ui-dialog.photonic-jq .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
407 .ui-dialog.photonic-jq .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
408 .ui-dialog.photonic-jq .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
409 .ui-dialog.photonic-jq .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
410 .ui-draggable .ui-dialog-titlebar { cursor: move; }
411
412 #fancybox-right, #fancybox-left { width: 15%; }
413 #fancybox-wrap, #fancybox-content { box-sizing: content-box; }
414
415 .fancybox-inner { overflow: auto !important; }
416 .photonic-fancybox .fancybox-inner { overflow: hidden !important; }
417
418 .photonicModalOverlay {
419 width: 100%;
420 height: 100%;
421 top: 0;
422 left: 0;
423 position: fixed;
424 background: #333;
425 background: rgba(33, 33, 33, 0.8);
426 text-align: center;
427 }
428
429 .photonicModalOverlayScrollable {
430 display: inline-block;
431 width: 100%;
432 text-align: center;
433 }
434
435 .photonicModal { margin: 0 auto; }
436
437 .photonicModal.photonic-panel { border-radius: 0 0 10px 10px; }
438
439 a.photonicModalClose {
440 position: absolute;
441 float: right;
442 border: none;
443 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
444 font-size: 30px;
445 width: 30px;
446 height: 30px;
447 line-height: 30px;
448 color: #bbb;
449 top: 0;
450 z-index: 10000;
451 }
452
453 .photonic-icon {
454 background-image: url("../images/Icons.svg?v=2.19");
455 background-size: 100%;
456 width: 96px;
457 height: 96px;
458 display: block;
459 position: relative;
460 }
461 .photonic-error-icon { background-position: 0 -768px; }
462 .photonic-error .photonic-icon { float: left; }
463 .photonic-error .photonic-message { margin-left: 100px; display: block; }
464 .photonic-error { display: block; width: 100%; box-sizing: border-box; position: relative; padding: 1em 0; }
465
466 .photonic-html5-external { display: none; }
467
468 .pswp__item .photonic-video { text-align: center; position: relative; top: 50%; transform: translateY(-50%); }
469
470 .mfp-inline-holder .mfp-content { text-align: center; }
471 .mfp-close-btn-in .mfp-inline-holder .mfp-close { color: #eee; }
472 .mfp-content #photonic-social { position: absolute; top: 45px; left: 5px; }
473
474 .photonic-stream.alignwide { }
475 .photonic-stream.alignfull { }
476
477 .photonic-helper {
478 width: 100%;
479 box-sizing: border-box;
480 }
481
482 [data-photonic-stream-provider='flickr'] [data-photonic-media-type='video']:hover:before,
483 [data-photonic-stream-provider='smug'] [data-photonic-media-type='video']:hover:before,
484 [data-photonic-stream-provider='zenfolio'] [data-photonic-media-type='video']:hover:before,
485 [data-photonic-stream-provider='instagram'] [data-photonic-media-type='video']:hover:before {
486 content: '';
487 background-image: url("../images/Icons.svg?v=2.19");
488 background-size: 100%;
489 -ms-background-position-y: -480px;
490 background-position-y: -480px;
491 width: 48px;
492 height: 48px;
493 display: block;
494 position: absolute;
495 top: 50%;
496 left: 50%;
497 margin-top: -24px;
498 margin-left: -24px;
499 z-index: 1;
500 }
501
502