/* Social icon color */
.icon-facebook { color: #3b5998; }
.icon-twitter, .icon-x { color: #000000; }
.icon-pinterest { color: #cb2027; }
.icon-youtube { color: #bb0000; }
.icon-instagram { color: #517fa4; }
.icon-linkedin-squared { color: #0a66c2; }
/* Social icon styling */
.social-icons {
line-height: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.social-icons i:before {
margin: 0;
}
.social-share-links {
display: inline-flex;
gap: .25em;
line-height: 0;
}
.social-share-links i:before{
margin: 0;
font-size: 1.75em;
}
.social-share-links .back-to-top {
background: url('data:image/svg+xml,');
background-size: contain;
margin: 0 0 0 .25em;
padding: 0;
width: 24px;
height: 24px;
background-repeat: no-repeat;
border: none;
cursor: pointer;
}
body.node-type-blog .social-share-links-pane .pane-content {
text-align: right;
}
body.node-type-blog .social-share-links-pane .pane-content:before{
content: 'Share This Post:';
display: inline-block;
font-weight: 600;
font-size: 140%;
color: #999;
}
.social-links {
display: flex;
gap: clamp(.5em, 2vw, var(--space));
flex-wrap: wrap;
margin-bottom: var(--space);
justify-content: center;
}
.social-links > a {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10em;
background-color: var(--color-accent); /* button background */
color: #fff; /* icon color */
position: relative;
height: clamp(2.5em, 10vw, 3em);
width: clamp(2.5em, 10vw, 3em);
box-sizing: border-box;
}
/* The icon */
.social-links > a::before {
content: "";
width: 1em;
height: 1em;
background-color: currentColor; /* icon takes color from the link */
-webkit-mask: var(--svg) no-repeat center / contain;
mask: var(--svg) no-repeat center / contain;
display: block;
}
/* FACEBOOK */
.social-links > a.facebook {
--svg: url("data:image/svg+xml;utf8,\
");
}
/* PINTEREST */
.social-links > a.pinterest {
--svg: url("data:image/svg+xml;utf8,\
");
}
/* X / TWITTER */
.social-links > a.x {
--svg: url("data:image/svg+xml;utf8,\
");
}
/* Tiktok */
.social-links > a.tiktok {
--svg: url("data:image/svg+xml;utf8,\
");
}
/* YOUTUBE */
.social-links > a.youtube {
--svg: url("data:image/svg+xml;utf8,\
");
}
/* INSTAGRAM */
.social-links > a.instagram {
--svg: url("data:image/svg+xml;utf8,\
");
}
/* LINKEDIN */
.social-links > a.linkedin {
--svg: url("data:image/svg+xml;utf8,\
");
}