Instagram Feed - Version 2.4.2

Version Description

  • New: To help us improve the plugin we've added the ability to opt-in to usage tracking so that we can understand what features and settings are being used, and which features matter to you the most. This is disabled by default and will only be enabled if you explictly choose to opt in. If opted in, the plugin will send a report in the background once per week with your plugin settings and basic information about your website environment. No personal or sensitive data is collected (such as email addresses, Instagram account information, license keys, etc). To enable or disable usage tracking at a later date use the setting at: Instagram Feed > Customize > Advanced > Misc > Enable Usage Tracking. See here for more information.
  • Tweak: Added additional checks to make sure the HTTP protocol matches when using resized image URLs from the uploads folder.
  • Tweak: More information is given when there is an account connection error when connecting an account on the "Configure" page.
  • Tweak: Connecting a business account will permanently remove any accounts from the same user that are from the legacy Instagram API that is expiring in June.
  • Fix: Added a workaround for sanitize_textarea_field for users using an older version of WordPress.
  • Fix: Fixed HTML error causing the manually connect an account feature to not work.
  • Fix: Access token and account ID are validated and formatted before trying to manually connect an account to prevent errors.
Download this release

Release Info

Developer smashballoon
Plugin Icon 128x128 Instagram Feed
Version 2.4.2
Comparing to
See all releases

Code changes from version 2.4.1 to 2.4.2

Files changed (54) hide show
  1. README.txt +10 -1
  2. css/sb-blocks.css +2 -2
  3. css/sb-instagram-2-1.css +744 -0
  4. css/sb-instagram-2-1.min.css +1 -0
  5. css/sb-instagram-2-2.css +818 -818
  6. css/sb-instagram.css +818 -818
  7. img/about/icon-full.svg +0 -0
  8. img/about/icon-none.svg +0 -0
  9. img/about/icon-partial.svg +0 -0
  10. img/about/plugin-mi.png +0 -0
  11. img/about/plugin-om.png +0 -0
  12. img/about/plugin-rp.png +0 -0
  13. img/about/plugin-smtp.png +0 -0
  14. img/about/plugin-wpforms.png +0 -0
  15. inc/admin/PluginSilentUpgrader.php +576 -576
  16. inc/admin/PluginSilentUpgraderSkin.php +57 -57
  17. inc/admin/actions.php +1340 -1270
  18. inc/admin/addon-functions.php +174 -174
  19. inc/admin/blocks/class-sbi-blocks.php +149 -149
  20. inc/admin/class-install-skin.php +27 -27
  21. inc/admin/class-sbi-about.php +1317 -1317
  22. inc/admin/class-sbi-sitehealth.php +81 -81
  23. inc/admin/class-sbi-tracking.php +334 -0
  24. inc/admin/main.php +2886 -2853
  25. inc/class-sb-instagram-api-connect.php +380 -380
  26. inc/class-sb-instagram-cron-updater.php +225 -225
  27. inc/class-sb-instagram-display-elements.php +360 -360
  28. inc/class-sb-instagram-education.php +130 -130
  29. inc/class-sb-instagram-feed.php +1476 -1476
  30. inc/class-sb-instagram-parse.php +313 -313
  31. inc/class-sb-instagram-post-set.php +187 -187
  32. inc/class-sb-instagram-post.php +546 -546
  33. inc/class-sb-instagram-posts-manager.php +533 -533
  34. inc/class-sb-instagram-settings.php +751 -615
  35. inc/class-sb-instagram-token-refresher.php +175 -175
  36. inc/email.php +102 -102
  37. inc/if-functions.php +1299 -1280
  38. instagram-feed.php +18 -3
  39. js/jquery.matchHeight-min.js +12 -12
  40. js/sb-blocks.js +113 -113
  41. js/sb-instagram-2-1.js +884 -0
  42. js/sb-instagram-2-1.min.js +1 -0
  43. js/sb-instagram-2-2.js +890 -890
  44. js/sb-instagram-admin-2-2.js +35 -2
  45. js/sb-instagram-admin.js +961 -0
  46. js/sb-instagram.js +886 -886
  47. languages/instagram-feed-en.mo +0 -0
  48. languages/instagram-feed.pot +2162 -2162
  49. templates/feed.php +66 -66
  50. templates/footer.php +38 -38
  51. templates/header.php +47 -47
  52. templates/item.php +57 -57
  53. widget.php +67 -67
  54. wpml-config.xml +12 -12
README.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: smashballoon, craig-at-smash-balloon
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
Requires at least: 3.4
5
Tested up to: 5.4
6
- Stable tag: 2.4.1
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
@@ -325,6 +325,15 @@ We understand that sometimes you need help, have issues or just have questions.
325
* Plus more customization options added all the time!
326
327
== Changelog ==
328
= 2.4.1 =
329
* Tweak: User feeds that do not have a user name or ID assigned to them will automatically use the first connected account for the feed.
330
* Tweak: rel="nofollow" added to all external Instagram Feed links found in the source of the page.
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
Requires at least: 3.4
5
Tested up to: 5.4
6
+ Stable tag: 2.4.2
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
325
* Plus more customization options added all the time!
326
327
== Changelog ==
328
+ = 2.4.2 =
329
+ * New: To help us improve the plugin we've added the ability to opt-in to usage tracking so that we can understand what features and settings are being used, and which features matter to you the most. This is disabled by default and will only be enabled if you explictly choose to opt in. If opted in, the plugin will send a report in the background once per week with your plugin settings and basic information about your website environment. No personal or sensitive data is collected (such as email addresses, Instagram account information, license keys, etc). To enable or disable usage tracking at a later date use the setting at: Instagram Feed > Customize > Advanced > Misc > Enable Usage Tracking. See [here](https://smashballoon.com/instagram-feed/usage-tracking/) for more information.
330
+ * Tweak: Added additional checks to make sure the HTTP protocol matches when using resized image URLs from the uploads folder.
331
+ * Tweak: More information is given when there is an account connection error when connecting an account on the "Configure" page.
332
+ * Tweak: Connecting a business account will permanently remove any accounts from the same user that are from the legacy Instagram API that is expiring in June.
333
+ * Fix: Added a workaround for sanitize_textarea_field for users using an older version of WordPress.
334
+ * Fix: Fixed HTML error causing the manually connect an account feature to not work.
335
+ * Fix: Access token and account ID are validated and formatted before trying to manually connect an account to prevent errors.
336
+
337
= 2.4.1 =
338
* Tweak: User feeds that do not have a user name or ID assigned to them will automatically use the first connected account for the feed.
339
* Tweak: rel="nofollow" added to all external Instagram Feed links found in the source of the page.
css/sb-blocks.css CHANGED
@@ -1,3 +1,3 @@
1
- .sbi {
2
- pointer-events: none !important;
3
}
1
+ .sbi {
2
+ pointer-events: none !important;
3
}
css/sb-instagram-2-1.css ADDED
@@ -0,0 +1,744 @@
1
+ /**************/
2
+ /*** LAYOUT ***/
3
+ /**************/
4
+
5
+ /* Feed container */
6
+ #sb_instagram {
7
+ width: 100%;
8
+ margin: 0 auto;
9
+ padding: 0;
10
+ -webkit-box-sizing: border-box;
11
+ -moz-box-sizing: border-box;
12
+ box-sizing: border-box;
13
+ }
14
+ #sb_instagram:after{
15
+ content: "";
16
+ display: table;
17
+ clear: both;
18
+ }
19
+
20
+ /*********************/
21
+ /*** STYLE OPTIONS ***/
22
+ /*********************/
23
+ #sb_instagram.sbi_fixed_height{
24
+ overflow: hidden;
25
+ overflow-y: auto;
26
+ -webkit-box-sizing: border-box;
27
+ -moz-box-sizing: border-box;
28
+ box-sizing: border-box;
29
+ }
30
+ #sb_instagram #sbi_images{
31
+ width: 100%;
32
+ float: left;
33
+ line-height: 0;
34
+
35
+ -webkit-box-sizing: border-box;
36
+ -moz-box-sizing: border-box;
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ /* Items */
41
+ #sb_instagram #sbi_images .sbi_item{
42
+ display: -moz-inline-stack;
43
+ display: inline-block;
44
+ float: left;
45
+ vertical-align: top;
46
+ zoom: 1;
47
+ *display: inline;
48
+
49
+ max-height: 1000px;
50
+ padding: inherit !important;
51
+ margin: 0 !important;
52
+ text-decoration: none;
53
+ opacity: 1;
54
+ overflow: hidden;
55
+
56
+ -webkit-box-sizing: border-box;
57
+ -moz-box-sizing: border-box;
58
+ box-sizing: border-box;
59
+
60
+ -webkit-transition: all 0.5s ease;
61
+ -moz-transition: all 0.5s ease;
62
+ -o-transition: all 0.5s ease;
63
+ -ms-transition: all 0.5s ease;
64
+ transition: all 0.5s ease;
65
+ }
66
+ /* Transition items in */
67
+ #sb_instagram #sbi_images .sbi_item.sbi_transition{
68
+ opacity: 0;
69
+ max-height: 0;
70
+ }
71
+
72
+ /* Cols */
73
+ #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
74
+ #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
75
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
76
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
77
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
78
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
79
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
80
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
81
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
82
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
83
+
84
+ /* Disable mobile layout */
85
+ #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
86
+ #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
87
+ #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
88
+ #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
89
+ #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
90
+ #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
91
+ #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
92
+ #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
93
+ #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
94
+ #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
95
+
96
+ /* Photos */
97
+ #sb_instagram .sbi_photo_wrap{
98
+ position: relative;
99
+ }
100
+ #sb_instagram .sbi_photo{
101
+ display: block;
102
+ text-decoration: none;
103
+ }
104
+ #sb_instagram .sbi_photo img{
105
+ width: 100%;
106
+ height: auto;
107
+ }
108
+ #sb_instagram .sbi_no_js img{
109
+ display: none;
110
+ }
111
+ #sb_instagram a,
112
+ #sb_instagram a:hover,
113
+ #sb_instagram a:focus,
114
+ #sb_instagram a:active{
115
+ outline: none;
116
+ }
117
+ #sb_instagram img{
118
+ display: block;
119
+ padding: 0 !important;
120
+ margin: 0 !important;
121
+ max-width: 100% !important;
122
+ opacity: 1 !important;
123
+ }
124
+ #sb_instagram .sbi_link{
125
+ display: none;
126
+ position: absolute;
127
+ bottom: 0;
128
+ right: 0;
129
+
130
+ width: 100%;
131
+ padding: 10px 0;
132
+ background: rgba(0,0,0,0.5);
133
+ text-align: center;
134
+ color: #fff;
135
+ font-size: 12px;
136
+ line-height: 1.1;
137
+ }
138
+ #sb_instagram .sbi_link a{
139
+ padding: 0 6px;
140
+ text-decoration: none;
141
+ color: #fff;
142
+ font-size: 12px;
143
+ line-height: 1.1;
144
+
145
+ display: -moz-inline-stack;
146
+ display: inline-block;
147
+ vertical-align: top;
148
+ zoom: 1;
149
+ *display: inline;
150
+ }
151
+ #sb_instagram .sbi_link .sbi_lightbox_link{
152
+ padding-bottom: 5px;
153
+ }
154
+ #sb_instagram .sbi_link a:hover,
155
+ #sb_instagram .sbi_link a:focus{
156
+ text-decoration: underline;
157
+ }
158
+ #sb_instagram .sbi_photo_wrap:hover .sbi_link,
159
+ #sb_instagram .sbi_photo_wrap:focus .sbi_link{
160
+ display: block;
161
+ }
162
+
163
+ /* Videos */
164
+ #sb_instagram svg:not(:root).svg-inline--fa {
165
+ height: 1em;
166
+ display: inline-block;
167
+ }
168
+
169
+ #sb_instagram .sbi_type_video .sbi_playbtn,
170
+ #sb_instagram .sbi_type_carousel .sbi_playbtn,
171
+ .sbi_type_carousel .fa-clone,
172
+ #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
173
+ #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
174
+ display: block !important;
175
+ position: absolute;
176
+ z-index: 1;
177
+
178
+ color: #fff;
179
+ color: rgba(255,255,255,0.9);
180
+ font-style: normal !important;
181
+ text-shadow: 0 0 8px rgba(0,0,0,0.8);
182
+ }
183
+ #sb_instagram .sbi_type_video .sbi_playbtn,
184
+ #sb_instagram .sbi_type_carousel .sbi_playbtn {
185
+ z-index: 2;
186
+ top: 50%;
187
+ left: 50%;
188
+ margin-top: -24px;
189
+ margin-left: -19px;
190
+ padding: 0;
191
+ font-size: 48px;
192
+ }
193
+ #sb_instagram .sbi_type_carousel .fa-clone{
194
+ right: 12px;
195
+ top: 12px;
196
+ font-size: 24px;
197
+ text-shadow: 0 0 8px rgba(0,0,0,0.3);
198
+ }
199
+ .sbi_type_carousel svg.fa-clone,
200
+ #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
201
+ #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
202
+ -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
203
+ filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
204
+ }
205
+
206
+ /* Loader */
207
+ #sb_instagram .sbi_loader{
208
+ width: 20px;
209
+ height: 20px;
210
+
211
+ position: relative;
212
+ top: 50%;
213
+ left: 50%;
214
+ margin: -10px 0 0 -10px;
215
+ background-color: #000;
216
+ background-color: rgba(0,0,0,0.5);
217
+
218
+ border-radius: 100%;
219
+ -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
220
+ animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
221
+ }
222
+ #sb_instagram br {
223
+ display: none;
224
+ }
225
+ #sbi_load p {
226
+ display: inline;
227
+ padding: 0;
228
+ margin: 0;
229
+ }
230
+ /* Loader in button */
231
+ #sb_instagram #sbi_load .sbi_loader{
232
+ position: absolute;
233
+ margin-top: -11px;
234
+ background-color: #fff;
235
+ opacity: 1;
236
+ }
237
+ @-webkit-keyframes sbi-sk-scaleout {
238
+ 0% { -webkit-transform: scale(0) }
239
+ 100% {
240
+ -webkit-transform: scale(1.0);
241
+ opacity: 0;
242
+ }
243
+ }
244
+ @keyframes sbi-sk-scaleout {
245
+ 0% {
246
+ -webkit-transform: scale(0);
247
+ -ms-transform: scale(0);
248
+ transform: scale(0);
249
+ } 100% {
250
+ -webkit-transform: scale(1.0);
251
+ -ms-transform: scale(1.0);
252
+ transform: scale(1.0);
253
+ opacity: 0;
254
+ }
255
+ }
256
+
257
+ #sb_instagram .fa-spin,
258
+ #sbi_lightbox .fa-spin{
259
+ -webkit-animation: fa-spin 2s infinite linear;
260
+ animation: fa-spin 2s infinite linear
261
+ }
262
+
263
+ #sb_instagram .fa-pulse,
264
+ #sbi_lightbox .fa-pulse{
265
+ -webkit-animation: fa-spin 1s infinite steps(8);
266
+ animation: fa-spin 1s infinite steps(8)
267
+ }
268
+
269
+ @-webkit-keyframes fa-spin {
270
+ 0% {
271
+ -webkit-transform: rotate(0deg);
272
+ transform: rotate(0deg)
273
+ }
274
+ 100% {
275
+ -webkit-transform: rotate(359deg);
276
+ transform: rotate(359deg)
277
+ }
278
+ }
279
+
280
+ @keyframes fa-spin {
281
+ 0% {
282
+ -webkit-transform: rotate(0deg);
283
+ transform: rotate(0deg)
284
+ }
285
+ 100% {
286
+ -webkit-transform: rotate(359deg);
287
+ transform: rotate(359deg)
288
+ }
289
+ }
290
+ /* Screen reader */
291
+ .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;text-align: left !important; }
292
+
293
+ /* HEADER */
294
+ #sb_instagram .sb_instagram_header{
295
+ float: left;
296
+ clear: both;
297
+ margin: 0 0 15px 0;
298
+ padding: 0;
299
+ line-height: 1.2;
300
+ width: 100%;
301
+ }
302
+ #sb_instagram .sb_instagram_header a{
303
+ float: left;
304
+ display: block;
305
+ /*width: 100%;*/
306
+ min-width: 100%\9;
307
+ text-decoration: none;
308
+ transition: color 0.5s ease;
309
+ }
310
+ /** Medium Header */
311
+ /* Only use medium & large headers on devices above 480px */
312
+ @media all and (min-width: 480px){
313
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
314
+ width: 80px;
315
+ height: 80px;
316
+ border-radius: 40px;
317
+ }
318
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
319
+ width: 80px;
320
+ height: 80px;
321
+ border-radius: 40px;
322
+ }
323
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
324
+ font-size: 20px;
325
+ }
326
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
327
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
328
+ font-size: 14px;
329
+ }
330
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
331
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
332
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
333
+ margin-left: 95px !important;
334
+ line-height: 1.4
335
+ }
336
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{
337
+ margin-right: -85px !important;
338
+ }
339
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
340
+ margin-top: 4px !important;
341
+ }
342
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{
343
+ padding-top: 20px !important;
344
+ }
345
+ /** Large Header */
346
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img {
347
+ width: 120px;
348
+ height: 120px;
349
+ border-radius: 60px;
350
+ }
351
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img {
352
+ width: 120px;
353
+ height: 120px;
354
+ border-radius: 60px;
355
+ }
356
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3 {
357
+ font-size: 28px;
358
+ }
359
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
360
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
361
+ font-size: 16px;
362
+ }
363
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3,
364
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
365
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
366
+ margin-left: 140px !important;
367
+ line-height: 1.5;
368
+ }
369
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{
370
+ margin-right: -120px !important;
371
+ }
372
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
373
+ margin-top: 12px !important;
374
+ }
375
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{
376
+ padding-top: 32px !important;
377
+ }
378
+ }
379
+
380
+ /* Header profile pic */
381
+ #sb_instagram .sb_instagram_header .sbi_header_img{
382
+ float: left;
383
+ position: relative;
384
+ width: 50px;
385
+ margin: 0 0 0 -100% !important;
386
+ overflow: hidden;
387
+
388
+ -moz-border-radius: 40px;
389
+ -webkit-border-radius: 40px;
390
+ border-radius: 40px;
391
+ }
392
+ #sb_instagram .sb_instagram_header .sbi_header_img img{
393
+ float: left;
394
+ margin: 0 !important;
395
+ padding: 0 !important;
396
+ border: none !important;
397
+
398
+ -moz-border-radius: 40px;
399
+ -webkit-border-radius: 40px;
400
+ border-radius: 40px;
401
+ }
402
+ /* Profile pic hover */
403
+ /* Profile pic hover */
404
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
405
+ opacity: 0;
406
+ position: absolute;
407
+ width: 100%;
408
+ top: 0;
409
+ bottom: 0;
410
+ left: 0;
411
+ text-align: center;
412
+ color: #fff;
413
+ background: rgba(0,0,0,0.75);
414
+ }
415
+
416
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo{
417
+ position: absolute;
418
+ top: 50%;
419
+ left: 50%;
420
+ margin-top: -12px;
421
+ margin-left: -12px;
422
+ width: 24px;
423
+ height: 24px;
424
+ font-size: 24px;
425
+ }
426
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover i {
427
+ overflow: hidden;
428
+ background: url('../img/small-logo.png') no-repeat 0 0;
429
+ }
430
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
431
+ z-index: 2;
432
+ transition: opacity 0.4s ease-in-out;
433
+ }
434
+ #sb_instagram .sb_instagram_header .sbi_fade_in{
435
+ opacity: 1;
436
+ transition: opacity 0.2s ease-in-out;
437
+ }
438
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
439
+ position: absolute;
440
+ width: 100%;
441
+ top: 0;
442
+ bottom: 0;
443
+ left: 0;
444
+ text-align: center;
445
+ color: #fff;
446
+ background: rgba(0,0,0,0.75);
447
+
448
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
449
+ filter: alpha(opacity=0);
450
+ -moz-opacity: 0;
451
+ -khtml-opacity: 0;
452
+ opacity: 0;
453
+ border-radius: 40px;
454
+ transition: opacity 0.2s;
455
+ }
456
+ /* Fade the Instagram icon in when hovering on the header */
457
+ #sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
458
+ #sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
459
+ opacity: 1;
460
+ }
461
+ /* Header text */
462
+ #sb_instagram .sb_instagram_header .sbi_header_text{
463
+ float: left;
464
+ width: 100%;
465
+ padding-top: 5px;
466
+ }
467
+ #sb_instagram .sb_instagram_header a{
468
+ text-decoration: none;
469
+ }
470
+ #sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,
471
+ #sb_instagram .sb_instagram_header .sbi_header_text h3{
472
+ float: left;
473
+ clear: both;
474
+ width: auto;
475
+ margin: 0 0 0 60px !important;
476
+ padding: 0 !important;
477
+ }
478
+ #sb_instagram .sb_instagram_header h3{
479
+ font-size: 16px;
480
+ line-height: 1.3;
481
+ }
482
+ #sb_instagram .sb_instagram_header p{
483
+ font-size: 13px;
484
+ line-height: 1.3;
485
+ margin: 0;
486
+ padding: 0;
487
+ }
488
+ #sb_instagram p:empty { display: none; }
489
+ #sb_instagram .sb_instagram_header .sbi_header_text img.emoji{
490
+ margin-right: 3px !important;
491
+ }
492
+
493
+ /* No bio */
494
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{
495
+ padding-top: 9px !important;
496
+ }
497
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{
498
+ clear: both;
499
+ }
500
+
501
+
502
+ /* Buttons */
503
+ #sb_instagram #sbi_load{
504
+ float: left;
505
+ clear: both;
506
+ width: 100%;
507
+ text-align: center;
508
+ }
509
+ #sb_instagram #sbi_load .fa-spinner{
510
+ display: none;
511
+ position: absolute;
512
+ top: 50%;
513
+ left: 50%;
514
+ margin: -8px 0 0 -7px;
515
+ font-size: 15px;
516
+ }
517
+ #sb_instagram #sbi_load{
518
+ opacity: 1;
519
+ transition: all 0.5s ease-in;
520
+ }
521
+ #sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
522
+ opacity: 1;
523
+ transition: all 0.1s ease-in;
524
+ }
525
+ #sb_instagram .sbi_hidden{
526
+ opacity: 0 !important;
527
+ }
528
+ #sb_instagram #sbi_load .sbi_load_btn,
529
+ #sb_instagram .sbi_follow_btn a{
530
+ display: -moz-inline-stack;
531
+ display: inline-block;
532
+ vertical-align: top;
533
+ zoom: 1;
534
+ *display: inline;
535
+
536
+ padding: 7px 14px;
537
+ margin: 5px auto 0 auto;
538
+ background: #333;
539
+ color: #eee;
540
+ border: none;
541
+ color: #fff;
542
+ text-decoration: none;
543
+ font-size: 13px;
544
+ line-height: 1.5;
545
+
546
+ -moz-border-radius: 4px;
547
+ -webkit-border-radius: 4px;
548
+ border-radius: 4px;
549
+
550
+ -webkit-box-sizing: border-box;
551
+ -moz-box-sizing: border-box;
552
+ box-sizing: border-box;
553
+ }
554
+ #sb_instagram #sbi_load .sbi_load_btn {
555
+ position: relative;
556
+ }
557
+ /* Follow button */
558
+ #sb_instagram .sbi_follow_btn{
559
+ display: -moz-inline-stack;
560
+ display: inline-block;
561
+ vertical-align: top;
562
+ zoom: 1;
563
+ *display: inline;
564
+ text-align: center;
565
+ }
566
+ #sb_instagram .sbi_follow_btn.sbi_top{
567
+ display: block;
568
+ margin-bottom: 5px;
569
+ }
570
+ #sb_instagram .sbi_follow_btn a{
571
+ background: #408bd1;
572
+ color: #fff;
573
+ }
574
+ #sb_instagram .sbi_follow_btn a,
575
+ #sb_instagram .sbi_follow_btn a,
576
+ #sb_instagram #sbi_load .sbi_load_btn{
577
+ transition: all 0.1s ease-in;
578
+ }
579
+ /* Hover state for default colors */
580
+ #sb_instagram #sbi_load .sbi_load_btn:hover{
581
+ outline: none;
582
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
583
+ }
584
+ #sb_instagram .sbi_follow_btn a:hover,
585
+ #sb_instagram .sbi_follow_btn a:focus{
586
+ outline: none;
587
+ box-shadow: inset 0 0 10px 20px #359dff;
588
+ }
589
+ /* If a custom color is applied then just use opacity for the hover effect */
590
+ #sb_instagram .sbi_follow_btn.sbi_custom a:hover,
591
+ #sb_instagram .sbi_follow_btn.sbi_custom a:focus,
592
+ #sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
593
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
594
+ }
595
+ /* Active state */
596
+ #sb_instagram .sbi_follow_btn a:active,
597
+ #sb_instagram #sbi_load .sbi_load_btn:active{
598
+ box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
599
+ }
600
+
601
+ #sb_instagram .sbi_follow_btn .fa,
602
+ #sb_instagram .sbi_follow_btn svg{
603
+ margin-bottom: -1px;
604
+ margin-right: 7px;
605
+ font-size: 15px;
606
+ }
607
+ #sb_instagram .sbi_follow_btn svg{
608
+ vertical-align: -.125em;
609
+ }
610
+ #sb_instagram #sbi_load .sbi_follow_btn{
611
+ margin-left: 5px;
612
+ }
613
+
614
+ /* Error messages */
615
+ #sb_instagram .sb_instagram_error{
616
+ width: 100%;
617
+ text-align: center;
618
+ line-height: 1.4;
619
+ }
620
+
621
+ /* Mod only error msgs */
622
+ #sbi_mod_error{
623
+ display: none;
624
+ border: 1px solid #ddd;
625
+ background: #eee;
626
+ color: #333;
627
+ margin: 10px 0 0;
628
+ padding: 10px 15px;
629
+ font-size: 13px;
630
+ text-align: center;
631
+ clear: both;
632
+
633
+ -moz-border-radius: 4px;
634
+ -webkit-border-radius: 4px;
635
+ border-radius: 4px;
636
+ }
637
+ #sbi_mod_error p{
638
+ padding: 5px 0 !important;
639
+ margin: 0 !important;
640
+ line-height: 1.3 !important;
641
+ }
642
+ #sbi_mod_error ol,
643
+ #sbi_mod_error ul{
644
+ padding: 5px 0 5px 20px !important;
645
+ margin: 0 !important;
646
+ }
647
+ #sbi_mod_error li{
648
+ padding: 1px 0 !important;
649
+ margin: 0 !important;
650
+ }
651
+ #sbi_mod_error span{
652
+ font-size: 12px;
653
+ }
654
+
655
+ /* Medium */
656
+ #sb_instagram.sbi_medium .sbi_playbtn,
657
+ #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
658
+ margin-top: -12px;
659
+ margin-left: -9px;
660
+ font-size: 23px;
661
+ }
662
+ #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
663
+ right: 8px;
664
+ top: 8px;
665
+ font-size: 18px;
666
+ }
667
+ /* Small */
668
+ #sb_instagram.sbi_small .sbi_playbtn,
669
+ #sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
670
+ margin-top: -9px;
671
+ margin-left: -7px;
672
+ font-size: 18px;
673
+ }
674
+ #sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
675
+ right: 5px;
676
+ top: 5px;
677
+ font-size: 12px;
678
+ }
679
+
680
+ /* Media queries */
681
+ @media all and (max-width: 640px){
682
+ /* Make 3-6 cols into 2 col */
683
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
684
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
685
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
686
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
687
+ width: 50%;
688
+ }
689
+ /* Make 7-10 cols into 4 col */
690
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
691
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
692
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
693
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
694
+ width: 25%;
695
+ }
696
+ /* On mobile make the min-width 100% */
697
+ #sb_instagram.sbi_width_resp{
698
+ width: 100% !important;
699
+ }
700
+ }
701
+ @media all and (max-width: 480px){
702
+ /* Make all cols into 1 col */
703
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
704
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
705
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
706
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
707
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
708
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
709
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
710
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
711
+ width: 100%;
712
+ }
713
+ }
714
+
715
+ /* NO JS */
716
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{
717
+ box-sizing: border-box;
718
+ position: relative;
719
+ overflow: hidden;
720
+ }
721
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before {
722
+ content: "";
723
+ display: block;
724
+ padding-top: 100%;
725
+ z-index: -300;
726
+ }
727
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo {
728
+ position: absolute;
729
+ top: 0;
730
+ left: 0;
731
+ bottom: 0;
732
+ right: 0;
733
+ }
734
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition {
735
+ opacity: 1;
736
+ max-height: 640px;
737
+ }
738
+ #sb_instagram.sbi_no_js .sbi_photo img,
739
+ #sb_instagram.sbi_no_js .sbi_load_btn{
740
+ display: none;
741
+ }
742
+ #sb_instagram #sbi_images .sbi_js_load_disabled .sbi_imgLiquid_ready.sbi_photo {
743
+ padding-bottom: 0 !important;
744
+ }
css/sb-instagram-2-1.min.css ADDED
@@ -0,0 +1 @@
1
+ #sb_instagram{width:100%;margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram:after{content:"";display:table;clear:both}#sb_instagram.sbi_fixed_height{overflow:hidden;overflow-y:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images{width:100%;float:left;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images .sbi_item{display:-moz-inline-stack;display:inline-block;float:left;vertical-align:top;zoom:1;max-height:1000px;padding:inherit!important;margin:0!important;text-decoration:none;opacity:1;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease}#sb_instagram #sbi_images .sbi_item.sbi_transition{opacity:0;max-height:0}#sb_instagram.sbi_col_1 #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3 #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5 #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7 #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8 #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item{width:10%}#sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{width:10%}#sb_instagram .sbi_photo_wrap{position:relative}#sb_instagram .sbi_photo{display:block;text-decoration:none}#sb_instagram .sbi_photo img{width:100%;height:auto}#sb_instagram .sbi_no_js img{display:none}#sb_instagram a,#sb_instagram a:active,#sb_instagram a:focus,#sb_instagram a:hover{outline:0}#sb_instagram img{display:block;padding:0!important;margin:0!important;max-width:100%!important;opacity:1!important}#sb_instagram .sbi_link{display:none;position:absolute;bottom:0;right:0;width:100%;padding:10px 0;background:rgba(0,0,0,.5);text-align:center;color:#fff;font-size:12px;line-height:1.1}#sb_instagram .sbi_link a{padding:0 6px;text-decoration:none;color:#fff;font-size:12px;line-height:1.1;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1}#sb_instagram .sbi_link .sbi_lightbox_link{padding-bottom:5px}#sb_instagram .sbi_link a:focus,#sb_instagram .sbi_link a:hover{text-decoration:underline}#sb_instagram .sbi_photo_wrap:focus .sbi_link,#sb_instagram .sbi_photo_wrap:hover .sbi_link{display:block}#sb_instagram svg:not(:root).svg-inline--fa{height:1em;display:inline-block}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .sbi_playbtn,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel .fa-clone{display:block!important;position:absolute;z-index:1;color:#fff;color:rgba(255,255,255,.9);font-style:normal!important;text-shadow:0 0 8px rgba(0,0,0,.8)}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_video .sbi_playbtn{z-index:2;top:50%;left:50%;margin-top:-24px;margin-left:-19px;padding:0;font-size:48px}#sb_instagram .sbi_type_carousel .fa-clone{right:12px;top:12px;font-size:24px;text-shadow:0 0 8px rgba(0,0,0,.3)}#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel svg.fa-clone{-webkit-filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) );filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) )}#sb_instagram .sbi_loader{width:20px;height:20px;position:relative;top:50%;left:50%;margin:-10px 0 0 -10px;background-color:#000;background-color:rgba(0,0,0,.5);border-radius:100%;-webkit-animation:sbi-sk-scaleout 1s infinite ease-in-out;animation:sbi-sk-scaleout 1s infinite ease-in-out}#sb_instagram br{display:none}#sbi_load p{display:inline;padding:0;margin:0}#sb_instagram #sbi_load .sbi_loader{position:absolute;margin-top:-11px;background-color:#fff;opacity:1}@-webkit-keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:0}}#sb_instagram .fa-spin,#sbi_lightbox .fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}#sb_instagram .fa-pulse,#sbi_lightbox .fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sbi-screenreader{text-indent:-9999px!important;display:block!important;width:0!important;height:0!important;line-height:0!important;text-align:left!important}#sb_instagram .sb_instagram_header{float:left;clear:both;margin:0 0 15px 0;padding:0;line-height:1.2;width:100%}#sb_instagram .sb_instagram_header a{float:left;display:block;text-decoration:none;transition:color .5s ease}@media all and (min-width:480px){#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{font-size:20px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{font-size:14px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-left:95px!important;line-height:1.4}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-right:-85px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{margin-top:4px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{padding-top:20px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{font-size:28px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{font-size:16px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-left:140px!important;line-height:1.5}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-right:-120px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{margin-top:12px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{padding-top:32px!important}}#sb_instagram .sb_instagram_header .sbi_header_img{float:left;position:relative;width:50px;margin:0 0 0 -100%!important;overflow:hidden;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sb_instagram_header .sbi_header_img img{float:left;margin:0!important;padding:0!important;border:none!important;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sb_instagram_header .sbi_header_img_hover{opacity:0;position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75)}#sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo{position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;width:24px;height:24px;font-size:24px}#sb_instagram .sb_instagram_header .sbi_header_img_hover i{overflow:hidden;background:url(../img/small-logo.png) no-repeat 0 0}#sb_instagram .sb_instagram_header .sbi_header_img_hover{z-index:2;transition:opacity .4s ease-in-out}#sb_instagram .sb_instagram_header .sbi_fade_in{opacity:1;transition:opacity .2s ease-in-out}#sb_instagram .sb_instagram_header .sbi_header_img_hover{position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75);-moz-opacity:0;-khtml-opacity:0;opacity:0;border-radius:40px;transition:opacity .2s}#sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover,#sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover{opacity:1}#sb_instagram .sb_instagram_header .sbi_header_text{float:left;width:100%;padding-top:5px}#sb_instagram .sb_instagram_header a{text-decoration:none}#sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header .sbi_header_text h3{float:left;clear:both;width:auto;margin:0 0 0 60px!important;padding:0!important}#sb_instagram .sb_instagram_header h3{font-size:16px;line-height:1.3}#sb_instagram .sb_instagram_header p{font-size:13px;line-height:1.3;margin:0;padding:0}#sb_instagram p:empty{display:none}#sb_instagram .sb_instagram_header .sbi_header_text img.emoji{margin-right:3px!important}#sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{padding-top:9px!important}#sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{clear:both}#sb_instagram #sbi_load{float:left;clear:both;width:100%;text-align:center}#sb_instagram #sbi_load .fa-spinner{display:none;position:absolute;top:50%;left:50%;margin:-8px 0 0 -7px;font-size:15px}#sb_instagram #sbi_load{opacity:1;transition:all .5s ease-in}#sb_instagram .sbi_load_btn .sbi_btn_text,#sb_instagram .sbi_load_btn .sbi_loader{opacity:1;transition:all .1s ease-in}#sb_instagram .sbi_hidden{opacity:0!important}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;padding:7px 14px;margin:5px auto 0 auto;background:#333;color:#eee;border:none;color:#fff;text-decoration:none;font-size:13px;line-height:1.5;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_load .sbi_load_btn{position:relative}#sb_instagram .sbi_follow_btn{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;text-align:center}#sb_instagram .sbi_follow_btn.sbi_top{display:block;margin-bottom:5px}#sb_instagram .sbi_follow_btn a{background:#408bd1;color:#fff}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{transition:all .1s ease-in}#sb_instagram #sbi_load .sbi_load_btn:hover{outline:0;box-shadow:inset 0 0 20px 20px rgba(255,255,255,.25)}#sb_instagram .sbi_follow_btn a:focus,#sb_instagram .sbi_follow_btn a:hover{outline:0;box-shadow:inset 0 0 10px 20px #359dff}#sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover,#sb_instagram .sbi_follow_btn.sbi_custom a:focus,#sb_instagram .sbi_follow_btn.sbi_custom a:hover{box-shadow:inset 0 0 20px 20px rgba(255,255,255,.15)}#sb_instagram #sbi_load .sbi_load_btn:active,#sb_instagram .sbi_follow_btn a:active{box-shadow:inset 0 0 10px 20px rgba(0,0,0,.3)}#sb_instagram .sbi_follow_btn .fa,#sb_instagram .sbi_follow_btn svg{margin-bottom:-1px;margin-right:7px;font-size:15px}#sb_instagram .sbi_follow_btn svg{vertical-align:-.125em}#sb_instagram #sbi_load .sbi_follow_btn{margin-left:5px}#sb_instagram .sb_instagram_error{width:100%;text-align:center;line-height:1.4}#sbi_mod_error{display:none;border:1px solid #ddd;background:#eee;color:#333;margin:10px 0 0;padding:10px 15px;font-size:13px;text-align:center;clear:both;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}#sbi_mod_error p{padding:5px 0!important;margin:0!important;line-height:1.3!important}#sbi_mod_error ol,#sbi_mod_error ul{padding:5px 0 5px 20px!important;margin:0!important}#sbi_mod_error li{padding:1px 0!important;margin:0!important}#sbi_mod_error span{font-size:12px}#sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_medium .sbi_playbtn{margin-top:-12px;margin-left:-9px;font-size:23px}#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:8px;top:8px;font-size:18px}#sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_small .sbi_playbtn{margin-top:-9px;margin-left:-7px;font-size:18px}#sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:5px;top:5px;font-size:12px}@media all and (max-width:640px){#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_width_resp{width:100%!important}}@media all and (max-width:480px){#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:100%}}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{box-sizing:border-box;position:relative;overflow:hidden}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before{content:"";display:block;padding-top:100%;z-index:-300}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo{position:absolute;top:0;left:0;bottom:0;right:0}#sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition{opacity:1;max-height:640px}#sb_instagram.sbi_no_js .sbi_load_btn,#sb_instagram.sbi_no_js .sbi_photo img{display:none}#sb_instagram #sbi_images .sbi_js_load_disabled .sbi_imgLiquid_ready.sbi_photo{padding-bottom:0!important}
css/sb-instagram-2-2.css CHANGED
@@ -1,819 +1,819 @@
1
- /**************/
2
- /*** LAYOUT ***/
3
- /**************/
4
-
5
- /* Feed container */
6
- #sb_instagram {
7
- width: 100%;
8
- margin: 0 auto;
9
- padding: 0;
10
- -webkit-box-sizing: border-box;
11
- -moz-box-sizing: border-box;
12
- box-sizing: border-box;
13
- }
14
- #sb_instagram:after{
15
- content: "";
16
- display: table;
17
- clear: both;
18
- }
19
-
20
- /*********************/
21
- /*** STYLE OPTIONS ***/
22
- /*********************/
23
- #sb_instagram.sbi_fixed_height{
24
- overflow: hidden;
25
- overflow-y: auto;
26
- -webkit-box-sizing: border-box;
27
- -moz-box-sizing: border-box;
28
- box-sizing: border-box;
29
- }
30
- #sb_instagram #sbi_images{
31
- width: 100%;
32
- float: left;
33
- line-height: 0;
34
-
35
- -webkit-box-sizing: border-box;
36
- -moz-box-sizing: border-box;
37
- box-sizing: border-box;
38
- }
39
- /* Remove header shadow/border */
40
- #sb_instagram .sbi_header_link {
41
- -webkit-box-shadow: none;
42
- box-shadow: none;
43
- }
44
- #sb_instagram .sbi_header_link:hover {
45
- border: none;
46
- }
47
-
48
- /* Items */
49
- #sb_instagram #sbi_images .sbi_item{
50
- display: -moz-inline-stack;
51
- display: inline-block;
52
- float: left;
53
- vertical-align: top;
54
- zoom: 1;
55
- *display: inline;
56
-
57
- max-height: 1000px;
58
- padding: inherit !important;
59
- margin: 0 !important;
60
- text-decoration: none;
61
- opacity: 1;
62
- overflow: hidden;
63
-
64
- -webkit-box-sizing: border-box;
65
- -moz-box-sizing: border-box;
66
- box-sizing: border-box;
67
-
68
- -webkit-transition: all 0.5s ease;
69
- -moz-transition: all 0.5s ease;
70
- -o-transition: all 0.5s ease;
71
- -ms-transition: all 0.5s ease;
72
- transition: all 0.5s ease;
73
- }
74
- /* Transition items in */
75
- #sb_instagram #sbi_images .sbi_item.sbi_transition{
76
- opacity: 0;
77
- max-height: 0;
78
- }
79
-
80
- /* Cols */
81
- #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
82
- #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
83
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
84
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
85
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
86
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
87
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
88
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
89
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
90
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
91
-
92
- /* Disable mobile layout */
93
- #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
94
- #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
95
- #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
96
- #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
97
- #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
98
- #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
99
- #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
100
- #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
101
- #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
102
- #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
103
-
104
- /* Photos */
105
- #sb_instagram .sbi_photo_wrap{
106
- position: relative;
107
- }
108
- #sb_instagram .sbi_photo{
109
- display: block;
110
- text-decoration: none;
111
- }
112
- #sb_instagram .sbi_photo img{
113
- width: 100%;
114
- height: auto;
115
- }
116
- #sb_instagram .sbi_no_js img{
117
- display: none;
118
- }
119
- #sb_instagram a,
120
- #sb_instagram a:hover,
121
- #sb_instagram a:focus,
122
- #sb_instagram a:active{
123
- outline: none;
124
- }
125
- #sb_instagram img{
126
- display: block;
127
- padding: 0 !important;
128
- margin: 0 !important;
129
- max-width: 100% !important;
130
- opacity: 1 !important;
131
- }
132
- #sb_instagram .sbi_link{
133
- display: none;
134
- position: absolute;
135
- bottom: 0;
136
- right: 0;
137
-
138
- width: 100%;
139
- padding: 10px 0;
140
- background: rgba(0,0,0,0.5);
141
- text-align: center;
142
- color: #fff;
143
- font-size: 12px;
144
- line-height: 1.1;
145
- }
146
- #sb_instagram .sbi_link a{
147
- padding: 0 6px;
148
- text-decoration: none;
149
- color: #fff;
150
- font-size: 12px;
151
- line-height: 1.1;
152
-
153
- display: -moz-inline-stack;
154
- display: inline-block;
155
- vertical-align: top;
156
- zoom: 1;
157
- *display: inline;
158
- }
159
- #sb_instagram .sbi_link .sbi_lightbox_link{
160
- padding-bottom: 5px;
161
- }
162
- #sb_instagram .sbi_link a:hover,
163
- #sb_instagram .sbi_link a:focus{
164
- text-decoration: underline;
165
- }
166
- #sb_instagram .sbi_photo_wrap:hover .sbi_link,
167
- #sb_instagram .sbi_photo_wrap:focus .sbi_link{
168
- display: block;
169
- }
170
-
171
- /* Videos */
172
- #sb_instagram svg:not(:root).svg-inline--fa {
173
- height: 1em;
174
- display: inline-block;
175
- }
176
-
177
- #sb_instagram .sbi_type_video .sbi_playbtn,
178
- #sb_instagram .sbi_type_carousel .sbi_playbtn,
179
- .sbi_type_carousel .fa-clone,
180
- #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
181
- #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
182
- display: block !important;
183
- position: absolute;
184
- z-index: 1;
185
-
186
- color: #fff;
187
- color: rgba(255,255,255,0.9);
188
- font-style: normal !important;
189
- text-shadow: 0 0 8px rgba(0,0,0,0.8);
190
- }
191
- #sb_instagram .sbi_type_video .sbi_playbtn,
192
- #sb_instagram .sbi_type_carousel .sbi_playbtn {
193
- z-index: 2;
194
- top: 50%;
195
- left: 50%;
196
- margin-top: -24px;
197
- margin-left: -19px;
198
- padding: 0;
199
- font-size: 48px;
200
- }
201
- #sb_instagram .sbi_type_carousel .fa-clone{
202
- right: 12px;
203
- top: 12px;
204
- font-size: 24px;
205
- text-shadow: 0 0 8px rgba(0,0,0,0.3);
206
- }
207
- .sbi_type_carousel svg.fa-clone,
208
- #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
209
- #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
210
- -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
211
- filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
212
- }
213
-
214
- /* Loader */
215
- #sb_instagram .sbi_loader{
216
- width: 20px;
217
- height: 20px;
218
-
219
- position: relative;
220
- top: 50%;
221
- left: 50%;
222
- margin: -10px 0 0 -10px;
223
- background-color: #000;
224
- background-color: rgba(0,0,0,0.5);
225
-
226
- border-radius: 100%;
227
- -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
228
- animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
229
- }
230
- #sb_instagram br {
231
- display: none;
232
- }
233
- #sbi_load p {
234
- display: inline;
235
- padding: 0;
236
- margin: 0;
237
- }
238
- /* Loader in button */
239
- #sb_instagram #sbi_load .sbi_loader{
240
- position: absolute;
241
- margin-top: -11px;
242
- background-color: #fff;
243
- opacity: 1;
244
- }
245
- @-webkit-keyframes sbi-sk-scaleout {
246
- 0% { -webkit-transform: scale(0) }
247
- 100% {
248
- -webkit-transform: scale(1.0);
249
- opacity: 0;
250
- }
251
- }
252
- @keyframes sbi-sk-scaleout {
253
- 0% {
254
- -webkit-transform: scale(0);
255
- -ms-transform: scale(0);
256
- transform: scale(0);
257
- } 100% {
258
- -webkit-transform: scale(1.0);
259
- -ms-transform: scale(1.0);
260
- transform: scale(1.0);
261
- opacity: 0;
262
- }
263
- }
264
-
265
- #sb_instagram .fa-spin,
266
- #sbi_lightbox .fa-spin{
267
- -webkit-animation: fa-spin 2s infinite linear;
268
- animation: fa-spin 2s infinite linear
269
- }
270
-
271
- #sb_instagram .fa-pulse,
272
- #sbi_lightbox .fa-pulse{
273
- -webkit-animation: fa-spin 1s infinite steps(8);
274
- animation: fa-spin 1s infinite steps(8)
275
- }
276
-
277
- @-webkit-keyframes fa-spin {
278
- 0% {
279
- -webkit-transform: rotate(0deg);
280
- transform: rotate(0deg)
281
- }
282
- 100% {
283
- -webkit-transform: rotate(359deg);
284
- transform: rotate(359deg)
285
- }
286
- }
287
-
288
- @keyframes fa-spin {
289
- 0% {
290
- -webkit-transform: rotate(0deg);
291
- transform: rotate(0deg)
292
- }
293
- 100% {
294
- -webkit-transform: rotate(359deg);
295
- transform: rotate(359deg)
296
- }
297
- }
298
- /* Screen reader */
299
- .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;text-align: left !important; }
300
-
301
- /* HEADER */
302
- #sb_instagram .sb_instagram_header{
303
- float: left;
304
- clear: both;
305
- margin: 0 0 15px 0;
306
- padding: 0;
307
- line-height: 1.2;
308
- width: 100%;
309
- }
310
- #sb_instagram .sb_instagram_header a{
311
- float: left;
312
- display: block;
313
- /*width: 100%;*/
314
- min-width: 100%\9;
315
- text-decoration: none;
316
- transition: color 0.5s ease;
317
- }
318
- .sbi_no_avatar .sbi_header_img{
319
- background: #333;
320
- color: #fff;
321
- width: 50px;
322
- height: 50px;
323
- position: relative;
324
- }
325
- .sbi_no_avatar .sbi_header_hashtag_icon {
326
- display: block;
327
- color: #fff;
328
- opacity: .9;
329
- -webkit-transition: background .6s linear,color .6s linear;
330
- -moz-transition: background .6s linear,color .6s linear;
331
- -ms-transition: background .6s linear,color .6s linear;
332
- -o-transition: background .6s linear,color .6s linear;
333
- transition: background .6s linear,color .6s linear
334
- }
335
-
336
- .sbi_no_avatar:hover .sbi_header_hashtag_icon {
337
- display: block;
338
- opacity: 1;
339
- -webkit-transition: background .2s linear,color .2s linear;
340
- -moz-transition: background .2s linear,color .2s linear;
341
- -ms-transition: background .2s linear,color .2s linear;
342
- -o-transition: background .2s linear,color .2s linear;
343
- transition: background .2s linear,color .2s linear
344
- }
345
- /** Medium Header */
346
- /* Only use medium & large headers on devices above 480px */
347
- @media all and (min-width: 480px){
348
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
349
- width: 80px;
350
- height: 80px;
351
- border-radius: 40px;
352
- }
353
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
354
- width: 80px;
355
- height: 80px;
356
- border-radius: 40px;
357
- }
358
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
359
- font-size: 20px;
360
- }
361
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
362
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
363
- font-size: 14px;
364
- }
365
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
366
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
367
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
368
- margin-left: 95px !important;
369
- line-height: 1.4
370
- }
371
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{
372
- margin-right: -85px !important;
373
- }
374
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
375
- margin-top: 4px !important;
376
- }
377
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{
378
- padding-top: 20px !important;
379
- }
380
- /** Large Header */
381
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img {
382
- width: 120px;
383
- height: 120px;
384
- border-radius: 60px;
385
- }
386
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img {
387
- width: 120px;
388
- height: 120px;
389
- border-radius: 60px;
390
- }
391
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3 {
392
- font-size: 28px;
393
- }
394
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
395
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
396
- font-size: 16px;
397
- }
398
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3,
399
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
400
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
401
- margin-left: 140px !important;
402
- line-height: 1.5;
403
- }
404
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{
405
- margin-right: -120px !important;
406
- }
407
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
408
- margin-top: 12px !important;
409
- }
410
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{
411
- padding-top: 32px !important;
412
- }
413
- }
414
-
415
- /* Header profile pic */
416
- #sb_instagram .sb_instagram_header .sbi_header_img{
417
- float: left;
418
- position: relative;
419
- width: 50px;
420
- margin: 0 0 0 -100% !important;
421
- overflow: hidden;
422
-
423
- -moz-border-radius: 40px;
424
- -webkit-border-radius: 40px;
425
- border-radius: 40px;
426
- }
427
- #sb_instagram .sb_instagram_header .sbi_header_img img{
428
- float: left;
429
- margin: 0 !important;
430
- padding: 0 !important;
431
- border: none !important;
432
-
433
- -moz-border-radius: 40px;
434
- -webkit-border-radius: 40px;
435
- border-radius: 40px;
436
- }
437
- /* Profile pic hover */
438
- /* Profile pic hover */
439
- #sb_instagram .sb_instagram_header .sbi_header_img_hover{
440
- opacity: 0;
441
- position: absolute;
442
- width: 100%;
443
- top: 0;
444
- bottom: 0;
445
- left: 0;
446
- text-align: center;
447
- color: #fff;
448
- background: rgba(0,0,0,0.75);
449
- }
450
-
451
- #sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo,
452
- #sb_instagram .sb_instagram_header .sbi_header_hashtag_icon .sbi_new_logo{
453
- position: absolute;
454
- top: 50%;
455
- left: 50%;
456
- margin-top: -12px;
457
- margin-left: -12px;
458
- width: 24px;
459
- height: 24px;
460
- font-size: 24px;
461
- }
462
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo,
463
- .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo{
464
- margin-top: -18px;
465
- margin-left: -18px;
466
- width: 36px;
467
- height: 36px;
468
- font-size: 36px
469
- }
470
-
471
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo,
472
- .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo {
473
- margin-top: -24px;
474
- margin-left: -24px;
475
- width: 48px;
476
- height: 48px;
477
- font-size: 48px
478
- }
479
- #sb_instagram .sb_instagram_header .sbi_header_img_hover i {
480
- overflow: hidden;
481
- background: url('../img/small-logo.png') no-repeat 0 0;
482
- }
483
- #sb_instagram .sb_instagram_header .sbi_header_img_hover{
484
- z-index: 2;
485
- transition: opacity 0.4s ease-in-out;
486
- }
487
- #sb_instagram .sb_instagram_header .sbi_fade_in{
488
- opacity: 1;
489
- transition: opacity 0.2s ease-in-out;
490
- }
491
- #sb_instagram .sb_instagram_header .sbi_header_img_hover{
492
- position: absolute;
493
- width: 100%;
494
- top: 0;
495
- bottom: 0;
496
- left: 0;
497
- text-align: center;
498
- color: #fff;
499
- background: rgba(0,0,0,0.75);
500
-
501
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
502
- filter: alpha(opacity=0);
503
- -moz-opacity: 0;
504
- -khtml-opacity: 0;
505
- opacity: 0;
506
- border-radius: 40px;
507
- transition: opacity 0.2s;
508
- }
509
- /* Fade the Instagram icon in when hovering on the header */
510
- #sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
511
- #sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
512
- opacity: 1;
513
- }
514
- /* Header text */
515
- #sb_instagram .sb_instagram_header .sbi_header_text{
516
- float: left;
517
- width: 100%;
518
- padding-top: 5px;
519
- }
520
- #sb_instagram .sb_instagram_header a{
521
- text-decoration: none;
522
- }
523
- #sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,
524
- #sb_instagram .sb_instagram_header .sbi_header_text h3{
525
- float: left;
526
- clear: both;
527
- width: auto;
528
- margin: 0 0 0 60px !important;
529
- padding: 0 !important;
530
- }
531
- #sb_instagram .sb_instagram_header h3{
532
- font-size: 16px;
533
- line-height: 1.3;
534
- }
535
- #sb_instagram .sb_instagram_header p{
536
- font-size: 13px;
537
- line-height: 1.3;
538
- margin: 0;
539
- padding: 0;
540
- }
541
- #sb_instagram p:empty { display: none; }
542
- #sb_instagram .sb_instagram_header .sbi_header_text img.emoji{
543
- margin-right: 3px !important;
544
- }
545
-
546
- /* No bio */
547
- #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{
548
- padding-top: 9px !important;
549
- }
550
- #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{
551
- clear: both;
552
- }
553
-
554
-
555
- /* Buttons */
556
- #sb_instagram #sbi_load{
557
- float: left;
558
- clear: both;
559
- width: 100%;
560
- text-align: center;
561
- }
562
- #sb_instagram #sbi_load .fa-spinner{
563
- display: none;
564
- position: absolute;
565
- top: 50%;
566
- left: 50%;
567
- margin: -8px 0 0 -7px;
568
- font-size: 15px;
569
- }
570
- #sb_instagram #sbi_load{
571
- opacity: 1;
572
- transition: all 0.5s ease-in;
573
- }
574
- #sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
575
- opacity: 1;
576
- transition: all 0.1s ease-in;
577
- }
578
- #sb_instagram .sbi_hidden{
579
- opacity: 0 !important;
580
- }
581
- #sb_instagram #sbi_load .sbi_load_btn,
582
- #sb_instagram .sbi_follow_btn a{
583
- display: -moz-inline-stack;
584
- display: inline-block;
585
- vertical-align: top;
586
- zoom: 1;
587
- *display: inline;
588
-
589
- padding: 7px 14px;
590
- margin: 5px auto 0 auto;
591
- background: #333;
592
- color: #eee;
593
- border: none;
594
- color: #fff;
595
- text-decoration: none;
596
- font-size: 13px;
597
- line-height: 1.5;
598
-
599
- -moz-border-radius: 4px;
600
- -webkit-border-radius: 4px;
601
- border-radius: 4px;
602
-
603
- -webkit-box-sizing: border-box;
604
- -moz-box-sizing: border-box;
605
- box-sizing: border-box;
606
- }
607
- #sb_instagram #sbi_load .sbi_load_btn {
608
- position: relative;
609
- }
610
- /* Follow button */
611
- #sb_instagram .sbi_follow_btn{
612
- display: -moz-inline-stack;
613
- display: inline-block;
614
- vertical-align: top;
615
- zoom: 1;
616
- *display: inline;
617
- text-align: center;
618
- }
619
- #sb_instagram .sbi_follow_btn.sbi_top{
620
- display: block;
621
- margin-bottom: 5px;
622
- }
623
- #sb_instagram .sbi_follow_btn a{
624
- background: #408bd1;
625
- color: #fff;
626
- }
627
- #sb_instagram .sbi_follow_btn a,
628
- #sb_instagram .sbi_follow_btn a,
629
- #sb_instagram #sbi_load .sbi_load_btn{
630
- transition: all 0.1s ease-in;
631
- }
632
- /* Hover state for default colors */
633
- #sb_instagram #sbi_load .sbi_load_btn:hover{
634
- outline: none;
635
- box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
636
- }
637
- #sb_instagram .sbi_follow_btn a:hover,
638
- #sb_instagram .sbi_follow_btn a:focus{
639
- outline: none;
640
- box-shadow: inset 0 0 10px 20px #359dff;
641
- }
642
- /* If a custom color is applied then just use opacity for the hover effect */
643
- #sb_instagram .sbi_follow_btn.sbi_custom a:hover,
644
- #sb_instagram .sbi_follow_btn.sbi_custom a:focus,
645
- #sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
646
- box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
647
- }
648
- /* Active state */
649
- #sb_instagram .sbi_follow_btn a:active,
650
- #sb_instagram #sbi_load .sbi_load_btn:active{
651
- box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
652
- }
653
-
654
- #sb_instagram .sbi_follow_btn .fa,
655
- #sb_instagram .sbi_follow_btn svg{
656
- margin-bottom: -1px;
657
- margin-right: 7px;
658
- font-size: 15px;
659
- }
660
- #sb_instagram .sbi_follow_btn svg{
661
- vertical-align: -.125em;
662
- }
663
- #sb_instagram #sbi_load .sbi_follow_btn{
664
- margin-left: 5px;
665
- }
666
-
667
- /* Error messages */
668
- #sb_instagram .sb_instagram_error{
669
- width: 100%;
670
- text-align: center;
671
- line-height: 1.4;
672
- }
673
-
674
- /* Mod only error msgs */
675
- #sbi_mod_error{
676
- display: none;
677
- border: 1px solid #ddd;
678
- background: #eee;
679
- color: #333;
680
- margin: 10px 0 0;
681
- padding: 10px 15px;
682
- font-size: 13px;
683
- text-align: center;
684
- clear: both;
685
-
686
- -moz-border-radius: 4px;
687
- -webkit-border-radius: 4px;
688
- border-radius: 4px;
689
- }
690
- #sbi_mod_error br {
691
- display: initial !important;
692
- }
693
- #sbi_mod_error p{
694
- padding: 5px 0 !important;
695
- margin: 0 !important;
696
- line-height: 1.3 !important;
697
- }
698
- #sbi_mod_error ol,
699
- #sbi_mod_error ul{
700
- padding: 5px 0 5px 20px !important;
701
- margin: 0 !important;
702
- }
703
- #sbi_mod_error li{
704
- padding: 1px 0 !important;
705
- margin: 0 !important;
706
- }
707
- #sbi_mod_error span{
708
- font-size: 12px;
709
- }
710
-
711
- /* Medium */
712
- #sb_instagram.sbi_medium .sbi_playbtn,
713
- #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
714
- margin-top: -12px;
715
- margin-left: -9px;
716
- font-size: 23px;
717
- }
718
- #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
719
- right: 8px;
720
- top: 8px;
721
- font-size: 18px;
722
- }
723
- /* Small */
724
- #sb_instagram.sbi_small .sbi_playbtn,
725
- #sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
726
- margin-top: -9px;
727
- margin-left: -7px;
728
- font-size: 18px;
729
- }
730
- #sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
731
- right: 5px;
732
- top: 5px;
733
- font-size: 12px;
734
- }
735
-
736
- /* Media queries */
737
- @media all and (max-width: 640px){
738
- /* Make 3-6 cols into 2 col */
739
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
740
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
741
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
742
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
743
- width: 50%;
744
- }
745
- /* Make 7-10 cols into 4 col */
746
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
747
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
748
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
749
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
750
- width: 25%;
751
- }
752
- /* On mobile make the min-width 100% */
753
- #sb_instagram.sbi_width_resp{
754
- width: 100% !important;
755
- }
756
- }
757
- @media all and (max-width: 480px){
758
- /* Make all cols into 1 col */
759
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
760
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
761
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
762
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
763
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
764
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
765
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
766
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
767
- width: 100%;
768
- }
769
- }
770
-
771
- /* NO JS */
772
- #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{
773
- box-sizing: border-box;
774
- position: relative;
775
- overflow: hidden;
776
- }
777
- #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before {
778
- content: "";
779
- display: block;
780
- padding-top: 100%;
781
- z-index: -300;
782
- }
783
- #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo {
784
- position: absolute;
785
- top: 0;
786
- left: 0;
787
- bottom: 0;
788
- right: 0;
789
- }
790
- #sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition {
791
- opacity: 1;
792
- max-height: 640px;
793
- }
794
- #sb_instagram.sbi_no_js .sbi_photo img,
795
- #sb_instagram.sbi_no_js .sbi_load_btn{
796
- display: none;
797
- }
798
- #sb_instagram #sbi_images .sbi_js_load_disabled .sbi_imgLiquid_ready.sbi_photo {
799
- padding-bottom: 0 !important;
800
- }
801
- #sb_instagram #sbi_mod_error .sb_frontend_btn {
802
- display: inline-block;
803
- padding: 6px 10px;
804
- background: #ddd;
805
- background: rgba(0,0,0,.1);
806
- text-decoration: none;
807
- border-radius: 5px;
808
- margin-top: 10px;
809
- color: #444
810
- }
811
-
812
- #sb_instagram #sbi_mod_error .sb_frontend_btn:hover {
813
- background: #ccc;
814
- background: rgba(0,0,0,.15)
815
- }
816
-
817
- #sb_instagram #sbi_mod_error .sb_frontend_btn .fa {
818
- margin-right: 2px
819
}
1
+ /**************/
2
+ /*** LAYOUT ***/
3
+ /**************/
4
+
5
+ /* Feed container */
6
+ #sb_instagram {
7
+ width: 100%;
8
+ margin: 0 auto;
9
+ padding: 0;
10
+ -webkit-box-sizing: border-box;
11
+ -moz-box-sizing: border-box;
12
+ box-sizing: border-box;
13
+ }
14
+ #sb_instagram:after{
15
+ content: "";
16
+ display: table;
17
+ clear: both;
18
+ }
19
+
20
+ /*********************/
21
+ /*** STYLE OPTIONS ***/
22
+ /*********************/
23
+ #sb_instagram.sbi_fixed_height{
24
+ overflow: hidden;
25
+ overflow-y: auto;
26
+ -webkit-box-sizing: border-box;
27
+ -moz-box-sizing: border-box;
28
+ box-sizing: border-box;
29
+ }
30
+ #sb_instagram #sbi_images{
31
+ width: 100%;
32
+ float: left;
33
+ line-height: 0;
34
+
35
+ -webkit-box-sizing: border-box;
36
+ -moz-box-sizing: border-box;
37
+ box-sizing: border-box;
38
+ }
39
+ /* Remove header shadow/border */
40
+ #sb_instagram .sbi_header_link {
41
+ -webkit-box-shadow: none;
42
+ box-shadow: none;
43
+ }
44
+ #sb_instagram .sbi_header_link:hover {
45
+ border: none;
46
+ }
47
+
48
+ /* Items */
49
+ #sb_instagram #sbi_images .sbi_item{
50
+ display: -moz-inline-stack;
51
+ display: inline-block;
52
+ float: left;
53
+ vertical-align: top;
54
+ zoom: 1;
55
+ *display: inline;
56
+
57
+ max-height: 1000px;
58
+ padding: inherit !important;
59
+ margin: 0 !important;
60
+ text-decoration: none;
61
+ opacity: 1;
62
+ overflow: hidden;
63
+
64
+ -webkit-box-sizing: border-box;
65
+ -moz-box-sizing: border-box;
66
+ box-sizing: border-box;
67
+
68
+ -webkit-transition: all 0.5s ease;
69
+ -moz-transition: all 0.5s ease;
70
+ -o-transition: all 0.5s ease;
71
+ -ms-transition: all 0.5s ease;
72
+ transition: all 0.5s ease;
73
+ }
74
+ /* Transition items in */
75
+ #sb_instagram #sbi_images .sbi_item.sbi_transition{
76
+ opacity: 0;
77
+ max-height: 0;
78
+ }
79
+
80
+ /* Cols */
81
+ #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
82
+ #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
83
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
84
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
85
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
86
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
87
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
88
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
89
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
90
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
91
+
92
+ /* Disable mobile layout */
93
+ #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
94
+ #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
95
+ #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
96
+ #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
97
+ #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
98
+ #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
99
+ #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
100
+ #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
101
+ #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
102
+ #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
103
+
104
+ /* Photos */
105
+ #sb_instagram .sbi_photo_wrap{
106
+ position: relative;
107
+ }
108
+ #sb_instagram .sbi_photo{
109
+ display: block;
110
+ text-decoration: none;
111
+ }
112
+ #sb_instagram .sbi_photo img{
113
+ width: 100%;
114
+ height: auto;
115
+ }
116
+ #sb_instagram .sbi_no_js img{
117
+ display: none;
118
+ }
119
+ #sb_instagram a,
120
+ #sb_instagram a:hover,
121
+ #sb_instagram a:focus,
122
+ #sb_instagram a:active{
123
+ outline: none;
124
+ }
125
+ #sb_instagram img{
126
+ display: block;
127
+ padding: 0 !important;
128
+ margin: 0 !important;
129
+ max-width: 100% !important;
130
+ opacity: 1 !important;
131
+ }
132
+ #sb_instagram .sbi_link{
133
+ display: none;
134
+ position: absolute;
135
+ bottom: 0;
136
+ right: 0;
137
+
138
+ width: 100%;
139
+ padding: 10px 0;
140
+ background: rgba(0,0,0,0.5);
141
+ text-align: center;
142
+ color: #fff;
143
+ font-size: 12px;
144
+ line-height: 1.1;
145
+ }
146
+ #sb_instagram .sbi_link a{
147
+ padding: 0 6px;
148
+ text-decoration: none;
149
+ color: #fff;
150
+ font-size: 12px;
151
+ line-height: 1.1;
152
+
153
+ display: -moz-inline-stack;
154
+ display: inline-block;
155
+ vertical-align: top;
156
+ zoom: 1;
157
+ *display: inline;
158
+ }
159
+ #sb_instagram .sbi_link .sbi_lightbox_link{
160
+ padding-bottom: 5px;
161
+ }
162
+ #sb_instagram .sbi_link a:hover,
163
+ #sb_instagram .sbi_link a:focus{
164
+ text-decoration: underline;
165
+ }
166
+ #sb_instagram .sbi_photo_wrap:hover .sbi_link,
167
+ #sb_instagram .sbi_photo_wrap:focus .sbi_link{
168
+ display: block;
169
+ }
170
+
171
+ /* Videos */
172
+ #sb_instagram svg:not(:root).svg-inline--fa {
173
+ height: 1em;
174
+ display: inline-block;
175
+ }
176
+
177
+ #sb_instagram .sbi_type_video .sbi_playbtn,
178
+ #sb_instagram .sbi_type_carousel .sbi_playbtn,
179
+ .sbi_type_carousel .fa-clone,
180
+ #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
181
+ #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
182
+ display: block !important;
183
+ position: absolute;
184
+ z-index: 1;
185
+
186
+ color: #fff;
187
+ color: rgba(255,255,255,0.9);
188
+ font-style: normal !important;
189
+ text-shadow: 0 0 8px rgba(0,0,0,0.8);
190
+ }
191
+ #sb_instagram .sbi_type_video .sbi_playbtn,
192
+ #sb_instagram .sbi_type_carousel .sbi_playbtn {
193
+ z-index: 2;
194
+ top: 50%;
195
+ left: 50%;
196
+ margin-top: -24px;
197
+ margin-left: -19px;
198
+ padding: 0;
199
+ font-size: 48px;
200
+ }
201
+ #sb_instagram .sbi_type_carousel .fa-clone{
202
+ right: 12px;
203
+ top: 12px;
204
+ font-size: 24px;
205
+ text-shadow: 0 0 8px rgba(0,0,0,0.3);
206
+ }
207
+ .sbi_type_carousel svg.fa-clone,
208
+ #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
209
+ #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
210
+ -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
211
+ filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
212
+ }
213
+
214
+ /* Loader */
215
+ #sb_instagram .sbi_loader{
216
+ width: 20px;
217
+ height: 20px;
218
+
219
+ position: relative;
220
+ top: 50%;
221
+ left: 50%;
222
+ margin: -10px 0 0 -10px;
223
+ background-color: #000;
224
+ background-color: rgba(0,0,0,0.5);
225
+
226
+ border-radius: 100%;
227
+ -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
228
+ animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
229
+ }
230
+ #sb_instagram br {
231
+ display: none;
232
+ }
233
+ #sbi_load p {
234
+ display: inline;
235
+ padding: 0;
236
+ margin: 0;
237
+ }
238
+ /* Loader in button */
239
+ #sb_instagram #sbi_load .sbi_loader{
240
+ position: absolute;
241
+ margin-top: -11px;
242
+ background-color: #fff;
243
+ opacity: 1;
244
+ }
245
+ @-webkit-keyframes sbi-sk-scaleout {
246
+ 0% { -webkit-transform: scale(0) }
247
+ 100% {
248
+ -webkit-transform: scale(1.0);
249
+ opacity: 0;
250
+ }
251
+ }
252
+ @keyframes sbi-sk-scaleout {
253
+ 0% {
254
+ -webkit-transform: scale(0);
255
+ -ms-transform: scale(0);
256
+ transform: scale(0);
257
+ } 100% {
258
+ -webkit-transform: scale(1.0);
259
+ -ms-transform: scale(1.0);
260
+ transform: scale(1.0);
261
+ opacity: 0;
262
+ }
263
+ }
264
+
265
+ #sb_instagram .fa-spin,
266
+ #sbi_lightbox .fa-spin{
267
+ -webkit-animation: fa-spin 2s infinite linear;
268
+ animation: fa-spin 2s infinite linear
269
+ }
270
+
271
+ #sb_instagram .fa-pulse,
272
+ #sbi_lightbox .fa-pulse{
273
+ -webkit-animation: fa-spin 1s infinite steps(8);
274
+ animation: fa-spin 1s infinite steps(8)
275
+ }
276
+
277
+ @-webkit-keyframes fa-spin {
278
+ 0% {
279
+ -webkit-transform: rotate(0deg);
280
+ transform: rotate(0deg)
281
+ }
282
+ 100% {
283
+ -webkit-transform: rotate(359deg);
284
+ transform: rotate(359deg)
285
+ }
286
+ }
287
+
288
+ @keyframes fa-spin {
289
+ 0% {
290
+ -webkit-transform: rotate(0deg);
291
+ transform: rotate(0deg)
292
+ }
293
+ 100% {
294
+ -webkit-transform: rotate(359deg);
295
+ transform: rotate(359deg)
296
+ }
297
+ }
298
+ /* Screen reader */
299
+ .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;text-align: left !important; }
300
+
301
+ /* HEADER */
302
+ #sb_instagram .sb_instagram_header{
303
+ float: left;
304
+ clear: both;
305
+ margin: 0 0 15px 0;
306
+ padding: 0;
307
+ line-height: 1.2;
308
+ width: 100%;
309
+ }
310
+ #sb_instagram .sb_instagram_header a{
311
+ float: left;
312
+ display: block;
313
+ /*width: 100%;*/
314
+ min-width: 100%\9;
315
+ text-decoration: none;
316
+ transition: color 0.5s ease;
317
+ }
318
+ .sbi_no_avatar .sbi_header_img{
319
+ background: #333;
320
+ color: #fff;
321
+ width: 50px;
322
+ height: 50px;
323
+ position: relative;
324
+ }
325
+ .sbi_no_avatar .sbi_header_hashtag_icon {
326
+ display: block;
327
+ color: #fff;
328
+ opacity: .9;
329
+ -webkit-transition: background .6s linear,color .6s linear;
330
+ -moz-transition: background .6s linear,color .6s linear;
331
+ -ms-transition: background .6s linear,color .6s linear;
332
+ -o-transition: background .6s linear,color .6s linear;
333
+ transition: background .6s linear,color .6s linear
334
+ }
335
+
336
+ .sbi_no_avatar:hover .sbi_header_hashtag_icon {
337
+ display: block;
338
+ opacity: 1;
339
+ -webkit-transition: background .2s linear,color .2s linear;
340
+ -moz-transition: background .2s linear,color .2s linear;
341
+ -ms-transition: background .2s linear,color .2s linear;
342
+ -o-transition: background .2s linear,color .2s linear;
343
+ transition: background .2s linear,color .2s linear
344
+ }
345
+ /** Medium Header */
346
+ /* Only use medium & large headers on devices above 480px */
347
+ @media all and (min-width: 480px){
348
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
349
+ width: 80px;
350
+ height: 80px;
351
+ border-radius: 40px;
352
+ }
353
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
354
+ width: 80px;
355
+ height: 80px;
356
+ border-radius: 40px;
357
+ }
358
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
359
+ font-size: 20px;
360
+ }
361
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
362
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
363
+ font-size: 14px;
364
+ }
365
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
366
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
367
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
368
+ margin-left: 95px !important;
369
+ line-height: 1.4
370
+ }
371
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{
372
+ margin-right: -85px !important;
373
+ }
374
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
375
+ margin-top: 4px !important;
376
+ }
377
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{
378
+ padding-top: 20px !important;
379
+ }
380
+ /** Large Header */
381
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img {
382
+ width: 120px;
383
+ height: 120px;
384
+ border-radius: 60px;
385
+ }
386
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img {
387
+ width: 120px;
388
+ height: 120px;
389
+ border-radius: 60px;
390
+ }
391
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3 {
392
+ font-size: 28px;
393
+ }
394
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
395
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
396
+ font-size: 16px;
397
+ }
398
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3,
399
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
400
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
401
+ margin-left: 140px !important;
402
+ line-height: 1.5;
403
+ }
404
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{
405
+ margin-right: -120px !important;
406
+ }
407
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
408
+ margin-top: 12px !important;
409
+ }
410
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{
411
+ padding-top: 32px !important;
412
+ }
413
+ }
414
+
415
+ /* Header profile pic */
416
+ #sb_instagram .sb_instagram_header .sbi_header_img{
417
+ float: left;
418
+ position: relative;
419
+ width: 50px;
420
+ margin: 0 0 0 -100% !important;
421
+ overflow: hidden;
422
+
423
+ -moz-border-radius: 40px;
424
+ -webkit-border-radius: 40px;
425
+ border-radius: 40px;
426
+ }
427
+ #sb_instagram .sb_instagram_header .sbi_header_img img{
428
+ float: left;
429
+ margin: 0 !important;
430
+ padding: 0 !important;
431
+ border: none !important;
432
+
433
+ -moz-border-radius: 40px;
434
+ -webkit-border-radius: 40px;
435
+ border-radius: 40px;
436
+ }
437
+ /* Profile pic hover */
438
+ /* Profile pic hover */
439
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
440
+ opacity: 0;
441
+ position: absolute;
442
+ width: 100%;
443
+ top: 0;
444
+ bottom: 0;
445
+ left: 0;
446
+ text-align: center;
447
+ color: #fff;
448
+ background: rgba(0,0,0,0.75);
449
+ }
450
+
451
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo,
452
+ #sb_instagram .sb_instagram_header .sbi_header_hashtag_icon .sbi_new_logo{
453
+ position: absolute;
454
+ top: 50%;
455
+ left: 50%;
456
+ margin-top: -12px;
457
+ margin-left: -12px;
458
+ width: 24px;
459
+ height: 24px;
460
+ font-size: 24px;
461
+ }
462
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo,
463
+ .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo{
464
+ margin-top: -18px;
465
+ margin-left: -18px;
466
+ width: 36px;
467
+ height: 36px;
468
+ font-size: 36px
469
+ }
470
+
471
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo,
472
+ .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo {
473
+ margin-top: -24px;
474
+ margin-left: -24px;
475
+ width: 48px;
476
+ height: 48px;
477
+ font-size: 48px
478
+ }
479
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover i {
480
+ overflow: hidden;
481
+ background: url('../img/small-logo.png') no-repeat 0 0;
482
+ }
483
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
484
+ z-index: 2;
485
+ transition: opacity 0.4s ease-in-out;
486
+ }
487
+ #sb_instagram .sb_instagram_header .sbi_fade_in{
488
+ opacity: 1;
489
+ transition: opacity 0.2s ease-in-out;
490
+ }
491
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
492
+ position: absolute;
493
+ width: 100%;
494
+ top: 0;
495
+ bottom: 0;
496
+ left: 0;
497
+ text-align: center;
498
+ color: #fff;
499
+ background: rgba(0,0,0,0.75);
500
+
501
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
502
+ filter: alpha(opacity=0);
503
+ -moz-opacity: 0;
504
+ -khtml-opacity: 0;
505
+ opacity: 0;
506
+ border-radius: 40px;
507
+ transition: opacity 0.2s;
508
+ }
509
+ /* Fade the Instagram icon in when hovering on the header */
510
+ #sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
511
+ #sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
512
+ opacity: 1;
513
+ }
514
+ /* Header text */
515
+ #sb_instagram .sb_instagram_header .sbi_header_text{
516
+ float: left;
517
+ width: 100%;
518
+ padding-top: 5px;
519
+ }
520
+ #sb_instagram .sb_instagram_header a{
521
+ text-decoration: none;
522
+ }
523
+ #sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,
524
+ #sb_instagram .sb_instagram_header .sbi_header_text h3{
525
+ float: left;
526
+ clear: both;
527
+ width: auto;
528
+ margin: 0 0 0 60px !important;
529
+ padding: 0 !important;
530
+ }
531
+ #sb_instagram .sb_instagram_header h3{
532
+ font-size: 16px;
533
+ line-height: 1.3;
534
+ }
535
+ #sb_instagram .sb_instagram_header p{
536
+ font-size: 13px;
537
+ line-height: 1.3;
538
+ margin: 0;
539
+ padding: 0;
540
+ }
541
+ #sb_instagram p:empty { display: none; }
542
+ #sb_instagram .sb_instagram_header .sbi_header_text img.emoji{
543
+ margin-right: 3px !important;
544
+ }
545
+
546
+ /* No bio */
547
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{
548
+ padding-top: 9px !important;
549
+ }
550
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{
551
+ clear: both;
552
+ }
553
+
554
+
555
+ /* Buttons */
556
+ #sb_instagram #sbi_load{
557
+ float: left;
558
+ clear: both;
559
+ width: 100%;
560
+ text-align: center;
561
+ }
562
+ #sb_instagram #sbi_load .fa-spinner{
563
+ display: none;
564
+ position: absolute;
565
+ top: 50%;
566
+ left: 50%;
567
+ margin: -8px 0 0 -7px;
568
+ font-size: 15px;
569
+ }
570
+ #sb_instagram #sbi_load{
571
+ opacity: 1;
572
+ transition: all 0.5s ease-in;
573
+ }
574
+ #sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
575
+ opacity: 1;
576
+ transition: all 0.1s ease-in;
577
+ }
578
+ #sb_instagram .sbi_hidden{
579
+ opacity: 0 !important;
580
+ }
581
+ #sb_instagram #sbi_load .sbi_load_btn,
582
+ #sb_instagram .sbi_follow_btn a{
583
+ display: -moz-inline-stack;
584
+ display: inline-block;
585
+ vertical-align: top;
586
+ zoom: 1;
587
+ *display: inline;
588
+
589
+ padding: 7px 14px;
590
+ margin: 5px auto 0 auto;
591
+ background: #333;
592
+ color: #eee;
593
+ border: none;
594
+ color: #fff;
595
+ text-decoration: none;
596
+ font-size: 13px;
597
+ line-height: 1.5;
598
+
599
+ -moz-border-radius: 4px;
600
+ -webkit-border-radius: 4px;
601
+ border-radius: 4px;
602
+
603
+ -webkit-box-sizing: border-box;
604
+ -moz-box-sizing: border-box;
605
+ box-sizing: border-box;
606
+ }
607
+ #sb_instagram #sbi_load .sbi_load_btn {
608
+ position: relative;
609
+ }
610
+ /* Follow button */
611
+ #sb_instagram .sbi_follow_btn{
612
+ display: -moz-inline-stack;
613
+ display: inline-block;
614
+ vertical-align: top;
615
+ zoom: 1;
616
+ *display: inline;
617
+ text-align: center;
618
+ }
619
+ #sb_instagram .sbi_follow_btn.sbi_top{
620
+ display: block;
621
+ margin-bottom: 5px;
622
+ }
623
+ #sb_instagram .sbi_follow_btn a{
624
+ background: #408bd1;
625
+ color: #fff;
626
+ }
627
+ #sb_instagram .sbi_follow_btn a,
628
+ #sb_instagram .sbi_follow_btn a,
629
+ #sb_instagram #sbi_load .sbi_load_btn{
630
+ transition: all 0.1s ease-in;
631
+ }
632
+ /* Hover state for default colors */
633
+ #sb_instagram #sbi_load .sbi_load_btn:hover{
634
+ outline: none;
635
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
636
+ }
637
+ #sb_instagram .sbi_follow_btn a:hover,
638
+ #sb_instagram .sbi_follow_btn a:focus{
639
+ outline: none;
640
+ box-shadow: inset 0 0 10px 20px #359dff;
641
+ }
642
+ /* If a custom color is applied then just use opacity for the hover effect */
643
+ #sb_instagram .sbi_follow_btn.sbi_custom a:hover,
644
+ #sb_instagram .sbi_follow_btn.sbi_custom a:focus,
645
+ #sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
646
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
647
+ }
648
+ /* Active state */
649
+ #sb_instagram .sbi_follow_btn a:active,
650
+ #sb_instagram #sbi_load .sbi_load_btn:active{
651
+ box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
652
+ }
653
+
654
+ #sb_instagram .sbi_follow_btn .fa,
655
+ #sb_instagram .sbi_follow_btn svg{
656
+ margin-bottom: -1px;
657
+ margin-right: 7px;
658
+ font-size: 15px;
659
+ }
660
+ #sb_instagram .sbi_follow_btn svg{
661
+ vertical-align: -.125em;
662
+ }
663
+ #sb_instagram #sbi_load .sbi_follow_btn{
664
+ margin-left: 5px;
665
+ }
666
+
667
+ /* Error messages */
668
+ #sb_instagram .sb_instagram_error{
669
+ width: 100%;
670
+ text-align: center;
671
+ line-height: 1.4;
672
+ }
673
+
674
+ /* Mod only error msgs */
675
+ #sbi_mod_error{
676
+ display: none;
677
+ border: 1px solid #ddd;
678
+ background: #eee;
679
+ color: #333;
680
+ margin: 10px 0 0;
681
+ padding: 10px 15px;
682
+ font-size: 13px;
683
+ text-align: center;
684
+ clear: both;
685
+
686
+ -moz-border-radius: 4px;
687
+ -webkit-border-radius: 4px;
688
+ border-radius: 4px;
689
+ }
690
+ #sbi_mod_error br {
691
+ display: initial !important;
692
+ }
693
+ #sbi_mod_error p{
694
+ padding: 5px 0 !important;
695
+ margin: 0 !important;
696
+ line-height: 1.3 !important;
697
+ }
698
+ #sbi_mod_error ol,
699
+ #sbi_mod_error ul{
700
+ padding: 5px 0 5px 20px !important;
701
+ margin: 0 !important;
702
+ }
703
+ #sbi_mod_error li{
704
+ padding: 1px 0 !important;
705
+ margin: 0 !important;
706
+ }
707
+ #sbi_mod_error span{
708
+ font-size: 12px;
709
+ }
710
+
711
+ /* Medium */
712
+ #sb_instagram.sbi_medium .sbi_playbtn,
713
+ #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
714
+ margin-top: -12px;
715
+ margin-left: -9px;
716
+ font-size: 23px;
717
+ }
718
+ #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
719
+ right: 8px;
720
+ top: 8px;
721
+ font-size: 18px;
722
+ }
723
+ /* Small */
724
+ #sb_instagram.sbi_small .sbi_playbtn,
725
+ #sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
726
+ margin-top: -9px;
727
+ margin-left: -7px;
728
+ font-size: 18px;
729
+ }
730
+ #sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
731
+ right: 5px;
732
+ top: 5px;
733
+ font-size: 12px;
734
+ }
735
+
736
+ /* Media queries */
737
+ @media all and (max-width: 640px){
738
+ /* Make 3-6 cols into 2 col */
739
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
740
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
741
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
742
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
743
+ width: 50%;
744
+ }
745
+ /* Make 7-10 cols into 4 col */
746
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
747
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
748
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
749
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
750
+ width: 25%;
751
+ }
752
+ /* On mobile make the min-width 100% */
753
+ #sb_instagram.sbi_width_resp{
754
+ width: 100% !important;
755
+ }
756
+ }
757
+ @media all and (max-width: 480px){
758
+ /* Make all cols into 1 col */
759
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
760
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
761
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
762
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
763
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
764
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
765
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
766
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
767
+ width: 100%;
768
+ }
769
+ }
770
+
771
+ /* NO JS */
772
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{
773
+ box-sizing: border-box;
774
+ position: relative;
775
+ overflow: hidden;
776
+ }
777
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before {
778
+ content: "";
779
+ display: block;
780
+ padding-top: 100%;
781
+ z-index: -300;
782
+ }
783
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo {
784
+ position: absolute;
785
+ top: 0;
786
+ left: 0;
787
+ bottom: 0;
788
+ right: 0;
789
+ }
790
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition {
791
+ opacity: 1;
792
+ max-height: 640px;
793
+ }
794
+ #sb_instagram.sbi_no_js .sbi_photo img,
795
+ #sb_instagram.sbi_no_js .sbi_load_btn{
796
+ display: none;
797
+ }
798
+ #sb_instagram #sbi_images .sbi_js_load_disabled .sbi_imgLiquid_ready.sbi_photo {
799
+ padding-bottom: 0 !important;
800
+ }
801
+ #sb_instagram #sbi_mod_error .sb_frontend_btn {
802
+ display: inline-block;
803
+ padding: 6px 10px;
804
+ background: #ddd;
805
+ background: rgba(0,0,0,.1);
806
+ text-decoration: none;
807
+ border-radius: 5px;
808
+ margin-top: 10px;
809
+ color: #444
810
+ }
811
+
812
+ #sb_instagram #sbi_mod_error .sb_frontend_btn:hover {
813
+ background: #ccc;
814
+ background: rgba(0,0,0,.15)
815
+ }
816
+
817
+ #sb_instagram #sbi_mod_error .sb_frontend_btn .fa {
818
+ margin-right: 2px
819
}
css/sb-instagram.css CHANGED
@@ -1,819 +1,819 @@
1
- /**************/
2
- /*** LAYOUT ***/
3
- /**************/
4
-
5
- /* Feed container */
6
- #sb_instagram {
7
- width: 100%;
8
- margin: 0 auto;
9
- padding: 0;
10
- -webkit-box-sizing: border-box;
11
- -moz-box-sizing: border-box;
12
- box-sizing: border-box;
13
- }
14
- #sb_instagram:after{
15
- content: "";
16
- display: table;
17
- clear: both;
18
- }
19
-
20
- /*********************/
21
- /*** STYLE OPTIONS ***/
22
- /*********************/
23
- #sb_instagram.sbi_fixed_height{
24
- overflow: hidden;
25
- overflow-y: auto;
26
- -webkit-box-sizing: border-box;
27
- -moz-box-sizing: border-box;
28
- box-sizing: border-box;
29
- }
30
- #sb_instagram #sbi_images{
31
- width: 100%;
32
- float: left;
33
- line-height: 0;
34
-
35
- -webkit-box-sizing: border-box;
36
- -moz-box-sizing: border-box;
37
- box-sizing: border-box;
38
- }
39
- /* Remove header shadow/border */
40
- #sb_instagram .sbi_header_link {
41
- -webkit-box-shadow: none;
42
- box-shadow: none;
43
- }
44
- #sb_instagram .sbi_header_link:hover {
45
- border: none;
46
- }
47
-
48
- /* Items */
49
- #sb_instagram #sbi_images .sbi_item{
50
- display: -moz-inline-stack;
51
- display: inline-block;
52
- float: left;
53
- vertical-align: top;
54
- zoom: 1;
55
- *display: inline;
56
-
57
- max-height: 1000px;
58
- padding: inherit !important;
59
- margin: 0 !important;
60
- text-decoration: none;
61
- opacity: 1;
62
- overflow: hidden;
63
-
64
- -webkit-box-sizing: border-box;
65
- -moz-box-sizing: border-box;
66
- box-sizing: border-box;
67
-
68
- -webkit-transition: all 0.5s ease;
69
- -moz-transition: all 0.5s ease;
70
- -o-transition: all 0.5s ease;
71
- -ms-transition: all 0.5s ease;
72
- transition: all 0.5s ease;
73
- }
74
- /* Transition items in */
75
- #sb_instagram #sbi_images .sbi_item.sbi_transition{
76
- opacity: 0;
77
- max-height: 0;
78
- }
79
-
80
- /* Cols */
81
- #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
82
- #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
83
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
84
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
85
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
86
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
87
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
88
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
89
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
90
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
91
-
92
- /* Disable mobile layout */
93
- #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
94
- #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
95
- #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
96
- #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
97
- #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
98
- #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
99
- #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
100
- #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
101
- #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
102
- #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
103
-
104
- /* Photos */
105
- #sb_instagram .sbi_photo_wrap{
106
- position: relative;
107
- }
108
- #sb_instagram .sbi_photo{
109
- display: block;
110
- text-decoration: none;
111
- }
112
- #sb_instagram .sbi_photo img{
113
- width: 100%;
114
- height: auto;
115
- }
116
- #sb_instagram .sbi_no_js img{
117
- display: none;
118
- }
119
- #sb_instagram a,
120
- #sb_instagram a:hover,
121
- #sb_instagram a:focus,
122
- #sb_instagram a:active{
123
- outline: none;
124
- }
125
- #sb_instagram img{
126
- display: block;
127
- padding: 0 !important;
128
- margin: 0 !important;
129
- max-width: 100% !important;
130
- opacity: 1 !important;
131
- }
132
- #sb_instagram .sbi_link{
133
- display: none;
134
- position: absolute;
135
- bottom: 0;
136
- right: 0;
137
-
138
- width: 100%;
139
- padding: 10px 0;
140
- background: rgba(0,0,0,0.5);
141
- text-align: center;
142
- color: #fff;
143
- font-size: 12px;
144
- line-height: 1.1;
145
- }
146
- #sb_instagram .sbi_link a{
147
- padding: 0 6px;
148
- text-decoration: none;
149
- color: #fff;
150
- font-size: 12px;
151
- line-height: 1.1;
152
-
153
- display: -moz-inline-stack;
154
- display: inline-block;
155
- vertical-align: top;
156
- zoom: 1;
157
- *display: inline;
158
- }
159
- #sb_instagram .sbi_link .sbi_lightbox_link{
160
- padding-bottom: 5px;
161
- }
162
- #sb_instagram .sbi_link a:hover,
163