/*--------------------------------------------------------------
# Social Links Widget
--------------------------------------------------------------*/

:root {
	--flext-widget-social-icon-color: #5c5c5c;
}

.flext-social-icons-widget {
	overflow: hidden;
}

.flext-social-icons {
	align-items: center;
	display: flex;
	gap: 1rem 2rem;
	flex-flow: row wrap;
}

.flext-social-icons.flext-align-center {
	justify-content: center;
}

.flext-social-icons.flext-align-right {
	justify-content: flex-end;
}

.flext-social-icons.flext-align-left {
	justify-content: flex-start;
}

.flext-social-icons a {
	outline: none;
	transition: color 0.3s ease-out, background-color 0.3s ease-out;
}

.flext-social-icons .flext-link-500px,
.flext-social-icons .flext-link-apple,
.flext-social-icons .flext-link-github,
.flext-social-icons .flext-link-twitter {
	--flext-widget-social-icon-color: rgba(var(--tripp-color-on-surface-rgb), 0.6);
}

.flext-social-icons .flext-link-android {
	--flext-widget-social-icon-color: #289742;
}

.flext-social-icons .flext-link-digg {
	--flext-widget-social-icon-color: #0056d9;
}

.flext-social-icons .flext-link-behance {
	--flext-widget-social-icon-color: #0058ff;
}

.flext-social-icons .flext-link-bitbucket {
	--flext-widget-social-icon-color: #0052cc;
}

.flext-social-icons .flext-link-codepen {
	--flext-widget-social-icon-color: #1e1f26;
}

.flext-social-icons .flext-link-deviantart {
	--flext-widget-social-icon-color: #02e49b;
}

.flext-social-icons .flext-link-discord {
	--flext-widget-social-icon-color: #5865f2;
}

.flext-social-icons .flext-link-dribbble {
	--flext-widget-social-icon-color: #e94c89;
}

.flext-social-icons .flext-link-dropbox {
	--flext-widget-social-icon-color: #4280ff;
}

.flext-social-icons .flext-link-email {
	--flext-widget-social-icon-color: rgb(var(--tripp-color-secondary-rgb));
}

.flext-social-icons .flext-link-facebook {
	--flext-widget-social-icon-color: #1778f2;
}

.flext-social-icons .flext-link-flickr {
	--flext-widget-social-icon-color: #0461dd;
}

.flext-social-icons .flext-link-foursquare {
	--flext-widget-social-icon-color: #e65678;
}

.flext-social-icons .flext-link-gitlab {
	--flext-widget-social-icon-color: #fc6d27;
}

.flext-social-icons .flext-link-houzz {
	--flext-widget-social-icon-color: #4cbd16;
}

.flext-social-icons .flext-link-instagram {
	--flext-widget-social-icon-color: #f00075;
}

.flext-social-icons .flext-link-jsfiddle {
	--flext-widget-social-icon-color: #e9a531;
}

.flext-social-icons .flext-link-line {
	--flext-widget-social-icon-color: #03c755;
}

.flext-social-icons .flext-link-linkedin {
	--flext-widget-social-icon-color: #0d66c2;
}

.flext-social-icons .flext-link-medium {
	--flext-widget-social-icon-color: #00de68;
}

.flext-social-icons .flext-link-meetup {
	--flext-widget-social-icon-color: #f6405f;
}

.flext-social-icons .flext-link-ok {
	--flext-widget-social-icon-color: #ed7e1e;
}

.flext-social-icons .flext-link-pinterest {
	--flext-widget-social-icon-color: #e60122;
}

.flext-social-icons .flext-link-phone {
	--flext-widget-social-icon-color: #e0950b;
}

.flext-social-icons .flext-link-reddit {
	--flext-widget-social-icon-color: #ff4500;
}

.flext-social-icons .flext-link-rss {
	--flext-widget-social-icon-color: #ed8030;
}

.flext-social-icons .flext-link-skype {
	--flext-widget-social-icon-color: #0478d7;
}

.flext-social-icons .flext-link-snapchat {
	--flext-widget-social-icon-color: #f3dd05;
}

.flext-social-icons .flext-link-spotify {
	--flext-widget-social-icon-color: #1bd760;
}

.flext-social-icons .flext-link-soundcloud {
	--flext-widget-social-icon-color: #ff5600;
}

.flext-social-icons .flext-link-steam {
	--flext-widget-social-icon-color: #2e9cdd;
}

.flext-social-icons .flext-link-strava {
	--flext-widget-social-icon-color: #ff4b01;
}

.flext-social-icons .flext-link-telegram {
	--flext-widget-social-icon-color: #2aabee;
}

.flext-social-icons .flext-link-tiktok {
	--flext-widget-social-icon-color: #fe2c55;
}

.flext-social-icons .flext-link-thumbtack {
	--flext-widget-social-icon-color: #01a0d9;
}

.flext-social-icons .flext-link-tripadvisor {
	--flext-widget-social-icon-color: #36e0a1;
}

.flext-social-icons .flext-link-twitch {
	--flext-widget-social-icon-color: #6440a4;
}

.flext-social-icons .flext-link-tumblr {
	--flext-widget-social-icon-color: #011835;
}

.flext-social-icons .flext-link-vimeo {
	--flext-widget-social-icon-color: #1eb7ea;
}

.flext-social-icons .flext-link-vk {
	--flext-widget-social-icon-color: #4680c2;
}

.flext-social-icons .flext-link-yahoo {
	--flext-widget-social-icon-color: #602ad2;
}

.flext-social-icons .flext-link-youtube {
	--flext-widget-social-icon-color: #e93522;
}

.flext-social-icons .flext-link-viber {
	--flext-widget-social-icon-color: #7563f2;
}

.flext-social-icons .flext-link-whatsapp {
	--flext-widget-social-icon-color: #0bc144;
}

.flext-social-icons .flext-link-wechat {
	--flext-widget-social-icon-color: #16ce22;
}

.flext-social-icons .flext-link-website {
	--flext-widget-social-icon-color: #6822e9;
}

.flext-social-icons .flext-link-weibo {
	--flext-widget-social-icon-color: #e21918;
}

.flext-social-icons .flext-link-yelp {
	--flext-widget-social-icon-color: #d32422;
}

.flext-social-icons .flext-link-xing {
	--flext-widget-social-icon-color: #005d61;
}

.flext-social-icons a:hover {
	color: var(--flext-widget-social-icon-color) !important;
}

.flext-social-icons.flext-style-names a {
	color: inherit;
	position: relative;
	z-index: 1;
}

.flext-social-icons.flext-style-names a::before {
	background: var(--flext-widget-social-icon-color);
	bottom: 0.5rem;
	content: "";
	display: inline-block;
	height: 1rem;
	left: 0;
	opacity: 0.7;
	position: absolute;
	top: 50%;
	transform: scaleX(0) translateY(-50%);
	transform-origin: right center;
	transition: transform 0.5s cubic-bezier(0.23, 0.46, 0.35, 0.99);
	width: 100%;
	z-index: -1;
}

.flext-social-icons.flext-style-names a:hover::before {
	transform: scaleX(1) translateY(-50%);
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier(0.23, 0.46, 0.35, 0.99);
}

.flext-social-icons.flext-style-circle {
	gap: 1rem;
}

.flext-social-icons.flext-style-circle a {
	align-items: center;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	height: 4rem;
	line-height: 4rem;
	width: 4rem;
}

.flext-social-icons.flext-style-circle a:hover {
	background: var(--flext-widget-social-icon-color);
	color: #fff;
}