Instagram Feed - Version 2.4.1

Version Description

  • 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.
  • Tweak: rel="nofollow" added to all external Instagram Feed links found in the source of the page.
  • Fix: API Error #2 was not clearing properly in error reports.
Download this release

Release Info

Developer Craig at Smash Balloon
Plugin Icon 128x128 Instagram Feed
Version 2.4.1
Comparing to
See all releases

Code changes from version 2.4 to 2.4.1

Files changed (52) hide show
  1. README.txt +18 -13
  2. css/sb-blocks.css +2 -2
  3. css/sb-instagram-2-1.css +0 -744
  4. css/sb-instagram-2-1.min.css +0 -1
  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 +1269 -1282
  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/main.php +2853 -2847
  24. inc/class-sb-instagram-api-connect.php +380 -421
  25. inc/class-sb-instagram-cron-updater.php +225 -225
  26. inc/class-sb-instagram-display-elements.php +360 -360
  27. inc/class-sb-instagram-education.php +130 -130
  28. inc/class-sb-instagram-feed.php +1476 -1476
  29. inc/class-sb-instagram-parse.php +313 -313
  30. inc/class-sb-instagram-post-set.php +187 -187
  31. inc/class-sb-instagram-post.php +546 -546
  32. inc/class-sb-instagram-posts-manager.php +533 -524
  33. inc/class-sb-instagram-settings.php +615 -603
  34. inc/class-sb-instagram-token-refresher.php +175 -175
  35. inc/email.php +102 -102
  36. inc/if-functions.php +1279 -1279
  37. instagram-feed.php +2 -2
  38. js/jquery.matchHeight-min.js +12 -12
  39. js/sb-blocks.js +113 -113
  40. js/sb-instagram-2-1.js +0 -884
  41. js/sb-instagram-2-1.min.js +0 -1
  42. js/sb-instagram-2-2.js +890 -890
  43. js/sb-instagram-admin.js +0 -961
  44. js/sb-instagram.js +886 -886
  45. languages/instagram-feed-en.mo +0 -0
  46. languages/instagram-feed.pot +2162 -2162
  47. templates/feed.php +66 -66
  48. templates/footer.php +38 -38
  49. templates/header.php +47 -47
  50. templates/item.php +57 -57
  51. widget.php +67 -67
  52. 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
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
@@ -49,7 +49,7 @@ In order to maintain the free version of the plugin on an ongoing basis, and to
49
* Block posts by specific users
50
* Create "shoppable" Instagram feeds, and more.
51
52
- [Find out more about the Pro version](https://smashballoon.com/instagram-feed/?utm_source=wordpress&utm_campaign=sbi "Instagram Feed Pro") or [try out the Pro demo](https://smashballoon.com/instagram-feed/demo/?utm_source=wordpress&utm_campaign=sbi "Instagram Feed Pro Demo").
53
54
= Featured Reviews =
55
"**Simple and concise** - Excellent plugin. Simple and non-bloated. I had a couple small issues with the plugin when I first started using it, but a quick comment on the support forums got a new version pushed out the next day with the fix. Awesome support!" - [Josh Jones](https://wordpress.org/support/topic/simple-and-concise-3 'Simple and concise Instagram plugin')
@@ -59,7 +59,7 @@ In order to maintain the free version of the plugin on an ongoing basis, and to
59
= Feedback or Support =
60
We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
61
62
- For a pop-up photo **lightbox**, to display posts by **hashtag**, show photo **captions**, **video** support + more, check out the [Pro version](http://smashballoon.com/instagram-feed/?utm_source=wordpress&utm_campaign=sbi 'Instagram Feed Pro').
63
64
== Installation ==
65
@@ -69,7 +69,7 @@ For a pop-up photo **lightbox**, to display posts by **hashtag**, show photo **c
69
4. Use the shortcode `[instagram-feed]` in your page, post or widget to display your Instagram photos.
70
5. You can display multiple Instagram feeds by using shortcode options, for example: `[instagram-feed num=6 cols=3]`
71
72
- For simple step-by-step directions on how to set up the Instagram Feed plugin please refer to our [setup guide](http://smashballoon.com/instagram-feed/free/?utm_source=wordpress&utm_campaign=sbi 'Instagram Feed setup guide').
73
74
= Display your Feed =
75
@@ -130,13 +130,13 @@ See the table below for a full list of available shortcode options:
130
* **followtextcolor** - The text color of the 'Follow on Instagram' button. Any hex color code - Example: `[instagram-feed followtextcolor=#fff]`
131
* **followtext** - The text used for the 'Follow on Instagram' button - Example: `[instagram-feed followtext="Follow me"]`
132
133
- For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/?utm_source=wordpress&utm_campaign=sbi 'Instagram Feed Pro').
134
135
= Setting up the Free Instagram Feed WordPress Plugin =
136
137
1) Once you've installed the Instagram Feed plugin click on the Instagram Feed item in your WordPress menu
138
139
- 2) Click on the large blue Instagram button to log into your Instagram account and connect your Instagram account. If you're having trouble retrieving your Instagram information from Instagram then try using the Instagram button on [this page](https://smashballoon.com/instagram-feed/token/?utm_source=wordpress&utm_campaign=sbi) instead.
140
141
You can also display photos from other Instagram accounts by connecting additional Instagram accounts and adding the user name in the shortcode.
142
@@ -180,7 +180,7 @@ Nope. The Access Token used in the plugin is a "read only" token, which means th
180
181
= Can I view the full-size photos or play Instagram videos directly on my website? =
182
183
- This is a feature of the [Pro version](http://smashballoon.com/instagram-feed/?utm_source=wordpress&utm_campaign=sbi 'Instagram Feed Pro') of the plugin, which allows you to view the photos in a pop-up lightbox, support videos, display captions, display photos by hashtag + more!
184
185
= How do I embed my Instagram Feed directly into a WordPress page template? =
186
@@ -194,7 +194,7 @@ If your Instagram photos aren't loading and all your see is a loading symbol the
194
195
You can obtain a new Instagram Access Token on the Instagram Feed Settings page by clicking the blue Instagram login button and then copy and pasting it into the plugin's 'Access Token' field.
196
197
- Occasionally the blue Instagram login button does not produce a working access token. You can try [this link](https://smashballoon.com/instagram-feed/token/?utm_source=wordpress&utm_campaign=sbi) as well.
198
199
2) The plugin's JavaScript file isn't being included in your page
200
@@ -259,9 +259,9 @@ The below options are available on the Instagram Feed Settings page but can also
259
* **followtextcolor** - The text color of the 'Follow on Instagram' button. Any hex color code - Example: `[instagram-feed followtextcolor=#fff]`
260
* **followtext** - The text used for the 'Follow on Instagram' button - Example: `[instagram-feed followtext="Follow me"]`
261
262
- For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/?utm_source=wordpress&utm_campaign=sbi 'Instagram Feed Pro').
263
264
- For more FAQs related to the Instagram Feed plugin please visit the [FAQ section](https://smashballoon.com/instagram-feed/support/faq/?utm_source=wordpress&utm_campaign=sbi 'Instagram Feed plugin FAQs') on our website.
265
266
== Screenshots ==
267
@@ -325,6 +325,11 @@ 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 =
329
* New: Email alerts for critical issues. If there's an issue with an Instagram feed on your website which hasn't been resolved yet then you'll receive an email notification to let you know. This is sent once per week until the issue is resolved. These emails can be disabled by using the following setting: Instagram Feed > Customize > Advanced > Misc > Feed Issue Email Report.
330
* New: Admin notifications for critical issues. If there is an error with the feed, admins will see notices in the dashboard and on the front-end of the site along with instructions on how to resolve the issue. Front-end admin notifications can be disabled by using the following setting: Instagram Feed > Customize > Advanced > Misc > Disable Admin Error Notice.
@@ -495,7 +500,7 @@ We understand that sometimes you need help, have issues or just have questions.
495
* Fix: Font method setting not working when "Are you using an ajax theme?" setting is enabled
496
497
= 1.8 =
498
- * Important: Due to [recent changes](https://smashballoon.com/instagram-api-changes-april-4-2018/?utm_source=wordpress&utm_campaign=sbi) in the Instagram API it is no longer possible to display photos from other Instagram accounts which are not your own. You can only display the user feed of the account which is associated with your Access Token.
499
* New: Added an Access Token shortcode option and support for multiple Instagram Access Tokens. If you own multiple Instagram accounts then you can now use multiple Access Tokens in order to display user feeds from each Instagram account, either in separate feeds, or in the same feed. Just use the `accesstoken` shortcode option. See [this FAQ](https://smashballoon.com/display-multiple-instagram-feeds/#multiple-user-feeds) for more information on displaying multiple User feeds.
500
501
= 1.7 =
@@ -641,7 +646,7 @@ We understand that sometimes you need help, have issues or just have questions.
641
* Tweak: Added a subtle fade effect to the Instagram photos when hovering over them
642
* Tweak: Improved the responsive layout behavior of the Instagram feed
643
* Tweak: Improved the documentation within the Instagram Feed plugin settings pages
644
- * Tweak: Included a link to [step-by-step setup directions](http//:smashballoon.com/instagram-feed/free/?utm_source=wordpress&utm_campaign=sbi 'Instagram feed setup directions') for the plugin
645
* Fix: Fixed an issue with the feed not clearing other widgets correctly
646
647
= 1.2.3 =
@@ -661,7 +666,7 @@ We understand that sometimes you need help, have issues or just have questions.
661
* New: Added an option to display your Instagram photos in random order
662
* New: A new tabbed layout has been implemented on the Instagram Feed plugin's settings pages
663
* New: Added an option to preserve your Instagram Feed settings when uninstalling the plugin
664
- * New: Added a [Pro version](http://smashballoon.com/instagram-feed/?utm_source=wordpress&utm_campaign=sbi 'Instagram Feed Pro') of the Instagram Feed plugin which allows you to display Instagram photos by hashtag, display Instagram captions, view Instagram photos in a pop-up lightbox, show the number of Instagram likes & comments and more
665
* Tweak: The 'Load More' button now automatically hides if there are no more Instagram photos to load
666
* Tweak: Added a small gap to the top of the 'Load More' button
667
* Tweak: Added a icon to the Instagram Feed menu item
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
49
* Block posts by specific users
50
* Create "shoppable" Instagram feeds, and more.
51
52
+ [Find out more about the Pro version](https://smashballoon.com/instagram-feed/?utm_campaign=instagram-free-readme&utm_source=proversion&utm_medium=profindout "Instagram Feed Pro") or [try out the Pro demo](https://smashballoon.com/instagram-feed/demo/?utm_campaign=instagram-free-readme&utm_source=proversion&utm_medium=readmedemo "Instagram Feed Pro Demo").
53
54
= Featured Reviews =
55
"**Simple and concise** - Excellent plugin. Simple and non-bloated. I had a couple small issues with the plugin when I first started using it, but a quick comment on the support forums got a new version pushed out the next day with the fix. Awesome support!" - [Josh Jones](https://wordpress.org/support/topic/simple-and-concise-3 'Simple and concise Instagram plugin')
59
= Feedback or Support =
60
We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
61
62
+ For a pop-up photo **lightbox**, to display posts by **hashtag**, show photo **captions**, **video** support + more, check out the [Pro version](http://smashballoon.com/instagram-feed/?utm_campaign=instagram-free-readme&utm_source=feedbacj&utm_medium=support 'Instagram Feed Pro').
63
64
== Installation ==
65
69
4. Use the shortcode `[instagram-feed]` in your page, post or widget to display your Instagram photos.
70
5. You can display multiple Instagram feeds by using shortcode options, for example: `[instagram-feed num=6 cols=3]`
71
72
+ For simple step-by-step directions on how to set up the Instagram Feed plugin please refer to our [setup guide](http://smashballoon.com/instagram-feed/free/?utm_campaign=instagram-free-readme&utm_source=installation&utm_medium=setup 'Instagram Feed setup guide').
73
74
= Display your Feed =
75
130
* **followtextcolor** - The text color of the 'Follow on Instagram' button. Any hex color code - Example: `[instagram-feed followtextcolor=#fff]`
131
* **followtext** - The text used for the 'Follow on Instagram' button - Example: `[instagram-feed followtext="Follow me"]`
132
133
+ For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/?utm_campaign=instagram-free-readme&utm_source=shortcode&utm_medium=shortcodepro 'Instagram Feed Pro').
134
135
= Setting up the Free Instagram Feed WordPress Plugin =
136
137
1) Once you've installed the Instagram Feed plugin click on the Instagram Feed item in your WordPress menu
138
139
+ 2) Click on the large blue Instagram button to log into your Instagram account and connect your Instagram account. If you're having trouble retrieving your Instagram information from Instagram then try using the Instagram button on [this page](https://smashballoon.com/instagram-feed/token/?utm_campaign=instagram-free-readme&utm_source=settingup&utm_medium=connectionproblem) instead.
140
141
You can also display photos from other Instagram accounts by connecting additional Instagram accounts and adding the user name in the shortcode.
142
180
181
= Can I view the full-size photos or play Instagram videos directly on my website? =
182
183
+ This is a feature of the [Pro version](http://smashballoon.com/instagram-feed/?utm_campaign=instagram-free-readme&utm_source=faqs&utm_medium=fullsize 'Instagram Feed Pro') of the plugin, which allows you to view the photos in a pop-up lightbox, support videos, display captions, display photos by hashtag + more!
184
185
= How do I embed my Instagram Feed directly into a WordPress page template? =
186
194
195
You can obtain a new Instagram Access Token on the Instagram Feed Settings page by clicking the blue Instagram login button and then copy and pasting it into the plugin's 'Access Token' field.
196
197
+ Occasionally the blue Instagram login button does not produce a working access token. You can try [this link](https://smashballoon.com/instagram-feed/token/?utm_campaign=instagram-free-readme&utm_source=faqs&utm_medium=faqconnectionissue) as well.
198
199
2) The plugin's JavaScript file isn't being included in your page
200
259
* **followtextcolor** - The text color of the 'Follow on Instagram' button. Any hex color code - Example: `[instagram-feed followtextcolor=#fff]`
260
* **followtext** - The text used for the 'Follow on Instagram' button - Example: `[instagram-feed followtext="Follow me"]`
261
262
+ For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/?utm_campaign=instagram-free-readme&utm_source=whatare&utm_medium=proshortcode 'Instagram Feed Pro').
263
264
+ For more FAQs related to the Instagram Feed plugin please visit the [FAQ section](https://smashballoon.com/instagram-feed/support/faq/?utm_campaign=instagram-free-readme&utm_source=whatare&utm_medium=faqs 'Instagram Feed plugin FAQs') on our website.
265
266
== Screenshots ==
267
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.
331
+ * Fix: API Error #2 was not clearing properly in error reports.
332
+
333
= 2.4 =
334
* New: Email alerts for critical issues. If there's an issue with an Instagram feed on your website which hasn't been resolved yet then you'll receive an email notification to let you know. This is sent once per week until the issue is resolved. These emails can be disabled by using the following setting: Instagram Feed > Customize > Advanced > Misc > Feed Issue Email Report.
335
* New: Admin notifications for critical issues. If there is an error with the feed, admins will see notices in the dashboard and on the front-end of the site along with instructions on how to resolve the issue. Front-end admin notifications can be disabled by using the following setting: Instagram Feed > Customize > Advanced > Misc > Disable Admin Error Notice.
500
* Fix: Font method setting not working when "Are you using an ajax theme?" setting is enabled
501
502
= 1.8 =
503
+ * Important: Due to [recent changes](https://smashballoon.com/instagram-api-changes-april-4-2018/?utm_campaign=instagram-free-readme&utm_source=changelog&utm_medium=apichanges) in the Instagram API it is no longer possible to display photos from other Instagram accounts which are not your own. You can only display the user feed of the account which is associated with your Access Token.
504
* New: Added an Access Token shortcode option and support for multiple Instagram Access Tokens. If you own multiple Instagram accounts then you can now use multiple Access Tokens in order to display user feeds from each Instagram account, either in separate feeds, or in the same feed. Just use the `accesstoken` shortcode option. See [this FAQ](https://smashballoon.com/display-multiple-instagram-feeds/#multiple-user-feeds) for more information on displaying multiple User feeds.
505
506
= 1.7 =
646
* Tweak: Added a subtle fade effect to the Instagram photos when hovering over them
647
* Tweak: Improved the responsive layout behavior of the Instagram feed
648
* Tweak: Improved the documentation within the Instagram Feed plugin settings pages
649
+ * Tweak: Included a link to [step-by-step setup directions](http//:smashballoon.com/instagram-feed/free/?utm_campaign=instagram-free-readme&utm_source=changelog&utm_medium=changelog 'Instagram feed setup directions') for the plugin
650
* Fix: Fixed an issue with the feed not clearing other widgets correctly
651
652
= 1.2.3 =
666
* New: Added an option to display your Instagram photos in random order
667
* New: A new tabbed layout has been implemented on the Instagram Feed plugin's settings pages
668
* New: Added an option to preserve your Instagram Feed settings when uninstalling the plugin
669
+ * New: Added a [Pro version](http://smashballoon.com/instagram-feed/?utm_campaign=instagram-free-readme&utm_source=changelog&utm_medium=changelog 'Instagram Feed Pro') of the Instagram Feed plugin which allows you to display Instagram photos by hashtag, display Instagram captions, view Instagram photos in a pop-up lightbox, show the number of Instagram likes & comments and more
670
* Tweak: The 'Load More' button now automatically hides if there are no more Instagram photos to load
671
* Tweak: Added a small gap to the top of the 'Load More' button
672
* Tweak: Added a icon to the Instagram Feed menu item
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 DELETED
@@ -1,744 +0,0 @@
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 DELETED
@@ -1 +0,0 @@
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
+