/**************/ /*** LAYOUT ***/ /**************/ /* Feed container */ #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; } /*********************/ /*** STYLE OPTIONS ***/ /*********************/ #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; } /* Animate the height of the container for layout feeds */ #sb_instagram.sbi_masonry #sbi_images, #sb_instagram.sbi_highlight #sbi_images{ -webkit-transition: height 0.5s ease; -moz-transition: height 0.5s ease; -o-transition: height 0.5s ease; -ms-transition: height 0.5s ease; transition: height 0.5s ease; } #sb_instagram a { border-bottom: 0 !important; } /* Items */ #sb_instagram #sbi_images .sbi_item{ display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; 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 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } /* Transition items in */ #sb_instagram #sbi_images .sbi_item.sbi_transition{ opacity: 0; max-height: 0; } /* Override transition for other layouts */ #sb_instagram.sbi_masonry #sbi_images .sbi_item, #sb_instagram.sbi_highlight #sbi_images .sbi_item{ -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } #sb_instagram.sbi_masonry #sbi_images .sbi_item.sbi_transition, #sb_instagram.sbi_highlight #sbi_images .sbi_item.sbi_transition{ opacity: 0; max-height: 1000px; } /* Carousel in transition */ #sb_instagram #sbi_images.sbi_carousel .sbi_item, #sb_instagram #sbi_images.sbi_carousel .sbi_item.sbi_transition{ opacity: 1; max-height: 1000px; } /* Cols */ #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%; } /* Disable mobile layout */ #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%; } /* Photos */ .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;} #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; border-radius: 0; } #sb_instagram #sbi_images img{ display: block; padding: 0 !important; margin: 0 !important; max-width: 100% !important; opacity: 1 !important; font-size: 10px !important; line-height: 0.9; color: #999; } #sb_instagram .sbi_link.sbi_disable_lightbox { display: none !important; } #sb_instagram .sbi_link{ display: none; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; width: 100%; padding: 0; background: #333; background: rgba(0,0,0,0.6); text-align: center; color: #fff; font-size: 12px; line-height: 1.1; overflow: hidden; } #sb_instagram .sbi_link.sbi_default p, #sb_instagram .sbi_link.sbi_default span, #sb_instagram .sbi_link.sbi_default a{ text-shadow: 0px 0px 10px #000; } #sb_instagram .sbi_link .sbi_username a, #sb_instagram .sbi_link .sbi_instagram_link, #sb_instagram .sbi_link .sbi_hover_bottom, #sb_instagram .sbi_link .sbi_playbtn, #sb_instagram .sbi_link .sbi_lightbox_link, #sb_instagram .sbi_link .svg-inline--fa.fa-play{ filter: alpha(opacity=90); opacity: 0.9; } #sb_instagram .sbi_link .sbi_username a:hover, #sb_instagram .sbi_link .sbi_instagram_link:hover, #sb_instagram .sbi_link .sbi_playbtn:hover, #sb_instagram .sbi_link .sbi_lightbox_link:hover, #sb_instagram .sbi_link .svg-inline--fa.fa-play:hover{ filter: alpha(opacity=100); opacity: 1; } #sb_instagram .sbi_link_area{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } #sb_instagram .sbi_link a{ padding: 0; text-decoration: none; color: #ddd; color: rgba(255,255,255,0.7); line-height: 1.1; background: none; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; } #sb_instagram .sbi_link a:hover, #sb_instagram .sbi_link a:active{ color: #fff; } #sb_instagram .sbi_link .sbi_lightbox_link{ display: block; /*display: none;*/ position: absolute; z-index: 2; top: 50%; left: 50%; margin-top: -24px; margin-left: -21px; padding: 0; font-size: 49px; font-style: normal !important; } #sb_instagram .sbi_type_video .sbi_lightbox_link, #sb_instagram .sbi_carousel_vid_first .sbi_lightbox_link{ display: none; } #sb_instagram .sbi_link .sbi_instagram_link{ /*float: right;*/ font-size: 30px; position: absolute; z-index: 100; bottom: 0; right: 2px; padding: 8px; } #sb_instagram .sbi_link a:hover, #sb_instagram .sbi_link a:focus{ text-decoration: underline; } /* Date */ #sb_instagram .sbi_hover_top, #sb_instagram .sbi_hover_bottom{ position: absolute; width: 98%; text-align: center; padding: 1% !important; margin: 0 !important; font-size: 12px; color: #ddd; color: rgba(255,255,255,1); } #sb_instagram .sbi_username{ top: 0; margin: 0; } #sb_instagram .sbi_username a{ padding: 10px 10px 0 10px; position: relative; z-index: 2; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } #sb_instagram .sbi_link .sbi_caption{ line-height: 1; padding-top: 10px; } #sb_instagram .sbi_hover_bottom{ bottom: 10px; line-height: 1; z-index: 2; } #sb_instagram .sbi_hover_bottom p{ margin: 0; padding: 0; } #sb_instagram .sbi_date, #sb_instagram .sbi_location{ padding: 0 5px; margin: 3px 0; display: inline-block; } #sb_instagram .sbi_hover_bottom .fa, #sb_instagram .sbi_hover_bottom svg{ margin: 0 5px 0 0; } #sb_instagram .sbi_hover_bottom .sbi_location{ line-height: 1; width: 100%; padding: 0 38px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sb_instagram .sbi_hover_bottom .sbi_meta{ padding: 5px 0 0 0; } /* Medium */ #sb_instagram.sbi_medium .sbi_username a{ font-size: 11px; } #sb_instagram.sbi_medium .sbi_lightbox_link, #sb_instagram.sbi_medium .sbi_instagram_link, #sb_instagram.sbi_medium .sbi_playbtn, #sb_instagram.sbi_medium .sbi_link .svg-inline--fa.fa-play{ margin-top: -12px; margin-left: -10px; } #sb_instagram.sbi_medium .sbi_lightbox_link, #sb_instagram.sbi_medium .sbi_instagram_link, #sb_instagram.sbi_medium .sbi_playbtn, #sb_instagram.sbi_medium .sbi_photo_wrap .fa-clone, #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{ font-size: 23px; } #sb_instagram.sbi_medium .sbi_instagram_link{ margin: 0; padding: 6px; } #sb_instagram.sbi_medium .sbi_hover_bottom{ bottom: 7px; font-size: 11px; } #sb_instagram.sbi_medium .sbi_playbtn, #sb_instagram.sbi_medium .svg-inline--fa.fa-play{ margin-left: -10px; } #sb_instagram.sbi_medium .sbi_hover_bottom .sbi_location{ padding: 0 30px; } #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{ right: 8px; top: 8px; } /* Small */ #sb_instagram.sbi_small .sbi_username a{ padding: 3px 2px; font-size: 10px; line-height: 1; } #sb_instagram.sbi_small .sbi_lightbox_link, #sb_instagram.sbi_small .sbi_instagram_link, #sb_instagram.sbi_small .sbi_playbtn, #sb_instagram.sbi_small .svg-inline--fa.fa-play{ margin-top: -9px; margin-left: -7px; } #sb_instagram.sbi_small .sbi_lightbox_link, #sb_instagram.sbi_small .sbi_instagram_link, #sb_instagram.sbi_small .sbi_playbtn, #sb_instagram.sbi_small .sbi_photo_wrap .fa-clone, #sb_instagram.sbi_small .sbi_type_video .svg-inline--fa.fa-play, #sb_instagram.sbi_small .sbi_carousel_vid_first .svg-inline--fa.fa-play{ font-size: 18px; } #sb_instagram.sbi_small .sbi_instagram_link{ margin: 0; padding: 4px 3px; font-size: 14px; } #sb_instagram.sbi_small .sbi_hover_bottom{ bottom: 3px; font-size: 10px; } #sb_instagram.sbi_small .sbi_hover_bottom .sbi_location{ padding: 0 18px; } #sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{ right: 5px; top: 5px; font-size: 12px; } /* Post info */ #sb_instagram .sbi_info{ width: 100%; float: left; clear: both; text-decoration: none; color: #666; text-align: center; } #sb_instagram .sbi_info p{ width: 100%; clear: both; padding: 5px 5px 2px 5px !important; margin: 0 !important; line-height: 1.2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sb_instagram .sbi_expand{ display: none; } /* Caption */ #sb_instagram .sbi_caption{ word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } /* Meta */ #sb_instagram .sbi_meta{ line-height: 1.1; padding: 4px 0 8px 0; } #sb_instagram .sbi_meta span{ margin: 0 5px !important; font-size: 11px; } #sb_instagram .sbi_meta i, #sb_instagram .sbi_meta svg{ margin-right: 5px !important; font-size: 13px; } #sb_instagram .sbi_lightbox_link .fa-arrows-alt { display: none; } /* VIDEO */ .sbi_video{ display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: 100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .sbi_video_lightbox .sbi_video, #sbi_lightbox .sbi_owl-wrapper .sbi_video{ display: block; } /* #sbi_lightbox.sbi_video_lightbox .sbi_lb-image{ display: none !important; /* Show photo in IE7 as doesn't support video *//* *display: block !important; } */ /* Video play button */ .sbi_playbtn, #sb_instagram .svg-inline--fa.fa-play{ display: none !important; } .sbi_type_video .sbi_playbtn, .sbi_carousel_vid_first .sbi_playbtn, .sbi_type_carousel .fa-clone, #sb_instagram .sbi_carousel_vid_first .svg-inline--fa.fa-play, #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{ display: block !important; position: absolute; z-index: 1; padding: 0; font-size: 48px; color: #fff; color: rgba(255,255,255,0.9); font-style: normal !important; text-shadow: 0 0 8px rgba(0,0,0,0.8); } .sbi_type_video .sbi_playbtn, .sbi_carousel_vid_first .sbi_playbtn, .sbi_link .svg-inline--fa.fa-play{ top: 50%; left: 50%; margin-top: -24px; margin-left: -19px; } #sb_instagram .sbi_type_carousel .fa-clone{ right: 12px; top: 12px; font-size: 24px; text-shadow: 0 0 8px rgba(0,0,0,0.3); } .sbi_type_carousel svg.fa-clone, #sb_instagram .sbi_type_video .svg-inline--fa.fa-play, .sbi_carousel_vid_first .svg-inline--fa.fa-play{ -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) ); filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) ); } /* Don't apply text shadow to play button on hover link */ #sb_instagram .sbi_type_video .sbi_link .sbi_playbtn, #sb_instagram .sbi_carousel_vid_first .sbi_link .sbi_playbtn{ text-shadow: none; } .sbi_lb_lightbox-carousel-video { position: relative !important; } /* Media queries */ @media all and (max-width: 640px){ /* Make 3-6 cols into 2 col */ #sb_instagram.sbi_col_3.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_4.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_5.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_6.sbi_mob_col_auto #sbi_images .sbi_item{ width: 50%; } /* Make 7-10 cols into 4 col */ #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, #sb_instagram.sbi_col_10 #sbi_images .sbi_item, #sb_instagram.sbi_col_7.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_8.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_9.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_10.sbi_mob_col_auto #sbi_images .sbi_item{ width: 25%; } #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%; } /* On mobile make the min-width 100% */ #sb_instagram.sbi_width_resp{ width: 100% !important; } } @media all and (max-width: 480px){ /* Make all cols into 1 col */ #sb_instagram.sbi_col_3.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_4.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_5.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_6.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_7.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_8.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_9.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_col_10.sbi_mob_col_auto #sbi_images .sbi_item, #sb_instagram.sbi_mob_col_1 #sbi_images .sbi_item{ width: 100%; } #sb_instagram.sbi_mob_col_2 #sbi_images .sbi_item{ width: 50%; } #sb_instagram.sbi_mob_col_3 #sbi_images .sbi_item{ width: 33.33%; } #sb_instagram.sbi_mob_col_4 #sbi_images .sbi_item{ width: 25%; } #sb_instagram.sbi_mob_col_5 #sbi_images .sbi_item{ width: 20%; } #sb_instagram.sbi_mob_col_6 #sbi_images .sbi_item{ width: 16.66%; } #sb_instagram.sbi_mob_col_7 #sbi_images .sbi_item{ width: 14.28%; } } /* Lightbox */ /* Preload images */ body:after { content: url(../img/sbi-sprite.png); display: none; } .sbi_lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 99999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.9; display: none; } .sbi_lightbox { position: absolute; left: 0; width: 100%; z-index: 100000; text-align: center; line-height: 0; font-weight: normal; } .sbi_lightbox .sbi_lb-image { display: block; height: auto; max-width: inherit; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-image{ -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; -ms-border-radius: 3px 0 0 3px; -o-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .sbi_lightbox a:hover, .sbi_lightbox a:focus, .sbi_lightbox a:active{ outline: none; } .sbi_lightbox a img { border: none; } .sbi_lb-outerContainer { position: relative; background-color: #000; *zoom: 1; width: 250px; height: 250px; margin: 0 auto 5px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .sbi_lb-outerContainer:after { content: ""; display: table; clear: both; } .sbi_lb-container-wrapper{ height: 100%; } .sbi_lb-container { position: relative; padding: 4px; top: 0; left: 0; width: 100%; height: 100%; bottom: 0; right: 0; } .sbi_lb-loader { position: absolute; width: 100%; top: 50%; left: 0; height: 20px; margin-top: -10px; text-align: center; line-height: 0; } .sbi_lb-loader span { display: block; width: 14px; height: 14px; margin: 0 auto; background: url(../img/sbi-sprite.png) no-repeat; } .sbi_lb-nav { /*position: absolute;*/ top: 0; left: 0; /*height: 100%;*/ width: 100%; z-index: 10; /*pointer-events: none;*/ } .sbi_lb-container > .nav { left: 0; } .sbi_lb-nav a { position: absolute; z-index: 100; top: 0; height: 90%; outline: none; background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); } /* Arrows */ .sbi_lb-prev, .sbi_lb-next { height: 100%; cursor: pointer; display: block; } .sbi_lb-nav a.sbi_lb-prev { /*width: 30%;*/ width: 50px; left: -70px; padding-left: 10px; padding-right: 10px; float: left; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5); opacity: 0.5; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .sbi_lb-nav a.sbi_lb-prev:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .sbi_lb-nav a.sbi_lb-next { /*width: 30%;*/ width: 50px; right: -70px; padding-left: 10px; padding-right: 10px; float: right; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5); opacity: 0.5; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .sbi_lb-nav a.sbi_lb-next:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .sbi_lb-nav span{ display: block; top: 55%; position: absolute; left: 20px; width: 34px; height: 45px; margin: -25px 0 0 0; background: url(../img/sbi-sprite.png) no-repeat; } .sbi_lb-nav a.sbi_lb-prev span{ background-position: -53px 0; } .sbi_lb-nav a.sbi_lb-next span{ left: auto; right: 20px; background-position: -18px 0; } .sbi_lb-dataContainer { margin: 0 auto; padding-top: 10px; *zoom: 1; width: 100%; font-family: "Open Sans", Helvetica, Arial, sans-serif; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-outerContainer{ position: relative; padding-right: 300px; background: #fff; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-container-wrapper { position: relative; background: #000; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-dataContainer { width: 300px !important; position: absolute; top: 0; right: -300px; height: 100%; bottom: 0; background: #fff; line-height: 1.4; overflow: hidden; overflow-y: auto; text-align: left; } .sbi_lb-dataContainer:after, .sbi_lb-data:after, .sbi_lb-commentBox:after { content: ""; display: table; clear: both; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-commentBox{ display: block !important; width: 100%; margin-top: 20px; padding: 4px; } #sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-number { padding-bottom: 0; } #sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-caption { max-width: 100%; margin-bottom: 20px; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-comment{ display: block !important; width: 100%; min-width: 100%; float: left; clear: both; font-size: 12px; padding: 3px 20px 3px 0; margin: 0 0 1px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-commenter { font-weight: 700; margin-right: 5px; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-commentBox p{ text-align: left; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-dataContainer{ box-sizing: border-box; padding: 15px 20px; } .sbi_lb-data { padding: 0 4px; color: #ccc; } .sbi_lb-data .sbi_lb-details { width: 85%; float: left; text-align: left; line-height: 1.1; } .sbi_lb-data .sbi_lb-caption { float: left; font-size: 13px; font-weight: normal; line-height: 1.3; padding-bottom: 3px; color: #ccc; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .sbi_lb-data .sbi_lb-caption a{ color: #ccc; font-weight: bold; text-decoration: none; } .sbi_lb-data .sbi_lb-caption a:hover, .sbi_lb-commenter:hover{ color: #fff; text-decoration: underline; } .sbi_lb-data .sbi_lb-caption .sbi_lightbox_username{ float: left; width: 100%; color: #ccc; padding-bottom: 0; display: block; margin: 0 0 5px 0; } .sbi_lb-data .sbi_lb-caption .sbi_lightbox_username:hover p{ color: #fff; text-decoration: underline; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-commenter { color: #333; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data, .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption, .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption a, .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption a:hover, .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-commenter:hover, .sbi_lightbox.sbi_lb-comments-enabled .sbi_lightbox_username, #sbi_lightbox.sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-number, #sbi_lightbox.sbi_lightbox.sbi_lb-comments-enabled .sbi_lightbox_action a, #sbi_lightbox.sbi_lightbox.sbi_lb-comments-enabled .sbi_lightbox_action a:hover, .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption .sbi_lightbox_username:hover p, .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-caption .sbi_lightbox_username p{ color: #333; } .sbi_lightbox .sbi_lightbox_username img { float: left; border: none; width: 32px; height: 32px; margin-right: 10px; background: #666; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } .sbi_lightbox_username p{ float: left; margin: 0; padding: 0; color: #ccc; line-height: 32px; font-weight: bold; font-size: 13px; } .sbi_lb-data .sbi_lb-number { display: block; float: left; clear: both; padding: 5px 0 15px 0; font-size: 12px; color: #999999; } .sbi_lb-data .sbi_lb-close { display: block; float: right; width: 30px; height: 30px; font-size: 18px; /* Hides icon font X */ color: #aaa; text-align: right; outline: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .sbi_lb-data .sbi_lb-close:hover { cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; color: #fff; } /* Lightbox video - must go after lighbox CSS */ /* Leave a gap at the bottom of the nav for video controls */ .sbi_lb-nav { height: auto; } .sbi_lightbox .sbi_owl-item:nth-child(n+2) .sbi_video { position: relative !important; } /* Remove 4px padding from lightbox container so video lines up */ .sbi_lb-container{ padding: 0; } /* Mod link to remove image */ #sbi_mod_link, #sbi_mod_error{ display: none; } #sbi_mod_error{ border: 1px solid #ddd; background: #eee; color: #333; margin: 0 0 10px 0; padding: 10px 15px; font-size: 13px; text-align: center; -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; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 13px; } #sbi_mod_error p:first-child b{ font-size: 14px; } #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; font-style: italic; } /* Lightbox action links */ #sbi_lightbox .sbi_lightbox_action{ float: left; /*clear: both;*/ position: relative; padding: 0 0 0 10px; margin: 5px 0 0 10px; border-left: 1px solid #666; font-size: 12px; } #sbi_lightbox .sbi_lightbox_action a{ display: block; float: left; color: #999; text-decoration: none; } #sbi_lightbox .sbi_lightbox_action a:hover, #sbi_lightbox .sbi_lightbox_action a:focus{ color: #fff; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lightbox_action a:hover, .sbi_lightbox.sbi_lb-comments-enabled .sbi_lightbox_action a:focus { color: inherit; } #sbi_lightbox .sbi_lightbox_action .fa, #sbi_lightbox .sbi_lightbox_action svg{ margin-right: 5px; } #sbi_lightbox .sbi_lightbox_action.sbi_instagram .fa, #sbi_lightbox .sbi_lightbox_action.sbi_instagram svg{ font-size: 13px; } /* Lightbox sidebar mod link/box */ #sbi_lightbox.sbi_lb-comments-enabled #sbi_mod_link{ width: 100%; margin-left: 0; padding: 5px 0 0 0; border-left: none; } #sbi_lightbox.sbi_lb-comments-enabled #sbi_mod_box{ width: 265px; left: -15px; } /* Lightbox tooltip */ #sbi_lightbox .sbi_lightbox_tooltip{ display: none; position: absolute; width: 100px; bottom: 22px; left: 0; padding: 5px 10px; margin: 0; background: rgba(255,255,255,0.9); color: #222; font-size: 12px; line-height: 1.4; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sbi_lightbox .sbi_lightbox_tooltip .svg-inline--fa.fa-play{ position: absolute; font-size: 8px; bottom: -6px; left: 36px; color: rgba(255,255,255,0.9); } #sbi_lightbox .sbi_tooltip_social a .fa, #sbi_lightbox .sbi_tooltip_social a svg{ font-size: 16px; margin: 0; padding: 5px; } #sbi_lightbox .sbi_tooltip_social a#sbi_facebook_icon .fa, #sbi_lightbox .sbi_tooltip_social a#sbi_twitter_icon .fa, #sbi_lightbox .sbi_tooltip_social a#sbi_pinterest_icon .fa{ padding-top: 4px; font-size: 18px; } #sbi_lightbox .sbi_tooltip_social a svg { font-size: 19px; padding: 3px 4px; margin: auto; } /* Hide photos tooltip */ #sbi_lightbox #sbi_mod_box{ width: 285px; padding: 8px 10px; } /* Social icons tooltip */ #sbi_lightbox .sbi_tooltip_social{ width: 172px; padding: 5px 5px 4px 5px; } #sbi_lightbox .sbi_tooltip_social a{ color: #333; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #sbi_lightbox .sbi_lightbox_action #sbi_facebook_icon:hover{ background: #3b5998; } #sbi_lightbox .sbi_lightbox_action #sbi_twitter_icon:hover{ background: #00aced; } #sbi_lightbox .sbi_lightbox_action #sbi_google_icon:hover{ background: #dd4b39; } #sbi_lightbox .sbi_lightbox_action #sbi_linkedin_icon:hover{ background: #007bb6; } #sbi_lightbox .sbi_lightbox_action #sbi_pinterest_icon:hover{ background: #cb2027; } #sbi_lightbox .sbi_lightbox_action #sbi_email_icon:hover{ background: #333; } #sbi_lightbox .sbi_owl-theme .sbi_owl-controls .sbi_owl-page span { width: 8px; height: 8px; } /* begin small device comments CSS */ @media all and (max-width: 640px){ .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-outerContainer { width: 100% !important; padding-right: 0!important; background: #000; } .sbi_lightbox.sbi_lb-comments-enabled .sbi_lb-dataContainer { box-sizing: border-box; width: 100% !important; position: relative; right: 0; height: 100%; line-height: 1.4; overflow: hidden; overflow-y: auto; text-align: left; border-radius: 0 0 5px 5px; } .sbi_lightbox .sbi_lb-image { margin: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; border-radius: 0; } .sbi_lb-container-wrapper { margin: 0 10px; } #sbi_lightbox.sbi_lb-comments-enabled #sbi_mod_link.sbi_lightbox_action { padding: 0 0 0 10px; margin: 5px 0 0 10px; border-left: 1px solid #666; } /* Carousel in Lightbox */ #sbi_lightbox .sbi_lb-prev, #sbi_lightbox .sbi_lb-next, #sbi_lightbox .sbi_lb-nav {display: none !important;} #sbi_lightbox .sbi_owl-theme .sbi_owl-controls .sbi_owl-page span { width: 16px; height: 16px; } } /* end small device comments CSS */ /* Loader */ #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,0.5); border-radius: 100%; -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out; animation: sbi-sk-scaleout 1.0s infinite ease-in-out; } /* Loader in button */ #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.0); opacity: 0; } } @keyframes sbi-sk-scaleout { 0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); 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(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } /* Lightbox sidebar/comments */ .sbi_lb-comments-enabled .sbi_lb-dataContainer{ -moz-border-radius-bottom-left: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-top-right: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } .sbi_lb-comments-enabled .sbi_lb-data .sbi_lb-details{ width: 95%; } .sbi_lb-comments-enabled .sbi_lb-closeContainer{ position: absolute; top: 0; right: 0; } .sbi_lb-comments-enabled .sbi_lb-closeContainer .sbi_lb-close{ background: none; color: #333; width: auto; height: auto; padding: 8px 10px; font-size: 14px; } .sbi_lb-comments-enabled .sbi_lb-closeContainer .sbi_lb-close:hover{ background: rgba(0,0,0,0.05); -moz-border-radius-bottom-left: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } #sbi_lightbox.sbi_lightbox.sbi_lb-comments-enabled .sbi_tooltip_social a:hover, #sbi_lightbox.sbi_lightbox.sbi_lb-comments-enabled .sbi_tooltip_social a:focus{ color: #fff; } /* HEADER */ #sb_instagram .sb_instagram_header{ float: left; clear: both; margin: 0; padding: 0; line-height: 1.2; width: 100%; overflow: hidden; /* Prevents pushing width on mobile */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sb_instagram .sb_instagram_header a{ float: left; display: block; min-width: 100%\9; text-decoration: none; transition: color 0.5s ease; } /* Header profile pic */ #sb_instagram .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 .sbi_header_img img{ float: left; margin: 0 !important; padding: 0 !important; border: none !important; } /* Profile pic hover */ #sb_instagram .sbi_header_img_hover, #sb_instagram .sbi_header_hashtag_icon{ opacity: 0; position: absolute; width: 100%; top: 0; bottom: 0; left: 0; text-align: center; color: #fff; background: rgba(0,0,0,0.75); } #sb_instagram .sbi_header_img_hover .sbi_new_logo, #sb_instagram .sbi_header_hashtag_icon .sbi_new_logo{ position: absolute; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; width: 24px; height: 24px; overflow: hidden; background: url('../img/sbi-sprite.png') no-repeat -90px 0; } #sb_instagram .sbi_header_img_hover{ transition: opacity 0.4s ease-in-out; } #sb_instagram .sb_instagram_header .sbi_fade_in{ opacity: 1; transition: opacity 0.2s ease-in-out; } /* Header text */ #sb_instagram .sbi_header_text{ float: left; width: 100%; padding-top: 5px; } #sb_instagram .sbi_header_text h3, #sb_instagram .sbi_header_text p{ float: left; clear: both; width: auto; margin: 0 0 0 60px !important; padding: 0 !important; } #sb_instagram .sbi_header_text .sbi_bio_info{ padding: 0 !important; } #sb_instagram .sbi_bio_info span{ padding-right: 10px; } #sb_instagram .sbi_bio_info .fa, #sb_instagram .sbi_bio_info svg{ padding-right: 3px; } #sb_instagram .sbi_posts_count svg{ height: 1.05em; margin-bottom: -1px; } #sb_instagram .sbi_followers svg.svg-inline--fa.fa-user{ width: 0.8em; margin-right: 0 !important; } /* Hashtag header */ #sb_instagram .sbi_header_type_generic .sbi_header_img{ background: #333; color: #fff; width: 50px; height: 50px; position: relative; } #sb_instagram .sbi_header_type_generic .sbi_no_bio{ padding-top: 9px !important; } #sb_instagram .sbi_header_type_generic .sbi_header_hashtag_icon{ display: block; color: #fff; opacity: 0.9; -webkit-transition: background 0.6s linear, color 0.6s linear; -moz-transition: background 0.6s linear, color 0.6s linear; -ms-transition: background 0.6s linear, color 0.6s linear; -o-transition: background 0.6s linear, color 0.6s linear; transition: background 0.6s linear, color 0.6s linear; } #sb_instagram .sbi_header_type_generic:hover .sbi_header_hashtag_icon{ display: block; opacity: 1; -webkit-transition: background 0.2s linear, color 0.2s linear; -moz-transition: background 0.2s linear, color 0.2s linear; -ms-transition: background 0.2s linear, color 0.2s linear; -o-transition: background 0.2s linear, color 0.2s linear; transition: background 0.2s linear, color 0.2s linear; } #sb_instagram .sb_instagram_header h3{ font-size: 16px; line-height: 1.3; -ms-word-wrap: break-word; word-break: break-word; } #sb_instagram .sb_instagram_header p{ font-size: 13px; line-height: 1.3; } /* No bio */ #sb_instagram .sbi_header_text.sbi_no_info h3{ padding-top: 9px !important; } #sb_instagram .sbi_header_text.sbi_no_bio .sbi_bio_info{ clear: both; } /* Header followers */ #sb_instagram .sbi_header_text .sbi_bio_info{ float: left; clear: none; margin-top: 2px !important; } #sb_instagram .sbi_header_text h3{ margin-right: -50px !important; } /* Header style boxed */ #sb_instagram .sbi_header_style_boxed .sbi_header_img{ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } #sb_instagram .sbi_header_bar{ width: 100%; float: left; clear: both; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sb_instagram .sbi_header_style_boxed .sbi_bio_info{ margin: 2px 5px; float: left; width: auto; } #sb_instagram .sbi_header_style_boxed .sbi_no_bio h3{ margin-top: 9px !important; } #sb_instagram .sbi_header_style_boxed .sbi_bio{ padding-bottom: 3px !important; margin-right: 5px !important; } #sb_instagram .sb_instagram_header.sbi_header_style_boxed .sbi_header_follow_btn{ float: right; padding: 4px 12px; background: #517fa4; color: #fff; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #sb_instagram .sbi_header_follow_btn:hover, #sb_instagram .sbi_header_follow_btn:focus{ filter: alpha(opacity=85); opacity: 0.85; outline: none; } #sb_instagram .sbi_header_follow_btn .fa, #sb_instagram .sbi_header_follow_btn svg{ margin-right: 5px; } #sb_instagram .sbi_header_style_boxed .sbi_header_hashtag_icon{ background: none; } /* Buttons */ #sb_instagram #sbi_load{ float: left; clear: both; width: 100%; text-align: center; } #sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a, #sb_instagram .sbi_moderation_link, #sb_instagram .sbi_close_mod{ display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; 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_load .sbi_load_btn.sbi_hide_load { display:none !important; } #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 0.5s ease-in; } #sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{ opacity: 1; transition: all 0.1s ease-in; } #sb_instagram .sbi_hidden{ opacity: 0 !important; } /* Follow button */ #sb_instagram .sbi_follow_btn{ display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; 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_follow_btn a, #sb_instagram .sbi_follow_btn a, #sb_instagram #sbi_load .sbi_load_btn{ transition: all 0.1s ease-in; } /* Hover state for default colors */ #sb_instagram #sbi_load .sbi_load_btn:hover{ outline: none; box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25); } #sb_instagram .sbi_follow_btn a:hover, #sb_instagram .sbi_follow_btn a:focus{ outline: none; box-shadow: inset 0 0 10px 20px #359dff; } /* If a custom color is applied then just use opacity for the hover effect */ #sb_instagram .sbi_follow_btn.sbi_custom a:hover, #sb_instagram .sbi_follow_btn.sbi_custom a:focus, #sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15); } /* Active state */ #sb_instagram .sbi_follow_btn a:active, #sb_instagram #sbi_load .sbi_load_btn:active{ box-shadow: inset 0 0 10px 20px rgba(0,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_load .sbi_follow_btn{ margin-left: 5px; } /* SVGs */ #sb_instagram svg:not(:root).svg-inline--fa, #sbi_lightbox svg:not(:root).svg-inline--fa{ box-sizing: unset; overflow: visible; width: 1em; } #sb_instagram .svg-inline--fa.fa-w-16, #sbi_lightbox .svg-inline--fa.fa-w-16{ width: 1em; } #sb_instagram .svg-inline--fa, #sbi_lightbox .svg-inline--fa{ display: inline-block; font-size: inherit; height: 1em; overflow: visible; vertical-align: -.125em; } /* Don't show the carousel images initially, fade them in using JS */ /* * Core Owl Carousel CSS File * v2.1.1 */ #sb_instagram #sbi_images.sbi_carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .sbi_carousel .sbi_info, .sbi_carousel .sbi_owl2row-item{ display: none; } .sbi-owl-stage { position: relative; -ms-touch-action: pan-Y; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .sbi-owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .sbi-owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .sbi-owl-wrapper, .sbi-owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .sbi-owl-item { position: relative; min-height: 1px; padding: 0 5px; padding: 0; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .sbi-owl-item img { display: block; width: 100%; } .sbi-owl-nav.disabled, .sbi-owl-dots.disabled { display: none; } .sbi-owl-nav .sbi-owl-prev, .sbi-owl-nav .sbi-owl-next, .sbi-owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sbi-owl-carousel.sbi-owl-loaded { display: block; } .sbi-owl-carousel.sbi-owl-loading { opacity: 0; display: block; } .sbi-owl-carousel.sbi-owl-hidden { opacity: 0; } .sbi-owl-carousel.sbi-owl-refresh .sbi-owl-item { visibility: hidden; } .sbi-owl-carousel.sbi-owl-drag .sbi-owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sbi-owl-carousel.sbi-owl-grab { cursor: move; cursor: grab; } .sbi-owl-carousel.sbi-owl-rtl { direction: rtl; } .sbi-owl-carousel.sbi-owl-rtl .sbi-owl-item { float: right; } /* No Js */ .no-js .sbi_carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .animated { animation-duration: 1000ms; animation-fill-mode: both; } .sbi-owl-animated-in { z-index: 0; } .sbi-owl-animated-out { z-index: 1; } .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .sbi-owl-height { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .sbi-owl-item .sbi-owl-lazy { opacity: 0; transition: opacity 400ms ease; } .sbi-owl-item img.sbi-owl-lazy { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .sbi-owl-video-wrapper { position: relative; height: 100%; background: #000; } .sbi-owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .sbi-owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .sbi-owl-video-playing .sbi-owl-video-tn, .sbi-owl-video-playing .sbi-owl-video-play-icon { display: none; } .sbi-owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .sbi-owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } .sbi-owl-nav { margin-top: 10px; text-align: center; -webkit-tap-highlight-color: transparent; } .sbi-owl-nav { margin-top: 0; } .sbi-owl-nav .disabled { opacity: 0.5; cursor: default; } .sbi-owl-nav.disabled + .sbi-owl-dots { margin-top: 10px; } .sbi-owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; padding: 5px 0; margin-top: 5px; } .sbi-owl-dots .sbi-owl-dot { display: inline-block; zoom: 1; *display: inline; } .sbi-owl-dots .sbi-owl-dot span { display: block; width: 12px; height: 12px; margin: 5px 7px; background: #333; filter: Alpha(Opacity=25);/*IE7 fix*/ opacity: 0.25; -webkit-backface-visibility: visible; transition: opacity 100ms ease; border-radius: 30px; } .sbi-owl-dots .sbi-owl-dot.active span, .sbi-owl-dots .sbi-owl-dot:hover span { filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; } .sbi-owl-item { display: inline-block; vertical-align: top; } .sbi-owl-stage-outer { overflow-x: hidden; overflow-y: hidden; } .sbi-owl-item > div { width: 100% !important; } .sbi-post-links { max-width: 100%; } .sbi-owl-item{ box-sizing: border-box; } /* Navigation arrows */ .sbi-owl-nav > div { position: absolute; top: 50%; font-size: 14px; display: inline-block; background: rgba(255,255,255,0.3); padding: 6px 6px 6px 8px; border-radius: 50%; margin-top: -15px; color: #000; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .sbi_carousel:hover .sbi-owl-nav > div{ background: rgba(255,255,255,0.5); -webkit-transform:scale(1.1); /* Safari and Chrome */ -moz-transform:scale(1.1); /* Firefox */ -ms-transform:scale(1.1); /* IE 9 */ -o-transform:scale(1.1); /* Opera */ transform:scale(1.1); } .sbi_carousel:hover .sbi-owl-nav > div:hover { cursor: pointer; background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,0.2); } .sbi-owl-nav .sbi-owl-prev { margin-left: 7px; padding: 6px 8px 6px 6px; left: 0; } .sbi-owl-nav .sbi-owl-next { margin-right: 7px; right: 0; } #sb_instagram .sbi_carousel .sbi-owl-nav .svg-inline--fa { height: 1.2em; } /* MODERATION MODE */ #sb_instagram.sbi_moderation_mode{ position: relative; z-index: 999999; background: #f9f9f9; } #sb_instagram.sbi_moderation_mode p, #sb_instagram.sbi_moderation_mode label, #sb_instagram.sbi_moderation_mode a{ font-family: "Open Sans", Helvetica, Arial, sans-serif; } .sbi_moderation_mode .sb_instagram_header { padding: 15px 15px 0 15px !important; margin: 0; } .sbi_moderation_mode .sbi_mod_submit_mod { display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; padding: 7px 14px; margin: 10px auto 0 auto; background: #333; 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; } .sbi_moderation_mode .sbi_mod_submit_mod:hover { color: #fff; opacity: .8; } .sbi_moderation_mode .sbi_mod_mode_wrapper { float: left; clear: both; width: 100%; position: relative; padding: 50px 2%; font-size: 14px; line-height: 1.4; color: #222; background: #eee; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sbi_moderation_mode .sbi_mod_mode_wrapper .sbi_mod_row{ width: 100%; padding-bottom: 5px; } .sbi_moderation_mode .sbi_mod_mode_wrapper input{ cursor: pointer; vertical-align: baseline; } .sbi_moderation_mode .sbi_mod_mode_wrapper label{ position: relative; top: -2px; cursor: pointer; } #sb_instagram.sbi_moderation_mode .sbi_follow_btn { display: none; } /* Save button at bottom */ .sbi_mod_mode_wrapper_bottom{ clear: both; margin-top: 20px; } .sbi_moderation_mode .sbi_mod_mode_wrapper_bottom .sbi_mod_submit_mod{ margin: 0; } .sbi_moderation_mode .sbi_mod_new_white_list { background: #fff; border-radius: 4px; padding: 20px 2%; margin-top: 10px; width: 95%; border-left: 5px solid #4e9c2b; box-shadow: 0 0 5px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1); } .sbi_moderation_mode .sbi_warning{ border-left: 5px solid #e8452b; } .sbi_mod_new_white_list span{ font-weight: bold; margin-right: 5px; } .sbi_moderation_mode .sbi_mod_new_white_list code{ font-size: 18px; display: inline-block; padding: 10px 0 0 0; margin-left: -2px; } #sb_instagram.sbi_moderation_mode .sbi_close_mod { position: absolute; right: 20px; top: 20px; } #sb_instagram.sbi_moderation_mode .sbi_close_mod:hover, #sb_instagram.sbi_moderation_mode .sbi_close_mod:focus{ background: #d83e2e; } #sb_instagram .sbi_moderation_link{ float: right; background: #e6684f; } #sb_instagram .sbi_moderation_link .fa, .sbi_moderation_mode .sbi_close_mod .fa, .sbi_mod_submit_mod .fa, #sb_instagram .sbi_moderation_link svg, .sbi_moderation_mode .sbi_close_mod svg, .sbi_mod_submit_mod svg{ margin-right: 6px; width: 1em; } #sb_instagram .sbi_moderation_link:hover, #sb_instagram .sbi_moderation_link:focus{ background: #e5593d; } .sbi_moderation_mode .sbi_mod { padding: 10px; text-align: center; } .sbi_mod_post_status { position:absolute; top: 0; right: 0; padding: 12px 13px 14px 16px; color: #fff; -moz-border-radius-bottom-left: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .sbi_mod_post_status .fa, .sbi_mod_post_status svg{ font-size: 28px; font-weight: 700; } .sbi_mod_exclude{ background: #e5593d; } .sbi_mod_include{ background: #4e9c2b; } .sbi_mod_user{ display: block; padding: 0 0 5px 0; } .sbi_mod input, .sbi_mod label{ cursor: pointer; } .sbi_mod_block{ padding: 3px; margin-bottom: 5px; } .sbi_mod_user input { width: 100%; padding: 3px; line-height: 1; font-size: 11px; text-align: center; } .sbi_mod_block:hover, .sbi_mod_block:focus{ background: rgba(0,0,0,0.05); color: #bf2c0f; border-radius: 4px; } .sbi_mod_block label{ width: 100%; display: block; } .sbi_mod_block_user{ position: relative; top: 1px; } .sbi_mod_submit_mod:hover, .sbi_mod_submit_mod:focus{ background: #488a2b; } .sbi_mod_type_header{ padding: 0 0 10px 0; margin: 0; font-size: 16px; font-weight: bold; } .sbi_mod_saved{ display: none; position: fixed; top: 50%; left: 50%; z-index: 999999; background: rgba(255,255,255,0.9); padding: 18px 22px; margin: -32px 0 0 -60px; border-radius: 4px; color: #488a2b; box-shadow: 0 0 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); } .sbi_mod_saved .fa, .sbi_mod_saved svg{ margin-right: 3px } /* Carousel */ #sbi_lightbox .sbi-owl-dots{ top: -45px; position: relative; width: auto; display: inline-block; background: rgba(0,0,0,0.1); border-radius: 30px; padding: 3px 5px; } #sbi_lightbox .sbi-owl-dots .sbi-owl-dot span{ opacity: 0.5; background: #fff; background: rgba(255,255,255,0.9); width: 8px; height: 8px; } #sbi_lightbox .sbi-owl-dots .sbi-owl-dot.active span { filter: Alpha(Opacity=100); opacity: 1; } #sbi_lightbox .sbi-owl-nav > div { position: absolute; display: inline-block; top: 50%; right: 8px; margin-top: -16px; color: #000; zoom: 1; padding: 6px 5px 6px 7px; font-size: 15px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #fff; filter: Alpha(Opacity=50); opacity: 0.5; z-index: 10; } #sbi_lightbox .sbi-owl-nav > .sbi-owl-prev { right: auto; left: 8px; padding-left: 5px; padding-right: 7px; } #sbi_lightbox .sbi-owl-nav > div:hover { filter: Alpha(Opacity=100); opacity: 1; text-decoration: none; } #sbi_lightbox .fa-clone { position: absolute; right: 12px; top: 12px; color: #fff; opacity: 1; z-index: 1; } .sbi_lightbox .sbi_lb-image{ margin: 0; padding: 0 !important; } @media all and (max-width: 640px) { #sbi_lightbox .sbi_owl-theme .sbi_owl-controls .sbi_owl-buttons div{ left: 0; } #sbi_lightbox .sbi_owl-theme .sbi_owl-controls .sbi_owl-buttons .sbi_owl-next{ right: 0; } #sbi_lightbox .fa-clone { right: 4px; top: 4px; } } @media all and (min-width: 800px) { .sbi_lightbox.sbi_lb-comments-enabled { position: fixed; top: 50px !important; } } /* 3.0 styles */ /* Hover effect slight zoom */ #sb_instagram .sbi_photo_wrap{ overflow: hidden; } #sb_instagram .sbi_item:not(.sbi_transition) .sbi_photo{ background-size: cover; background-repeat: no-repeat; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #sb_instagram .sbi_photo_wrap:hover .sbi_photo { -webkit-transform:scale(1.05); /* Safari and Chrome */ -moz-transform:scale(1.05); /* Firefox */ -ms-transform:scale(1.05); /* IE 9 */ -o-transform:scale(1.05); /* Opera */ transform:scale(1.05); } /* Carousel hover transition for 2 rows (as some cloned items still have the sbi_transition class on them) */ #sb_instagram #sbi_images.sbi_carousel .sbi_item.sbi_transition .sbi_photo{ background-size: cover; background-repeat: no-repeat; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } /* Use CSS for lightbox fade instead of JS */ #sb_instagram .sbi_link { opacity: 0; display: block; transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -webkit-transition: opacity .6s ease-in-out; } #sb_instagram .sbi_photo_wrap:hover .sbi_link { opacity: 1; display: block; transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; } #sb_instagram.sbi_moderation_mode .sbi_photo_wrap .sbi_link{ display: none !important; } /** Medium Header */ /* Only use medium & large headers on devices above 480px */ @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_info, #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{ font-size: 14px; } #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3, #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info, #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{ margin-left: 95px !important; line-height: 1.4 } #sb_instagram .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 .sbi_medium .sbi_header_text.sbi_no_info h3, #sb_instagram .sb_instagram_header.sbi_header_type_generic.sbi_medium .sbi_no_bio{ padding-top: 20px !important; } /** Large Header */ #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_info, #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{ font-size: 16px; } #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3, #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info, #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{ margin-left: 140px !important; line-height: 1.5; } #sb_instagram .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 .sbi_large .sbi_header_text.sbi_no_info h3, #sb_instagram .sb_instagram_header.sbi_header_type_generic.sbi_large .sbi_no_bio{ padding-top: 32px !important; } } /* centered */ #sb_instagram .sb_instagram_header.sbi_centered{ float: none; clear: both; padding: 0; line-height: 1.2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; max-width: 500px; overflow: hidden; } #sb_instagram .sbi_centered .sbi_header_img { float: none; margin: auto !important; } #sb_instagram .sb_instagram_header.sbi_centered .sbi_header_text h3, #sb_instagram .sb_instagram_header.sbi_centered .sbi_header_text .sbi_bio_info, #sb_instagram .sb_instagram_header.sbi_centered .sbi_header_text .sbi_bio{ margin: auto !important; text-align: center; float: none; } #sb_instagram .sb_instagram_header.sbi_header_style_boxed .sbi_header_img, #sb_instagram .sb_instagram_header.sbi_header_style_boxed .sbi_header_img img { border-radius: 0 !important; } #sb_instagram .sb_instagram_header.sbi_centered a{ float: none; } /* ---- .element-item ---- */ #sb_instagram.sbi_masonry, #sb_instagram.sbi_highlight { display: block !important; } #sb_instagram.sbi_masonry #sbi_images .sbi_item, #sb_instagram.sbi_highlight #sbi_images .sbi_item{ position: relative; float: left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; display: block !important; } #sb_instagram.sbi_highlight #sbi_images .sbi_item { height: 100px; width: 100px; } .sbi_masonry #sbi_images:after, .sbi_highlight #sbi_images:after{ content: ''; display: table; clear: both; } .sbi_masonry .sbi_hide { visibility: hidden; }