Skip to content
/*
*
oEmbeds CSS TABLE OF CONTENTS
*
* 1.0 -
GLOBAL
* 2.0 -
HEADER
* 3.0 - 3.0 -
OEMBEDS CONTAINER
* 3.1 -
SECTION HEADER
* 3.2 -
OEMBED ENABLE/DISABLE BOX
* 3.3 -
OEMBED INFORMATION BOX
* 4.0 -
MODAL STYLE
* 5.0 -
STICKY WIDGET
* 6.0 -
RESPONSIVENESS
*/
/*** 1.0 -
GLOBAL ***/
.
clearfix {
display:
inline-block; }
/*
start commented backslash hack \*/
*
html .clearfix {
height: 1%; }
.
clearfix {
display:
block; }
.
checkmark {
width: 21
px;
height: 22
px;
border-radius: 50%;
display:
block;
stroke-width: 2;
stroke: #
fff;
stroke-miterlimit: 10;
stroke-dashoffset: 0;
transform:
translate(0
px, -3
px);
}
#
sbi-oembeds {
-
webkit-font-smoothing:
antialiased;
font-family: -
apple-system,
BlinkMacSystemFont,"
Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,"
Helvetica Neue",
sans-serif;
}
#
wpcontent {
padding-left: 0
px;
}
#
wpbody-content {
padding-bottom: 40
px;
}
.
clearfix:
after {
visibility:
hidden;
display:
block;
font-size: 0;
content: " ";
clear:
both;
height: 0;
}
.
sbi-fb-full-wrapper{
padding: 0 53
px;
padding-top: 82
px;
}
.
sbi-fb-fs {
width: 100%;
position:
relative;
float:
left;
box-sizing:
border-box;
}
/*
orange*/
.sb-btn-orange{
background: #
FE544F!
important;
color: #
fff!
important;
}
.
sb-btn-orange:
hover{
background: #
EC352F!
important;
color: #
fff!
important;
}
.
sb-btn-orange:
focus,
.
sb-btn-orange:
active{
background: #
BC120E!
important;
color: #
fff!
important;
}
/*** 2.0 -
HEADER ***/
.
sbi-fb-create-ctn{
margin-top: 90
px;
}
.
sbi-fb-header{
height: 64
px;
position:
absolute;
display:
flex;
flex-direction:
row;
justify-content:
space-between;
align-items:
center;
background: #
fff;
padding: 0
px 52px;
z-index: 2;
}
.
sbi-fb-header-left {
display:
flex;
}
.
sbi-fb-header-left .sb-social-wall-link-wrap {
margin-left: 30
px;
}
.
sb-social-wall-link-wrap {
display:
flex;
font-size: 14
px;
margin: 10
px 0;
}
.
sb-social-wall-link {
padding: 0 12
px;
border-right: 1
px solid #ccc;
color: #0068
A0!
important;
line-height: 1;
}
.
sb-social-wall-link:
first-child {
padding-left: 0;
border-right: 1
px solid #ccc;
color: #0068
A0!
important;
line-height: 1;
}
.
sb-social-wall-link:
last-child {
border-right:
none;
}
.
sb-social-wall-link a {
text-decoration:
none;
}
.
sb-social-wall-link a:
focus {
outline:
none;
box-shadow:
none;
}
.
sbi-fb-hd-logo{
display:
flex;
vertical-align:
middle;
align-items:
center;
gap: 5
px;
}
.
sbi-fb-hd-logo .sb-logo-letters-wrap {
margin-bottom: 4
px;
}
.
sbi-fb-hd-logo .breadcrumb-title{
font-size: 14
px;
font-weight: 400;
line-height: 22
px;
letter-spacing: 0
em;
margin-left: 4
px;
}
.
sbi-fb-hd-logo .separator{
margin: 0 5
px 0 10
px;
}
.
sbi-fb-hd-btn{
height: 38
px;
cursor:
pointer;
display:
flex;
flex-direction:
row;
justify-content:
center;
align-items:
center;
padding: 0
px 15px 0px 16px;
font-weight: 600;
font-size:14
px;
color: #353
A41;
background: #
F3F4F5;
border-radius: 2
px;
border: 1
px solid #DCDDE1;
position:
relative;
text-decoration:
none;
transition:
all 0.15s ease-in-out;
}
.
sbi-fb-hd-btn:
focus {
outline:
none;
box-shadow:
none;
}
.
sbi-fb-hd-btn:
hover {
color:
inherit;
background-color: #
fff;
}
.
sbi-fb-hd-btn i{
margin: 0
px 5px;
}
.
sbi-fb-hd-btn[
data-icon="
left"]{
padding-right: 20
px!
important;
}
.
sbi-fb-full-wrapper .section-header h1 {
font-size: 32
px;
line-height: 40
px;
}
/*** 3.0 -
OEMBEDS CONTAINER ***/
.
sbi-oembeds-container {
max-width: 875
px;
position:
relative;
margin:
auto;
margin-top: 33
px;
box-sizing:
border-box;
}
/*** 3.1 -
SECTION HEADER ***/
.
sbi-section-header h3 {
font-weight: 600;
font-size: 32
px;
line-height: 40
px;
color: #141
B38;
margin: 0 0 5
px 0;
}
.
sbi-section-header p {
font-size: 13
px;
line-height: 18
px;
color: #434960;
margin: 0;
}
.
sbi-oembed-plugin-box {
background: #
FFFFFF;
box-shadow: 0
px 1px 2px rgba(0, 0, 0, 0.05), 0
px 4px 5px rgba(0, 0, 0, 0.05);
margin-bottom: 10
px;
padding: 12
px 20px;
display:
flex;
justify-content:
space-between;
align-items:
center;
}
/*** 3.2 -
OEMBED ENABLE/DISABLE BOX ***/
.
sbi-oembed-plugin-box-group {
margin-top: 35
px;
}
.
sbi-oembed-plugin-box .oembed-text{
flex-basis: 645
px;
}
.
sbi-oembed-plugin-box .sbi-oembed-btn{
flex-basis: 125
px;
text-align:
right;
}
.
sbi-oembed-btn .sbi-btn {
border-radius: 2
px;
padding: 10
px 20px;
border: 0
px;
color: #
fff;
font-size: 14
px;
cursor:
pointer;
transition:
all .15s ease-in-out;
box-sizing:
border-box;
text-decoration:
none;
display:
flex;
align-items:
center;
height: 38
px;
float:
right;
}
.
sbi-oembed-btn .sbi-btn span {
margin-right: 5
px;
height: 15
px;
width: 15
px;
}
.
sbi-oembed-btn .sbi-btn svg {
width: 100%;
height: 100%;
}
.
sbi-oembed-btn button:
hover {
background-color: #0096
CC;
border-color: #0096
CC;
}
.
sbi-oembed-btn .sbi-btn:
focus,
.
sbi-oembed-btn .sbi-btn:
active {
outline:
none;
box-shadow:
none;
}
.
sbi-oembed-btn button.disable-oembed {
background: #
D72C2C;
}
.
sbi-oembed-btn button.disable-oembed:
hover {
background-color: #
DF5757;
border-color: #
DF5757;
}
.
sbi-oembed-btn button.disable-oembed:
focus,
.
sbi-oembed-btn button.disable-oembed:
active {
background-color: #841919;
border-color: #841919;
}
.
sbi-oembed-btn button.loading svg {
height: 14
px;
transform:
translate(0, 2
px);
}
/*** 3.3 -
OEMBED INFORMATION BOX ***/
.
sbi-oembed-information {
background: #
FFFFFF;
box-shadow: 0
px 1px 2px rgba(0, 0, 0, 0.05), 0
px 4px 5px rgba(0, 0, 0, 0.05);
margin-bottom: 10
px;
}
.
sbi-oembed-information .sb-box-header {
padding: 16
px 20px;
border-bottom: 1
px solid #E8E8EB;
}
.
sbi-oembed-information .sb-box-header h3 {
margin: 0;
font-weight: 600;
font-size: 18
px;
line-height: 140%;
color: #141
B38;
}
.
sb-two-column-box {
display:
flex;
justify-content:
space-around;
align-items:
center;
border-bottom: 1
px solid #E8E8EB;
}
.
sb-two-column-box-1 img {
max-width: 438
px;
}
.
sb-two-column-box-2 img{
margin-top: 20
px;
max-width: 442
px;
}
.
sb-two-column-box .sb-embed-info-text {
padding: 0 75
px 0 35
px;
}
.
sb-two-column-box-2 .sb-embed-info-text {
padding: 0 65
px 0 30
px;
}
.
sb-two-column-box h4,
.
sb-one-column-box h4 {
font-size: 16
px;
font-weight: 600;
line-height: 26
px;
color: #141
B38;
}
.
sb-one-column-box {
max-width: 405
px;
margin:
auto;
text-align:
center;
}
.
sb-one-column-box h4 {
padding: 0;
margin-top: 30
px;
margin-bottom: 0
px;
}
.
sb-one-column-box p {
font-size: 14
px;
line-height: 22
px;
}
.
sb-one-column-box img {
margin-top: 15
px;
margin-bottom: -21
px;
max-width: 392
px;
}
.
sb-two-column-box-1 .sb-left {
padding-left: 20
px;
}
.
sb-plugin-info-box {
padding-top: 20
px;
}
.
sb-plugin-info-box .sb-left {
padding-left: 35
px;
}
.
sb-plugin-info-box .sb-right {
padding: 0 60
px 0 40
px;
}
.
sb-plugin-info-box h4 {
font-size: 18
px;
margin: 0
px;
}
.
sb-plugin-info-box p {
font-size: 14
px;
line-height: 22
px;
color: #434960;
margin-top: 10
px;
}
.
sb-plugin-info-box img {
max-width: 414
px;
margin-bottom: -5
px;
}
/*** 4.0 -
MODAL STYLE ***/
.
sbi-oembed-modal {
position:
absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
rgba(0, 0, 0, 0.4);
z-index: 9;
}
.
sbi-modal-content {
background-color: #
fff;
height: 381
px;
max-width: 572
px;
padding: 40
px 75px 48px;
box-sizing:
border-box;
position:
relative;
text-align:
center;
margin: 260
px auto 0;
}
.
sbi-modal-content h2 {
font-size: 24
px;
line-height: 29
px;
text-align:
center;
letter-spacing: 0;
color: #141
B38;
margin: 0 0 5
px 0;
}
.
sbi-modal-content p {
font-size: 12
px;
line-height: 18
px;
text-align:
center;
color: #434960;
}
.
sbi-modal-content .cancel-btn{
background:
none;
border:
none;
color: #141
B38;
position:
absolute;
top: 16
px;
right: 16
px;
padding: 0;
cursor:
pointer;
}
.
sbi-modal-content .modal-icon{
margin-bottom: 45
px;
}
.
sbi-modal-content .modal-icon img {
max-width: 102
px;
}
.
sbi-modal-content .sb-action-buttons{
display:
flex;
justify-content:
center;
margin-top: 30
px;
}
.
sbi-modal-content .sb-action-buttons button:
not(:
last-child) {
margin-right: 7
px;
}
.
sb-action-buttons .sbi-btn {
display:
flex;
align-items:
center;
vertical-align:
middle;
justify-content:
center;
background: #
F3F4F5;
border: 1
px solid #DCDDE1;
box-sizing:
border-box;
border-radius: 2
px;
padding: 7
px 30px;
font-weight: 600;
font-size: 14
px;
line-height: 22
px;
color: #141
B38;
letter-spacing: 0.2
px;
cursor:
pointer;
min-width: 175
px;
}
.
sb-action-buttons .sbi-install-btn {
background-color: #
FE544F;
border-color: #
FE544F;
color: #
fff;
}
.
sb-action-buttons .sbi-install-btn:
disabled {
background: #
F3F4F5;
border: 1
px solid #DCDDE1;
color: #141
B38;
cursor:
not-allowed
}
.
sb-action-buttons .sbi-install-btn:
not(.
success):
disabled path {
fill: #141
B38;
}
.
sb-action-buttons .sbi-install-btn span {
margin-right: 10
px;
}
.
sb-action-buttons .sbi-install-btn.loading svg {
height: 16
px;
transform:
translate(0, 2
px);
}
/*** 5.0
Sticky Widget ***/
.
sbi-stck-wdg{
position:
fixed;
right: 21
px;
z-index: 9;
bottom: 20
px;
}
.
sbi-stck-wdg-btn{
width: 52
px;
height: 52
px;
background: #
fff;
border-radius: 50%;
cursor:
pointer;
display:
flex;
justify-content:
center;
align-items:
center;
filter:
drop-shadow(0
px 9px 13px rgba(0, 0, 0, 0.2));
}
.
sbi-stck-wdg-btn svg{
width: 25
px;
fill: #
FE544F;
height: 33
px;
}
.
sbi-stck-wdg[
data-active="
true"] .
sbi-stck-wdg-btn-cls,
.
sbi-stck-wdg[
data-active="
true"] .
sbi-stck-wdg-btn-cls svg{
display:
block;
}
.
sbi-stck-wdg-btn-cls{
width:
inherit;
height:
inherit;
position:
relative;
color: #364152;
box-shadow: 0
px 1px 6px rgb(0 0 0 / 5%), 0
px 9px 12px rgb(0 0 0 / 5%);
border-radius: 70
px;
}
.
sbi-stck-wdg-btn-cls svg {
width: 14
px;
height: 14
px;
position:
absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin-top: -7
px;
margin-left: -7
px;
}
.
sbi-stck-pop{
position:
absolute;
width: 292
px;
height:
auto;
background: #
fff;
border: 1
px solid #E2E8F0;
box-sizing:
border-box;
box-shadow: 0
px 1px 3px rgba(0, 0, 0, 0.15), 0
px 3px 14px rgba(0, 0, 0, 0.12);
border-radius: 2
px;
padding: 20
px;
right: 0
px;
bottom: 66
px;
color: #141
B38;
padding-bottom: 82
px;
}
.
sbi-stck-wdg[
data-active="
true"] .
sbi-stck-pop{
bottom: 66
px;
opacity: 1;
visibility:
visible;
}
.
sbi-stck-pop svg{
fill:
currentColor;
}
.
sbi-stck-el-list{
border: 1
px solid #DCDDE1;
border-radius: 2
px;
}
.
sbi-stck-el{
display:
flex;
align-items:
center;
padding: 11
px 13px;
border-bottom: 1
px solid #DCDDE1;
transition:
background .15s ease-in-out;
font-size: 12
px;
}
.
sbi-stck-el:
hover{
background: #
F3F4F5;
}
.
sbi-stck-el:
last-of-type{
border-bottom: 0
px;
}
.
sbi-stck-el-list .sbi-chevron svg{
width: 5
px;
height: 8
px;
}
.
sbi-fs-a {
width: 100%;
height: 100%;
display:
block;
position:
absolute;
left: 0;
top: 0;
z-index: 1;
}
.
sbi-stck-el .sbi-stck-el-txt{
color: #27303
F;
}
.
sbi-stck-el.sbi-stck-el-upgrd{
padding: 9
px 14px;
font-size: 14
px;
background:
var(--
cl-orange);
color: #
fff;
position:
relative;
transition:
background .15s ease-in-out;
font-weight: 600;
}
.
sbi-chevron {
position:
absolute;
right: 14
px
}
.
sbi-stck-el.sbi-stck-el-upgrd .sbi-stck-el-txt{
color: #
fff;
}
.
sbi-stck-el.sbi-stck-el-upgrd:
after{
top: 20
px;
opacity: 1;
}
.
sbi-stck-el-icon{
margin-right: 10
px;
}
.
sbi-stck-el-icon svg{
width: 17
px;
float:
left;
}
.
sbi-stck-title{
margin-top: 20
px;
margin-bottom: 10
px;
color: #141
B38;
font-weight: 600;
font-size: 14
px;
line-height: 160%;
}
.
sbi-stck-follow{
background: #
F3F4F5;
margin-top: 20
px;
left: 0
px;
bottom: 0
px;
position:
absolute;
padding: 12
px 20px;
display:
flex;
align-items:
center;
}
.
sbi-stck-follow span{
font-weight: 600;
font-size: 14
px;
}
.
sbi-stck-flw-links{
display:
flex;
justify-content:
center;
align-items:
center;
margin-left:
auto;
}
.
sbi-stck-flw-links a{
width: 36
px;
height: 28
px;
color:
inherit;
display:
inline-flex;
justify-content:
center;
align-items:
center;
margin-left: 4
px;
border-radius: 2
px;
transition:
background .15s ease-in-out;
}
.
sbi-stck-flw-links svg{
width: 17
px;
color: #141
B38;
}
.
sbi-stck-flw-links a:
hover{
background: #
fff;
}
.
sbi-stck-flw-links a:
hover svg{
color:
inherit;
}
/*** 6.0 -
RESPONSIVENESS ***/
@media (
max-width: 1170
px) {
.
sbi-oembed-plugin-box .oembed-text {
flex-basis: 78%;
}
}
@media (
max-width: 1024
px) {
.
sbi-oembed-plugin-box .oembed-text {
flex-basis: 72%;
}
.
sb-two-column-box {
flex-direction:
column;
}
.
sb-two-column-box-1 {
flex-direction:
column-reverse;
}
.
sb-two-column-box .sb-embed-info-text{
padding: 0 35
px;
text-align:
center;
}
.
sb-two-column-box-2 img {
margin-top: 0
px;
}
.
sb-two-column-box .sb-left,
.
sb-two-column-box .sb-right {
max-width: 405
px;
margin:
auto;
}
.
sb-two-column-box.sb-plugin-info-box .sb-embed-info-text {
margin-top: 25
px;
}
.
auto-fold #wpcontent {
padding-left: 0
px;
}
}
@media (
max-width: 767
px) {
.
auto-fold #wpcontent {
padding-left: 0;
}
.
sbi-fb-full-wrapper {
padding: 70
px 20px 0 20
px;
}
.
sbi-fb-header {
padding: 0
px 20px;
}
.
sbi-fb-hd-btn {
padding: 0
px 15px 0px 7px;
}
.
sbi-about-box .sb-team-info {
padding: 30
px;
}
.
sbi-oembed-plugin-box {
flex-wrap:
wrap;
}
.
sbi-oembed-plugin-box .oembed-icon {
width: 20
px;
vertical-align:
middle;
display:
flex;
}
.
sbi-oembed-plugin-box .sbi-oembed-btn {
flex-basis: 114
px;
text-align:
left;
margin-top: 15
px;
}
.
sbi-oembed-plugin-box .oembed-text {
flex-basis:
calc(100% - 40
px);
}
.
sb-plugin-info-box .sb-left,
.
sb-two-column-box-1 .sb-left,
.
sb-two-column-box-2 .sb-right,
.
sb-one-column-box img {
display:
none;
}
.
sb-one-column-box {
padding-bottom: 5
px !
important;
}
.
sb-one-column-box h4 {
margin-top: 21
px;
}
.
sb-two-column-box.sb-plugin-info-box .sb-embed-info-text {
margin-top: 0;
}
.
sb-plugin-info-box p {
margin-bottom: 17
px;
}
.
sbi-modal-content {
margin: 80
px auto 0;
width: 90%;
height:
auto;
padding: 40
px 30px;
}
.
sbi-modal-content .modal-icon {
margin-bottom: 30
px;
}
.
sb-plugin-info-box h4 {
font-size: 16
px;
}
}
@media (
max-width: 630
px) {
.
sb-two-column-box img,
.
sb-one-column-box img {
max-width: 100%;
}
.
sbi-modal-content .sb-action-buttons {
flex-direction:
column;
}
.
sbi-modal-content .sb-action-buttons button:
not(:
last-child) {
margin-right: 0
px;
margin-bottom: 7
px;
}
}
@media (
max-width: 530
px) {
.
sb-two-column-box .sb-left,
.
sb-two-column-box .sb-right,
.
sb-one-column-box {
padding: 0 20
px;
}
.
sb-two-column-box h4, .
sb-one-column-box h4 {
line-height: 22
px;
}
.
sb-one-column-box img {
margin-bottom: -15
px;
}
}
.
sbi-btn-blue {
background: #0068
A0!
important;
color: #
fff!
important;
}
.
sb-button-standard{
position:
relative;
font-style:
normal;
font-weight: 600;
font-size: 14
px;
padding: 10
px 20px 10px 39px;
line-height: 16
px;
height:
auto;
}
.
sb-button-standard svg {
width: 16
px;
height: 16
px;
position:
absolute;
left: 13
px;
right:
auto;
top: 10
px;
bottom:
auto;
}
.
sbi-stck-el.sbi-stck-el-upgrd svg path{
fill: #
fff!
important;
}
